Mobile UI, UX Writing

Calculator 2: The Game

Calculator 2: The Game is a math-based puzzle game for iOS and Android. I was involved in designing the user interface, developing the game, and both designing the onboarding and levels.

Background & Overview

Another sequel! When I joined Simple Machine, I started out fixing bugs for Calculator: The Game. Eventually, I prototyped a new mode for the game which grew and became the sequel. I was the lead developer on this game, and while I could go on about level design and creating generative math puzzles, this case study is going to focus specifically on the design of the initial onboarding, and subsequent tutorials throughout the game.
The onboarding and tutorial requirements included:

• UI Design: What does the onboarding look like? Is it a static image, a video, a playable level?
• UX Writing: How do we design an AI Chatbot? How do we explain the rules in a conversational way?
• Level Design: When a new feature is introduced, a player is given one or two tutorial levels to teach them how to use it.

For this project, I worked with a lead designer who provided feedback and outlined the project requirements. Being both the product designer and developer on this project was a tough balance because I had to design within the constraints of my own coding skills. I knew whatever solution and final design we came to was gonna be handed off to me in the end.

Breakdown

Role

Duration

Team

Tools

UX/UI Designer

8 Weeks

1 Game Designer, 1 Developer, 1 Artist,
1 UX/UI Designer, 1 Level Designer

Adobe Photoshop, Adobe XD, Unity

Problem &
Tasks

Design the initial onboarding process for a math puzzle game

Design the levels and copy for tutorial levels where a new feature is introduced

Moodboard

Early Solution

Remember that insert that came with a graphing calculator that taught you how to use it? That was my first idea. I wanted the onboarding to be familiar.

Pros:

• Takes up the least time of the user
• Fits the theme of the game

Cons:

• Not interactive
• Too much info at once

UI Design

I wanted the design to be instantly recognizable, which left me very little wiggle room in terms of visual design. There was never a question of how it was supposed to look.

• Inspired by scientific calculator formula sheets
• Static image with all info
  

A problem that came up was, what if a player had never used one of these calculators before? This solution was based on an assumption that might not be true, especially given that some of our users were under the age of 13. The solution was too literal.

Feedback

Thematically this worked and was fun, but overall it was not the best way to convey all the game info. Some feedback I got:

• Incorporate the chatbot
• Make it seamless and interactive

Final Design

With the notes that I received, I worked with the level designer to design an "intro level" that would walk players through the different features of the game. A similar tutorial experience can be found in Monument Valley which slowly teaches the player about the features in the game and only when they need to see them.

Pros:

• Very approachable and conversational
• Interactable and kept players in the game

Cons:

• Takes more time for the user to go through
• Requires resources from artists, level designers, and is more time to implement
   

UX Writing

Dot is the chatbot that we designed to walk players through Calculator 2: The Game. I had the pleasure of writing most of her dialogue. Here's some notes I had for writing her text:

• Overly positive
• Uses a lot of exclamations
• Positive reinforcement
• Simple words and sentences
• Loves puns and cracking jokes

She brought a lot of levity and life to the game. Because she's only speaking to you in the second person, it feels very friendly.

Level Design

The level design was the most complicated part of the process. I love puzzles and I LOVE a good challenge so, the initial levels I designed for these were way too hard and jumped in too fast for a new user. Some feedback I got was to:

• Only introduce one new button/feature at a time
• Isolate the new feature/button so the user can focus just on that info
• Make it sooo easy they can't mess up

Visual Design

Outcome &
Next Steps

We brought the game to PAX East, a gaming convention, to get some feedback. Our goal was to be able to watch a user go through the onboarding without having to guide them or point them in any way. Overall, it worked! We ended up trimming the text down based on the then shipped the game with these tutorials.

If I were to continue working on this project, I would love to explore:

• Chatbot interface
• Audio tutorials

A chatbot interface could work really well with the character and the existing dialogue system. Audio tutorials could move the users along without using screen space to show text.

Contact 

Currently
Freelancing and actively looking for full-time, part-time, or freelance opportunities in UX, UI, or visual design.

Email
dangddanny@gmail.com

Elsewhere
LinkedIn
Instagram
Twitter

Resume
Download