Truespirit E-commerce - Design Spec

Design Specifications

Prepared for: True Spirit

By: Deepa Dhupelia, James Feng, Sara Michelazzo Last update: Jan 25, 2014

Student Project. General Assembly UXDI Summer 2014

0.0 Home

1.0 Account 2.0 Boys 3.0 Girls 4.0 Shopping bag 5.0 Saved list

1.1 Log in 1.2 Register 1.3 Profile

2.1 Top 2.2 Bottom 2.3 Accessories 2.4 Sales

3.1 Top 3.2 Bottom 3.3 Accessories 3.4 Sales

2.1.1Formal shirts

2.1.2T-shirts

2.1.3Polo shirts

2.1.4Tank tops

2.1.5Logo shirts

2.1.6Jackets

2.1.7 Hoodies

2.1.8Sweaters

2.2.1Pants

2.2.2Shorts

2.2.3Gymshorts

2.3.1Socks

2.3.2Gloves

2.3.3Belts

2.3.4iPhone case

2.3.5Plush toy

3.1.1Formal shirts

3.1.2T-shirts

3.1.3Polo shirts

3.1.4Tank tops

3.1.5Logo shirts

3.1.6Jackets

3.1.7 Hoodies

3.1.8Sweaters

3.2.1Pants

3.2.2Shorts

3.2.3Gymshorts

3.3.1Socks

3.3.2Gloves

3.3.3Belts

3.3.5iPhone case

3.3.6Plush toy

3.2.4Skirts

3.3.4Leggings

4.1 Shipping info, card info & Check

out

Site Map

6.0Terms & Conditon

7.0Quality

Statement

8.0Privacy

9.0 Shipping & Return

10.0 About us

10.1 Company

Intro

10.2 Scholarship

program

User flow: Sarah

Navigation Schema - Header

GIRLS BOYS SHOP BY SCHOOL

SIGN INREGISTER

1


SIGN INREGISTER

Girls > T-shitst and tops > polo shirtTOPS BOTTOMS ACCESSORIES

Formal shirtsT-shirtsPolo shirtsTank topLogo shirts

JacketsHoodiesSweatersLogo Hoodies

SkirtsPantsShortsGymshorts

SocksHeadbandsGlovesBeltsLeggings

iPhone casePlush toy

SALES >

2 3 4 5

Global navigation

Contextual navigation

USER TESTuser test line-heigh

1

User flow: Sarah

Navigation Schema - Header 2


SIGN INREGISTER

1 2 3 4 5

Global navigation


SIGN INREGISTER

Girls > T-shitst and tops > polo shirtTOPS BOTTOMS ACCESSORIES

Formal shirtsT-shirtsPolo shirtsTank topLogo shirts

JacketsHoodiesSweatersLogo Hoodies

PantsShortsGymshorts

SocksHeadbandsGlovesBelts

iPhone casePlush toy

SALES >

USER TESTuser test line-height

Contextual navigation

2

User flow: Sarah



SIGN INREGISTER

3 4

Global navigation

SIGN INREGISTER

Girls > T-shitst and tops > polo shirt

GIRLS BOYS SHOP BYSCHOOL

▼St. Luke’s GO

SIGN INREGISTER

Girls > T-shitst and tops > polo shirt


Search GO

3

4

Select School

Site search

User flow: Sarah



SIGN INREGISTER

5

Global navigation

5 SIGN INREGISTER

ITEMS ADDED TO BAG

GIRLS BOYS SHOP BYSCHOOL 2

Polo shirt $15Pants $12

SUBTOTAL $37

GO TO BAG

NOTE ON BEHAVIOUR:the quick bag opens every time something a new item is added. From the menu if you click on the bad this menu will open. If you click on sign in/ register you will be send to the sign in /register page when you can fill your information.When you are logged in you will read there Hi your name and clicking on it will open your profile page

SAVED ITEMS

5

