UX / UI
Wireframes
Size Calculator Tool
The first design of the Size Calculator was a pivotal step in my UI/UX journey. That early draft held the framework for what the tool would eventually become, but it fell short in delivering the ease and clarity users needed. Recognizing this, I overhauled the design to create a version that was seamless, intuitive, and truly effective for the target audience.
Version 2 - Step 1A
On the size calculator page, all forms and information were made immediately accessible. Given the purpose of the tool, the experience needed to be as intuitive as possible. Many users approached it from a place of frustration, seeking clarity about their bra size. To address this, the design focused on streamlining the process and minimizing the effort required on the user’s end.
Version 2 - Step 2A
Once the forms were completed and submitted, users were presented with their calculated size. This provided immediate value, giving them the information they needed to explore the site with confidence. To make the next step seamless, a carousel was auto-populated with bras matching their results, removing the need for manual searching. A call-to-action also directed users to the corresponding collection, with their size pre-applied as a filter, further streamlining the shopping experience.
Version 2 - Step 1B
During production, an additional feature was introduced to reference sizing from global brands. Many users were more familiar with international sizing systems, so this option created a more inclusive experience. For example, a user accustomed to purchasing a 75E in Europe might not realize the North American equivalent is a 34DD. By integrating this cross-reference into the step-by-step form, the tool helped bridge that gap and ensured sizing clarity across regions.
Version 2 - Step 2B
Secondary form fields appeared only after a user selected a regional brand. If they wanted to start over, they could clear or adjust the initial field, which automatically removed or updated the related secondary fields. This dynamic setup kept the form flexible while ensuring users stayed in control of their input.
Version 2 - Step 3B
When users entered a known regional size, the tool displayed their North American equivalent. This result acted as a call-to-action, linking them directly to the corresponding collection with their size pre-applied as a filter, making the transition from calculation to shopping seamless, and providing them with the necessary information to shop the store with confidence.
