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!
The Emotion Scan game loop
Tool tips and chats
I worked as a game designer and the art director of Tendar.
I was responsible for the look of the Google-sponsored AR game. This role covered concept art, character and environment design, 3D modeling and animation, rigging, UI/UX design, and game and level design. I worked as the sole artist on the project from March 2018 to May 2019 and in that time, designed and created a majority of the art, user experience, and user interface design in the app. I worked closely with a technical designer and engineer to design and implement all parts of the game, under the direction of my project leads Danny Cannizzaro and Samantha Gorman.
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.
Learning by doing.
I was initially hired as an art and design intern to work on Tendar and Virtual Virtual Reality during the middle of my sophomore year at USC. I was determined to do the best work I possibly could! The experience pushed me to learn new skills and iterate quickly. I learned 3D animation, rigging, and 2D vector illustration on the job. Soon after I created over 200 AR optimized 3D props, all of Guppy's animation and blend trees, and over 260 vector illustrations in under 3 months, I was promoted from intern to art director and game designer.
1. Emotion Scan game loop
for players to understand their facial expressions are being turned into food for Guppy.
for the player to access an archive of their progress.
3. Tank Shelves
for players to access unlocked and purchased tanks.
4. Game inventories
for players to customize their tanks and delete objects.
for players to purchase food, tanks, objects, and accessories.
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 expressions are being converted into food for Guppy?
One of the major projects I worked on was the emotion scan game loop. Players create emotion blobs by making happy, sad, angry, worried, and surprised facial expressions in an AR mini-game. Then, they can turn these emotion blobs into different food flakes for Guppy to consume.
A preexisting design had been implemented, but players did not understand their emotion blobs were being distilled into food, and did not understand the icons represented food. To more clearly communicate the process to users, I created a sequence in which players could watch the blobs get blended and coffee pressed into food flakes, and I crafted unique designs for each food flake.
I needed to create a simple, usable design for an 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 handle a lot of information, and one that was usable for a mobile screen space.
Visually representing object scanning progress.
Along with displaying over 200 objects, players also needed to understand how far they were from obtaining an object. In Tendar, players can use their phone camera to scan objects in the real world and turn them into digital objects Guppy can interact with in his virtual tank. However due to software constraints, sometimes players would need to scan the same object 2 or 3 times before the system could fully recognize it. Because we needed to display over 200 object icons, screen space was limited and we would not be able to put text that could communicate this to the player. To solve the problem, I created a fill-bar design that could visually indicate the player's object scanning progress.
How does one visually represent 75 different emotions that must all fit on a single page? When tasked to design this, I first thought of the pain scale charts you see at the doctor's office. However, I quickly realized this design would not work with the complexity of the emotions I needed to communicate; players would not be able to differentiate between anxiety and worry, languidness and apathy, or mortification and distress. The next idea I thought of was to display every emotion with the emotion blobs the player themselves had created, but this could lead to optimization issues for mobile AR. I settled on a simple candy button design that was aesthetically and thematically cohesive with the candy-like Guppy food flakes I created.
Tank shelves and game inventories
With only 4 weeks to design, I had to iterate quickly and effectively.
I was 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 to eliminate unnecessary development efforts.
For players to say, "I want to decorate my tank!"
I wanted players to feel inspired to customize their tanks. I thought about what would motivate the user to decorate their tank and why players would use the system, in order to design how players would use the inventory.
Players want to see what props they have and how they look in different environments.
2D object icons look cute and players want to see how the object looks in 3D.
Players want to decorate their tanks in their own unique and creative way.
Props are easy to access and delete, and it feels good to select and move them.
Players want to see Guppy's reaction to the different objects and tanks.
I let these player motivations guide my re-design. The new object shelf design showcases sprites of each object at their best angle- using a custom in-engine photography tool I assembled and positioned each object. Pulling props into the tank has been made simple- players can just drag the 2D sprite right into their tank and it will turn into the 3D version of the prop. Returning objects to the shelf is simple and quick, where players can just drag the prop to the top of the screen and it will pop back into their shelf. A shelf icon bubble will appear, and the object will pop into the bubble with a light haptic pulse. Deleting objects from the shelf is straightforward, where players can press the Edit button, select the objects they want to delete, and then press Delete. Finally, we added that anytime the player adds an object into the tank, Guppy will swim into its virtual tank to see what the player has to show them.
For players to say, "I want to decorate multiple tanks!"
To invite players to access and customize multiple tanks, the interface for switching between tanks has to look and feel good. In this design, I focused on making a straightforward design that could showcase the personality of every tank. I also wanted to provide the player the ability to view the amount of objects in their selected tank and clear all the objects from their tank in one easy tap. I decided to put the button for clearing all objects from the tank in the tank shelf instead of the object shelf. If I put it in the object shelf, players could accidentally clear their tank when attempting to carefully place objects, and also confuse it with the button for deleting objects.
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. Luckily, I helped design the flow for the game tutorial, so I understood the context in which each chat would appear and the functionality they needed.
I first identified the issues users had with the old Tendar tool tips:
Players do not know where to tap to get through the tutorial. The tool tips are not visually guiding the player in any way.
Players could confuse the tool tips with Guppy chats, because visually they are too similar.
The font size and spacing of the tool tips is too small and to illegible.
Then I identified the issues users had with the old Tendar Inc. chats.
Players did not understand these messages were from Tendar Inc.
Players could confuse the Tendar Inc. chats with Guppy chats, because visually they are too similar.
I sketched 6-7 different designs and coordinated with my creative director to make sure they were in scope and aligned with the project vision. I settled on designs that made Tendar Inc. look sleek and corporate. With knowledge of the later plot points of the game, I additionally settled on making the Tendar Inc. chats and tool tips visually similar, so players could initially find Tendar Inc. trustworthy, helpful, and friendly.
What I learned
Ask questions and understand the project goals.
I learned to ask questions early and communicate with my project leads. When I first started working at Tender Claws, there were times where I dove into design too quickly without fully understanding why we were building a certain feature, which resulted in unnecessary designs and development efforts.
After a few failed designs, I quickly realized that there is nothing more important than understanding the goals of the project. All designs and decisions must be based on the goals of the project, and if they aren't centered around the player experience goals, they wont work! For every project moving forward, there are a few questions I'll always make sure I have answers to.
What are the player experience goals?
Why are we building this feature?
How does this feature fit into the bigger picture?
What are the necessary elements?
What do players care the most about?
Which parts of this feature will players find the most annoying? The most rewarding?
Will this design work on both tablets and phones of different aspect ratios? / Does this design scale?
What is the scope of the design I am thinking about? Is it possible to implement at this stage of the project?
Working closely with my team, I learned that everyone needs to understand the experience goals, time constraints, and technological limitations of the project. I can create the most beautiful mockups and designs but if they take a costly amount of time to implement or are impossible to optimize for mobile AR, the designs are useless. The best solutions I found sat at the intersection of design, art, and code. At first, I only had an understanding for art scope, but as I continued on the project and asked more questions, I started to grow an understanding for the technological constraints and engineering feasibility of each design.
Iterate. Iterate. Test. Iterate.
I had the privilege of having my designs stress-tested by Google QA. The best designs I created on the project were playtested and iterated on multiple times. Whether I was watching a co-worker use the feature I designed or receiving feedback from my creative director or Google playtesters, all feedback I received was incredibly helpful in informing how to improve the user experience and user interface.
If I could do this again...
I would list out all the necessary elements of the feature first before going into actual design! Listing out the necessary elements would inform the structure the feature needed to be built by. I wish I not only identified the things the feature needed to accomplish, but also the priority each aspect would have.
I wish I'd spent more time paper prototyping and planning my designs before implementing them in Unity and Photoshop. Oftentimes I'd let the pressure of deadlines get to me and I'd jump into designing something polished way too quickly. In the long run, I would have been more efficient if I'd allocated more time into planning and breaking down the steps of the flow. Because of this experience, I know now to work through a design in this low-fidelity stage thoroughly before moving onto in-engine implementation!
There are many parts of the design that need to be improved. I hope to continue to learning, revising, and growing!