際際滷

際際滷Share a Scribd company logo

True Spirit Case Study - Student UXDi Project 2

Richard McMurray
Richard McMurray

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.

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 24
Download to read offline
Student Project by Richard McMurray 20/12/13
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.
Key Screens and Features designed The three main pages designed were the home page, a product page and a checkout process.
Prototype http://invis.io/PYLCHE6X
Conceptual ideation
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
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
Personas
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
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 doesnt 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.
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
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.
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.
Navigation Schema Header Navigation Footer Navigation
Navigation Schema - Design Decisions
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
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.
Prototype - Home Page
Prototype - Home Page - Decisions
Product Gallery Page
Product Gallery Page - Decisions
Product Page
Product Page - Decisions
Check Out Flow Page

More Related Content

True Spirit Case Study - Student UXDi Project 2

  • 1. Student Project by Richard McMurray 20/12/13
  • 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. Key Screens and Features designed The three main pages designed were the home page, a product page and a checkout process.
  • 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. 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
  • 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. 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 doesnt 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. 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. 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. 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.
  • 15. Navigation Schema - Design Decisions
  • 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. 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.
  • 19. Prototype - Home Page - Decisions
  • 21. Product Gallery Page - Decisions
  • 23. Product Page - Decisions