1. 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

2. Site Map
0.0 Home
User flow: Sarah
1.0 Account
1.1 Log in
1.2 Register
2.0 Boys
1.3 Profile
2.1.1
Formal
shirts
2.1.2
T-shirts
2.1.3
Polo shirts
2.1.4
Tank tops
2.1.5
Logo shirts
2.1.6
Jackets
2.1.7
Hoodies
2.2 Bottom
2.3 Accessories
2.2.1
Pants
2.2.2
Shorts
2.2.3
Gymshorts
3.2 Bottom
2.4 Sales
3.3 Accessories
3.2.1
Pants
3.3.1
Socks
3.1.2
T-shirts
3.2.2
Shorts
3.3.2
Gloves
3.1.3
Polo shirts
3.2.3
Gymshorts
2.3.1
Socks
2.3.2
Gloves
2.3.3
Belts
2.3.4
iPhone case
2.3.5
Plush toy
3.4 Sales
3.1.1
Formal shirts
6.0
Terms &
Conditon
7.0
Quality
Statement
8.0
Privacy
9.0 Shipping &
Return
3.3.3
Belts
10.0 About us
3.1.4
Tank tops
3.1.5
Logo shirts
3.1.6
Jackets
3.1.7
Hoodies
3.1.8
Sweaters
2.1.8
Sweaters
5.0 Saved list
4.1 Shipping info,
card info & Check
out
3.1 Top
2.1 Top
4.0 Shopping bag
3.0 Girls
3.2.4
Skirts
3.3.4
Leggings
3.3.5
iPhone case
3.3.6
Plush toy
10.1
Company
Intro
10.2
Scholarship
program

3. Navigation Schema - Header
User flow: Sarah
1
2
3
4
5
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
Global navigation
1
GIRLS
TOPS
Girls > T-shitst and tops > polo shirt
BOTTOMS
ACCESSORIES
Formal shirts
Jackets
Skirts
Socks
iPhone case
T-shirts
Hoodies
Pants
Headbands
Plush toy
Polo shirts
Sweaters
Shorts
Gloves
Tank top
Logo Hoodies
Gymshorts
Belts
SALES >
Logo shirts
Leggings
Contextual navigation
USER TEST
user test line-heigh

4. Navigation Schema - Header 2
User flow: Sarah
1
2
3
4
5
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
SHOP BY
SCHOOL
SIGN IN
REGISTER
Global navigation
2
GIRLS
TOPS
Girls > T-shitst and tops > polo shirt
BOYS
BOTTOMS
ACCESSORIES
Formal shirts
Jackets
Pants
Socks
iPhone case
T-shirts
Hoodies
Shorts
Headbands
Plush toy
Polo shirts
Sweaters
Gymshorts
Gloves
Tank top
Logo Hoodies
Logo shirts
Belts
SALES >
Contextual navigation
USER TEST
user test line-height

5. Navigation Schema - Header 3
User flow: Sarah
3
GIRLS
BOYS
4
SHOP BY
SCHOOL
SIGN IN
REGISTER
Global navigation
3
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
Select School
Girls > T-shitst and tops > polo shirt
St. Luke’s
▼
GO
4
GIRLS
Girls > T-shitst and tops > polo shirt
Search
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
GO
Site search

6. 5
Navigation Schema - Header 4
User flow: Sarah
5
GIRLS
BOYS
SHOP BY
SCHOOL
Global navigation
SIGN IN
REGISTER
5
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
2
ITEMS ADDED 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
Polo shirt
$15
Pants
$12
SUBTOTAL
$37
GO TO BAG
SAVED ITEMS
Shopping Bag

7. Navigation Schema - Footer & Breadcrumbs
User flow: Sarah
CONTEXTUAL BREADCRUMBS
Home> Girls > Tops > Polo Shirt
FOOTER
SERVICES
ABOUT US
FOR SCHOOLS
GET HELP
Shipping & tracking
Company info
Admin area
Feeling stuck?
Sizes & Conversions
Our Quality
Find your school
+61 5647 474637
Easy returns
Jobs
How to wash
Scholarships
Contact us
Term of use | Privacy and Cookies
Copyright 2014
help@truespirit.com.au

8. Navigation Schema - Filter
User flow: Sarah
FILTER
FILTER
FILTER
COLOR
SIZE
SORT BY:
XS
S
M
L
lowest price on top
XL
▼

