Echo Lu

VoiceOut.
A companion for everyday feelings.

A mental wellbeing product with a cloud AI companion, guided reflection, and access to counseling.

Project
VoiceOut
Time
2024–2025
Duration
11 months
Role
UX Design Lead
Focus
Team leadership, interaction design, design systems
Tools
Figma · Interactive prototypes

A familiar friend through changing feelings.

VoiceOut is a pre-launch mental wellbeing product for Chinese-speaking people abroad. Its cloud AI companion helps users name emotions, express what is on their mind, and take a small next step.

As UX Design Lead, I led a small team across the companion experience, interaction design, and design system.

Original smiling VoiceOut cloud companion
Your everyday companion
Angry cloud with flames
Room for anger
Confused cloud with a question mark
Space to wonder
Cloud with glasses, a notepad, and a pencil
A moment to reflect
Cloud wearing a hat and holding an open book
A little guidance

Explore the tone.

Compare five greens and the tone each brings to the cloud companion.

Original VoiceOut cloud in the selected palette#67B899
Selected brand direction

Muted mint

A gentle backdrop for the cloud and a recognizable cue for action.

One brand. Room for every mood.

Green guides actions. Red, blue, mint, and green scenes make room for different feelings, while the cloud keeps the experience familiar.

AcknowledgePauseExpressSettle

03 / Character exploration

Why a cloud? Light, familiar, and expressive.

I explored different character directions with the team before choosing the cloud. Its soft silhouette and everyday familiarity supported the kind of relationship we wanted: a companion rather than an authority. The same simple form could feel cheerful, attentive, or reassuring as the conversation changed.

VoiceOut Figma screen: Anger — English localization

Anger

VoiceOut Figma screen: Expression — English localization

Expression

VoiceOut Figma screen: Resolution — English localization

Resolution

One companion, changing expressions, props, and scenes.

04 / Emotional journey

Meet the feeling before moving through it.

The emotional journey uses different scenes to acknowledge different states. Warm red appears in anger exercises; sky blue opens up a quieter pause; green landscapes mark a more settled moment. The cloud keeps a familiar face through those changes, so the experience feels like one ongoing conversation.

VoiceOut Figma screen: Anger — English localization

01 / 08

Anger

Recognize the feeling

Warm red and the fiery cloud acknowledge anger.

Swipe the cards or use the arrows.

05 / Gentle guidance

A prompt feels different when a friend asks it.

In the guided reflection flow, the cloud puts on glasses and carries a notepad. Users choose a box, then read a reflection aloud or quietly to themselves. That small role change helps frame the companion as a guide, while short prompts keep each step manageable.

VoiceOut Figma screen: Expression — English localization

Expression

VoiceOut Figma screen: Letting go — English localization

Letting go

VoiceOut Figma screen: Reassurance — English localization

Reassurance

Choose a box, read a reflection, and hear from the companion.

06 / Everyday reflection

A familiar face. A changing atmosphere.

Across the journey, the cloud remains recognizable while its surroundings change. Open landscapes, blue water, and green hills give each moment a different tone. The aim was a gentle rhythm: acknowledge a feeling, give it space, and close with encouragement.

VoiceOut Figma screen: Reflection — English localization

Reflection

VoiceOut Figma screen: Mood check-in — English localization

Mood check-in

VoiceOut Figma screen: Resolution — English localization

Resolution

The UI shifts from an open landscape to blue ripples and green hills.

07 / Leadership

Keep the story—and the team—connected.

As UX Design Lead, I mentored four design interns, led weekly reviews, maintained the shared design system, and presented prototypes to stakeholders. My role connected the companion’s personality with usable flows and consistent components. This case study covers pre-launch design work; the rationale describes our design intent, rather than measured wellbeing outcomes.