CLIENT
A new internet retailer for schools and parents who want a modern school uniform for k-12 children. It offers updated uniform fashion.
PROBLEM TO SOLVE . SCOPE
Design the experience of shopping online for school uniforms, creating a prototype for a website.
Increase engagement and return users.
Show what they need to see? The order they need to process information?
○ Sitemap
○ Key screens & wireframes (product page & checkout)
○ Checkout
MY ROLE .
UX UI designer, define problem, research
PRIMARY TOOLS .
Hand sketch + Omnigraffle
METHODS .
Whiteboard, design studio, interviews, paper prototypes
FIELD STUDY
Brand Identity
service
easy
quality
stylish
lighthearted
open
fresh
curated
friendly
"There when you need us but not in your way "
Business Goals
Increase user engagement
Increase brand awareness
Attract new customers
Retain customers
Return customers
Looking to expand
Increase traffic
Improve the experience
ATTRACT NEW
CUSTOMERS
INCREASE TRAFFIC
RETURN CUSTOMERS
INCREASE BRAND AWARENESS
Opportunity for growth
High School colors
Athletic wear
Spirit wear
School colors
User Goals
mind reading/intuitive
fast
high quality
cheap
stylish
INTUITIVE
CHEAP
VALUE vs VALUES
Customer
High-middle to upper-class.
Professional
Teens and Tweens are
Tech savvy
Asperational
Stylish
Public Schools
Private Schools
Stylish
Tech Savvy
Aspirational
USER PERSONA
TECH SAVVY
John is a single dad
-
He's an online clothes shopper.
-
Avoids large department stores.
-
Stays with certain brands (Gap and Joe Browns).
-
Because he is familiar with their fit and sizing.
-
And that's practical.
SPENDY
FRUGAL
TECH AVERSE
Lisa is a big girl now.
She wants to be part of the shopping experience.
Her dad is a single parent and doesn't have much time to shop for her school clothes.
Lisa is getting picky
True Spirit makes it easy for her to be part of the experiance school shopping.
Giving her a sense of control
she normally lacks being a kid
Design Studio | Concepts
People need something to bring them back every season
Like Magic!
Get Body Measurements by
Taking a Selfie,
Then Virtually Try on Uniforms, like a paper doll.
Because Kids Grow Fast and thier sizes often change.
1.
Initial Concept
rapid visualization
2.
concept paper prototype
+ Tested
3.
exploration
+ tested
24 hour detinate Photo | Photo lives on Computer
3d with Kinect. PlayStation Move. Wii: Motion-Control
4.
Hi Res Prototype
The Idea
Came from observing my niece playing with a DRESS-UP fashion app for hours on her ipad.
Hypothesis
Combining the play of a fashion app with a real life shopping experience should create excitement with parents and children alike
Test Results
After 3 rounds of testing, my hypothesis was validated in this small sample.
USER FLOWS AND WIRE FRAMES
user flows & forms checkout process
○ Sketches & Proof of ○ Ideation Process
○ Proof of design iterations
○ Key screens & wireframes (product page & checkout)
○ Checkout user flows
● Clickable Prototypes
Major Dates & Milestones:
● Rough Sitemaps and Wireframe for home, category and product detail
● Rough Wireframes Week
home page
wireframes
represent the layout of different
elements on a given
product’s page.
● global navigation
● global header
● global footer
● image (placeholders)
● ability to change the image gallery
● product title
● full description
● shipping info
● related products
● other customers viewed
● a progression and back option
Create the Flow
1st Iteration
Persistent Expandable Side Filters
Persistent filters on all pages.
Side menu
MOBILE FIRST thinking
Shop by objective
TESTING & INTERVIEWS
RESULTS
reduced profile of the Nav bar by hiding the
menu in to a MOBILE FIRST responsive Shopping Site.
Collapsible Nav and further refinement of filters
2nd Iteration
Compressed Expandable Top Filters
Persistent dropdowns unless compressed
Introduced Curated shopping
The Checkout
Checkout process keeps customers focused on finalizing the transaction.
The checkout forms were created with relevant design heuristics in mind, including feedback.
Tested
People didn't like the hidden Top Nav Bar because they felt it hasn't been universally adopted yet.
3nd iteration
Iterate for Discovery Iterate for Delivery
reduced profile of the nav bar and further refining of filters