top of page
Zumi Visual Cover.png
Zumichat

Zumi's Visual Journey

Zumichat is an AI companion app where you can connect, play, and grow with a customizable character called Zumi. It not only learns and shapes its personality based on your conversations, but goes out into its own world to make friends and bring back stories.

 

I led Zumi's transition from a 3D model to a 2D character system in Rive, unlocking the expressiveness, performance, and interactivity that would finally bring Zumis to life.

Role
Product Designer, Character Animator

Tools
Rive 2D, Figma

Collaborators
Nicholas Guzman (Rive Engineer)
Elira Duro (Head Designer, 3D model)

Where It All Began

Zumis were introduced as cute, amorphous blobs, inspired by the concept of characters that adapts and shapes their personality to their user.

Zumi 3D Version.png

Zumis were introduced as a 3D model, which felt like the right decision at the time. To follow common trends of AI companions and utilizing the resources, Zumis’ initial designs were built in Maya (by Elira Duro) and implemented in Spline 3D for its use of integration to Zumichat, which started out as a web app only.

The Walls I Hit

The first version of 3D Zumis were a good first step, but we faced character failures:

  1. Zumis’ reactions were limited and slow, which broke the illusion of a living companion

  2. The range of emotions we could show was too narrow for a character meant to adapt to their users

  3. Users couldn’t interact or play with their Zumis in ways that made their relationship feel real

“Zumi is so cute and makes me want to come back, but I wish I could do more with it” —User A
“I don’t think I really like the style of Zumis because the faces look so basic” —User B

 

Reactions were mixed, but one thing came up consistently: Zumi lacked life.

Exploring the Character

I started by asking a simpler question: what does it actually mean for a character to feel alive? The answer kept coming back to the same things: expression, reaction, and touch.

Capture.PNG
FACES.png

More interaction between user and the character, giving it more emotions, reactions, actions.

  • Added more expressive faces

  • Added more cosmetics, leaning into trendy items like pimple patches, 2016 aesthetics (dog filter, fidget spinner)

  • Added more actions users can do with their Zumis: feed, bathe, heal, sleep

Actions.png

Designing the Expression System

Rive became the solution: Rive is a tool that utilizes a visual map to simplify character interactivity.

I led the transition from 3D to 2D, working in Rive to design Zumi’s expression system and state machine architecture.

My goal was to create a way to select Zumis’ eyes and mouth to create multiple reactions and expressions. However, through trial and error, the Rive engineer (Nicholas Guzman) and I landed on starting out with a simplified set of expressions: a 1-5 moods for easier implementation. I created them utilizing Rive’s View Models, a container that feeds real data, like text, numbers, or colors, directly into your animations so they respond and update automatically.

Starting simple was the right call: a smaller set of clearly defined states made it easier to test how expressions felt in context, and gave us a stable foundation to build more complexity on top of it later such as additional pet care actions.

The Effect

  1. Improved performance: app felt faster, more responsive

  2. Improved interactions: Zumi had more reactions, expressions, and even more care actions

HFkPIL-WIAEdz1l.jpg
reveww.png

These changes ultimately led to reduced negative user reactions as they connect more to their Zumis.

It opened up additional collaboration opportunities with engineers. I was able to have more control in the production and simplify handoff steps.

One unexpected unlock was sound. Because I had direct control in Rive, I could add and adjust sound effects without extra engineering steps, something that would have required a full handoff cycle before.

What This Taught Me About Character Design

Redesigning Zumi taught me that character design isn’t just about how something looks, it’s also about how it behaves, responds, and makes someone feel over time. The shift to Rive wasn't just a visual update; it changed how I worked, giving me more direct control over the product and shortening the feedback loop between design and engineering.

last screen.png

That structural change opened doors to more app features. It enabled a multiplayer interactive map, made sound design something I could own and iterate on directly, and laid the groundwork for future expansions like speech animation. What started as solving a character problem ended up reshaping how the whole team builds Zumi experiences.

Designing the Social Layer for On-Chain Identity

SSE thumjbail.png
bottom of page