9. User flow: Sarah
Provided suites
Go through them
&
Choose one
Home Page
Provided suites
or
Build Own?
Jess
YES
Interested?
Build own
Choose
School
Entrance
Choose Boys/Girls
NO
Product
Page
Note
This is the product set page,which
includes a list of products
recommended by TrueSpirit
Choose Subcategory
NO
YES
Has
Account?
Filter by school dress code
Like none
Like all,
Like some,
or like none?
Like some
Like all
Results page
Add preferred items
to cart
Add all items to
“Saved Items”
YES
Stay Logged
in?
NO
Go through them
&
Choose one
NO
YES
This is a single
product page
Want to log in?
NO
Note
Product
Page
Back to
Provided suites page
or
Build own?
Provided suites
Build own
Log in
Like it?
YES
Add item to “Saved
Items”
Note
Finish Browsing
NO
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.
K kindergarden
1-6 primary
7-10 high school
11-12 senior
YES
Group items for grade
selecting must have or recommended
Note
Information needed:
school name.
school address.
school contact.
Jess’s contact
Preview Page?
Saved Items
Page
Set up school profile & Account
Note
Note
Generate product & url
Email url to parents

10. User flow: Sarah
Click url
Landing page
When Sarah refer back to the saved items later
Choose
Year and Gender
Sarah
* default preview on list view
Results page
No
Saved list page
te
List all predefined products(chosen by admin ).
Provides must-have and recommended items.
Go through
& choose one
Note
Remove from saved list
Go through & choose one
NO
NO
Like it?
YES
YES
Like it?
When finish shopping
Add to cart
NO
Buy it now?
YES
Check out
Add to cart
Save it later
Want to know more
Check out process flow
Product page
NO
Save it later
NO
Buy it ?
Add to cart
YES
Like it?
YES
Sarah can inspect the product
page for detail info

11. User Flow: Checkout
NO
Check out
Check out as a guest
Has
Account?
2
John & Jess
Shipping info
page(blank page)
YES
1
YES
Stay logged
in?
Pay
NO
3
YES
Want to
register?
NO
Log in
Confirmation Email Sent
receive order confirmation email
Shipping info
page(autofilled)
Check point & Pay
receive order confirmation email
1
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.
2
Info needed:
Name.
Contact.
Shipping & billing address.
Credit Card info, mail.
John & jess can edit added items(delete, change
quantity)
3
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

12. 1.0 HOMEPAGE
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
GIRLS
1
2
3
5
FREE DELIVERY
Free 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.
Enjoy school
and express
your style
1
EASY RETURNS
Having 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.
REVIEWS
Rather 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.
FREE DELIVERY FOR PURCHASES
OVER $50
4
SALES
We’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.
FEATURED ITEMS
We’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.
EASY RETURNS.
All you need is the included delivery stickers! Attach these and drop off
at the post office.
3
CHECK OUT OUR SALES
“I can’t believe my kid’s t-shirts
look brand new after more than
40 washes”
IMAGE
5
IMAGE
Sarah Jackson
Customer, and mother of 3.
HOW TO WASH
6
SIGN IN
REGISTER
CAROUSEL
The 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.
2
4
SHOP BY
SCHOOL
BOYS
Polo shirt
$ 30
Polo shirt
$ 30
FEATURED ITEMS
6
IMAGE
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
Polo shirt
$ 30

13. CATEGORY PAGE - QUICK BUY VIEW
GIRLS
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
1
1
SHOP BY
SCHOOL
BOYS
Polo t-shirt
$ 30
BREADCRUMBS
Breadcrumbs 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.
Size
Size Help
L
M
3
XL
ADD TO
BASKET
Machine wash cold, gentle cycle
Polo t-shirt
$ 30
SAVE
ITEM
Color
4
FILTER
Helps efficiency of online shopping, for
those who have little time to shop (eg.
Sarah in her lunch breaks.
Size
Size Help
Quantity
XS
S
M
L
SAVED ITEMS
Quick 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.
Machine wash cold, gentle cycle
Polo t-shirt
$ 30
CLICK TO ZOOM
XL
1
100% cotton.
CLICK TO ZOOM
6
S
100% cotton.
SIZE HELP
Standard measurements for our product line:
for customers like John and Sarah who want
to make sure they buy the right thing.
5
SAVE
ITEM
1
Quantity
QUALITY INFORMATION
In 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.
4
XS
5
6
Color
CLICK TO ZOOM
3
FILTER
2
Home > Girls > Tops > Polo Shirt
ALTERNATIVE VIEWS
This 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.
2
SIGN IN
REGISTER
Color
100% cotton.
Machine
Size wash cold, gentle cycle L
XS S M
ADD TO
BASKET
SAVE
ITEM

14. CATEGORY PAGE - QUICK VIEW
GIRLS
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
1
SHOP BY
SCHOOL
BOYS
SIGN IN
REGISTER
FILTER
1
Home > Girls > Tops > Polo Shirt
ALTERNATIVE VIEWS
This is the list view of our products, which
allows easy scroll and allow users to see
many items at a time
IMAGE
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
Polo shirt
$ 30
Polo shirt
$ 30
Polo shirt
$ 30
$ 30
Polo shirt
$ 30
Polo shirt
Polo shirt
$ 30
Polo shirt
$ 30
Polo shirt
Polo shirt
100% cotton.
$ 30
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
$ 30
IMAGE
IMAGE
IMAGE
CLICK TO ZOOM
Polo shirt
IMAGE
IMAGE
IMAGE
IMAGE
Polo shirt
$ 30
IMAGE
IMAGE
Polo shirt
IMAGE
$ 30
IMAGE
$ 30
Polo shirt
Machine wash cold, gentle cycle
$ 30

15. PRODUCT PAGE
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
GIRLS
1
2
3
4
NAVIGATION
To enable users to go back to
results, you don’t loose the results of
the previous searches or filters.
BOYS
SIGN IN
REGISTER
FILTER
Home > Girls > Tops > Polo Shirt
1
NEXT >
< BACK TO RESULTS
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.
Polo t-shirt
$ 30
SAVE
ITEM
Color
DETAILED DESCRIPTION
Provides 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).
SHOP BY
SCHOOL
Size
Size Help
XS
Quantity
S
M
L
XL
1
100% cotton.
ADD TO
BASKET
Machine wash cold, gentle cycle
CLICK TO ZOOM
2
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.
COMPLETE UNIFORM
4
IMAGE
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
Polo shirt
IMAGE
$ 30
Polo shirt
$ 30
3

