ts.png

trueSpirit

Information Architecture, Wireframing, Prototyping, User Testing

ts.png

trueSpirit is an emerging online retailer of contemporary school uniforms and accessories for K-12 children and teens. Their request was to build a desktop retail website that would appeal to school administrators as well as parents. My task was to build the information architecture and user interfaces to reflect brand values and serve key user groups.

This was a class project for General Assembly’s User Experience Design Immersive.

Methods & Tools:

  • Competitive analysis and field research
  • Process documentation to demonstrate decision-making
  • Pencil-and-paper hand sketching to brainstorm
  • Invision and Omnigraffle for wireframing and prototyping
  • Live user testing of the prototype

Deliverables:

  • Interactive web prototype
  • Wireframes
  • User flows
  • Presentation detailing all of my work and decision-making as well as user testing results

Process

 

How I approached the design process for this particular case.

 

User Flows

Final user flows for the three main user groups.

Site Mapping

Final site map.

 

User Testing

Users had a strong positive response to the smart search suggestion function, and stated that the visual hierarchy was familiar and easy to understand. However, credit card, address, and contact info forms in the checkout flow need to have clearer signposts for editing, and the order confirmation should include “Continue Shopping” link that takes you back to the home page. This feedback was included in the recommendations for the future iterations.

Users had a strong positive response to the smart search suggestion function, and stated that the visual hierarchy was familiar and easy to understand. However, credit card, address, and contact info forms in the checkout flow need to have clearer signposts for editing, and the order confirmation should include “Continue Shopping” link that takes you back to the home page. This feedback was included in the recommendations for the future iterations.

 

Key Interactions

Product Info Page to Shopping Bag. 1) When an item is added to the shopping bag, a modal will slide down from the icon with the latest added item as confirmation. A maximum of five most recent items will be displayed. Clicking inside the modal takes the user to the full shopping bag view, or they have the option to go straight to checkout from here.

Checkout Experience. Rather than having the user go through a series of screens, I condensed all the checkout steps onto a single page. 1) From here, the user can either make quick updates to the items in their bag, or click on the photo to return to the product page. 2) When a user signs in, if they have saved a profile all of their information is auto-populated. 3) A confirmation message is displayed to indicate checkout is complete.

 

     Video demonstration of the prototype.