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.

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.

4. Prototype
http://invis.io/PYLCHE6X

5. Conceptual ideation

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

8. Personas

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 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. 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.

14. Navigation Schema
Header Navigation
Footer Navigation

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.

18. Prototype - Home Page

19. Prototype - Home Page - Decisions

20. Product Gallery Page

21. Product Gallery Page - Decisions

22. Product Page

23. Product Page - Decisions

24. Check Out Flow Page