Size dropdown redesign
![](https://freight.cargo.site/t/original/i/667724dc5a5f343f3752909e91b2e0215774926b1b51a688a80313f5b46468be/Header.png)
︎︎︎ 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
![](https://freight.cargo.site/t/original/i/973659cb743907dab8590b4f5bf49b8a0dc273641d8b4db28b9b12cbe689081e/changes1.png)
Desktop
![](https://freight.cargo.site/t/original/i/defc6f91ff32d0d2282cb7698439b44ca0f75f02563773160bab86e432c4f6f7/changes2.png)
The user flow
1. Dropdown
![]()
![](https://freight.cargo.site/t/original/i/c5bcb3773ee43ca4892965d0632402f8cb8aa5a4a0232558c3af1737fef147fd/Control1.png)
2. Expanded
![]()
![](https://freight.cargo.site/t/original/i/fd2d5aec0e892bf0b938e4c7536a7ca8be6156f6dd3779f850fbc515a7880bff/Control2.png)
3. Extra sizes
![]()
![](https://freight.cargo.site/t/original/i/35e67d82c627dd3c3a88d6221e6de7dae77f9735b2cb6ea37f802e42aebab7fb/Control3.png)
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
![]()
![](https://freight.cargo.site/t/original/i/fd2d5aec0e892bf0b938e4c7536a7ca8be6156f6dd3779f850fbc515a7880bff/Control2.png)
Improved version
![]()
![](https://freight.cargo.site/t/original/i/f47ca057d5b3fed6ef7d2515f9dfa64b2fd85286dfd866698cc3ce5083ab453f/Variation2.png)
* Referring to their website in its current state from 2022. This was a self directed project and not implemented by the client.