GameArena
Homescreen Redesign

The app was not performing well to retain new users, it was discovered that our main screen needs to be simplified. (November 2020)

PLATFORM

Mobile, iOS app.   Find on App Store (Japan region only)

WORD DONE

Problem Statement, Wireframe ,User Interface Design, Prototype

About the app

GameArena is an app where users have the chance to get real money as a prize from only playing mini games. Users will compete with other players in different leagues/competitions that are displayed for each games, the higher the score users get will increase the possibility to get higher money prizes as well. This app is currently available only in Japan region for around 8 months and having more or less 2000-2500 daily active users.

Problems

GameArena offers a unique service in the entertainment industry and we consider ourselves as a casual e-sports app where people can get real money. However, this new and unique service is rather difficult for people to understand how does the app work.

It was discovered from our app analysis data that there was a significant drop in of application retention rate when users arrive at the home screen. In other words, large percentages of new users would delete or quit the app immediately without even participating in game competition.

It can be seen below, the original (old) design of our home screen is quite packed with words. I didn’t translate any copy/words on this screen in purpose, so that you can see even clearer how each sections in the layout brings unclear information and intention towards the users.

Process & Solution

Gathering Insight / Requirements

It can be seen below, the original (old) design of our home screen is quite packed with words. I didn’t translate any copy/words on this screen in purpose, so that you can see even clearer how each sections in the layout brings unclear information and intention towards the users.

All of those 3 sections highlighted and resulted from the attention(heat) maps have something in common, which is their main use is actually not to be touched/pressed, and just give clear information about the section instead. Getting rid of this collision between visual and usability was the first thing needs to be addressed to get going and resolve the problems.

Wireframe

We discovered that there are several “not-so-useful” elements and cells in the original home screen UI of our app that were becoming a distraction rather than functional. In the meantime, we haven’t had our own researcher that can research deeper about our users and their behaviour, we used VisualEyes tool to generate predictive heatmaps of user’s attention distribution towards our home screen. Here is the result.

Design & Solution

After several tests and a few user testing, here we came with the final design of the new Home screen for GameArena App. Overall, we did simplify most of the elements that were originally there in the old version. Our intention has been the same that is not to confuse users about how to use our app.

Result

The homescreen redesign has been producing a significant difference in our application’s retention rate. We were able to achieve 47% 2nd day in user retention rate, which was previously only 20%.