Successfully reported this slideshow.

True Spirit Case Study - Student UXDi Project 2

398 views

Published on

This a student case study. The True Spirit website lets parents and kids choose their uniform. By letting them choose their clothes and then checking their choice suits their school.

THE CHALLENGE
Design a prototype website.

THE SOLUTION
A prototype that demonstrates the True Spirit buying process and check out process.

Published in: Design, Technology, Education
  • Be the first to comment

  • Be the first to like this

True Spirit Case Study - Student UXDi Project 2

  1. 1. Student Project by Richard McMurray 20/12/13
  2. 2. The True Spirit website lets parents and kids choose their uniform. By letting them choose their clothes and then checking their choice suits their school. THE CHALLENGE Design a prototype website. THE SOLUTION A prototype that demonstrates the True Spirit buying process and check out process.
  3. 3. Key Screens and Features designed The three main pages designed were the home page, a product page and a checkout process.
  4. 4. Prototype http://invis.io/PYLCHE6X
  5. 5. Conceptual ideation
  6. 6. Competitor analysis Method: Swot Analysis of UK clothing companies. Harrods, Patched Elephant, John Lewis, Uniform swap, Your School Uniform.com, Tesco, TK Maxx and Toms Shoes Findings: - There is a second hand uniform market - All websites have similar category types for picking school uniforms - Some vendors are affiliate (eg John Lewis with Clarke shoes) - Harrods had a very good school navigation experience. However only designed for 8 schools. - Second hand marketplace use advertising and ebay style business models but the navigation experience is hard. It is complicated. - Major supermarkets all compete on price Opportunities identified: - Second Hand market websites have an opportunity to create a better user experience. - Using the Harrods school navigation style as a function - Toms shoes layout style
  7. 7. Information Hierarchy Method: Card sorting exercise and site map generation Findings: - School uniform categorising can be done in many ways and it depends on the user goals
  8. 8. Personas
  9. 9. Design Iterations Method: Using Omnigraffle and InVision to create high fidelity online prototype. Two iterations were completed. Three Hypotheses were created and tested for prototype website: 1. Father visits website to purchase a white polo shirt, and blue pants for his daughter 2. Mother is sent an email from the school administrator with a list of acceptable clothing for the school. 3. Checkout process
  10. 10. User Flow 1 - John 1. Father visits website to purchase a white polo shirt, and blue pants for his daughter Method: Drawing out the user flow for John using their persona and according to other websites, iterations were then made to create the True Spirit experience for father who wants to buy quickly but with input from his daughter. Findings: - John has two decision points and if one of these doesn’t work the flow breakdown for his buying experience. Opportunities identified: - There could be reminders for other goods to buy to make the daughters clothes more customised.
  11. 11. User Flow 2 - Sarah 2. Mother is sent an email from the school administrator with a list of acceptable clothing for the school. Method: Drawing out the user flows according to Sarahs persona and using other websites, iterations were then made to a user flow for a mother who is new to buying a school uniform. Findings: - This is a complete package for a new pupil - The process needs to be simple and for all items to be included to reassure Sarah. Opportunities identified: - Create a new pupil experience option
  12. 12. User Flows 3 - Checkout Process 3. Checkout process Method: Drawing out the user flow for the check out process according to other websites, iterations were then made to create the True Spirit experience and deliverables Findings: - Looking at other sites like Toms Shoes. A three step process was felt was quickest for a user. - Users need to be able to go back at any time in the process. Opportunities identified: - Create a good end to the buying process. As user will remember this.
  13. 13. Site Map Method: Card sorting exercise at the start of the process created the site map this was then constantly iterated using personas and user flows. From this a navigation schema was designed.
  14. 14. Navigation Schema Header Navigation Footer Navigation
  15. 15. Navigation Schema - Design Decisions
  16. 16. Design Research | Usability Testing Method: Testing the Three Hypothesis through usability testing. Short interviews with prepared questions and remote testing using InVision software was used. Three Hypothesis: 1. Father visits website to purchase a white polo shirt, and blue pants for his daughter 2. Mother is sent an email from the school administrator with a list of acceptable clothing for the school. 3. Checkout process
  17. 17. Design Research | Usability Testing Findings: Polo shirt task - Some people want to search by top down navigation and some by search. The flow through top down menu worked ok. Colours need to be added to product shirt page and product page carousel did not communicate colour choice. Change colour of add to bag button Basket needs to change when item added. School filter did not communicate well Change colour of add to bag button Checkout Task - This task worked with all but one user. Opportunities identified: Check out Process can be made to look less like a form. Typography spacing to allow quicker decision making. Change carousel function to be different product pictures.
  18. 18. Prototype - Home Page
  19. 19. Prototype - Home Page - Decisions
  20. 20. Product Gallery Page
  21. 21. Product Gallery Page - Decisions
  22. 22. Product Page
  23. 23. Product Page - Decisions
  24. 24. Check Out Flow Page

×