TitanBrawl User Profile Page


July 2017

Behind the Scene

Design philosophy

This interface is a redesign of Titan Brawl’s user's profile page. When I was playing Titan Brawl, I found this page was not distinctive enough. So I decided to blend my own ideas into its original design. The core concept of this new interface aims to highlight some useful data as well as Titan Brawl’s features.


  • Users use both hands to hold their cell phones when playing mobile games.
  • Most users are right-handed.

Problem 1: Some pieces of basic user information is scattered on the original interface, which makes it hard for users to identify them at a glance.

  • Solution: I redesigned the layout of the important pieces of user information and group them in a section titled User Name. These changes enable users to quickly find useful information. In addition, I put the parts, such as editing name and changing avatar, that users can customize under the button Edit. This action results in a much cleaner interface.

Problem 2: The icon design of the original interface is not intricate and does not match the style of Titan Brawl.

  • Solution: I redesigned these icons which are more detailed and better fit the style of Titan Brawl.

Problem 3: The avatar design in Titan Brawl is very intriguing. How to use these avatars to magnify users’ love for this game?

  • Solution: I enlarged avatar images, put them on the left side of the interface, and allowed users to freely choose their desired avatars. Based on my research, I believed that letting users choose their avatars to represent themselves in a game and often displaying to them their chosen avatars will strengthen users’ emotional connection to the game. For example, many people who play World of Warcraft are willing to spend money changing their avatars's appearances. One of the goals of my redesign is to make these avatars’ expressions and gestures more distinct, instead of merely existing as tiny profile pictures. Moreover, the addition of cute avatar images helps the new interface look more attractive visually.

Problem 4: The contents of the original interface are mundane. Is it possible to add some interesting statistics to enrich the interface?

  • Soulution: I put statistics, such as gaming time and completion, on the interface. These statistics can be replaced with other ones. These elements’ borders will change as user statistics increase. For example, when a user win 1000 games, one of the borders will become golden. This is a tactic for encouraging users to play more games and eventually get all borders golden.

Problem 5: How to arrange buttons to make the game more user-friendly?

  • Soulution: Based on my assumptions that most users are right-handed, I placed the two buttons, Settings and Help, on the top-right corner. When users hold their cell phones with both hands, they will find it convenient to click these two buttons. In addition, I put the button Back on the top-left corner in order to decrease operational errors.