UX/UI Design on Tendar
Tendar is an AR mobile game where you feed a virtual pet fish a well-balanced diet of laughter, surprise, and tears.
Bring Guppy out of its virtual fishbowl and into the real world. Guppy will learn and evolve based on player's facial expressions and social interactions. It can recognize and respond to over 200 objects, building up knowledge as it interacts more and more with the real world. Watch as Guppy takes stock of it's newfound knowledge to evolve from a non-verbal AI to a unique creature with its own personality!
CONTENTS
-
My role
-
The Emotion Scan game loop
-
Guppypedia
-
Game Inventories
-
Tool tips and chats
My role
We all wore many hats.
Given that the Tendar team was very small (where at most, three people would be working on the project at the same time), my role was highly collaborative and extremely broad, where I got work on many aspects of the game. This broad role included collaborating with teammates to design the user experience and user interface for various features within the game.
With a small team, large scope, and limited time to develop, I needed to provide creative yet simple and usable solutions to design problems with consideration to the affordances of mobile AR. I rapidly iterated wireframes, sketches, flows, and full designed comps based on feedback from Google QA. After graybox designs were tested, I would create finalized assets and work with my team to ensure designs were implemented to specification.
New Features
1. Emotion Scan game loop
for players to understand their facial expressions are being turned into food for Guppy.
2. Guppypedia
for the player to access an archive of their progress.
3. Tank Shelves
for players to access unlocked and purchased tanks.
Redesigns
4. Game inventories
for players to customize their tanks and delete objects.
5. Store
for players to purchase food, tanks, objects, and accessories.
Clean Ups
6. Tool Tips
to guide players through the game tutorial.
7. Chat UI
for players to easily recognize and distinguish chats from Guppy and Tendar Inc.
The Emotion Scan game loop
How will players understand their facial captures are being converted into food for Guppy?
One of the major features I worked on was the emotion scan game loop. Players create emotion blobs by making happy, sad, angry, worried, and surprised facial expressions using their front-facing camera in an AR mini-game. These food blobs are turned into food flakes players can later feed Guppy.
An initial design had been prototyped. Through playtesting, we learned that although players understood their facial expressions created emotion blobs, they did not understand that Guppy's food flakes were made out of the emotion blobs. I created a sequence to better communicate this concept to our players. After creating the emotion blobs, players are directed to a screen where they see the blobs be converted into food flakes, and then taken to a readout.
I wanted the sequence to be satisfying, playful, and a little absurd, so I created an animation of the emotion blobs being blended together, and then coffee pressed into cute konpeito-like pellets. Who doesn't like seeing their face blended up into goo and then turned into candy? Each food pellet had a distinct design that emulated the emotion they represented.
Guppypedia
I needed to create a simple design for a massive archive of the player's progress.
Guppypedia is an archive that can display over 200 player-discovered objects, 250 learning concepts, and 75 distinct emotions. It also documents Guppy's current mood, storage space, hunger levels, and gives access to the FAQ, about, and credits pages. When I was tasked to create this archive, I knew I needed to create a readable design that could clearly display lots of information for a mobile screen space and not overwhelm the player with unnecessary information.
Visually representing object scanning progress.
In Tendar, players can use their phone camera to scan objects in the real world; cars, bicycles, hamburgers, alligators- you name it. When a scan is successful, a digital version of the object is added to the player's inventory and can be brought into Guppy's virtual fish tank. Sometimes, scans aren't successful; they are partially filled and remain incomplete until the player provides more scans. I wanted to display the percentage complete for each object but quickly realized having that much text for every object could overwhelm the screen with information. Instead, I opted for displaying a percentage complete bar as the background for every object in the archive. It visually indicates the player's scanning progress for each item without crowding the screen.
Abstracting emotions.
How does one visually represent 75 different emotions on a single page? My first instinct was to use face emojis but I quickly realized the emotions I needed to display were relatively complex- for instance, how does one differentiate between anxiety and worry or mortification and distress? My second instinct was to display every emotion the player collected with the emotion blobs the players created with their face scans. However, this could lead to issues with both player privacy and optimization. I decided to lean into the concept of colors representing different emotions. The design I created ended up looking like candy buttons, which I felt thematically and aesthetically meshed with my konpeito food pellets.
Tank shelves and game inventories
With only 4 weeks to design, I had to rapidly iterate, test, and evaluate.
An engineer and I were tasked to redesign player inventories in early-September and the designs needed to be done by early-August for release. At the time, I was also tasked to complete over 250 vector illustrations for Guppy's learning concepts. Because we were strapped for time, the new designs needed to reuse existing systems as much as possible.
The previous object shelf design had limited feedback for adding and removing objects from the tank. Players would tap an icon that would enable the object in the tank. To remove the object from the tank, players would drag down from the top of the screen to reveal a trash can, and then drag the object to the trash can to remove it from the tank. There was no system for removing objects from the inventory, and players often were confused which of the two actions they were doing. The UI for each prop was a gray cube with text underneath indicating what the object was; making it difficult to differentiate between objects and text-heavy when the inventory was full.
Improving object shelves was a multi-step process. First, we focused on improving the game feel of adding objects to the tank. Rather than having a button press enable a pre-placed object in the tank, we opted for allowing the player to drag and drop items into the tank. This would feel more interactive and responsive, but we needed to make sure we sold the transition between a 2D graphic in a flat menu to a 3D object in a 3D space. An engineer created a proprietary tool in Unity where I could position every object we had in the game and capture a snapshot of it to create its icon. Goodbye cubes. This tool saved the position and rotation of the object, so that when the object was dragged into the tank it would remain in the same position and rotation as the icon.
Second, we improved the flow of removing objects from the tank, and differentiated removing objects from the tank between removing objects from the inventory. Instead of breaking up returning objects to the inventory into two steps (dragging down to reveal a trash can and then dragging up to remove) we distilled it to one step. Players can now return objects to the inventory in one swipe by dragging the prop to the top of the screen. Deleting objects entirely from the inventory is made clear with an edit button below the inventory. Players can tap this button and tap any object they want to remove permanently. Finally, they press a delete button to confirm.
Tool Tips and Chats
With only 2 weeks to re-design, I had to iterate quickly and effectively.
Two weeks before launch, I was asked to redesign the UI for the tool tips and chat messages from Tendar Inc. I needed to work fast and efficiently, while coming up with design ideas that could remain in scope from an implementation standpoint.
I first identified the issues users had with the previous Tendar tool tips:
-
Players do not know where to tap to get through the tutorial. The tool tips do not visually guide the player to tap where they need to in order to progress.
-
Players confuse the tool tips with Guppy chats, because neither are visually distinct from one another.
-
The font size is too small.
-
Tendar Inc. chats should be skinned to look sleek and corporate.
I sketched six different designs and coordinated with my project lead to make sure the designs were both in scope and aligned with the project vision.
