Requirement
We needed a UI component to switch between the Monthly leaderboards and the All-Time Leaderboard.
Widget Explorations
Explorations 1
A dropdown for switching between all-time and monthly leaderboards was implemented.
However, this solution violated the hierarchy of the all-time and monthly leaderboards. Presenting them in the same dropdown places them at the same level of hierarchy, thereby reducing discoverability.
![Widget Exploration 1](https://framerusercontent.com/images/LRhDHVBXTgxgVjvX1JZL9U4ug.jpg)
Exploration 1
img
Exploration 2
A tab group featuring an All-Time Tab and a Monthly Tab with a dropdown was implemented.
However, a drawback of this solution is that the dropdown only appears when the Monthly Tab is selected. This impacts the discoverability of the monthly leaderboards, making the solution less intuitive.
![Widget Exploration 2](https://framerusercontent.com/images/tR4xsiqpBazAPYrmdlYnElaX4Y.jpg)
Exploration 2
img
Final Solution (Exploration 3)
This is referred to as a "Toggle Dropdown." It involves a straightforward switch between All-Time and Monthly leaderboards. Within the Monthly leaderboard toggle, there is also a dropdown allowing the selection of leaderboards from different months, as illustrated in the mockup below.
![Widget Exploration 3 - Final Design](https://framerusercontent.com/images/VdhQL3IGX8OepxT9UX0pg7P3klM.jpg)
Final Design for Toggle Dropdown
img
Prototyping & Validation
To validate the final solution, I created a prototype & had 5 users navigate between the all-time and monthly leaderboards. All 5 users were able to perform this task seamlessly without encountering any difficulties or friction. Hence, validating the design of the component.
figma prototype
Prototype
![](https://framerusercontent.com/images/UxZI44lRf3CRJrhMB89qUeaQ.jpg?scale-down-to=2048)
Leaderboar Page
img
Closing Notes
While designing this component, I was aware that I was deviating from the established UI rules. However, after testing the designs with users and subsequently reviewing the data, I gained confidence in the design I created and it felt satisfying, to be honest.