uxdi sydney - project 2 mobile web prototype
DESCRIPTION
The TrueSpirit Project is the second project of the General Assembly User Experience Design Immersive program. In our group of four, we were tasked with designing the experience of shopping online for school uniforms for mobile web. We were provided with personas and scenarios as part of the briefing process. This Case Study documents our journey and design thinking as a team.TRANSCRIPT
1
TRUESPIRTCASE STUDY_
Design by: Cheryl Lee, John Hayward, Kathryn Sadler and Nicole Commander
Student Project 2 General Assembly UXDi Sydney
January 2014
Spirittrue SCHOOL UNIFORM COMPANY
A new internet retailer for schools and parents who want a modern
school uniform for K-12 children.
10
2
TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children. It 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.
The TrueSpirit Project is the second project of the General Assembly User Experience Design Immersive program. In our group of four, we were tasked with designing the experience of shopping online for school uniforms for mobile web. We were provided with personas and scenarios as part of the briefing process. This Case Study documents our journey and design thinking as a team.
ABOUT THIS PRODUCT_
ABOUT THIS PROJECT_
3
COMPETITIVE ANALYSIS_
COMPETITORS
Current uniform websites are a mess - They’re dated in style, cluttered and require the purchaser to know what they’re looking for before proceeding.
TRUE SPIRIT
In contrast True spirit brand values are: fresh, modern, appealing, lighthearted and there when you need us but not in your way.
4
KEY PERSONAS_
SARAH
PROBLEM STATEMENT
Sarah is a busy mum with limited time who needs to know what she is ordering the right items to help her son fit in at his new school.
TARGETED SITE FEATURES
— Direct link to ‘complete uniform pack’ for son’s school simplifies the buying process.
— Saved Items - she can review later (at work or at home).
— Quality & Care and Size Chart pages for buyer education.
— Clear links to Shipping & Returns information.
JOHN
PROBLEM STATEMENT
Organised and thrifty dad who needs a systematic, informed experience to purchase his daughter’s uniform in an easy and quick manner.
TARGETED SITE FEATURES
— Saved Items enables John to review and discuss items with daughter later in the day.
— Efficient check-out process and site design similar to GAP and Amazon (favoured brands).
— Emailed payment confirmation includes tax invoice details.
JESS
PROBLEM STATEMENT
Experienced private school administrator who needs a simple online provider to meet the parents’ needs with a range of quality and value uniforms.
TARGETED SITE FEATURES
— Product ratings show parents are satisfied.
— Product details page shows several images, with zoom feature and detailed description.
— Simple navigation to school’s own landing page with acceptable items.
Spirittrue
Sarah is new to private schools Sarah and her husband work hard to make a great life for their family. Their oldest son, Josh, 14 is about to attend St. Luke’s, the best private school in the area, which also happens to be a Catholic School. Sarah went to public school and is a little overwhelmed.
MONEY MATTERSSarah and her husband have two main credit cards they use to get airline miles and separate bank accounts as they divvy up bills. !They have some school loans to finish paying but have been fortunate to not have any credit card debt.
CLOTHES PURCHASING BEHAVIOURSarah shops online for convenience when possible, but loves a good in-store experience.
TECH-LIFESarah is a digital project manager and is in meetings all day. She doesn’t have much time to browse for online products except for her lunchtime. She likes to save items while browsing and purchase them at the end of the day. !She uses a MacBook Pro for home and work, an iPhone, and an iPad for late night games and news reading.
“I want our family to fit in.”
“I hope I’m ordering the right things.”
DRIVERS
CONCERNS
NEW TO UNIFORMS
WEB!MOBILE! PRAGMATIC PURCHASER!!
TECH AVERSE
TECH SAVVY
SPENDYFRUGAL
Provide clear way to find son’s required clothing.!!Educate about care, comfort and fit.!!Provide a clear way to make returns.!
Sarah
Spirittrue
JohnJohn is a single dad of a daughter who is starting secondary school. He is comfortable with online shopping & likes it because it is easy. Now that his daughter is getting older she is having more input into outfit choices.
MONEY MATTERS
John likes to keep things organised, and to live within his means and budget. He has two main credit cards and a debit card, which he uses the vast majority of the time. He prefers to bank with his community credit union. He is very practical in his approach to finances and purchasing.
CLOTHES PURCHASING BEHAVIOURJohn tries to do as much of his clothes shopping online in an effort to avoid large department stores, where he doesn’t feel at home. He tries to stay with certain brands (Gap and Joe Browns) because he is familiar with their fit and sizing, and this is practical.
TECH-LIFEJohn refreshes his system every few years, usually when his old technology is no longer efficient. As a single dad he has to keep to a budget. !He has a PC desktop at home which he shares with his daughter. He is considering buying an iPad for his daughter as he sees it as a valuable educational tool.
“I like the efficiency of online shopping.”
“I want to have enough information so that I know I’m buying the right thing.”“Clothing should be reasonably priced.”
DRIVERS
CONCERNS
EXPERIENCED
WEB!MOBILE!
Make the process efficient.!!Leverage existing relationships with retailers.!!Ease of return/exchange process is really important. !
TECH AVERSE
TECH SAVVY
SPENDYFRUGAL
He works with a large, stable company as an accountant and uses a Windows laptop and phone at work. Although his days are pretty busy, he works independently quite a bit, and can usually find time to take care of small tasks throughout the day.
SAVVY SPENDER!!
Spirittrue
JessJess is an administrator at a private school. She has been working at the school for 3 years & has gotten to know the children & parents. This year she has been tasked with finding a range of vendors who are able to meet the parents’ demands as well as provide uniforms which are reflective of the school vision, goals, and spirit.
MONEY MATTERSPersonally, Jess is a bargain shopper. She only buys what she can afford, and having 2 children in university, she understands how expensive it is to have children in education. She pays for many things with cash, and has only one credit card which she uses sparingly, and pays it off immediately.
CLOTHES PURCHASING BEHAVIOURAlthough she is very comfortable with technology, and browses clothes online, she is a very tactile person and prefers to purchase clothing in-store. She loves the shopping sites which can check in-store inventory for items. Matalan is one of her favourite stores for the house, although she often shops for socks and pyjamas there as well. Banana Republic is her favourite when shopping for herself, because it is a good combination of quality and reasonable pricing, especially because during their semi-annual sales. Knowing that it is convenient for many parents to shop online, she has been tasked with finding online uniform vendors. She has a set of price requirements which the school uniform vendors and online retailers must meet, as well as quality and look for the uniforms.
TECH-LIFE She uses mostly Apple products, although she recently switched to a Samsung phone, which she loves. !At work, she has an iMac and at home she has an older Mac Book. She loves to read using her iPad in the evenings and mornings, catching up of news and some email before heading into work.
“I want to make sure the parents’ needs are met, alongside admin goals.”
“Giving parent choice in their purchases, while meeting quality and price goals.” “Making it easy for shoppers to find items.”
DRIVERS
CONCERNS
ADMINISTRATOR
WEB!
Be clear about the offering, providing great images and multiple views, as well as detailed description of items. !!Wide range of price and quality of items, to meet various budgets and tastes. !!In-store location is a bonus. !!
TECH AVERSE
TECH SAVVY
SPENDYFRUGAL
5
We were provided with two scenarios to consider as part of the briefing process:
— Father (Persona John) visits website to purchase a white polo shirt, and blue pants for his daughter
— Mother (Persona Sarah) is sent an email from the school administrator with a list of acceptable clothing for the school
SCENARIOS & USER FLOWS_
Initial sketched up user flows
User Flow : John
Visits website home page
Selects ‘Girl’s Uniform items’
Views items on Girl’s Uniform page
Selects Polo Shirt
Views Polo Shirt Detail Page
Selects size, quantity and colour
Selects ‘Girls’
Selects Pants
Views Pants detail page
Views user rating
Adds to cart
Reviews cart items Reviews with Daughter
Adds to wish list
Proceeds to Checkout
Edits items
Views ‘Related Items’ on
Product Detail Page
Moves back to ‘Girls’ from
Breadcrumb trail
Adds to cart
User Flow : Sarah
Receives email
Follows link in email to home page
Searches for Schools Complete Uniform List review page
Views items on School Landing
Doesn’t have access to school issued email
Selects items(size, quantity, colour)
Adds to cart
Proceeds to checkoutEdits Items
Googles ‘< School Name > uniform’
Follow link in email to school page
Sarah’s final user flow John’s final user flow
6
ITERATIVE DESIGN PROCESS_
7
IDEATION & TEAMWORK_
8
PAPER SKETCHING - ITERATION 1_
Paper sketching was a quick and rough process. The goal was go get as many ideas / layout variations down on paper as possible, providing us a starting point to adapt/ dismiss ideas as a group.
It was a collaborative process that allowed us to pushed ideas forward, only to realise the variations we had created a few sheets of paper earlier where better aligned to our user problems.
9
WIREFRAMES - ITERATION 2_
Wireframing in Omingraffle enabled the team to refine ideas, get a true sense of scale and add greater detail to our pages and include animations to our prototype allowing us to guerrilla test our prototype.
Changes that resulted from wireframing prototype included 1-clik ordering, an layout change to the global navigation items and greater detail of con-tent on our Product Detail pages.
10
The site design evolved as we learnt new tools and processes.
— Initial design had discoverable icons in the primary global navigation - we removed this ‘mystery meat’ content and moved the links to the global navigation.
— A side filter was considered during the early sketching phase but this was removed to allow for wider columns, simplifying the page layout for iPad.
— Initial sketched had a complex multi-step check-out process - this was simplified into a 3-step process for new users and a ‘1-click’ process for registered users.
— Catered for different user browsing styles by providing the following navigation options: search, related items on Product Detail pages, global navigation and contextual navigation via breadcrumbs.
— Simplified content viewing via scroll pages, drawing on existing iPad conventions of natural scroll, rather than linking to multiple pages.
ITERATIVE DESIGN PROCESS_
Login
LOGO
LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT
EXISTING CUSTOMERS
CONTINUE
New to True Spirit.com.au?
OR
MYSTERY MEAT CONTENT
NAVIGATION
11
SHOPPING CART USER JOURNEYS & FLOWS_
Check Out User Flow
Proceed to Checkout
Login
Billing Address & Order Summary
Delivery Address
Payment Method
Submit my order
New User
Payment Confirmation
My Account
12
NAVIGATION SCHEMEA
True Spirit Logo Hi SarahMy Account | My Bag $0.00 (0) | Saved items
Schools SearchBoys Girls Merchandise
Tops- Formal Shirts- T-Shirts- Polo Shirts- Tank Tops- Jackets- Sweaters- Hoodies- Logo T-Shirt- Logo Hoodie
Bottoms- Pants- Shorts- Gym Shorts
Accessories- Backpacks- Logo iPhone Case- School Plush Toy
Logout
About Us Quality & Care Shipping & Returns Size Chart Customer Helpline 1800 000 123
Legal | Quality & Care | Size Chart | Shipping & Returns | FAQ | Privacy Policy | Site Map Contact Us
Home > St Luke’s > Boys Essential Uniform > Polo Shirt
Home > Girls > Tops > Polo Shirt
Home > St Luke’s > Boys Essential Uniform > Shopping Bag
GLOBAL NAVIGATION
SECONDARY NAVIGATION
PRIMARY NAVIGATION
FOOTER NAVIGATION
BREADCRUMB NAVIGATION
13
GUERRILLA TESTING OF PROTOTYPE_
The prototype was guerrilla tested during a class workshop. Our participants included Mitch, the in-class teacher assistant and Brian, a volunteer from the start-up businesses in the same building as General Assembly. It is noted that both participants are not in the target demographic for website users, with the primary reason for guerrilla testing was to test prototype functionality.
Each participant was provided with the following scenario and were asked to explain out loud their thought process.
“You are Sally Smith, a mother of a son who is about to start high school at a private boy’s school. You have been provided a list of uniform items that need to be purchased. Would you like to purchase the full list, who would you proceed next?”
Participants were also asked where they expected to journey next in the website, before touching a button to proceed.
Participant feedback included:
— Purchase as guest option would be better than requiring new users to log in.
— Post-purchase - users expected information about delivery time frames and tracking details.
14
TEAM WIREFRAME PROTOTYPE_
15
TEAM WIREFRAME PROTOTYPE_
Related Items
Item Description Item Description Item Description Item Description
Go to shopping bag
Add to shopping bag and go to next item
$00.00Item DescriptionLorem ipsium a la vélo esque tu a voulez fair avec moi ipsium a la vélo esque tu a voulez fair avec.
Quantity
Colour
Size
1
3-4yrs $25.00 - In Stock: over 10
Uniform Detail
LOGO
SCHOOLS GIRLS MERCHANDISE
QUALITY & CARE SHIPPING & RETURNS CUSTOMER HELPLINE 1800 000 000
SIZE GUIDE
My Account | My Bag $0.00 (0) | Saved ItemsLogin | Register
ABOUT US SIZE CHART
Log in for 1-Click Ordering iAdd to saved items
_________
_____________________
+-
HOVER OVER TO ZOOM
LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT
___________________________
ST LUKES
BOYS
BOYS ESSENTIAL UNIFORM UNIFORM DETAILSHOPPING BAG
Related Items
Item Description Item Description Item Description Item Description
Go to shopping bag
Add to shopping bag and go to next item
$00.00Item DescriptionLorem ipsium a la vélo esque tu a voulez fair avec moi ipsium a la vélo esque tu a voulez fair avec.
Quantity
Colour
Size
1
3-4yrs $25.00 - In Stock: over 10
Uniform Detail
LOGO
SCHOOLS GIRLS MERCHANDISE
QUALITY & CARE SHIPPING & RETURNS CUSTOMER HELPLINE 1800 000 000
SIZE GUIDE
My Account | My Bag $0.00 (0) | Saved ItemsLogin | Register
ABOUT US SIZE CHART
Log in for 1-Click Ordering iAdd to saved items
_________
_____________________
+-
HOVER OVER TO ZOOM
LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT
___________________________
ST LUKES
BOYS
BOYS ESSENTIAL UNIFORM UNIFORM DETAILSHOPPING BAG
16
TEAM WIREFRAME PROTOTYPE_
Login
LOGO
LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT
EXISTING CUSTOMERS
CONTINUE
New to True Spirit.com.au?
OR
Login
LOGO
LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT
EXISTING CUSTOMERS
CONTINUE
New to True Spirit.com.au?
OR
17
TEAM WIREFRAME PROTOTYPE_
18
TEAM WIREFRAME PROTOTYPE_
Your order has been successfully placed. An email confirmation has been sent. Your order
number is XXXXXX for your reference
Thank you for registering and shopping with us.
Confirmation
Confirmation
You have successfully registered and placed your order. An email confirmation has been sent with your
invoice. Order number XXXXX for your reference.
Return to the home page.
LOGO
LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT
