The document outlines Amanda Wise's student project to design a mobile-optimized e-commerce store for a fictional school uniform retailer called True Spirit. It describes her process of researching competitors, creating user personas and scenarios, designing user flows and prototypes, and testing usability. The goal was to present a modern experience that makes purchasing uniforms easy for busy parents on mobile devices.

1. MOBILE WEB E-COMMERCE
CONCEPT FOR “TRUE SPIRIT” SCHOOL UNIFORM STORE
STUDENT PROJECT CASE STUDY
GENERAL ASSEMBLY UXDI SYDNEY 2014
AMANDA WISE, UX DESIGN

2. OVERVIEW
About the Project
Learnings
This case study documents the
process I took to research and
design a fictional e-­‐‑commerce
store from brief to clickable
prototype in a few days.
The project enabled me to
research and explore best
practice for:
•
User Flows & Experience
mapping
•
Usability for Mobile web/touch-­‐‑
friendly interfaces
I worked as part of a student
team but the design deliverables • Form design
presented are my own.
• Lean Checkout process design
•
Team workshop management

3. THE BRIEF
About the Product
The Target Audience
TrueSpirit is a (fictional) new
internet retailer for Australian
schools and parents who want
quality, well-­‐‑priced school
uniform items for K-­‐‑12 children.
We were supplied with three
distinct Personas.
Business Goals
• Present uniforms as fashion
TrueSpirit’s vision is to enable
customers and their kids to
• Enable schools to offer “must-­‐‑
choose the items they want from
have” uniform checklists for
a selection of school
parents
recommended uniforms.
• Offer accessories allowed by
the school’s dress code

4. COMPETITIVE ANALYSIS
(SEE APPENDIX)
• Most retailers in the space have poorly designed websites and
many have no online stores at all.
• No local retailer offer easy mobile device browsing or
purchase.
• The only potential challenger (ClothingDirect.com.au) is not a
direct competitor as it offers business as well as school
uniforms and so is not focused solely on parents’ needs.

5. GOALS OF THE DESIGN
To present a fresh, modern, mobile-­‐‑
optimised user experience that sets
TrueSpirit apart from its competitors and…
makes life easier for busy parents.

6. USER FLOWS & SCENARIOS

7. SCENARIOS
Method
•
Brainstorming goals and pain points for each Persona
•
•
•
John -­‐‑ Returning customer
Sarah -­‐‑ New customer
Jess -­‐‑ Corporate customer (school administrator)
Findings
•
The team prioritised the experience flow and must-­‐‑have content for each of the three
Personas
Opportunities identified
•
New customer – provide an all-­‐‑in-­‐‑one “Essentials” product bundle for each school, so its
easy for Sarah to know exactly what she needs to buy
•
Returning customer – provide an Express Checkout and clear price comparison so it’s a
quick, efficient experience for John to buy just a few items.
•
Business customer – provide a customer Account set-­‐‑up process for schools to create
product bundles so it’s easy for Jess to provide parents with a one-­‐‑stop-­‐‑shop for all their
uniform needs

8. USER FLOWS

9. USER FLOWS

10. USER FLOWS

11. PERSONAS
ANALYSIS
John
Returning
Customer, Pragmatic
Purchaser
Sarah
Jess
First time
School Administrator
Customer, Savvy Spender
Needs
• Value
• Easy returns
• Credibility/Trust
• Checklist of all
required uniform
items
Functionality
• Comparison pricing • Essential uniform
• Add/Edit school info
• Discounts
bundle for a school
and uniform
• Other parents advice/
requirements
testimonials
Features
• Member’s Account
• Express check-out
• Email autoresponder offers
•
•
•
•
1-click bundle buy
iPad optimised
Save to Wishlist
Email reminders
• B2B service
• Quality
• Range
• Product bundle
order form
• School collateral
upload
• Catalogue download

14. HOME
CHECKOUT
PROCESS
BUSINESS
CUSTOMER
ACCOUNT
PROCESS
SKETCHES

15. PRODUCT PAGE ITERATIONS

