top of page
Case Study 

GoodChart

An interactive size chart developed as part of an e-commerce start-up that makes digital tools for online shopping.

Scope: End to End product design; UX Research, Wireframes, Low-fi/High-fi Prototype, User Testing, Presentation

Tools: Figma, Adobe CC

LAPTOP-mock up.png
Mockup_smobile_goodchrt2.png

Starting Point

How might we make the average size chart more engaging and interactive?

Here's the thing about size charts: (Pain Points)

Screenshot 2024-02-17 153133.png

It's been done before

Our users agreed that size chart on e-commerce sites was the bare minimum standard, however, admitted to rarely utilising them or trusting their validity. This was because.....

​

It's overwhelming

The generic number scheme 

and lack of visual explanation were both confusing and frustrating to Users. An unengaging blow to the cognitive load. 

​

​

​

As this product was part of an existing design system the main demographic research such as personas and journey maps had already been conducted by the company. 

​

Benchmarking began by looking at over 20 similar size chart offers in the e-commerce space. This helped to understand the market as well as discern a level of standardisation. 

​

A handful of users within the target demographic were then interviewed regarding their experiences, attitudes and ideals around the ‘size chart’. From this, I was able to understand pain points and look into tailoring the experience past current standards.   
 

Key Product Needs

Using this benchmarking and preliminary User Research to create the user flow 

Wireframe example

Screenshot 2024-02-18 133047.png

Mobile

Screenshot 2024-02-18 133144.png
Screenshot 2024-02-18 133204.png

Web

Design Development - First Prototype

  • Diagram/Visual depiction of measuring points

  • Instructions for self-measuring

  • View both Inch/Cm

  • Universal Conversion Chart

  • A dominant Unit i.e AUS S-XL and then have the option to change to numerical in the back end.

  • Include body measurements needed for other start-up products. (Shoulder, Bust, Waist, Sleeve length, Armband)
     

V4.png
NECK.png
V4 Chart.png
What was tested?
  • Core interactions

  • User response to size chart

  • Testing user understanding of measurement/size 

  • Testing user responses to a visual diagram

Findings:

The users and start-up feedback indicated a need to prioritize feature hierarchy.  The overcomplicated interactions mean more code/dev work and users found the interactions overly complicated, and the UI too cramped.


The measurement feature was unclear and users struggled to find and understand visual measurement lines.

Refinement 

M_1.png
M_3.png
M_5.png

​Changes made

  • Simple interactions 

  • Scale-back design 

  • Minimalist interface

  • Separated information section with an alternate page for instructions

  • Clear diagram with line directions that complement the movement

  • Showed more variation in size availability 

Testing results

User interaction and client feedback requested that the exit flow be smoother (screen not to take up entire page). The Users found the new interface easy to use with minor issues such as a misleading information/help icon, as well as a need for stronger toggle variation between units of measurement.

 

Instructions could use further development and separation. 

Final Product 

Final Changes​

  • Created a stronger variation in the unit of measurement toggle as well as using the (“) sign to denote when the inches were active. 

  • Replace the icon with a clear help sign (!)

  • Created an organic space between the product and the previous page so users could tap out quickly

  • Added Key to the instruction page 

  • Incorporated brand colours into the UI design

Final thoughts

In this project, it was important to prioritize simplicity and not get caught up in overshadowing either the intended function or the hero product the start-up was developing. One of my goals for this project was to utilise benchmarking and user research to keep the core elements and usability principles of a ‘size chart’ but enhance it with both visual and usability principles. Usability with flair. The concept had a lot of positive feedback from the users. 

​

Additionally, I learned how to incorporate an exciting design system into an independent product, as well as navigating the needs of the user and the needs of the start-up. I found that taking a simple concept such as a humble size chart and elevating it into its own product was extremely rewarding. I enjoyed liaising with both users and the start-up to navigate how to create a product that served them both! 
​
With more time, I would have liked to further develop the back end of the product. The intended use is for both e-commerce users and businesses to interact with ‘Good Chart’. Although we were able to discuss and consider some of the business needs during the development stage I would have loved to get stuck in on back-end development in the future. 

bottom of page