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

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

Competitor analysis

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

Information Hierarchy

Personas

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 daughter2. Mother is sent an email from the school administrator with a list of acceptable clothing for the school.3. Checkout process

Design Iterations

User Flow 1 - John1. 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.

User Flow 2 - Sarah2. 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 Process3. 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 daughter2. 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 wellChange 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