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

© 2015    Charles    Perretti   Design    Build

 

charlesperretti@icloud |   San Francisco, CA 94122  |   Tel: 415-359-7545   

 To see my previous Product Design portfolio   www.perrettidesign.com