Shopping Bag

User flow: Sarah

Navigation Schema - Footer & Breadcrumbs

ABOUT USSERVICESCompany infoOur QualityJobsScholarshipsContact us

Shipping & trackingSizes & ConversionsEasy returnsHow to wash

Term of use | Privacy and Cookies

Feeling stuck?+61 5647 474637 [email protected]

Copyright 2014

GET HELPFOR SCHOOLSAdmin areaFind your school

CONTEXTUAL BREADCRUMBS

Home> Girls > Tops > Polo Shirt

FOOTER

User flow: Sarah

Navigation Schema - Filter

FILTER

FILTERCOLOR

SIZE S MXS L XL

SORT BY: ▼lowest price on top

FILTER

User flow: Sarah

Jess

Home Page

Choose School

Entrance

Provided suitesor

Build Own?

Provided suitesGo through them

&Choose one

Interested? YES

NO ProductPage

NoteThis is the product set page,which includes a list of products recommended by TrueSpirit

Like all,Like some,

or like none?Like someLike none

Like allAdd preferred items

to cartAdd all items to “Saved Items”

Back to Provided suites page

orBuild own?

Build ownProvided suites

Build own

Choose Boys/Girls

Choose Subcategory

Filter by school dress code

Results page

Go through them&

Choose one

ProductPage

This is a single product page

Like it? YES

NO Note

Finish Browsing YESNO

Add item to “Saved Items”

Saved Items Page

Set up school profile & Account

HasAccount?

NO

YES

Stay Logged in? NOYES

Want to log in?

NO

YES

Log in

Note

Once Logged in:Jess can access all previous records of her preference.She can resend the same required products list to parents or edit some preference and send it.

NoteInformation needed:school name.school address.school contact.Jess’s contact

Generate product & urlNotePreview Page?

Email url to parents

Group items for gradeselecting must have or recommended

NoteK kindergarden1-6 primary7-10 high school11-12 senior

User flow: Sarah

Sarah

Click url Landing pageChoose

Year and Gender

Note

List all predefined products(chosen by admin ).Provides must-have and recommended items.

Results page

Go through & choose one

Like it? YESNO

Buy it now? YESNO

Save it later Add to cart

Want to know more

Product page

Like it?NO YES

Buy it ?

NO

YES

Save it later

Add to cart

When Sarah refer back to the saved items later

Saved list page

Go through & choose one

Like it?NO YES

Add to cart

Remove from saved list

Note Sarah can inspect the product page for detail info

When finish shopping

Check out

Check out process flow

* default preview on list view

User flow: Sarah

User Flow: Checkout

John & Jess

Check out Has Account?

NO

YES

Stay logged in?YES NO

Log in

Shipping info page(autofilled)

Once Logged in:1.All shipping info sections rare autofilled by recorded info.2.John& Jess canard new address, choose shipping address for current purchasing session if multiple addresses are recorded.3. Edit saved items ( delete, change quantity)4. Enter/Edit credit card info.5.Verify the recorded profile.

Check point & Pay

receive order confirmation email

Check out as a guest

Shipping info page(blank page)

Info needed:Name.Contact.Shipping & billing address.Credit Card info, mail.

John & jess can edit added items(delete, change quantity)

Want to register? NO

receive order confirmation email

Provide John & Jess with easy register method e.g. : check box with text: “I want to register a membership”. Once the box ticked, the profile is saved to DB

Confirmation Email Sent

YES

Pay1

1

2

2

3

3

GIRLS BOYS SHOP BYSCHOOL SIGN IN

REGISTER

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

Enjoy school and express your style

FREE DELIVERY FOR PURCHASES OVER $50

EASY RETURNS.All you need is the included delivery stickers! Attach these and drop off

at the post office.

“I can’t believe my kid’s t-shirts look brand new after more than 40 washes”

Sarah JacksonCustomer, and mother of 3.

FEATURED ITEMS

