TrueSpirit Website for iPad UX Project

Date: January 2014
Client: TrueSpirit – General Assembly (project 2)
Description: An eCommerce website to sell kids uniforms to parents.
My Role: User Experience Designer
Team Members: John Hayward, Kathryn Sadler and Cheryl Lee.

The Brief: TrueSpirit is a (fictional) 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 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. Unlike traditional suppliers, True Spirit encourages visitors to express their tastes—with some limits. We were also provided with 3 personas – John (single dad), Sarah (busy parent) and Jess (School administrator).

Card Sorting and Competitor Analysis: TrueSpirit has a wide range of clothing for boys and girls, so it needed to be presented in a logical and easy to access manner. As a group we did a card sorting exercise to decide how the menu would reflect this. The card sorting exercise result was then used to create a sitemap and the navigation schema.

We then went on to a competitor analysis to see what was currently available. We looked at a wide range of sites in Australia and overseas to see what was done well (what we could potentially incorporate) and what was done not so well.

Card Sorting

Cheryl, John and I card sorting.

Sketching,  Problem Statements and User Flows:
After reading the personas and group discussion, we dived into lo-fi sketching. After a while we felt a bit lost, so we came up with a problem statement for each persona. From that we did a user flow for John and Sarah, and came up with features that would satisfy each persona.

user flows

User flows for the personas of Sarah and John.

Shopping Cart and Sketching:
We then went onto further sketching and started looking at the shopping cart process. We examined other well known stores such as ASOS and Net-a-Porter to see how the big online stores do it. We focused on making the process really simple and easy so our personas wouldn’t need to spend too much time on thinking and more time getting what their kids need.

shopping cart process

Sketches and flows of the shopping check out process.

Wire-framing, Prototyping and User Testing:
As we were getting closer and closer to the presentation day, we wire-framed our designs in Omnigraffle – iterating as we went. We only got the chance to do user testing with one person, but were still able to apply a few things we learned from that test.

wireframe discussion

Team chat about wireframes and navigation schemas.


Want to find out more? Get in touch.

Related Posts