True Spirit

E-commerce website for uniform retailer

Try Prototype
"Buy a girl's shirt"


Project Brief
Design an e-commerce website for the fictitious brand True Spirit: school uniform retailer for schools and parents who want a modern school uniform for children from K-12. They provided personas.

Most online uniform retailers provide lousy user experiences. Some of the most used retailer don't have a way to browse easily through their products nor present quality images.

Web-savy parents preoccupied in getting the right items for each school, and school administrators looking for items to include in the dress code.

A website based on the previous e-commerce experiences of the personas that satisfies user and the business goals. It has easy access to each school dress code. It must have open browsing so schools and parents can do business with them.

Other Details

•Using only the personas and short research provided to make decisions
•Design and prototype several user flows of an e-commerce in a single week

One week of UXDi course at General Assembly Spring 2014

My Role
UX Designer - Solo

1. Research + Strategy

The brief included personas but I also complemented it with informal interviews with neighbors and shared information of other people within the class.

• I defined the business goal based on the description of True Spirit brand and the brief provided.

Image of business goal

•I analyzed the personas and hypothesized possible solutions that addressed their goals and character.

Image of personas

•I made a competitive analysis using the brand's competitors and the user's previous e-commerce experiences. I evaluated which websites and features accomplished the True Spirit users goals. All these variables were used to define the design requirements for the website.

Image of design requirements

2. Ideation

Information architecture + Sketching + User flows
I made the sitemap by using the high level design requirements to sketch a global navigation and test the category names.

Image of global nav  and sitemap sketches

Image of global nav  and sitemap sketches

Image of global nav  and sitemap sketches

Then I designed user flows and asked my colleagues for quick feedback. I iterated by sketching corrections, categories and user flows.

Image of user flows

Image of user flows

In each iteration I refined the design and narrowed down to more specific details such as filter categories and content. Always keeping user and business goals in mind.

Image of sketches

Final sitemap

Image of final sitemap

Final user flow for prototype

Image of final userflow

3. Prototyping

Prototype and User Testing
I made the website's interactive prototype in Adobe Muse. I made several small iterations in order to get feedback fast and made the corrections on the spot.

Wireframes with user feedback notes to use for next iterations

Image of wireframe with user feedback notes for correctionsImage of wireframe with user feedback notes for corrections

Users and their comments

Image of some of the people that collaborated for user testing

Annotated wireframe of the home page

Image of some of the people that collaborated for user testing

Your task is to buy a girl's shirt

Try Prototype


1. Research

  • Brief Analysis
  • Personas Analysis
  • Competitive Analysis
  • Strategy

2. Ideation

  • Sketching
  • Sitemap
  • User flows
  • Iterations

3. Prototyping

  • Wireframes
  • Muse Prototype
  • User testing
  • Iterations

4. Presentation

  • Presentation Deck
  • Presentation to employer
  • Wireframe Notations