CHECK OUT OUR SALES

HOW TO WASH

1

2

3

4

5

CAROUSELThe carousel provides users with information about the brand: The messaging is modern and fresh. Images and text are used to convey the “why, how and what” for the company.

WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?

FREE DELIVERYFree delivery erases a barrier for buying online: cost of shipping. This is good for frugal users like John, and those who shop online for convenience like Sarah.

EASY RETURNSHaving an easy return option helps alleviate concerns for users such as John and Sarah. We’ve highlighted this point for error recovery - shoppers have an easy way to correct a mistake purchase.

REVIEWSRather than just making statements about our product quality and level of service, we have provided reviews from current customers, to reinforce these points and reassure new customers like Sarah and John.

SALESWe’ve made it easy for frugal shoppers like John to access sales items. This also helps the business to deal with remaining stock from past seasons.

6 FEATURED ITEMSWe’ve provided a snapshot of some of our current products, so that shoppers can get an idea of average prices, and have a quick entry point if they are just browsing.This also makes it easy for frugal shoppers to compare sales prices with regular item prices.

1

23

45

6

1.0 HOMEPAGE

Home > Girls > Tops > Polo Shirt

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size Help

FILTER

CLICK TO ZOOM 100% cotton. Machine wash cold, gentle cycle

XL

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size HelpXL

100% cotton. Machine wash cold, gentle cycle

Color

$ 30Polo t-shirt

Size S MXS L

SAVE ITEM



REGISTER

21

4

3

61

2

3

4

5

6

BREADCRUMBSBreadcrumbs assist with user orientation, and give the structure of the site. For users, we are teaching them the hierarchy of the site, so that they learn navigation. Users also know where they are at a glance, and how to go back.


ALTERNATIVE VIEWSThis is the list view of our products, which allows easy scroll and quick 1-click selection straight to shopping bag. This is for our experienced users and regular visitors to the site, those that are more tech savvy like Jess, and process efficient like John.

QUALITY INFORMATIONIn line with TrueSpirit’s promise: We only sell quality products, we have included information about garment materials, wash and care instructions, and a zoom function to focus on the fabric. Also for customers like Sarah, who want to be educated about care and comfort of the garments.

SIZE HELP Standard measurements for our product line: for customers like John and Sarah who want to make sure they buy the right thing.