16. PRODUCT PAGE WIREFRAME
Notes
1.
Prominent Shopping Cart tab opens
slider showing all items in the Cart
without navigating away from
1
product page
2.
3
Comparison pricing with retail
3.
2
Quantity discounts for essential items
4.
School logo, name and note on the
item. Info links to School’s complete
4
product listing and information for
5
parents.
5.
Conversion optimisation elements

17. THE SOLUTION
Design a household calendar app that enables
Deepa and Sam to co-­‐‑ordinate tasks easily.
QUICK CLICKABLE PROTOTYPE

18. PROTOTYPE V.1
Method
•
I created a quick clickable prototype using Omnigraffle
User Journey 1
John, as a returning customer, can find a single item and check-­‐‑out quickly.
Scenarios
•
Finding an individual item
•
Express Checkout
User Journey 2
Sarah, as a first-­‐‑time customer, can find a selection of items required by her child’s school and
check-­‐‑out easily on her iPad.
Scenarios
•
Finding a school “Essentials” uniform product listing
•
New Customer Checkout

31. DESIGN PROTOTYPE

32. PROTOTYPE V2
The second iteration of the product focused on interaction design
optimised for mobile web through the “express checkout” user
journey of John, our returning customer:
Views
Signs up for
newsletter
Browse
Home screen
Selects
Product listing
Product page
Adds to cart
Proceeds to
checkout
Signs
In
Express
checkout
Order
confirmat
ion
Gives True
Spirit a great
review
Shipping and
returns policy

35. USABILITY TESTING

36. USABILITY TESTING
Test process
We found 5 participants willing to test our
prototype. We gave them all three tasks to
perform on our prototype
User testing tasks
1. You are buying a polo shirt for your daughter.
Show me how you would go about it
2. You are a new customer. Take me through your
checkout process
3. You are a returning customer. Take me through
your checkout process

37. FINDINGS
• 4 out of 5 participants used the main menu on the Home page to
go to the Product page, rather than the large search field.
• 2 out of 5 preferred Guest Checkout even though they were
returning customers
• Change “Sign-­‐‑up” to “New Customer” to avoid confusion with
“Sign-­‐‑In”
• Add Back bujon on the cart
• Checkout could be even quicker for returning customers:
• Sign-­‐‑In ! Shipping/Billing (auto-­‐‑filled) ! Review Order
Or
• Sign-­‐‑In ! Review Order (with Shipping/billing auto-­‐‑filled)
Then offer
• option to Save Details and join as a Member

38. THANKS
AMANDA WISE, UX STRATEGY & DESIGN
WISEAMANDA.WORDPRESS.COM/
JANUARY 2014

39. APPENDIX
THE SUPPLIED PERSONAS

40. COMPETITIVE ANALYSIS
I compared the top ranking companies (organic) on Google for
expected search terms:
1. “custom school uniforms”
2. “buy school uniform”
3. “Randwick High school uniform

41. PR1 “CUSTOM SCHOOL UNIFORMS”
Silverfleece.com.au
"
Search goes to landing page for
school uniforms
# No link to unform section in online
store!!
# Hard to read

42. PR2 “CUSTOM SCHOOL UNIFORMS”
GetSmartSchoolwear.com.au
"
Search optimised
"
Phone number prominent
"
Friendly, distinctive brand
# No search
# PDF Flipbook catalogue

43. PR3 “CUSTOM SCHOOL UNIFORMS”
CustomUniformCo.com.au
"
Branding distinctive and friendly
"
Up front pricing
"
Direct response copy
"
Repeated calls to action
# “Home-­‐‑made” design
# Headless children & other misleading
illustrations

44. PR4 “CUSTOM SCHOOL UNIFORMS”
ClothingDirect.com.au
"
Clear, benefit-­‐‑focused nav
"
Why shop with us promo
"
Delivery/service up front
"
Live chat
"
Testimonials
"
Good photography
"
Easy to use sizing/ordering chart

45. REFERENCES
:MOBILE WEB E-COMMERCE
Reference sites include:
•
hjp://built.bymoby.com/
mobile_checkout/
•
hjp://mobile.fandango.com/movies?
&from=home&aid=EMBEDDEDPAGE
0&ITEM_KEY_ID=
•
hjp://m.dillards.com/search
•
hjp://m.crateandbarrel.com/
•
Asos
•
Net a Porter
•
hjp://vsco.co/