16. SCHOOL LANDING PAGE
GIRLS
2
VIEW BY YEAR
Quick 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.
SHOP BY
SCHOOL
SIGN IN /
REGISTER
St. Luke’s School
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
1
BOYS
Kindergarden
Boys
Kindergarten
Girls
1
IMAGE
IMAGE
VIEW
VIEW
FREE DELIVERY AND EASY RETURNS
Information 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).
1-6 Primary
Girls
IMAGE
1-6 Primary
Boys
IMAGE
VIEW
VIEW
7-10 High School
Girls
7-10 High School
Boys
IMAGE
IMAGE
VIEW
VIEW
11-12 Senior
Girls
11-12 Senior
Boys
IMAGE
IMAGE
VIEW
2
FREE DELIVERY FOR PURCHASES OVER 50$
VIEW
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

17. HOME CATEGORY PAGE
GIRLS
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
SHOP BY
SCHOOL
BOYS
SIGN IN
REGISTER
Home > St Luke’s School > 7-10 High School Boys
SCHOOL PAGE - BY YEAR
Shows 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.
Compulsory items
SHOPPING
LIST
IMAGE
IMAGE
IMAGE
COMPLETE
SUMMER OUTFIT
COMPLETE WINTER
OUTFIT
COMPLETE GYM
OUTFIT
SHOPPING
LIST
Recommended Accessories
IMAGE
Backpack
IMAGE
$ 50
Gloves
IMAGE
$ 15
Belt
IMAGE
$ 20
iPhone Case
$ 30

18. CATEGORY PAGE - QUICK BUY VIEW
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
SCHOOL - RELATED COMPULSORY
SHOPPING LIST
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
FILTER
Home > St. Lukes’s School > 11-14 Senior Boys > Compulsory items
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.
Polo t-shirt
$ 30
SAVE
ITEM
Color
Size
XS
Size Help
S
M
L
1
Quantity
ADD TO
BASKET
100% cotton.
CLICK TO ZOOM
XL
Machine wash cold, gentle cycle
Polo t-shirt
$ 30
SAVE
ITEM
Color
Size
Size Help
Quantity
XS
S
M
L
1
100% cotton.
CLICK TO ZOOM
Machine wash cold, gentle cycle
Polo t-shirt
$ 30
CLICK TO ZOOM
XL
Color
100% cotton.
Machine
Size wash cold, gentle cycle L
XS S M
ADD TO
BASKET
SAVE
ITEM

19. SHOPPING BAG
GIRLS
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
1
Shopping Bag
ITEM IMAGE
1
SHOP BY
SCHOOL
BOYS
COLOR
SIZE
3
2
Done
Payment
QUANTITY
PRICE
REMOVE
$15
X
PROGRESS INDICATOR
To show users where they are and how
many steps are involved in checkout
process.
M
2
SIGN IN
REGISTER
COUNTDOWN TO FREE DELIVERY
Everyone is concerned about fair prices, we
have provided a transparent way to see
how close you are to a free delivery.
1
Polo T-shirt
Edit
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.
M
1
$15
Pants
Edit
SUBTOTAL
2
$30
Spend another $20 to qualify for FREE DELIVERY
Shipping Costs 3-5 days
3
$6
Shipping Costs overnight delivert
CONTINUE SHOPPING
X
$15
We all know our kids grow fast!
Never fear - We have an easy
return policy (read more)
TOTAL
$36
PROCEED CHECK OUT

