Anna Klaassen

Digital designer & visual artist

Size dropdown redesign




︎︎︎ 2023

︎︎︎ UX/UI
︎︎︎ Mobile/Desktop


Improving friction points in the R.M. Williams product page* through Experimentation Design practices. I created a design variation ready for A/B testing, while focussing on the size dropdown section.

Users were unable to intuitively scan and understand if their size is available. The goal is to easily identify and choose a size that is right for them.


Current state


The size dropdown section


Mobile


Desktop



The user flow


1. Dropdown

2. Expanded

3. Extra sizes




Improved version


Key changes


Altering the content hierarchy for a clearer user flow
  • Moved the “Men’s” subheader to the top
  • Moved the “do you need help with sizing?” element next to the size guide

Changing the interface to be more clear and accessible
  • Changed radio buttons to button groups
  • Removed R.M. Williams sizing as it is not a universal sizing metric
  • Lightened and crossed out unavailable sizes to make it more obvious
  • Changed “show all sizes” copy to “show more sizes”

Reducing the steps the user needs to take to select a size
  • Removing the dropdown and displaying content up front
  • Pre-selected shoe size and width for a quicker selection process


Current state

Improved version




* Referring to their website in its current state from 2022. This was a self directed project and not implemented by the client.