KeepItUp is 2D musical rhythm running mobile game.

In this game, players will encounter a variety of obstacles when they are running. They need to jump to avoid those obastacles. Try to match the rhythm of the music when jumping will earn a higher score.

May 2017

Behind the Scene

Team Members

  • 1 Visual/UI/UX Designer: Me
  • 6 Engineers

My Responsibilities

As the sole UI/visual designer in this team, I was responsible for all artistic work. In my understanding, a user interface can be considered well-designed only if it is both nice looking and user-friendly. My objective was to design such a user interface that could push our product to the next level.

Target Users

All genders from 6 to 45.

User Scenario Studies

Based on the user survey I conducted, I find that many people like to play simple games to kill time. They like to play puzzle, runner, and other types of games on their cell phones while waiting for buses, waiting in line, or waiting for food in restaurants. Inspired by this phenomenon, we plan to create an entertaining, fun mobile game, so that people can play or stop playing it whenever they want to.

Premises

KeepItUp is a iOS-based 2D game. The intuitive of this game is to build upon a classical game, like Super Mario, so that everybody can easily master how to play it. However, this game also combines a creative element - Music! Although the operations are very simple, the players have to follow the music rhythm to execute their operations.

Objectives

The global goal of the game is to reach the end of the scene. The character should dodge and pass any kinds of obstacles by jumping. In order to unlock the next level, the character should get enough bonus items, i.e., stars through his whole way. Once the character fails to pass any of the obstacles, the game is over and the player can choose whether to restart from the very beginning or , if possible ,from where he dead.

Key Features

After group discussion, we decide that KeepItUp should have the following features:
  • Cute and delightful interface
  • Simple and natural operations

Wireframes

In order to make the whole game process clearer, I created the wireframes for KeepItUp. wireframes

Problem 1: How to make functional elements, for example, buttons, entertaining as well?

  • Solution: I incorporated freehand painting into the design of functional elements to add vividness to its interface.

Problem 2: How to design pause screen and end-level screen, which can guide users to click a certain button and proceed to next step?

  • Solution: In the process of designing these screens, I used different colors to distinguish the buttons, which users were most likely to click, from other buttons. Users will easily notice the color contrast.
    Pause:
    End Level:

Problem 3: As there are various elements on the screen, what should be done to grab a user's attention to important contents?

  • Solution: I added black masks to the screen to reduce background distractions.

Problem 4: As a different background image needs repeatedly playing for each level, the problem is how to repeat using a small-sized image.

  • Soulution: Make all images’ top and bottom able to seamlessly combine with others’. It will achieve the effect that no trace will be left when they are played on repeat.
    Background:
    Background Repeat:

Usability Tests

We conducted two rounds of usability tests. In each round, we invited 10-15 participants to play KeepItUp, observe their interactions with the game, and analyze the problems as below.
  • Learnability:
    How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency:
    Once users have learned the design, how quickly can they perform tasks?
  • Memorability:
    When users return to this design after a period of not using it, how easily can they reestablish the proficiency?
  • Errors:
    How many errors do users make? How severe are these errors? How easy can they recover from the errors?
  • Satisfaction
    How pleasant is it to use the design?

Feedbacks

  • Learnability:
    Because there were many similar games in the App Store, 100% of users had no difficulties playing KeepItUp from the beginning.
  • Efficiency:
    100% of users can get into the game mode and jump over obstacles in a very short time.
  • Memorability:
    In the first round of usability tests, we invited 8 users to play KeepItUp. Two months later, we invited the same group back. The moment they started to play, 100% of users knew what to do next.
  • Errors:
    In terms of the game interface, users clearly knew how to operate, and there is almost no possibility of operational errors.
  • Satisfaction:
    90% of users believed that the interface is cute, the operation is smooth, and the game contents are fun. 80% of users said they will download KeepItUp if it was launched in the App Store.