FILTERHelps efficiency of online shopping, for those who have little time to shop (eg. Sarah in her lunch breaks.

SAVED ITEMSQuick way to build favourites lists - for users like Sarah who like to save to purchase later. Also users like Jess: to help her build lists of recommendations for parents.

CATEGORY PAGE - QUICK BUY VIEW

5


Home > Girls > Tops > Polo Shirt FILTER


REGISTER

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

CATEGORY PAGE - QUICK VIEW

1

1


ALTERNATIVE VIEWSThis is the list view of our products, which allows easy scroll and allow users to see many items at a time


REGISTER

Home > Girls > Tops > Polo Shirt FILTER

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size HelpXL


IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

IMAGE

Polo shirt $ 30

You'll get year-round use out of this light-as-air top. Made from smooth micro fiber enhanced with quick-dry and odor neutralizing properties, it can be worn as an inner layer or as a top.

< BACK TO RESULTS NEXT >

COMPLETE UNIFORM

1

2

3

4

LARGE IMAGES AND MULTIPLE VIEWS Take a close look at our product - what you see is what you get in our large images with views of all angles. Users like Jess want clear information about our offering.


DETAILED DESCRIPTIONProvides information about the make up, care, comfort and fit. So that we can educate our users like Sarah, and inform school administrators like Jess.

COMPLETE THE UNIFORM (ALTERNATIVE NAVIGATION)Users who select a product from this product page, can easily see the matching uniform items. This provides a quick and easy way to purchase an entire uniform. (For users like Sarah who want to make sure they have the right products, and John who looks for efficiency).

1

3

2

NAVIGATIONTo enable users to go back to results, you don’t loose the results of the previous searches or filters.

4

PRODUCT PAGE

St. Luke’s School

FREE DELIVERY FOR PURCHASES OVER 50$EASY RETURNS

All you need is already in the box, attach the new delivery stickers at the box and call the number to organize the pick up

Kindergarten Girls

VIEW

KindergardenBoys

1-6 PrimaryGirls

1-6 PrimaryBoys

7-10 High SchoolGirls

7-10 High SchoolBoys

11-12 SeniorGirls

11-12 SeniorBoys

VIEW

VIEW

VIEW

VIEW

VIEW

VIEW

VIEW

GIRLS BOYS SHOP BYSCHOOL SIGN IN /

REGISTER

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

IMAGE

SCHOOL LANDING PAGE

11

2

VIEW BY YEARQuick and easy image view of the school’s entire range of uniforms by grade. Users know whats coming for future years of their children at St Luke’s School.


FREE DELIVERY AND EASY RETURNSInformation on these offers for this view as well (as Sarah may not go through the home page if she goes straight to the landing page).

2

COMPLETE SUMMER OUTFIT

Compulsory items SHOPPING LIST

COMPLETE WINTER OUTFIT

COMPLETE GYM OUTFIT

Recommended AccessoriesSHOPPING

LIST


REGISTER

IMAGE

Backpack $ 50

IMAGE

Gloves $ 15

IMAGE

Belt $ 20

IMAGE

iPhone Case $ 30

Home > St Luke’s School > 7-10 High School Boys

IMAGE IMAGEIMAGE

HOME CATEGORY PAGE

SCHOOL PAGE - BY YEARShows compulsory and recommended items. Shows an image of the complete summer and winter uniforms, so that parents know what pieces to buy, and what the complete outfit should look like.


Home > St. Lukes’s School > 11-14 Senior Boys > Compulsory items

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size Help

FILTER


XL

ADD TO BASKET

Color

$ 30Polo t-shirt

Size

1

S M

Quantity

XS L

CLICK TO ZOOM

SAVE ITEM

Size HelpXL


Color

$ 30Polo t-shirt

Size S MXS L

SAVE ITEM



SIGN INREGISTER

CATEGORY PAGE - QUICK BUY VIEW

SCHOOL - RELATED COMPULSORY SHOPPING LIST

A shopping list of the minimum required (compulsory) items. This is for Jess to make it easy for parents like John and Sarah to find the right items, quickly. John and Sarah feel assured that they are buying the right items for their kids.


SHOPPING BAG


REGISTER 2

ITEM IMAGE COLOR SIZE QUANTITY PRICE REMOVE

M 1 X$15

Polo T-shirt

M 1 X$15

Pants

SUBTOTAL $30

Shipping Costs 3-5 days $6Shipping Costs overnight delivert $15

TOTAL $36

Edit

Edit

Spend another $20 to qualify for FREE DELIVERY

We all know our kids grow fast!Never fear - We have an easy return policy (read more)

PROCEED CHECK OUTCONTINUE SHOPPING

1

2

3

PROGRESS INDICATORTo show users where they are and how many steps are involved in checkout process.


COUNTDOWN TO FREE DELIVERYEveryone is concerned about fair prices, we have provided a transparent way to see how close you are to a free delivery.

EASY RETURNS REMINDER At checkout, we give users a reminder that they can always return if the item doesn’t fit. Important for online shopping and giving our users comfort.

1

2

3

DonePaymentShopping Bag

SHOPPING BAG


REGISTER 2

CONFIRM

Name

Surname

Email

Phone

Shipping address

Is the billing address different from the shipping address?

DETAIL

PAYMENT

Name

Card Number

Expiry / CVC

We support Amex, Visa and Mastercard

1

Pay with PayPal

Email required

DonePaymentShopping Bag

BACK TO BAG

1 ERROR MESSAGETo help users recognise and recover from error. Validates the input at the same time the user completes the fields.


SHOPPING BAG


REGISTER

Would you like to keep all of your entered details on file for next time?

We’ll send you an email to check which details you’d like to keep on file.

YES, SAVE FOR NEXT TIME

Congratulations! You’ll receive your order shortly.

PROFILE SAVEUsers can save their details for next time, so they have a record of purchases and a quick way to re-order.


SIGN IN

GIRLS BOYS SHOP BY SHOOL

SIGN INREGISTER

Welcome to TrueSpirit

Email

Password

This is your registered email

Forget Password?

LoginCancel

Don’t have an account, register one

Register

GIRLS BOYS SHOP BY SHOOL

SIGN INREGISTER

Validating Formate, Uniqueness while users are typingValidating Required Fields after users press the register button

1

1

Welcome to TrueSpiritFor helping you better, we need you to set up your profile as following

AddressBetter to fill in your normal shipping address, which can make your purchase much quicker

Name:

Email:

Password:

Password Confirmation:

Unit:

Street:

Suburb: State

Postcode:

RegisterCancel

(optional)

John’s profile page


Your Profile

Hi, John

Edit

Name:

Email:

Password:

Account Info

Shipping Address

1000/2B Dawn Ave, Waveton, NSW, 2069

+ Add New Shipping Address

[email protected]

John Smith

************


Your Profile

Hi, John

Save

Name:

Email:

Password:

Account Info

Shipping Address

John’s profile page-Editing Page

Cancel

John Smith

[email protected]

************

Password Confirmation: ************

Unit:

Street:

Suburb: State

Postcode:

100

2B, Dawn Street

Waveton NSW

2070

John’s profile page-Add New Address


Your Profile

Hi, John

Edit

Name:

Email:

Password:

Account Info

Shipping Address


[email protected]

John Smith

************

Unit:

Street:

Suburb: State

Postcode:

New Shipping Address:

Cancel Save

John’s profile page


Your Profile

Hi, John

Edit

Name:

Email:

Password:

Account Info

Shipping Address


[email protected]

John Smith

************

101/2 Smith Ave, St Leonards, NSW, 2069

+ Add New Shipping Address

Admin Page


SIGN INREGISTER

Saved Items Group By Grade

Select All

Polo Shirt

Pant

Short

Polo Shirt

Pant

Short

Product Title Color

Accessaries(0)

Ungrouped Clothes(6)

Home > Saved Items

1

2

3

PROGRESS INDICATORTo show users where they are and how many steps are involved in checkout process.


COUNTDOWN TO FREE DELIVERYEveryone is concerned about fair prices, we have provided a transparent way to see how close you are to a free delivery.

EASY RETURNS REMINDER At checkout, we give users a reminder that they can always return if the item doesn’t fit. Important for online shopping and giving our users comfort.

1-7 Grade (3)

Polo Shirt

Pant

Short

Polo Shirt

Pant

Short

GIRLS BOYS SCHOOLS SIGN INREGISTER


Select All Ungrouped Items (3)

Name your new group

eg:1-7 Grade

Cancel Save

Home > Saved Items

Polo Shirt

Pant

Short

Polo Shirt

Pant

Short

GIRLS BOYS SCHOOLS SIGN INREGISTER


Select All Ungrouped Clothes (6)

Accessaries(3)

1-7 Grade(3)

Home > Saved Items

PURCHASE HISTORY

GIRLS BOYS SCHOOLS

Purchase History Order Again

Select All Product Title Color Size Qty.

Polo Shirt 8 1

Pant 8 1

Short 8 1

Skirt 8 1

Home > Purchase History

Hi, John

Truespirit E-commerce - Design Spec

Lifestyle

user flow

school contact

polo shirts2

polo shirts3

sarah 3girlsboys4shop

high school

school address

registerselect school