{"id":4461,"date":"2018-05-14T15:33:21","date_gmt":"2018-05-14T12:33:21","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4461"},"modified":"2023-07-24T11:41:11","modified_gmt":"2023-07-24T11:41:11","slug":"case-study-letter-bounce-ui-design-for-a-mobile-game","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-letter-bounce-ui-design-for-a-mobile-game\/","title":{"rendered":"Case Study: Letter Bounce. UI Design for a Mobile Game"},"content":{"rendered":"

Playing games is not always pure entertainment. Today we have prepared a new case on design for a mobile game. What makes it different from the\u00a0Real Racer<\/a> game we showed before is the balance it had to find between fun and education. So, let’s review the creative path for Letter Bounce<\/a>, a bright and simple crossword game.<\/span><\/p>\n

\"mobile<\/p>\n

Project<\/span><\/h2>\n

UI and graphic design for a mobile game based on crossword puzzles.<\/span><\/p>\n

Process<\/span><\/h2>\n

The task our team got was creating a bright and funny interface of a crossword game for mobiles. It had to set the harmony of an educational game which is simple, funny but letting the user’s brain get some load.<\/span><\/p>\n

The functionality of the game lied in solving the crossword-style puzzles using pairs of letters to fill in the blanks – so, it’s a modernized version of a traditional approach to crosswords.\u00a0Each level had sets of letter pairs that needed to be dragged into the blank spaces to complete the words and this way player solved the puzzle.\u00a0Each level had a clue to help\u00a0users work out the words. The app also had an element of socializing which supported general gamification<\/a>: a player could connect\u00a0to Facebook and share the scores on the leaderboard as well as compete with friends. Beautiful design and animation were considered among the core features supporting user retention.<\/span><\/p>\n

First, let’s check the main screen of the game. Below you can see the solution for interactions with the letters in the process of filling in the game grid. The top part of the screen showed key indicators: the multi-score coefficient, the level of achievements marking milestones with stars, and the number of coins that a user had at the moment. The screen background<\/a> used a nice gradient that was not over brightened and didn’t distract the user. The grid was placed in the upper part of the screen and applied white background under the letters while the interactive pairs of letters were placed in the lower part and colored yellow. This way users could scan the screen and understand the difference of the layout elements due to color contrast. In the bottom part of the screen, there was a hamburger button hiding the menu, the theme of the current game, and the hint button marked with a lamp bulb icon. All the elements in the layout are designed with smooth lines and rounded corners to make the interface look playful rather than strict.<\/span><\/p>\n

\"home<\/p>\n

Another screen presents a tutorial<\/a> showing users\u00a0animated interaction to make the navigation clear. For this aim, the\u00a0funny letter character was used as a mascot which communicated with a user and gave the needed hint. To avoid unnecessary taps and transitions, the tips appeared on the faded screen and showed the animation imitating interaction gestures together with a text prompt.<\/span><\/p>\n

\"mobile<\/p>\n

In the flow of the UI design process, the designer offered a variety of gradients to choose from. Bright and juicy colors played a big role in creating a playful atmosphere.<\/span><\/p>\n

\"Gradients<\/p>\n

 <\/p>\n

One more thing to mention was the animation of a hint button. It imitated the pulsation with lights and shadows playing on the surface to draw user’s attention to the updates. The number of coins near the hint icon shows how many coins are paid for one hint.<\/span><\/p>\n

\"mobile<\/p>\n

Various pop-up windows were created to inform users about achievements and updates, give access to settings, and present some offers from the game. Below you can see the examples: the first screen shows the pop-up with information about a completed level, total score, bonuses, leaderboard, sharing to Facebook, and options on continuing the game. The latter is presented with the round buttons in the same style as buttons on the game screen this way supporting the visual consistency. The next screen provides information on the ways to get coins. And the third app screen shows the settings.<\/span><\/p>\n

\"popups<\/p>\n

One more important element of a mobile game UI is a map of levels. In Letter Bounce it was performed as a long path through a variety of beautiful landscapes from the snowy mountains to the hot volcano. Graphic designer Denys Boldyriev created unique flat illustrations for the map, vivid, lively, and full of color.<\/span><\/span><\/p>\n

\"mobile<\/p>\n

\"levels<\/p>\n

Here’s the animated flow of the illustration on the game map.<\/span><\/p>\n

 <\/p>\n