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
Starting Point
How might we make the average size chart more engaging and interactive?
Here's the thing about size charts: (Pain Points)
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
Mobile
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)
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
​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.