Your SlideShare is downloading. ×
UXDi Sydney - Project 2 Mobile Web Prototype
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UXDi Sydney - Project 2 Mobile Web Prototype


Published on

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 …

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.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. TRUESPIRT CASE STUDY_ Design by: Cheryl Lee, John Hayward, Kathryn Sadler and Nicole Commander Student Project 2 General Assembly UXDi Sydney January 2014 trueSpir SCHOOL UNIFORM COM A new internet retailer for and parents who want a m school uniform for K-12 ch 1
  • 2. ABOUT THIS PRODUCT_ ABOUT THIS PROJECT_ 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 “musthaves” 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. 2
  • 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. 3
 Sarah 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. 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. TECH-LIFE
 Sarah 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. EXPERIENCED DRIVERS “I want our family to fit in.” “I hope I’m ordering the right things.” TECH AVERSE FRUGAL SPENDY MONEY MATTERS
 TECH SAVVY ! She uses a MacBook Pro for home and work, an iPhone, and an iPad for late night games and news reading. CLOTHES PURCHASING BEHAVIOUR
 Sarah shops online for convenience when possible, but loves a good in-store experience. John is a single dad of a daughter who is starting secondary school. John CONCERNS 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. 
 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. TECH-LIFE
 John 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. DRIVERS “I want to have enough information so that I know I’m buying the right thing.”
 “Clothing should be reasonably priced.” TECH AVERSE FRUGAL Provide a clear way to make returns.! 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. 
 Make the process efficient.! ! ! MONEY MATTERS
 Personally, 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. 
 John 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. 
 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. ! DRIVERS “I want to make sure the parents’ needs are met, alongside admin goals.” CONCERNS “Giving parent choice in their purchases, while meeting quality and price goals.” “Making it easy for shoppers to find items.” TECH AVERSE FRUGAL 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. 
 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. ! ! Ease of return/exchange process is really important. ! 
 WEB! MOBILE! SPENDY TECH SAVVY Leverage existing relationships with retailers.! CLOTHES PURCHASING BEHAVIOUR
 Although 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. 
 WEB! MOBILE! Jess is an administrator at a private school. TECH-LIFE She uses mostly Apple products, although she recently switched to a Samsung phone, which she loves. SPENDY TECH SAVVY 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. ! Educate about care, comfort and fit.! ! Jess CONCERNS ! Provide clear way to find son’s required clothing.! ADMINISTRATOR “I like the efficiency of online shopping.” SAVVY SPENDER! ! 
 WEB! 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. 
 trueSpirit trueSpirit trueSpirit SARAH JOHN JESS PROBLEM STATEMENT PROBLEM STATEMENT 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. Organised and thrifty dad who needs a systematic, informed experience to purchase his daughter’s uniform in an easy and quick manner. 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 TARGETED SITE FEATURES TARGETED SITE FEATURES —— Direct link to ‘complete uniform pack’ for son’s school simplifies the buying process. —— Saved Items enables John to review and discuss items with daughter later in the day. —— Product ratings show parents are satisfied. —— Saved Items - she can review later (at work or at home). —— Efficient check-out process and site design similar to GAP and Amazon (favoured brands). —— Quality & Care and Size Chart pages for buyer education. —— Emailed payment confirmation includes tax invoice details. —— Product details page shows several images, with zoom feature and detailed description. —— Simple navigation to school’s own landing page with acceptable items. —— Clear links to Shipping & Returns information. 4
  • 5. SCENARIOS & USER FLOWS_ 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 User Flow : John User Flow : Sarah Sarah’s final user flow Follow link in email to school page John’s final user flow Receives email Follows link in email to home page Visits website home page Doesn’t have access to school issued email Selects ‘Girl’s Uniform items’ Views items on Girl’s Uniform page Googles ‘< School Name > uniform’ Selects Polo Shirt Views Polo Shirt Detail Page Searches for Schools Complete Uniform List review page Selects size, quantity and colour Adds to cart Views items on School Landing Views ‘Related Items’ on Product Detail Page Selects items (size, quantity, colour) Moves back to ‘Girls’ from Breadcrumb trail Selects ‘Girls’ Selects Pants Views Pants detail page Views user rating Adds to cart Adds to cart Adds to wish list Reviews cart items Reviews with Daughter Edits items Edits Items Proceeds to checkout Proceeds to Checkout Initial sketched up user flows 5
  • 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. 8
  • 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 content on our Product Detail pages. 9
  • 10. ITERATIVE DESIGN PROCESS_ 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. MYSTERY MEAT CONTENT —— 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 checkout 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. NAVIGATION —— Simplified content viewing via scroll pages, drawing on existing iPad conventions of natural scroll, rather than linking to multiple pages. 10 LOGO
  • 11. SHOPPING CART USER JOURNEYS & FLOWS_ Check Out User Flow Proceed to Checkout New User Login My Account Billing Address & Order Summary Delivery Address Payment Method Submit my order Payment Confirmation 1 1
  • 12. NAVIGATION SCHEMEA About Us Quality & Care Shipping & Returns Size Chart Customer Helpline 1800 000 123 Logout Hi Sarah True Spirit Logo GLOBAL NAVIGATION My Account | My Bag $0.00 (0) | Saved items Schools Tops - Formal Shirts - T-Shirts - Polo Shirts - Tank Tops - Jackets - Sweaters - Hoodies - Logo T-Shirt - Logo Hoodie Boys Bottoms - Pants - Shorts - Gym Shorts Girls Merchandise PRIMARY NAVIGATION Search Accessories SECONDARY NAVIGATION - Backpacks - Logo iPhone Case - School Plush Toy BREADCRUMB NAVIGATION Home > St Luke’s > Boys Essential Uniform > Polo Shirt Home > St Luke’s > Boys Essential Uniform > Shopping Bag Home > Girls > Tops > Polo Shirt FOOTER NAVIGATION Legal | Quality & Care | Size Chart | Shipping & Returns | FAQ | Privacy Policy | Site Map Contact Us 12
  • 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. 13
  • 15. TEAM WIREFRAME PROTOTYPE_ Uniform Detail Uniform Detail ABOUT US ABOUT US QUALITY & CARE CARE QUALITY & SIZE CHART SIZE CHART SHIPPING & RETURNS SHIPPING & RETURNS LOGO LOGO My Account | My Bag $0.00 $0.00 (0) | Saved Items My Account | My Bag (0) | Saved Items SCHOOLS SCHOOLSBOYS BOYS GIRLS GIRLS ST LUKES ST LUKES CUSTOMER HELPLINE 1800 000 000 000 CUSTOMER HELPLINE 1800 000 Login | Login | Register Register MERCHANDISE MERCHANDISE BOYS ESSENTIAL UNIFORM BOYS ESSENTIAL UNIFORM HOVER OVER TO ZOOM ZOOM HOVER OVER TO SHOPPING BAG BAG UNIFORM DETAIL SHOPPING UNIFORM DETAIL $00.00 $00.00 Item Description Item Description LoremLorem ipsium a la vélo esque tu a voulez fair ipsium a la vélo esque tu a voulez fair avec moi ipsiumipsium a la vélo esque tu a voulez avec moi a la vélo esque tu a voulez fair avec. avec. fair + + - - Quantity Quantity 1 1 Colour Colour Size Size SIZE GUIDE GUIDE SIZE 3-4yrs $25.00$25.00 - In over 10 3-4yrs - In Stock: Stock: over 10 _________ _________ Add to savedsaved items Add to items _____________________ _____________________ Add Add to shopping to shopping bag and go to to bag and go next next item item Log inLog 1-Click Ordering i for in for 1-Click Ordering i ___________________________ ___________________________ Go to to Go shopping shopping bag bag Related Items Related Items Item Description Item Description Item Description Item Description Item Description Item Description Item Description Item Description LEGALLEGAL | QUALITY & |CARE || SHIPPING & RETURNS | SITE MAP | FAQ | |CONTACT | QUALITY & CARE SIZE SIZE | SHIPPING & RETURNS | SITE MAP FAQ | CONTACT 15
  • 18. TEAM WIREFRAME PROTOTYPE_ Confirmation LOGO Confirmation You have successfully registered and placed your Your order has been successfully placed. An email confirmation has been sent. Your order sent with your order. An email confirmation has been number is Order number XXXXX for your reference. invoice. XXXXXX for your reference Thank you for registering and shopping with us. Return to the home page. LEGAL | QUALITY & CARE | SIZE | SHIPPING & RETURNS | SITE MAP | FAQ | CONTACT 18
  • 19. THANK YOU_ 19