Daily UI #019 - Leaderboard

Day: 019 - Leaderboard For this challenge, I wanted to redesign a leaderboard for a site that I frequent: https://rocketleague.tracker.network/

Right off the bat, there are a few major problems with the UI design. One, the actual content starts about halfway down the page. Two, there is an issue with the hierarchy and organization of buttons, causing some confusion. Three, I felt the CTA’s were not being handled properly.

To solve the organization problem, I condensed a lot of the header information into one hamburger button and made the login/sign-up experience more condensed. Additionally, I moved the app store "share lock-up" to the bottom of the screen. I felt the app-store buttons were important, but not more important than the donate button.

For the leaderboards themselves, there are about 15 separate categories condensed into small tabs. I felt this area of the UI was way too cluttered, and I wanted to expand those components. My concept was to turn each batch of data into a card that could quickly be swiped through like content in a carousel. I also removed the pagination on the cards and replaced that functionality with an infinite scroll.

Finally, I rearranged the hierarchy of the four CTA’s on the page. I felt the original designers didn’t put enough weight into the donate button. I made that button much larger and prominent, to potentially generate more conversions.

--

Follow me if you want to keep track of my progress on the Daily Challenge! See you at 100.

More about the design challenge: https://www.dailyui.co/