Pokédex UX Design

UX Design + UX Research + Illustration

Redesigning the “high-tech encycloppedia” from the popular series Pokémon as an app with friendly UI and custom illustrations

Role + Responsibilities:
User Testing, Wireframing, UI Design, Illustrations

Team Structure:
1 Designer, 5 Testers

Project Timeline:
8 weeks

The context:

I’ve been a massive fan of the Pokémon franchise since I played Pokémon Blue on my Gameboy Color. As a lifelong fan, I’ve long fantasised about a world where Pokémon were real and what that might look like. As Pokémon Go became more and more popular and people like my father were encountering “Wurmles and Piggies” on their walk to work, I realised that some might benefit from a less complex way of understanding. I was in need of a chance to flex my UX muscles, and this seemed like the perfect fit.

The goal:

A Pokédex that is easy and intuitive to use for new and experienced Pokémon fans alike. The same amount of information should exist, but it should be made easier to navigate and understand. This was designed as a “just for fun” passion project and is not planned for development, and a side goal unrelated to the outcome was to get familiar with Adobe XD

Research Findings

I looked into the official Nintendo designs for the Pokédex, which have evolved every year along with the game.

While looking through these examples of the Pokédex, I noticed the way the game designers themselves altered the experience over the years. They jumped around trying a number of different ways of representing the large amount of data contained in the Pokédex, jumping from list views to icon views, and experimenting with different layouts.

I also conducted an informal survey of 3 long-time Pokémon fans and 2 non-fans to gain insight into what they were looking for when using the Pokédex. The consensus was that the priority of the Dex should be finding information as quickly and easily as possible. This led me to my next step in the design process:

Information Architecture

After analyzing previous versions of the Pokédex, it was clear to me that it was key to ensure that the information architecture was intuitive. In order to gain more information about how to mindfully present this information, I had 5 users perform a card sorting exercise with the below cards. The majority of the results looked similar to the sorting below, which is the final architecture I ended up going with.

Screenshot of the results of a card sorting exercise

Feature Identification

While talking to these users, I sought to identify the most important tasks that the Pokédex should help them to accomplish. I ended up with these three priorities, which I used as guidance on the three most important features for an MVP:

Showing an overview of all the possible Pokémon caught, encountered, and unknown in the Dex (e.g. “How many Pokémon do I have left to catch before I fill my Dex?”)

Identifying Pokémon that users have encountered but haven’t caught yet and may not be familiar with (e.g. “What was the snake pokemon that gym leader just used?”)

Finding specific information about a Pokémon users have already caught and know (e.g. “Is Bulbasaur’s Attack or Special Attack higher?”)

Wireframing

With my information architecture and parameters for an MVP identified, my next step was to make wireframes for this core user flow.

Illustrations

I’ll go ahead and admit now that part of the fun of this project was making up a reason to draw a bunch of Pokémon. I did briefly do some A/B testing to see which results people preferred, and got mixed responses. 4/5 of users preferred the hand-illustrated style.

Side by side of official art of Bulbasaur (left) and my illustration (right)

Illustrations of the Pokémon Bulbasaur, Charmander, Squirtle, Pikachu, Espeon, and Metapod.

User testing

Once I had a working prototype, I had users conduct some testing, asking them to complete three tasks to go along with the three goals I identified in the research and information architecture stage. Those goals were:

Determine whether Bulbasaur’s Attack stat is higher than his Special Attack

Sort the Pokédex so that you can see the names of all the Pokemon

Identify this Pokémon:

A mockup of the Pokédex app as a user completes the three tasks

Flat lay view of multiple individual Pokémon detail screens

Reflections

I had a blast working on this project. I got to do a deep dive on my favorite game series, draw some cute little guys, and come up with what I think is a nice looking final result. I also enjoyed the process of consulting users and gaining data at every step of the process. From card sorting on the information architecture to A/B testing on illustrations vs. official art, I learned to really value users, and particularly a user group that was diverse in age range, as I had some complete blind spots that wouldn’t be identified without having some older users in my testing group.

On that topic, what I would most like to do with this project on reflection is to perform an accessibility audit. I did this project before having learned much about accessibility, and now I can already see some flags that I’d go back to fix on another iteration.