1. Case Study
!
Prepared for: True Spirit
!
By: Michael Shai-Hee
Last update: Jan 27, 2014
!
Student Project. General Assembly Sydney, UXDI Summer 2014
2. A new internet retailer for schools
and parents who want a modern
school uniform for K-12 children.
3. Business Objective
!
Offers updated uniform fashion including pants for girls and
zip-up hoodies, provides a “must-haves” checklist from the
school’s administrator for each school year, and recommends
accessories allowed by the school’s dress code. Unlike
traditional suppliers True Spirit encourages visitors to express
their tastes —with some limits.
!
4. Brand Profile
The brand profile is based on the following criteria:
!
• Fresh
• Modern
• Lighthearted
• Appealing
• Friendly
• Curated
5. 23/01/2014
User Needs
FASHION E-COMMERCE
CUSTOMER
TRUE SPIRIT
E-COMMERCE CUSTOMER
TrueSpirit aims to provide a pleasant buying experience that is both reassuring and
efficient. This is unlike other fashion websites that simply offer a plethora of products
that are difficult to find and navigate through.
6. Personas
Each persona has a unique need, approach and reason for purchasing
school uniform products.
Sarah
“I hope I’m ordering the right things”
John
“I want to have enough information so that
I know I’m buying the right thing”
Jess
“I want to make sure the parents’ needs are met”
7. User Journey and Scenario for the personas
Sarah
John
Writing out the user journey and scenario for each persona.
Jess
8. User Flow Sketch: John
Mapping out the steps John will need to go through in purchasing a white polo shirt and
blue pants.
13. User Flow: John
John
Google
Search “Girl’s
uniform”
TrueSpirit
Navigation
Menu
Summarised
list of items in
cart
TrueSpirit
Home Page
Search Girls
Bottoms
Search uniform
stating clothing
type (tops), child
(girl), class (year
X) & school
(name of school)
Girls Bottoms
Girls Tops
Pants
Full detailed list
of items in cart
Polo Shirts
Add white
loo shirt to
cart
Add blue
pants to cart
Polo Shirts
Pants
Checkout
Process
John’s profile explicitly states what items he is to buy, a white polo shirt and blue pants for his daughter
(High fidelity version).
14. User Flow: Sarah
Formal Shirts
Sarah
T-shirts
Polo Shirts
Tank Tops
Boys Tops
Boys Tops
Jackets
Email received
from school
administrator
TrueSpirit
Home Page
Search uniform
stating clothing
type, child (boy),
class (year X) &
school (name of
school)
Sweaters
Hoodies
TrueSpirit
Navigation
Add selected
item to cart
Pants
Boys Bottoms
TrueSpirit
Global
Navigation
Boys Uniform
Boys Bottoms
Gym Shorts
Shorts
Product Page
Belts
Accessories
Accessories
Gloves
Select Cart
on TrueSpirit
Global
Navigation
Socks
Logo t-shirts
Logo hoodies
Unisex
Logo
Merchandise
Logo
Merchandise
iPhone case
School mascot
plush toy
Unisex
Backpacks
Backpacks
Sarah’s profile did not explicitly state what items she wanted to purchase so all items are considered.
Summarised
list of items in
cart
Full detailed
list of items in
cart
Checkout
Process
15. Sitemap
0.0 Home
Page
1.0 Boys
1.2 Bottoms
1.1 Tops
2.0 Girls
1.3 Accessories
2.1 Tops
1.1.1. Formal Shirts
1.2.1 Pants
1.3.1 Socks
2.1.1 Formal Shirts
1.1.2 T-Shirts
1.2.2 Gymshorts
1.3.2 Gloves
2.1.2 T-Shirts
1.1.3 Polo Shirts
1.2.3 Shorts
1.3.3 Belts
2.1.3 Polo Shirts
1.1.4 Tank Tops
2.1.4 Tank Tops
1.1.5 Jackets
2.1.5 Jackets
1.1.6 Sweaters
2.1.6 Sweaters
1.1.7 Hoodies
2.1.7 Hoodies
2.2 Bottoms
3.0 Unisex
2.3 Accessories
3.1 Logos
2.2.1 Skirts
2.3.1 Headbands
3.1.1 Logo t-shirt
2.2.2 Pants
2.3.2 Gloves
3.1.2 Logo hoodie
2.2.3 Gymshorts
2.3.3 Belts
3.1.3 iPhone case
2.2.4 Shorts
2.3.4 Leggings
3.1.4 School
mascot plush toy
4.0 About
Us
3.2 Backpacks
17. WireFrame: Home Page
Search by
Name of School
school:
Home
Boys
GIRLS
BOYS
TrueSpirit Logo
Search by
product:
Girls
The home page displays an overall
view of products TrueSpirit offers.
Unisex
CART
Accessories
About Us
FEATURE PRODUCT 1
FEATURE PRODUCT 2
Carousel of images showing
students wearing TrueSpirit school
uniforms accompanied with
endorsement messages
FEATURE PRODUCT 3
FEATURE PRODUCT 4
Copyright TrueSpirit
Email: truespirit@xxxx.com
Head Office No: 1234 5678
Find Us
18. WireFrame: Product Category Page
BOYS
TrueSpirit Logo
Search by
Name of School
school:
Home
Boys
GIRLS
Search by
product:
Girls
Unisex
CART
Accessories
About Us
TOPS
BOTTOMS
ACCESSORIES
Copyright TrueSpirit
Email: truespirit@xxxx.com
Head Office No: 1234 5678
Find Us
When school uniforms for boys is
selected, product categories for
tops, bottoms and accessories are
shown.
19. WireFrame: Product Details Page
Search by
Name of School
school:
Home
GIRLS
BOYS
TrueSpirit Logo
Search by
product:
Boys
Girls
CART
Unisex
Accessories
About Us
Product Name
Product Description
Carousel of displayed
product images
Size Select:
Small
Quantity:
Medium
1
Large
XL
Cost: $30.00
Add Item to cart
Shipping Information
Bundle Collections:
Bundle 1
Copyright TrueSpirit
Bundle 2
Email: truespirit@xxxx.com
Other Customers Viewed:
Display products viewed by other
customers
Head Office No: 1234 5678
Find Us
Details for each product in the
selected category (e.g. tops) is
described as the user goes through
the carousel of displayed items.
!
This is the page where the items can
be purchased and placed into the
cart.
20. Checkout Process User Flow
Notes
1 The user can terminate
the checkout process
before final payment is
made.
User
TrueSpirit
Previous
page
Select cart icon
Summarised list
of items in cart
Full detailed list
of items in cart
Billing/shipping
address entered
Delivery
type
Payment
page
1
Payment
Confirmed
Transaction
Complete
The checkout process begins when the user selects the cart icon.
TrueSpirit
Home
page
21. Checkout Process Form: Address
Search by school
and/or product:
Endorsement Messages
Home
Boys
Checkout
GIRLS
BOYS
TrueSpirit Logo
Girls
Address
CART
Unisex
Delivery
Accessories
Payment
About Us
Finish
Name:
Email:
Billing Address
Street:
List of items purchased displayed
and prices listed
Suburb:
State:
Postcode/Zip:
Country:
Australia
Total Cost: $200.00
Shipping address is the
same as billing address
Copyright TrueSpirit
Email: truespirit@xxxx.com
Cancel
Head Office No: 1234 5678
Next >>
Find Us
The checkout process begins
when the cart icon is selected.
22. Checkout Process: Delivery
Endorsement Messages
Home
Search by school
and/or product:
Boys
Checkout
GIRLS
BOYS
TrueSpirit Logo
Girls
Address
CART
Unisex
Delivery
Accessories
Payment
About Us
Finish
Delivery Type
Standard Delivery - FREE - within 7 days
Express Delivery - add $15.00 - within 2 days
Pick up from School
Total Cost: $200.00
Cancel
Copyright TrueSpirit
Email: truespirit@xxxx.com
<< Back
Head Office No: 1234 5678
Next >>
Find Us
23. Checkout Process: Payment
Endorsement Messages
Home
Search by school
and/or product:
Boys
Checkout
GIRLS
BOYS
TrueSpirit Logo
Girls
Address
CART
Unisex
Delivery
Accessories
Payment
About Us
Finish
Payment Type
Credit Card
Paypal
Direct Deposit
Card Number:
Expiry Date:
Month
Year
CSV:
Total Cost: $200.00
Cancel
Copyright TrueSpirit
Email: truespirit@xxxx.com
<< Back
Head Office No: 1234 5678
Next >>
Find Us
24. Checkout Process: Finish
Endorsement Messages
Home
Checkout
GIRLS
BOYS
TrueSpirit Logo
Search by school
and/or product:
Boys
Girls
Address
CART
Unisex
Delivery
Accessories
Payment
About Us
Finish
Checkout process transactions finished.
Confirmation of order will be sent via email.
Go to homepage
Copyright TrueSpirit
Email: truespirit@xxxx.com
Head Office No: 1234 5678
Find Us
25. User Testing
Prototype of the TrueSpirit website tested on real subjects who had never seen it.
Results varied whereby some users were able to navigate to the requested
product easily and others not so.