the project:

I was asked to do a UI refresh for an existing mobile gaming app. The app is being picked up by a distributor and will be played by a much wider audience, so the project owner was looking for a visual refresh to give the app a more “modern” look and feel. Additionally, the project owner wanted me to address any user flow issues and also design new screens for upcoming features.

Project Roles: Research, Interaction Design, UI Design, Prototyping, Usability Testing

research:

I explored other sports-themed apps to get an idea for the color palettes and styles users might be familiar with. I also spoke with the project owner to learn how the app is being used, who the target audience is, and any feedback on the current style. From this conversation I learned that the dark palette worked well as it is mostly, and will increasingly be, used in dimly-lit bars.

Process:

I first sketched out a site map to visualize the app architecture and figure out how many screens I’d need to redesign.

Next I worked on the color palette. I made minor adjustments to the current colors, removed the gradients, and reduced the number of colors to help keep focus on the game. For iOS, I used the default font, SF Pro, and kept Roboto as the Android font.

I sent sample screens to the project owner for his review. Once I got his approval, I began applying the new style to the rest of the screens.

I changed the sign-in process to look more like the sign-in screens for other popular apps so it would be a more familiar pattern, and therefore less time-consuming for users to sign-in. I also updated the icons to all Material Design icons for consistency and organized the menu drawer to be less cluttered and therefore easier to read.

The project owner also wanted me to make some changes to the leaderboard screens to account for a new feature allowing bar game players to compare their scores with all other players. Additionally, I was asked to create tutorial screens to help new users quickly understand the gist of the game and its key features.

Comparison screens:

Here are some examples showing the old screen design (on the left), with the new designs. From left to right: Home screen comparison, menu drawer comparison, active game comparison.

Click images to enlarge.

tutorial screens:

Click image to enlarge.

Next steps:

I'm currently finishing up the prototype, and then will conduct tests with users to capture feedback on the new visuals and experiences. The research will be presented to the project owner, at which time we'll decide on next steps. Depending on time and budget constraints, I will continue the iteration process until the project owner is satisfied with the testing results.