TrueSpirit.com Case Study

217 views

Published on

Student project for website design for TrueSpirit.com, school uniform company.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
217
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TrueSpirit.com Case Study

  1. 1. Design by: Roxanne Mustafa Student Project #2: General Assembly UXDI Winter 2013
  2. 2. About the Product: 
 True Spirit is a school uniform company that offers updated uniform fashions including pants for girls and zip-up hoodies. True Spirit provides a checklist of “must have” items from the school’s administrator for each school year and recommends accessories allowed by the school dress code. Unlike traditional suppliers, True Spirit encourages visitors to express their tastes, with some limits. The Brand was described as light, modern, lighthearted, open, appealing, friendly, curated, available but not in the way. About the Project: We were asked to make a website that reflects True Spirits goals. The website needs to reflect the company’s easy returns and quality products that are true to size. True Spirit also wants to reflect a fostering of community by supporting education through scholarship programs. In addition, we were given 3 user personas and were asked to build the website based on these three personas. The website needs to reflect the brand goals of service, quality and community.
  3. 3. ! CASE STUDY
  4. 4. RESEARCH METHODS ! •  ompetitive Analysis C ! •  ard Sorting C ! •  ersonas P ! •  cenarios S ! ITERATIVE •  ser Flows U ! •  ite Maps S ! •  ireframes W !
  5. 5. Competitive Analysis! Findings:! Some sites had clothes more prominent while others featured children more.! Clothes-Centric Cites tended to be clean, bold, colorful yet simple design.! Children-centric sites were minimalist, 2 color scheme, fun design, a lot of white space, school searches were prominent. Assistance was the forefront for all.! Complimentors: People were Prominent, fun poses, clear, white and black, minimalist design, white Backdrop! Opportunities Identified:! To blend the fun children centric sites with the simplicity of the clothes prominent sites. Make the website clean, simple and minimalist, simplicity and ease of use in all decisions. This can be done with:! •  irect Product Links! D •  lear Fun Design! C •  hildren at Forefront! C •  arge simple Menus! L •  ustomer Service! C
  6. 6. Card Sorting
 What is the Global Navigation?!
  7. 7. Personas!
  8. 8. Scenarios! Method: ! Sketched out a storyboard for Sara’s user flow, the main user persona for my prototype.
 Findings:! Users should have access to checklist. User should have ability to store a profile and have option to add another child to profile.! Opportunities Identified:! User must be taken through the login process with ease in order to set up child profiles and identify items for each school’s code.! When logged in, user must also be informed of checklist items and notified when non-school code “must-have” items are purchased. !
  9. 9. Design Iteration 1:
 Site Map
 User Flow
 High Level Mock Ups! Method: ! Created site maps, high level user flow, then mockups of wireframes to outline different user paths.! Findings: 
 John’s Flow was School Code Centric, Sarah’s flow was product centric! Opportunities Identified: ! The website must allow for browsing with school access codes and without. The site must allow for customization for the high tech user and simplicity for the low-tech user. !
  10. 10. Design Iteration 1:
 (continued)
 Site Map

  11. 11. Design Iteration 2:
 High Fidelity Wireframes! Method: ! Created Wireframes for main pages of user flows.! Findings: 
 Both users ended up browsing items school specific and non-specific items, ie, both users need to be able to access the school landing page and the general product browser page.! Opportunities Identified: ! Create the home page so that a user can access school items and general items from the beginning. Make sure the items have equal weight. Let the user decide which type of customer they want to be.! Do not forget to give the school administrators access from the home page.!
  12. 12. Prototype: http://invis.io/7PLFGTJA
 Method: ! The prototype was created in Invision software. Main user flows including checkout were traced. I conducted several usability tests.! AWARENESS 
 Needed to improve upon flow and ease of use. Some lay out issues to make choices more functional.! CORE PRODUCT EXPERIENCE! User task of picking out a shirt within school code without setting up an account yielded quick results with functional buttons. Comparison to school checklist was convenient and did not interfere with the shopping experience. Logging into account at the end as a guest was not distracting and allow user to focus on path to purchase.!
  13. 13. True Spirit Invison Prototype
  14. 14. THANK YOU
 ! ROXANNE MUSTAFA
 mustrock@me.com

×