A mockup image for color touch

Color Touch

Mobile Game

Color Touch is a mobile game that tests players' reflexes and color knowledge. In our efforts to enhance the overall game experience, we strategically implemented ads into several screens while ensuring a seamless and enjoyable gameplay. Our goal was to create a user-friendly interface and intuitive gameplay mechanics that eliminate the need for players to rely on tutorial documents.

Team

Johnathan Milo Sally Sharon

My Role

User Experience Design UI implementation

Tool

Adobe Photoshop Unreal Engine 4 UMG system Adobe XD

Duration

WIP

Overview

The Problem

People tend to play mobile games to fill up trivial time. As a group of people who makes a living from our knowledge of art and games, we want to create a game using color as its theme.

Challenges

  • ◆ The game is free, but it includes in-app advertisements. Striking the right balance between the ads and a seamless user experience is a key consideration.
  • ◆ Given our target audience of commuters, we anticipate that players will engage with the game using one hand. Therefore, we have designed the user interface to be more accommodating for one-handed operations.
  • ◆ We aim to teach players the game rules through intuitive UI elements and gameplay mechanics.

Strategy

To ensure the game meets market demand, we discussed the target audience, user needs, client needs, content and functionality requirements, etc., before we started the design process. We compiled a strategy document as a production guideline to guide everyone in a consistent direction.

Taget Audience

The app will focus on the following target audiences:

Role

  • ◆ Commuters
  • ◆ People who play mobile game, but are not heavy players.

Demographics

  • Gender: No ristriction
  • Education: Elementary or higher
  • Occupations: No ristriction
  • Age: 9-99

Psychographics

Personality & Attitudes
  • ◆ Competitive
  • ◆ Have the courage to try
  • ◆ Not a very serious person

Values
  • ◆ Have a definition of beauty themselves.
  • ◆ Consider visuals are very crucial elements in life.

Lifestyles
  • ◆ Like to fulfill all the trivial time.
  • ◆ Enjoy being alone.
  • ◆ Value leisure activities.

Personas

Danny (28) Game Engineer
  • ◆ Single.
  • ◆ Medium game player.
  • ◆ Kind and easy-going.
  • ◆ Watch gaming streaming in his leisure time.
  • ◆ He spends 30 minutes to work by bus everyday.
  • ◆ Rent a small flat and live along. He visits his parents every weekend.

User Needs

The app needs to enable the users to:

  • ◆ Understand the game mechanism.
  • ◆ Get a sense of achievement.
  • ◆ Know the highest score
  • ◆ Adjust the game settings
  • ◆ Stopping the game
  • ◆ Quit the game
  • ◆ Contact the production team with comments or questions

Client Needs

The app needs to enable the client to:

  • ◆ Help players understand the game mechanics.
  • ◆ Ask users to watch advertisements.
  • ◆ Placing ads to increase revenue.
  • ◆ Provide contact information.
  • ◆ Know the bugs.
  • ◆ Let players know about updates.
  • ◆ Privacy Policy.

Outline of Scope

With the research results and lists of user and client needs, I gained an understanding of the content and functionality that the app would provide. I compiled the requirements and discussed them with the respective stakeholders to confirm their feasibility.

Content Requirements

  • ◆ Name of the production team
  • ◆ Team logo
  • ◆ Team list
  • ◆ Game icon
  • ◆ Uniform-style buttons and borders
  • ◆ Fonts
  • ◆ Privacy Policy

Functionality Requirements

  • ◆ Volume setting
  • ◆ Vibrate control
  • ◆ Special effect volume setting
  • ◆ Recorded the highest record
  • ◆ Payment function
  • ◆ Pause

Plan Documentations

After the discussions, I proceeded to create a content map to ensure the delivery of appropriate content at the right moments. Subsequently, I utilized an interaction map to outline user paths. Lastly, I developed a sitemap that integrated information from the content map and interaction map, providing the team members with a comprehensive understanding of the displayed content and the app's user interactions.

Content map, Interaction map, and sitemap of Color Touch

Wireframe and Prototype

Wireframe

Usability study

I created a low-fidelity prototype using Adobe XD and shared the prototype link for usability testing. The participants included our team members and five individuals outside the team who matched our target audience criteria. Our team members conducted unmoderated usability tests, while I personally interviewed the other participants.

Findings

  1. To prevent accidental triggering of advertisements, it is crucial to position the ads in the top area of the screen within the game and .
  2. While some players use both hands to play mobile games, we need to prioritize the experience for single-hand users, considering our target audience of commuters who may only be able to use one hand during their travels.
  3. Currently, users are required to press the exit button to navigate away from a page. However, during usability testing, it was observed that some participants tended to leave a page by tapping on the empty space area.

Refine the design

Mockups

After the usability testing, we unvealed findings which could improve our user experience.

For example, we decrease the size of our ads. We also tried a more visual way to express necessary parameters, hoping to decrease players cognitive load.

High-fidelity prototype

Implemeting UI with UMG system

To incorporate the user interface (UI) into the game, we utilized the UMG (Unreal Motion Graphics) system in Unreal Engine 4. By leveraging the visual scripting system called "Blueprint," we added functionality to the UI elements and implemented motion graphics. This allowed us to conduct more comprehensive testing of the game, ensuring a seamless user experience.

Takeaways

Despite being a simple mobile game, we consistently prioritized putting ourselves in the player's shoes to create an enjoyable gaming experience, focusing on both the UI design and game mechanics. We conducted thorough reviews of our production process and actively sought opportunities for optimization. With a shared enthusiasm, we are eagerly anticipating our future collaborations and the exciting possibilities they hold.

Other projects