TrueSpirit.

TrueSpirit’s new ecommerce experience offers convenience, curation, and a fresh approach to school uniforms.

THE BRIEF

TrueSpirit is a fictional online school uniform retailer. It offers updated uniform fashion and encourages students to express their tastes through accessory recommendations and contemporary fits. TrueSpirit needs an ecommerce experience that reflects its brand and makes it quick and easy for parents to buy uniforms for their kids.

What I Did

Competitive Analysis

Information Architecture

Responsive Design

Wireframes

Clickable Prototype

Usability Testing

A better way to shop for uniforms.

Dress codes can be very specific, and vary widely by school. The challenge was in finding a way to encourage students to express their tastes, while making sure parents feel comfortable that they’re ordering the right things.

I was provided a brand brief, 3 personas, and an inventory list. With two weeks for the project, my job was to draw out user, brand and business goals, structure the content, design key screens of the site and create a clickable prototype. The targeted audiences were K-12 students, parents, and school administrators, providing an interesting challenge for a wide range of age groups, backgrounds, and goals.

Efficiency and simplicity are important to all personas. Parents want assurance they’re getting the right items and fits for their kids. School admins want to give parents choice and keep the process simple.
I brainstormed possible feature requirements for each of the site’s key users. Not all made the cut – they were prioritized based on feasibility and user feedback.
Enable convenience and emphasize curation.
Busy parents are always on the go. These shoppers want to know that they are getting the highest quality at a good price, and are looking for ways to get their shopping done faster to gain more time for the things they love.
The TrueSpirit site needs to enable users to find the right things in the fastest and easiest way, while providing a similar experience to what they’d expect from their favorite store or internet retailer.
I explored ways to organize and display the content by rapidly sketching ideas.
I considered all the different ways a user might enter the site.
I designed a touch-first, responsive platform that personalizes the uniform shopping experience. The visual design style reflects the company’s modern, lighthearted brand, showcasing the quality of products while encouraging customization and playfulness.

Responsive design was particularly important given TrueSpirit’s busy, multi-tasking target audience.

Responsive design was particularly important given TrueSpirit’s busy, multi-tasking target audience. Accessibility across devices allows users to add to their shopping list wherever they are and check out when they're ready.
During usability testing, I discovered that the hamburger menu wasn't translating well on desktop. Some users scrolled down to the footer to navigate around the site. With this in mind, I designed a traditional top navigation for desktop, while keeping the hamburger menu for smaller screens.
An easy way to buy the essentials.
Personalization is a primary driver of the experience. Site-wide filtration by school ensures parents are only ordering approved items. As they continue to shop, the site features related items that complete the uniform.
In just a few clicks, users have access to an “essentials” list of must-have items curated by school administrators, which can be added to cart at one time. Understanding that some users might be interested in adding items individually, I made it possible to add to cart directly from any product grid, and included Quick Views to allow for frictionless cart building.
View Prototype