Jayme Wong

 e-commerce website design

My roles

  • User scenarios
  • Navigation schema
  • User Interface design
  • Usability testing

Design challenge 

Design an e-commerce website design for True spirit (fictional brand) to allow parents to purchase uniforms using a checklist received from the school admin which contains required and optional uniforms and accessories within the school code.

Solution

Provide a way for parents to purchase uniforms in sets using a customized sizing profile. These sets are curated based on the school’s checklist and can be tried at home with easy returns.

See Process
Launch wireframes

DELIVERABLES

Information architecture and navigation

Process flow diagram

Sitemap

Global navigation schema

Local navigation schema

Low-fi wireframes

Personalized sizing chart

View and select uniform sets

View uniform set details

Checkout shopping cart

Review order and payment details

PROCESS

Research

I started out using concept mapping techniques to explore the uniform e-commerce domain and the typical user that would purchase school uniforms for their children. This guided me during the interviews with one parent and school administrator to create a primary and secondary persona for this project. 

Just to get a feel of what’s out there, I did some competitive and comparative analysis using brands like Land’s End and Dennis Uniforms and found out that neither of them provided free and easy returns.

User Persona

Sarah Peyton – primary persona of the parent
“You would think I’ve got it by now, but it seems like the uniform policy changes every year!”

She is not entirely new to private schools.
Age is in the 40s range, married with 2 kids, only one attends private school currently.

Goals
- Much prefer to shop online if the colors and sizes are right.
- Would like to purchase at least 2 weeks worth of uniform outfits and that they last till the next season. 
- Would love the designs to be more contemporary.

Drivers
- Comfortable with technology but prefers making purchases on the home computer.
- Kids love Comfort: Always on the look out for non-scratchy fabrics.

Painpoints
- Sizes and colors online are not always accurate.
- Too time consuming to browse through the many options.
- Wish this is something caregiver can do for me.
- Buying the wrong thing and unable to return.

Defining the design

Using takeaways from research, I brainstormed possible user flows and exploration sketches and narrowed it down to the following three themes:

  • Increase buyer’s confidence by promoting hassle-free returns.
  • Taking the guesswork out of fit and sizing for children.
  • Present a curated selection of must-buys from the checklist.

Card sorting and paper prototypes were used to verify the navigation schema and information architecture.

Usability testing

5 participants were selected for usability testing following a usability test plan that I wrote up.
Participants were chosen from the following demographic:  

The following tasks were used to evaluate usability: 

  • User should be able to discover and create a custom fitting form.
  • User should be able to discover and browse the uniform sets.
  • User should be able to discover and instructions for how the uniform sets work.
  • User should be able to purchase a set and checkout.

Success criteria:

  • The tasks should be completed with no errors and within a timeframe of 3 mins each. 
  • The app should invoke confidence and optimism from the user.
  • The app should be fuss free, and preventive of all navigational errors.

Users were asked to evaluate the experience based on the following metrics:

  • Provide 3 words to describe your experience.
  • Rate the convenience of the process on a scale of 1-5 where 5 being most convenient. 
  • Rate your confidence level while making purchases on a scale of 1-5 where 5 being very confident.

Takeaways

This was a solo project done in two weeks end-to-end. It made me appreciate the importance of information architecture as the foundation for web design and also the nuances of designing a checkout flow and how it impacts the bottom line.

The testing revealed several usability issues that will be addressed in future iterations.
- Ability to edit shopping cart.
- Provide a more user friendly way to enter measurement sizes for users or provide an alternative for those that may not have measurements in hand. 
- Request for school information earlier when requesting for profile information to stay within the context of the user.