The Project:
True Spirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children. It offers updated uniform fashion including pants for girls and zipup hoodies, provides a “musthaves” 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. The task was to think through the process and design the experience of shopping online for school uniforms. Create a prototype of a website that fits their brand and provides a good user experience for their customers.
Client: True Spirit
Designer: Taylor Alderson
Duration: 2 weeks
Programs used: InVision, Omnigraffle
My Role:
UX Designer:
Competative Analysis
Cardsorting
Create user flows
Wireframing
Usability testing
Click-through prototype
Annotations
UX Designer:
Competative Analysis
Cardsorting
Create user flows
Wireframing
Usability testing
Click-through prototype
Annotations
The Challenge:
Dress codes can be very specific, and vary widely by school. In addition, parents may or may not have previous experience with uniforms or understand the process at all. The challenge was finding a way to make it easy for parents to find their school and select the right items for their student without too much effort on their part and without overwhelming them with information.
The Process:
1. Discovery and Research
Background Information:
I was provided with a brief and 3 personas – 2 parents, and a school administrator. Efficiency and simplicity were big with everyone. Parents want assurance they’re getting the right items and right fits for their students, and school administrators wanted to give parents choice, but keep the whole process simple on the admin and parent side.
In order to better understand the client and the personas I sketched out some mind maps for each.
Competitive Analysis
I compared school uniform sites, and many other e-commerce sites, documenting browsing, shopping by school, shopping carts and checkout flows. Uniform-only sites tended to be tough to navigate and had roadblocks, forcing users to look up their school code just to browse.
Solution Statement:
Design a TrueSpirit website that is easy to navigate, while keeping in mind the different users’ goals and needs. Present their unique brand and provide a enjoyable user experience.
Sitemap
I had classmates and other people card sort the inventory list I'd been given. Everything was going smoothly til they got to the unisex items like accessories and school-branded shirts. Ultimately I divided inventory into just 2 overall categories: Girls, Boys. I then organized everything into categories under those.
User flows
Based on the documentation, I put myself in my personas’ shoes and sketched out possible user scenarios:
Father visits website to purchase a white polo shirt, and blue pants for his daughter.
Mother is sent an email from the school administrator with a list of acceptable clothing for the school
Mother is sent an email from the school administrator with a list of acceptable clothing for the school
I uncovered the different paths users might take through browsing and searching, and looked for ways to streamline school code lookup, browsing and checkout.
Initial Sketches
I sketched out low-fidelity wireframes of key screens and tested them with classmates in a participatory design session.
Keeping things simple to understand, and thus navigate, was easier said than done – there are many variable to consider when trying to choose what clothing items your child needs for school. One of the biggest challenges was designing something that could accomidate many different school codes.
I tested paper on classmates and went back and reassessed designs based on original user goals. Some things weren't as crystal clear to users as I thought.
Wireframes:
I created digital wireframes and got further into the details, borrowing elements from the most effective sites I found in my competitive analysis.
Feedback was initially sought during several sketching rounds of increasing fidelity, where general layout was the focus. Once the design progressed into wireframing, more advanced elements such as interaction states and even copy were assessed.
