True Spirit Website
E-commerce Web Design March 2014 2 weeks
- User interviews
- Competitive analysis
- Qualitative Analysis: affinity diagram, personas, feature prioritization.
- User testing
Sketching Prototyping Balsamiq Invision
Create an e-commerce website for a new internet retailer for schools and parents who want a modern school uniform for K-12 children. True Spirit offers updated uniform fashion including pants for girls and zip-up 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.
The exploratory research consisted in a competitive analysis and user research on social media. I found out that unlike the common fashion shopping that is a relaxing and enjoyable activity for most of women, uniform shopping is stressful and tiring.
Some of the main concerns of parents regarding the uniform shopping are quality, returns and certainty that they are following school dress code.
Based on the research and personas provided, the 3 key points designing the True Spirit e-commerce site were:
- Provide certainty and security for parents
- Offer an enjoyable and comfortable experience
- Provide an efficient purchasing experience and reliable customer service
User flows and sitemap
User flows were defined to illustrate the way users select and interact with the custom school sites.
User flow diagram
The sitemap and navigation schema include the restricted areas of the application, to access this sections the user needs to login to access.
Scketching and concepting
The biggest challenge in this project was to integrated the custom school sites keeping True Spirit as the principal brand and create a customizable and easy to replicate system for hundreds of different schools.
I tried different concepts for the school search form and several ways to show the results. The final iteration integrates the school name and logo in a lower hierarchy than True Spirit brand.
Customized school site search
I created a clickable prototype with Balsamiq and Invision for user testing and validation of the interaction models. Go to True Spirit Invision Prototype to try it.View Prototype
Wireframes and documentation
Complete documentation with annotations for the development team were also created.