Truespirit E-commerce - Design Spec
-
Upload
sara-michelazzo -
Category
Lifestyle
-
view
231 -
download
3
description
Transcript of 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
GIRLS BOYS SHOP BY SCHOOL
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
GIRLS BOYS SHOP BY SCHOOL
SIGN INREGISTER
1 2 3 4 5
Global navigation
GIRLS BOYS SHOP BY SCHOOL
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
Navigation Schema - Header 3
GIRLS BOYS SHOP BY SCHOOL
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
GIRLS BOYS SHOP BY SCHOOL
Search GO
3
4
Select School
Site search
User flow: Sarah
Navigation Schema - Header 4
GIRLS BOYS SHOP BY SCHOOL
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
100% cotton. Machine wash cold, gentle cycle
GIRLS BOYS SHOP BYSCHOOL SIGN IN
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
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
CLICK TO ZOOM 100% cotton. Machine wash cold, gentle cycle
Home > Girls > Tops > Polo Shirt FILTER
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
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
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
ALTERNATIVE VIEWSThis is the list view of our products, which allows easy scroll and allow users to see many items at a time
GIRLS BOYS SHOP BYSCHOOL SIGN IN
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
100% cotton. Machine wash cold, gentle cycle
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
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
GIRLS BOYS SHOP BYSCHOOL SIGN IN
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
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
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
100% cotton. Machine wash cold, gentle cycle
GIRLS BOYS SHOP BY SCHOOL
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
SHOPPING BAG
GIRLS BOYS SHOP BYSCHOOL SIGN IN
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
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
GIRLS BOYS SHOP BYSCHOOL SIGN IN
REGISTER 2
CONFIRM
Name
Surname
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
SHOPPING BAG
GIRLS BOYS SHOP BYSCHOOL SIGN IN
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
SIGN IN
GIRLS BOYS SHOP BY SHOOL
SIGN INREGISTER
Welcome to TrueSpirit
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
GIRLS BOYS SHOP BY SCHOOL
Your Profile
Hi, John
Edit
Name:
Email:
Password:
Account Info
Shipping Address
1000/2B Dawn Ave, Waveton, NSW, 2069
+ Add New Shipping Address
John Smith
************
GIRLS BOYS SHOP BY SCHOOL
Your Profile
Hi, John
Save
Name:
Email:
Password:
Account Info
Shipping Address
John’s profile page-Editing Page
Cancel
John Smith
************
Password Confirmation: ************
Unit:
Street:
Suburb: State
Postcode:
100
2B, Dawn Street
Waveton NSW
2070
John’s profile page-Add New Address
GIRLS BOYS SHOP BY SCHOOL
Your Profile
Hi, John
Edit
Name:
Email:
Password:
Account Info
Shipping Address
1000/2B Dawn Ave, Waveton, NSW, 2069
John Smith
************
Unit:
Street:
Suburb: State
Postcode:
New Shipping Address:
Cancel Save
John’s profile page
GIRLS BOYS SHOP BY SCHOOL
Your Profile
Hi, John
Edit
Name:
Email:
Password:
Account Info
Shipping Address
1000/2B Dawn Ave, Waveton, NSW, 2069
John Smith
************
101/2 Smith Ave, St Leonards, NSW, 2069
+ Add New Shipping Address
Admin Page
GIRLS BOYS SHOP BY SCHOOL
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.
WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT?
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
Saved Items Group By Grade
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
Saved Items Group By Grade
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