2. OVERVIEW
Learnings
The project enabled me to
research and explore best
practice for:
• User Flows & Experience
mapping
• Usability for Mobile web/touch-‐‑
friendly interfaces
• Form design
• Lean Checkout process design
• Team workshop management
About the Project
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.
I worked as part of a student
team but the design deliverables
presented are my own.
6. 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.
7. 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.
9. 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
13. PERSONAS
ANALYSIS
John
Returning
Customer, Pragmatic
Purchaser
Sarah
First time
Customer, Savvy Spender
Jess
School Administrator
Needs •! Value
•! Easy returns
•! Credibility/Trust
•! Checklist of all
required uniform
items
•! B2B service
•! Quality
•! Range
Functionality •! Comparison pricing
•! Discounts
•! Essential uniform
bundle for a school
•! Other parents advice/
testimonials
•! Add/Edit school info
and uniform
requirements
Features •! Member’s Account
•! Express check-out
•! Email auto-
responder offers
•! 1-click bundle buy
•! iPad optimised
•! Save to Wishlist
•! Email reminders
•! Product bundle
order form
•! School collateral
upload
•! Catalogue download
rahhn
19. THE SOLUTION
Design a household calendar app that enables
Deepa and Sam to co-‐‑ordinate tasks easily.
QUICK CLICKABLE PROTOTYPE
20. 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
34. 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:
Home screen
Express
checkoutProduct listing
Adds to cart
Signs up for
newsletter
Signs
In
Views
Browse
Product page
Selects
Gives True
Spirit a great
review
Shipping and
returns policy
Order
confirmat
ionProceeds to
checkout
38. 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
39. 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