Day 19 — Leaderboard

I design a leaderboard for a fictional mobile game

Design

Using my design of a popup/overlay from Day 16 as a basis, I worked with a pink/blue/yellow color scheme. The only diversion from this trifecta is the use of red to highlight the user’s entry on the board.

The leaderboard displays the top 10 scores along with the user’s score. This list can be refined by region an friends list using buttons at the top. Users can also expand the number of scores shown

Postmortem

Looking at the design now, I notice that there is no way to view scores below the user’s. There are expansion dots to view all scores between the top 10 and the user, but should the user wish to see what scores came in under their’s, my design is lacking the functionality to surface those.

My biggest challenge for this design was figuring out how to represent the region filters. The options I came up with were having buttons between the header and the scores, having the filters be simple underlined text, or making buttons as part of the header (which is what I went with for my final design). I’m not completely satisfied with the end result — I need to work on making selected buttons look depressed.

It was fun coming up with fictional names. I’m particularly pleased with the name ‘meta_dwight’, a play on “Meta Knight”, a villain from the Kirby series which I used as a reference for this design.