20. SHOPPING BAG
GIRLS
SHOP BY
SCHOOL
BOYS
Shopping Bag
SIGN IN
REGISTER
Done
Payment
DETAIL
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
Name
1
ERROR MESSAGE
To help users recognise and recover from
error. Validates the input at the same time
the user completes the fields.
Surname
1
Email
Email required
Phone
Shipping address
Is the billing address different from the
shipping address?
PAYMENT
We support Amex, Visa and Mastercard
Name
Card Number
Expiry
/
CVC
Pay with PayPal
BACK TO BAG
CONFIRM
2

21. SHOPPING BAG
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
PROFILE SAVE
Users can save their details for next time,
so they have a record of purchases and a
quick way to re-order.
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
Congratulations! You’ll
receive your order shortly.
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

22. SIGN IN
GIRLS
BOYS
SHOP BY
SHOOL
Welcome to TrueSpirit
Email
This is your registered email
Password
Forget Password?
Cancel
Login
Don’t have an account, register one
SIGN IN
REGISTER

23. Register
GIRLS
BOYS
SIGN IN
REGISTER
SHOP BY
SHOOL
Welcome to TrueSpirit
For helping you better, we need you to set up your profile as following
1
Validating Formate, Uniqueness while
users are typing
Validating Required Fields after users
press the register button
Name:
1
Email:
Password:
Password
Confirmation:
Address
(optional)
Better to fill in your normal shipping address,
which can make your purchase much quicker
Unit:
Street:
State
Suburb:
Postcode:
Cancel
Register

24. John’s profile page
GIRLS
BOYS
Your Profile
Hi, John
Edit
Account Info
Name:
John Smith
Email:
John@sample.com
Password:
SHOP BY
SCHOOL
************
Shipping Address
1000/2B Dawn Ave, Waveton, NSW, 2069
+ Add New Shipping Address

25. John’s profile page
-Editing Page
GIRLS
BOYS
SHOP BY
SCHOOL
Cancel
Your Profile
Account Info
Name:
John Smith
Email:
John@sample.com
Password:
************
Password
Confirmation:
************
Shipping Address
Unit:
Street:
Suburb:
Postcode:
Hi, John
100
2B, Dawn Street
Waveton
2070
State
NSW
Save

26. John’s profile page
-Add New Address
GIRLS
SHOP BY
SCHOOL
BOYS
Your Profile
Edit
Account Info
Name:
John Smith
Email:
John@sample.com
Password:
************
Shipping Address
1000/2B Dawn Ave, Waveton, NSW, 2069
New Shipping Address:
Unit:
Street:
Suburb:
State
Postcode:
Cancel
Hi, John
Save

27. John’s profile page
GIRLS
BOYS
Your Profile
Hi, John
Edit
Account Info
Name:
John Smith
Email:
John@sample.com
Password:
SHOP BY
SCHOOL
************
Shipping Address
1000/2B Dawn Ave, Waveton, NSW, 2069
101/2 Smith Ave, St Leonards, NSW, 2069
+ Add New Shipping Address

28. Admin Page
GIRLS
WHAT PROBLEM IS BEING SOLVED WITH
EACH ELEMENT?
BOYS
SHOP BY
SCHOOL
Home > Saved Items
Saved Items
1
2
3
PROGRESS INDICATOR
To show users where they are and how
many steps are involved in checkout
process.
COUNTDOWN TO FREE DELIVERY
Everyone 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.
SIGN IN
REGISTER
Select All
Group By Grade
Product Title
Color
Ungrouped Clothes(6)
Accessaries(0)
Polo Shirt
Pant
Short
Polo Shirt
Pant
Short

29. GIRLS
BOYS
SCHOOLS
SIGN IN
REGISTER
Home > Saved Items
Saved Items
Group By Grade
Ungrouped Items (3)
Select All
1-7 Grade (3)
Name Shirt new group
Polo your
eg:1-7 Grade
Pant
Cancel
Short
Polo Shirt
Pant
Short
Save

30. GIRLS
BOYS
SCHOOLS
SIGN IN
REGISTER
Home > Saved Items
Saved Items
Group By Grade
Ungrouped Clothes (6)
Select All
Accessaries(3)
1-7 Grade(3)
Polo Shirt
Pant
Short
Polo Shirt
Pant
Short

31. PURCHASE HISTORY
GIRLS
BOYS
Hi, John
SCHOOLS
Home > Purchase History
Purchase History
Select All
Order Again
Product Title
Color
Size
Qty.
Polo Shirt
8
1
Pant
8
1
Short
8
1
Skirt
8
1