Toggle Dropdown — Experimental UI Component
I may have bent some rules, but the end result was an innovative component for a design project on which Jasjeet has been working on. Follow along as I unveil my creative process and the final designs for the component.
Context
We were building a leaderboard for the students enrolled in a course at Newton School. Students are ranked on the basis of proactiveness during the course, which is measured by the number of lectures attended, assignments, contests, and quizzes solved.
There are 2 types of leaderboards: a Monthly Leaderboard, where you get the ranking of the students for a particular month, and an All-Time Leaderboard, which is the summation of monthly scores of a student.
Problem
We needed a UI component to switch between the Monthly leaderboards and the All-Time Leaderboard.
Solutions we tried out
Solution 1
A Dropdown to switch between all-time and all monthly leaderboards. This solution was violating the hierarchy of all-time and monthly leaderboards, showing them in the same dropdown brings them on the same level of hierarchy and decreasing discoverability.
Solution 2
A Tab group, All-Time Tab and a Monthly Tab with a dropdown. The problem with this solution was that the dropdown will only appear if the monthly tab is selected, this affects the discoverability of monthly leaderboards and the solution becomes less intuitive.
Solution 3 (Finalised approach)
This is what I call a “Toggle Dropdown.” It’s a simple toggle between All-time and Monthly leaderboards. In the monthly leaderboard toggle, you also have a dropdown to select leaderboards of different months as shown below in the mockup.
To validate the final solution, I made a quick prototype and asked a couple of users to navigate between all-time and monthly leaderboards. And people were able to do so without any friction.
Play around with the component here
Conclusion
With the launch of this feature and toggle dropdown component, users now have the freedom to seamlessly explore the leaderboards on their own without any education. It's a definite win for me and a reminder that thinking outside the box can lead to innovation.
