Boxing Game App Concept

Oct 2019 / Uni assignment

Watch a Concept Movie

Justpunch Screen Pictures

The project

For a team project in Design of Human Machine Interface class, we should design an interactive interface using a product designed by the student team at Queensland University of Technology.

My Role

UI Design

UI Interaction Design

Video Editing



Adobe XD


Adobe Premiere Illustration

Adobe Premiere Pro

Working process

Concept Searching


Moodboard and Persona

UI and Interaction Design



Oct 2019・3 month


Yu wang


People have been addicted to social media and online games. One of the reasons for this is that people want to stay connected with friends and get a sence of social well-being. Since this behavior cannot easily be changed, we decided to create an application that encourages users to do boxing and can also fulfills their desire for games and social media.


Our concept consists an boxing app that combines gaming with training. This app measures a couple of punch data using 3D motion capture gloves designed by QUT's students.

The main feature of this app is that the user can build his own character and the user's boxing action messured with gloves will be transferred into the action of the virtual character.

As users continue to use this app and, the character becomes stronger : level up. Users can also use characters to fight with friends through the app.


Paper Prototyping

We first created a paper prototype so that we could test our first concept quickly and receive feedback from professors.

Justpunch Screen Pictures

Hight-Fidelity Wireframes

With help of the scenario, we created a high-fidelity prototype which linked to each screens. We've found some issues with this test, e.g. "The position of the explanation is hard to read, how can we make it more readable?" or "Is there a way to keep the user from getting bored and amusing while waiting for their opponent ? "

Justpunch Screen Pictures


As our application is not just for boxing, but as modbox(modified form of boxing), which aims to make boxing easier for more and more people to do in their daily life. Instead of the synonym of danger, violence, we want to make it more accessible and everyone can get fun from it. So we picked up the words of feeling, that we expected our application would be like...

Justpunch Screen Pictures

Screen design

Font and Color

At first we chosen a font and defined spacing and sizing rules. The typography fits our project well because of its geometric and modern apperance. Since the font has 18 styles and 9 weights, it is suitable for designing of 2 different platforms, a mobile and a monitor.

Except sub colors such as green for an online status or red for an error message, we only used 3 main colors, bluish dark gray as a primary color, night blue as an accent color and bluish white as a background color.

Justpunch Screen Pictures


Justpunch Screen Pictures

Users always want to know that they are stronger than last time. Therefore, it must not be displayed only the character itself, but also basic information about the character, e.g. the current level. For this reason, we put this information about the characters in the header at the top of the screen.

One of the parts which we spended most time was creating a Tabbar. In this app there is 2 main interactive functions and 2 passive ones (seeing current character (home), training, battle and history). The Tabbar with these 4 main functions allows users to reach the functions easier and quickly.

Mobile UI

For the mobile screen we designed simply and clearly, so that the character can always come into user's sight.

Justpunch Screen Pictures

Monitor UI

While we created light themed UI, we chosen a dark theme for a monitor UI. A dark background design reinforces visuals of characters and are offten used game screens. Moreovers for readability while boxing, we paid attention to font sizes and a sufficient contrast.

Justpunch Screen Pictures

Final Movie

Thank you.