UX / UI

Explore my wireframes:

Size Calculator

Product Details Page

Compare Tool

Collection Pages

Explore my wireframes:

Size Calculator

Product Details Page

Compare Tool

Collection Pages

Case Study: Understance Size Calculator

Case Study:
Understance Size Calculator

Part I: The Need

At its core, we needed a size calculator because customers simply lacked a straightforward tool to determine their correct size. This tool was essential to help them confidently choose products that fit.

Part II: Challenges

Customers often had expectations about what their size should be, this would result in them purchasing the incorrect size and being unsatisfied with the product.
The tool’s suggested size sometimes conflicted with their expectations, causing skepticism.
Many users had past frustrations with other sizing tools.
Ensuring the tool addresses all accessibility needs.

Part III: The Approach

fig1

Simple Input Fields: I designed the calculator with minimal, easy-to-understand fields so users could enter their measurements without confusion.

fig2

Clear and Concise Instructions: I provided step-by-step guidance in plain language, ensuring that anyone could follow along easily.

Click image below to expand

Visual Examples and Videos: I identified the need to include videos showing both sitting and standing measurement techniques, making sure we accommodated different accessibility needs.

Flexible Post-Results Navigation: After users got their size, I offered multiple paths forward—whether they wanted to see recommended products right away or explore other parts of the website with their size filter already applied.

Click image below to expand

Part IV: The Results

In the end, the size calculator became our most sought-after tool. It climbed the SEO ranks and even drew in visitors who weren’t initially looking for our products at all. People found the instructional videos super helpful and the results incredibly accurate. Even the skeptics ended up pleasantly surprised when they used the calculator's size to purchase a product that ended up fitting perfectly. We had a lot of feedback from customers saying it truly made their lives easier because they no longer had to stress about finding the right fit.

Part V: The Tools Used

All wireframing and core concepts were established and designed by me on Figma. The final form went through countless iterations utilizing a scrum/agile workflow, before the team and I landed on something we were all happy with. One thing I would like to note is, despite me being the only UX/UI designer on this team, every bit of this and every other job at Understance were team oriented. I firmly believe the backbone of great design is built on collaborative efforts.

While the web team were the masterminds behind the backend of this versatile tool, I was able to get my hands dirty with the frontend HTML and CSS as well. As Understance's website was developed on Hydrogen, the customizability was only limited by our imaginations. This freedom, along with helpful guidance of the web team allowed me to go in and customize aspects of the page to match changing aesthetics as they developed.

Once the design was done, and the tool was available, the work wasn't complete. I would frequently monitor the page to see the daily/ weekly/monthly traffic and find metrics to analyze its popularity on Google Analytics. I set up Campaign URLs and monitored Path Explorations to trace where users were coming from to get to the tool, and going to from the tool. This allowed me to have a clearer understanding of areas that needed attention and possible improvement to better the user journey.

Once this all was complete, I moved on to developing a user journey map (see below …)

Interactive User Journey Map

Sometimes teams fall victim to getting caught in an echo chamber, focusing on all the wrong things. More often than not it helps to step back and see the bigger picture. This is exactly what I did when I created this User Journey Site Map in Figma's FigJam. By exploring all popular paths in the website, and personally reaching out to our customers to conduct video call surveys about their experiences on the website, I was able to identify user pinch-points, redundancies, and bottlenecks. In addition to finding these problem areas, I also theorized possible solutions that the team and I could address together and plan around.

Legend:

The window below is draggable, and may be navigated as such. Note: Proposed Solutions (S#) and Notes (N#) can be seen below the journey map. Download the map in full here.