Home

Building Game UI for Mobile App

2019 • Tencent • UI designer Intern

In June of 2018, I joined TiMi studio, a subsidiary studio of Tencent Games. I was one of the 6 employees under the Arts & UI team, and I started my new journey from collaborating with diversified talents there. Here is a design story from the largest Mobile game development studio in Asia.

Background

TiMi studio issued its first multiplayer online battle game on November 26, 2015, yet within 1 year, this mobile game topped china's mobile game market. Subsequently, TiMi released a new Mobiel RPG game: Saint Seiya Awakening: Knights of the Zodiac just a year ago based on the renowned Saint Seiya series.

Objectives:

Our project foucs on redeisgning the stractural hirechy for the inventory feature to make a simpler and more fluente experience, as well as reduce unnecessary interactions to provide diffrent gruops of users with a more fullfilling game experiences.

My roles and Responsibilities:

1. Collaborat with product manegers to optimize existing game UI.

2. Built draft prototypes and interaction based on PM's proposal.

3. Facilitate & ideate new game UI.

Challenges

User’s pain points:
The main issue is that our players find it hard to play with the inventory feature.
>Complicated visual hierarchy.
>Misleading button settings

Technical feasibility:
After consulting our technician, the situation had a twist.
>Rebuilding the whole page is time-consuming yet >Design everything with consistency and do not make a huge deviation from the original interface.

Legacy issues:
The inventory feature is one of the sub-features under the main page.
>Legacy restrictions

> Screenshot from Saint Seiya App
Copyright to ：TIMI L1 studio @ Tencent games

WorkFlow

Core ideaology：

Don't make me think!

Different usage scenario carries utterly distinct functionality and story, especially for battle game UI, the underlying mission is trying to provide the simplest route to find a sense of achievement and joy.

Design for ease of manipulation

> Move the UPGRADE button closer to the visual hotsopt area.

> Rearrange buttons based on user priorities.

> Eliminate meaningless white space

Design for faster processing

> Increase button size

> Reduce the distance between button and related panel.

> Long Press to upgrade inventories automatically.

Design for sense of achievements

> Encourage stronger visual feedbacks(i.e animation/text).

> Cumulate sence of achievements by accelerating processing speed.

Copyrights and credit to:
Chengdu TIMI studio L1 @ Tencent Games