- goal -

CREATING THE USER EXPERIENCE OF A GAME MADE FOR DERMATOLOGISTS

Top Derm is a game made by dermatologists, for dermatologists. As soon as I heard the news about the new game we would be working on, I knew we would be in for a project that had plenty of intriguing design challenges. Top Derm would rely heavily on playtesting and feedback from our advisors. We started at the core of the game and worked our way out to make the game both engaging and intuitive.

social_before

- problem -

WHEN SOMETHING DOESN'T WORK, TRY, TRY AGAIN

In the beginning, I started by interviewing users and learning what they would want in a game for dermatologists. Through that, our game designers created a  prototype of the game highlighting some amazing content about dermatology. I brought it to our board of dermatologists, interviewed them once more, and gained some fantastic insights:

  • Users loved the core gameplay but had difficulties engaging with the outer loop of the experience
  • Users needed a better way to stay engaged
  • The social features we had created were not exactly what our users were looking for
  • There is a lack of representation of skin of color in dermatology and we could help to fill that gap by creating renders of patients with skin of color

So, with those ideas in mind, we went back to the drawing board with our tips from users in mind and created something that would truly hone into their wants and needs more accurately. This time, UX would be the core of the game, and instead of consulting on the project, we were brought on full-time.

- process -

CREATING A SOLUTION THAT FIT OUR USERS

After getting this data from playtesting I created new personas for our users. We then had the ability to use this data to inform a new design. We went back to the drawing board, started crafting some new designs, and came out with a project that resonated much more with our users.

- process -

PHASE 1: THE CORE OF THE GAME

We decided that the social aspect was too strong, and ended up removing it to make sure the core gameplay stood out. Like a gobstopper, we started at the core of the game, then built up the external layers to the outer loop. From there, we referenced other materials that make it very easy to browse information in a very visual way. Apps like Netflix and Prime Video gave us the foundation of the idea for the front-end home design.

- process -

GAME MODES

The core of the game was to be made of 4 game modes. Binary Sort, Sticker Situation, Chain Brain, as well as Mix and Match. Also, a game mode that has not been released yet, but is in the works, is Hi-Lo Noma a ranking-based game. Our job as UX was not only to create the layout for these game modes but also to make the transition between elements in the game as smooth and easy to follow as possible.

GAME UX VS WEB/MOBILE UX: FIGHT!

Although both boil down to making a user interface successfully, they demand very different requirements. Game UI must portray information without overwhelming or distracting from the game. They should compliment each other. Take Persona 5 for example, the game and the UI work together to make a fantastic experience.

- reflection -

RELEASING THE GAME AND WHAT I LEARNED

At the top of this page, I included our launch trailer, and I'm sure you can see why! The project turned out beautifully, and if you want to play it, you can download it yourself from the app store. More features are being added to the game regularly, and we anticipate updating and honing the game to our users more and more as we continue to update it.

This project taught me a lot about researching, creating personas, and was a huge dive into figma. I am thankful that we took the opportunity to try out new software and invested so much into UX research. We were running user tests or vetting out concepts every two months. This lead to problems being solved quickly and efficiently. It is important to test often, and this project really highlighted how much frequent testing can lift a project and make it even better. Additionally, Figma helped to speed up our design process, and lead for faster iterations. We became Figma afficionados in that time, and Figma is now our main design tool when it comes to spinning up wireframes or creating prototypes.

Selected Works

Illustrations and AssetsVarious Projects

Top DermLevel Ex

Roguish RichesIndie Game

Costco Design at Home SiteSprings Window Fashions

 

2023 Jennifer Collins