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.
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.
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.
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
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.
