Skip to content

COROS AI · Case Study

COROS AI Redesign: MUI → shadcn

Testers said v1 strained their eyes. As engineering moved to shadcn, I rebuilt the COROS AI product UI and its design system, live on web, iOS, and Android.

3

platforms live in production

54+

semantic tokens

0

redesign requests on handoff specs

Design SystemsUX/UIResponsive
Role
Product Designer
Ownership
Design system owner
Platforms
Designed for 4: web, tablet, iOS, Android

The product

COROS AI is an AI coach that helps professionals shift moods, repair relationships and act when they’re stuck; I joined as founding designer in 2025 and led product, UX, prompts, research and brand.

Try what I built

The live product

Foundation

Tokens that mirror the code

Figma variables editor showing the semantic colors collection with a shadcn (light) column and a shadcn-dark column, each token resolving to a brand-neutrals, brand-shades, coros-green, or coros-red reference.
Figma variables editor showing the typography collection: font definitions for sans, serif, headings, body, and monospace, plus heading scales with weight, size, line-height, and letter-spacing tokens.
  • Colors resolve through primitives, brand layer, then semantic tokens.
  • Custom 11-stop scales for COROS blue, orange, and neutrals.
  • 54+ tokens in light and dark, published as a shared library.
  • Variants only when structure changes: the chat input handles 4 states.

Screens

Eight onboarding screens became six

The greeting rotates through nine languages.
Mobile tone selection with Supportive and Provocative cards, each carrying an animated orb.
Mobile dimensions selection with seven pill options, several selected.

Mobile, light theme.

8 dark-only screens became 6 themed ones, with the name moved up front. On the tone screen, the orb and card respond.

Screens

Chat, designed state by state

Chat on web, dark theme.
Mobile chat in light mode showing date dividers and read-aloud and flag actions beneath a COROS message.
Mobile chat with an inline tone quick-switch popover offering Supportive, Provocative, and More Personalization.

Message actions, tone quick-switch, composing.

I prototyped 3 user-bubble options in working HTML to settle a debate.

Every state a conversation can be in

Empty stateTriggered byA new conversation.User seesThe greeting and the composer.
Typing indicatorTriggered bySent, awaiting the model.User seesAn indicator for the wait.
Streaming textTriggered byThe response arrives.User seesText building in the bubble.
Message-level actionsTriggered byA response completes.User seesRead-aloud and flag actions.
Error and retryTriggered byThe response fails.User seesThe failure in place, with retry.
Scrolled away mid-responseTriggered byThe user scrolls up mid-response.User seesA return-to-chat button.

Screens

Settings in one modal shell

Persistent nav; the Appearance toggle sits in the sidebar.
Same modal shell.
Mobile sidebar flyout with search chats, send feedback, and the user profile pinned at the bottom.
Mobile settings modal showing the profile header and the Account group.
Mobile settings with Connected accounts expanded inline, listing Google, LinkedIn, Microsoft, and Apple.

Sidebar flyout, Account, inline Connected accounts.

Mobile influences search with a live results dropdown of historical and cultural figures.
Mobile influences with selected chips: Martin Heidegger, Barbie Doll, and Brené Brown.
Mobile delete-account confirmation dialog requiring the user to type delete, its confirm button on the destructive token.

Influences search, chips, type-to-confirm delete.

Feature

A team-only Retrieved Context panel

The team-only My Memories tab in settings, showing Biographical memory and Session History rows in the same modal shell as every user-facing tab.
My Memories, in the settings shell.

Debugging the AI meant digging through logs. For my own prompt QA, I designed a panel showing what the model saw:

  • Retrieved sessions with semantic and recency scores.
  • Session-boundary probability.
  • Chunk results.
  • Memory.

Tone

One system, two voices

User

I feel like I'm working overtime every single day, but my team just keeps giving me grunt work and I'm so pissed off.

Supportive

I hear you. How are you doing as you bring this up? What's happening at work?

Provocative

Are you going to do it or not?

Tone swaps the response architecture: one reply asks for context, the other for a decision.

Impact

Results

  • Live in production on web, iOS, and Android at app.coros.ai.
  • Days to hours for design-to-review cycles.
  • Zero redesign requests on documented handoff specs.