“TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K12 children. It offers updated uniform fashion including pants for girls and zipup hoodies, provides a ‘must haves’ checklist from the school’s administrator for each school year, and recommends accessories allowed by the school’s dress code. Unlike traditional suppliers such as Lands End and True Grits, True Spirit encourages visitors to express their tastes—with some limits.”
Time Constraint
2 weeks
Deliverables
- User flows, sitemap, and navigation schema
- Mockups of the homepage, a product page, and the checkout process
- Clickable prototype
Proposed Solution
An eCommerce site that simplifies the uniform shopping experience for parents with children in private or public school, while trying to keep their experiences from overlapping significantly. It features tools to help parents quickly locate their school if it has an agreement to sell school branded items with True Spirit, as well as a visual product search for parents who don’t quite know what they’re looking for.
Competitor research
The two main competitors in the uniform space are Lands’ End and French Toast, which, while perfectly usable, don’t do anything particularly innovative with regards to school shopping, and could possibly prove slightly overwhelming to parents unaccustomed to uniform shopping.
Another recurring issue with many eCommerce sites (not specifically clothing stores) is a fairly long and involved checkout process, even Amazon’s is six or more screens in most cases.
Personas
We were provided several personas to design for.
John: Public School Dad
Sarah: Private School Mom
Sketches and Ideation
Due to the time constraints and large number of mockups required for this project, my process involved going directly from basic ideation and user flows, to sketches, and then to high fidelity mockups.
Site Features
The landing page features multiples ways for parents to find their children’s school, including a list of nearby schools based on the user’s geolocation data.
The checkout process has been reduced to only two pages, which present pricing info in a clear and easily readable format.
A visual search to assist parents less familiar with uniform shopping, where users can drag and drop attributes (color, material, pattern, etc.) onto a picture and get similar products. Users can of course opt for a more traditional browsing experience as well.
Testing and iteration
The most glaring issue I found through user testing was that some people had trouble understanding how the visual search feature worked. To remedy the problem I added an unobtrusive tutorial animation that plays when someone uses the visual search for the first time.