Giving AI Chat
a Personality
HACHI — DECEMBER 2024
My Role
Product Designer — Research, Visual Design, Interaction Design, User Flows, Prototyping, Presentation
Tools
Figma, Figjam, Figma Slides, Rive
Team
4 Product Designers
2 Design Managers
2 Founders
Duration & Status
10 weeks, Handed off to Founders
Industry
Consumer AI, AI Companions, Chat, Gamification
Context
I joined Hachi, an AI companion startup, to redesign its chat experience from the ground up. The founders had a clear vision for an AI with personality, but only two broad asks: validate our users, and redesign the UX and UI. With no defined target, my job was to shape what Hachi should become, all in 10 weeks.
How I added value
As one of four designers on this project, I worked closely with the team to define what Hachi should be from the ground up. I helped turn our research into the design pillars that guided the project, designed the chat from low to high fidelity, and helped rally the team around group chat, the feature that doubled user-started conversations.
0.1
hachi walkthrough
VIDEO
0.2
HACHI REACTIONS
VIDEO
0.3
HACHI GROUP CHAT
VIDEO
What is Hachi?
Hachi is an AI companion app where users chat with characters that give useful, personal answers. Think ChatGPT, but with more sass (Figure 1.0).
"Can you validate our users and redesign Hachi?"
The founders came to us with two requests: validate our users, and improve the UX and UI. They sounded simple, but neither had a defined target. The founders had a clear emotional vision for Hachi that hadn't come to life yet, so my job was really to shape what Hachi should become.
1.1
Founders messages and requests
VIDEO
Learning how people connect with AI
I partnered with our UX researcher to uncover how people interact with AI, why, and what had already been tried. Together we ran 15+ interviews and 50+ surveys, gathering 200+ data points (Figure 2.0).
What we found
After synthesizing our data, three patterns stood out: about the market, about how people feel toward AI, and about how they actually build connections.
From findings to design pillars
I turned each finding into a design pillar to guide every decision that followed. Each pillar answers the finding directly above it.
Walking through the old app
With a direction set, I partnered with another designer to audit Hachi's existing app. To ask Hachi anything, users picked a preset prompt, then answered follow-up questions with only 3 choices each. Some answers sent them through the same loop 3 to 5 times, and Hachi's final suggestions didn't always match the question (Figure 3.0).
3.0
old hachi walkthrough
INTERACTIVE VIDEO
Before — Old UX flow
Mapped out, the flow was rigid. Hachi asked, users picked one of three set answers, and only then did Hachi generate a response. There was no way to ask something new or refine an answer they didn't like (Figure 3.1).
After — New UX flow
I proposed a conversational loop instead. The user asks, Hachi answers and checks if it got it right, and the user refines until they're happy. From there, they can share or save the conversation. Answers come faster, and it feels like talking to a friend (Figure 3.2).
Lots of iterations, a few key decisions
I went through many iterations of Design A, starting from wireframes inspired by ChatGPT and messaging apps. The low-fidelity version set the structure: chat bubbles, chat prompts, and an input field. In high fidelity, I separated the user's bubble from Hachi's text box, which could now hold rich content like movie trailers, added a gradient background, and refined the chat prompts so users could refresh for new ones (Figure 4.0).
Refining interactions in high-fidelity
Once we were confident in this direction, I had fun designing interactions beyond chat and prototyping them in Figma (Figure 4.1). Here's the thinking behind each one.
4.2
feature prototypes
VIDEO
A drawer for open-ended questions
Inspired by the new UX flow, the input opens into a drawer where users can ask Hachi anything. For users who don't know where to start, chat prompts sit right above the keyboard (Figure 4.2).
Reactions and sharing
Reactions give Hachi more personality, and they double as feedback. Whether a user liked or disliked an answer helps train the model. Users can also share Hachi's fun answers by link or download, which increases engagement (Figure 4.3).
Group chat with multiple Hachis
Nobody asked for this one. I noticed most AI competitors were one-on-one, but real conversations often happen in groups. Users can chat with up to four Hachis at once, and chat history shows which Hachis are in each conversation (Figure 4.4).
Make it more visual
When I presented Design A, the founders liked it, but their feedback kept coming back to one thing: make it more visual. When I asked what that meant, they pointed to gamification, visual novel games, and Tamagotchi (Figure 5.0)
Making Hachi the centerpiece
Design B put Hachi's animated portrait front and center in an illustrated scene, with replies in a speech bubble like a visual novel. Underneath, the foundation stayed the same: the chat prompts and input field carried over from Design A. When we presented Design B, the founders loved it. It gave them the visual, game-like feel they'd been asking for, and it became the north star for Hachi's chat (Figure 5.1).
6.0
hachi walkthrough
VIDEO
6.1
chat prompts
VIDEO
6.2
HACHI REACTIONS
VIDEO
6.3
hachi groupchat
VIDEO
6.4
sharing
VIDEO
The new flow made sense instantly
Testers said the new experience helped them understand Hachi's purpose right away and called it clearly better than the old version (Figure 7.1).
Group chat doubled engagement
In testing run and measured by the founders, conversations that users started on their own (without founders prompting them) doubled after we introduced group chat. Users found talking to multiple Hachis more engaging than chatting with one (Figure 7.0).
As I reflect...
This project threw a lot of unknowns at me, and here's what I took from it:
