TrueSpirit: Designing an E-Commerce Experience and User Flow

This was my first project at General Assembly. We were tasked with designing an e-commerce experience for TrueSpirit, a company that sells modern school uniforms for K-12 children. The project brief stated that the company wanted to create a site that reflected its unique brand and appealed to its user base.

My Role: Competitive Analysis, Information Architecture, Ideation and Sketching, Wireframes, Prototype, Usability Testing, Spec Doc
Tools: Sketchbook, Sharpies, Omnigraffle, InVision
Duration: 2 weeks
Scroll for Full Case Study

Competitive Analysis

I started the project off by looking at the competitors: Land's End, True Grits, and Macy's. I looked at each company's branding, use case, product lines, pricing, and business models. Based on my research, Macy's was TrueSpirit's primary competition due to the fact that they both carry the same product lines. I then thought of ways that TrueSpirit could use its boutique size as a major point of difference from Macy's.

Key Takeaways:
  • TrueSpirit's fresh, modern, and friendly culture should be reflected in the design
  • TrueSpirit's advantage is in its niche market
  • TrueSpirit can distinguish itself from competitors by providing a more efficient shopping experience


We were given personas along with the project brief to guide the design process. John, a working single dad, wanted efficiency, an easy way of making returns, and a lot of information about products to ensure that he was buying the correct items. Sarah, whose family was new to private school, was concerned about her family fitting in. She wanted a clear way of finding the items that her son's school requires and a clear way to make returns. After learning more about what each persona wanted, I began to think of features that could be included in the site.

Features for John:
  • Product quick view - more detailed information while browsing
  • Return process - efficient 3 step process
  • Checkout process - efficient 3 step process
Features for Sarah:
  • School look up - to view items recommended/required by the school
  • Return process - featured on homepage, easy to find
  • Product reviews - see what others have to say about a product

Information Architecture

After gaining an understanding of the users, I did a card sorting exercise to group the products that TrueSpirit sells by similarity. The card sort led to a whiteboarding session to place the similar products into categories in the main navigation of the site.

Having created a navigation schema, the next step was to create a site map linking together the pages of the website.

User Flows

With the site architecture figured out, I created user flow diagrams for John and Sarah's shopping experiences so that I could visualize how each of the users might browse through the site and navigate through it to complete the checkout process.

Sketches + Wireframes

As I began sketching, I made sure to keep in mind the personas and the site architecture. For Sarah, I designed a "School Lookup" feature so that she would be able to see the items recommended by her son's new school. John and Sarah both wanted a clear and efficient means of making returns so I added a banner on the homepage explaining the return process so it would be seen immediately upon entering the site. For John, I created filters on the product results page and added a product "quick view" to add efficiency to browsing. I also designed the checkout flow and form inputs to be simple and minimalistic.

Prototype + User Testing

I exported the wireframes as PNG files and used InVision to rapid prototype John's user flow. I did usability testing with the prototype and discovered that I needed to make the information buttons to activate the "quick view" more prominent for people to notice them. Another discovery was that users needed to have context as to how many steps to expect in the checkout process.

Design Specifications

I did some sketching to think about ways to solve the usability issues that came up during user testing and made updates to my wireframes. I concluded this project by putting together a design specifications document including a site map, navigation schema, user flow diagrams, and annotated wireframes.

Back to Top


I look forward to speaking with you.

Jeanna Kim

Washington, DC

Website made with Bootstrap