Context
I designed Morph’s core coaching experience, translating dense biometric data into actionable daily guidance. The challenge was architectural: building an interface that respects scientific complexity while staying clear, intentional, and useful. My work connected product strategy, clinical accuracy, information hierarchy, and the narrative between data and action.
My role:
Senior Product Designer, Exp & Strategy
Senior Product Designer, Exp & Strategy
Collaboration:
Client project
Client project
Timeline:
Ongoing
Ongoing
Tools:
Figma, HTML/React prototypes
Figma, HTML/React prototypes
Industry:
Health & wellness
Health & wellness
The Opportunity
I was drawn to Morph because it sits at the intersection of three things I've spent my career thinking about: how to make complex information clear, how clinical rigor strengthens product design, and the gap between what health products promise and what they deliver.
Most health apps show data. They don't guide action. A user opens the app, sees a score, and has no sense of what it means for their day or what to do about it. That gap between insight and action is the problem Morph saw. They wanted to build something that didn't just measure. It needed to coach.
That mattered to me because I understand both sides. I have the clinical background to read the data authentically. I have the product design background to know how rare it is for apps to bridge insight and action meaningfully.
I was drawn to Morph because it sits at the intersection of three things I've spent my career thinking about: how to make complex information clear, how clinical rigor strengthens product design, and the gap between what health products promise and what they deliver.
Most health apps show data. They don't guide action. A user opens the app, sees a score, and has no sense of what it means for their day or what to do about it. That gap between insight and action is the problem Morph saw. They wanted to build something that didn't just measure. It needed to coach.
That mattered to me because I understand both sides. I have the clinical background to read the data authentically. I have the product design background to know how rare it is for apps to bridge insight and action meaningfully.
Design System — Original Foundation
I designed the entire design system from the ground up.
The foundation is behavioral: light Carrara canvas, slate surfaces for depth, cyan accent for clarity, warm gradient anchoring the logo. But the real work is in the logic.
Typography establishes three layers of hierarchy, each with purpose. Motion patterns guide attention and reinforce narrative. Components are built around state management as a design problem.
Spacing, timing, and token relationships all follow principles that scale consistently across the larger product. Every constraint was intentional: guardrails that prevent bad choices and enable confident decisions.
The system isn’t separate from the product thinking. It is the product thinking, making complexity clear while keeping the experience coherent and sophisticated.
The Challenge
Morph's fundamental challenge: take dense biometric data and turn it into a conversation, not a dashboard.
The specific problems I focused on:
The onboarding experience needed to establish trust from the first screen. Most health apps ask the same questions in isolation. Morph needed an onboarding that communicated: we think about your health differently.
The home screen needed hierarchy and narrative. When users landed after onboarding, they encountered multiple scores with no clear priority. They saw data. They needed guidance.
Approach
I started by listening.
I mapped the product's core belief: people don't fail at health because they lack information. They fail because they don't know what to do with it. That became my north star.
Then I sketched the relationships before the interface. Sleep drives recovery. Recovery sets the ceiling for strain. Strain creates tomorrow's fatigue. These weren't data points. They were a system. Any interface had to make this visible, even implicitly.
Design System — Original Foundation
I designed the entire design system from the ground up.
The foundation is behavioral: light Carrara canvas, slate surfaces for depth, cyan accent for clarity, warm gradient anchoring the logo. But the real work is in the logic.
Typography establishes three layers of hierarchy, each with purpose. Motion patterns guide attention and reinforce narrative. Components are built around state management as a design problem.
Spacing, timing, and token relationships all follow principles that scale consistently across the larger product. Every constraint was intentional: guardrails that prevent bad choices and enable confident decisions.
The system isn’t separate from the product thinking. It is the product thinking, making complexity clear while keeping the experience coherent and sophisticated.
Onboarding as Trust Building
The user journey begins with onboarding, designed as a conversation.
Rather than generic sign-up screens, the flow communicates: we listen, we understand context, we're building something personalized. By the calibration screen, users should feel like the product has been paying attention to them. The processing animation uses the Morph logo as the visual centerpiece—path-draw reveal, nodes lighting in sequence, signal pulses radiating outward.
Post-calibration, the recommendations are drawn from the user's specific data and situation. They land on a personalized home screen.
Home Screen as Guidance Architecture
Now the user lands on the home screen. They've just shared their health story. The entire first experience is personalized.
Onboarding as Trust Building
The user journey begins with onboarding, designed as a conversation.
Rather than generic sign-up screens, the flow communicates: we listen, we understand context, we're building something personalized. By the calibration screen, users should feel like the product has been paying attention to them. The processing animation uses the Morph logo as the visual centerpiece—path-draw reveal, nodes lighting in sequence, signal pulses radiating outward.
Post-calibration, the recommendations are drawn from the user's specific data and situation. They land on a personalized home screen.
The home screen guides users from understanding their state to knowing what to do next. It begins with a quick read, turns it into today’s action, connects it to a longer-term priority, and lets users explore the reasoning when they need more context.
At the foundation are three core scores built from the data the user shares. Morph Score reflects the user’s overall state. Sleep Score shows how last night’s sleep is affecting today’s recovery. Fatigue Score captures accumulated load and remaining resilience. Together, they create a clear narrative of the body’s current state and become the basis for everything that follows on the screen.
Outcome
The work delivered a full product foundation: design tokens, component definitions, motion annotations, interaction patterns, and documented logic across onboarding and the home screen. I also built interactive HTML prototypes to test branching flows, state changes, and the core coaching experience.
Because the product is still in development, success is framed through product readiness: a clearer decision model, reusable system logic, scalable components, and a home screen architecture that moves users from biometric data to daily guidance.
Why It Matters
People often spend more time with their health app than with their doctor. Morph treats that relationship with care, deciding what appears, in what order, and why.
The product does not simplify the user’s body. It makes the signals easier to act on. From onboarding to the home screen, users feel understood, see their current state, know what to do next, and have a path to deeper context when they need it.
State to Action: Morph Compass & Today's Recommendation
Translating biometric signals into a ranked priority and a clear next step.
Compass answers one question: what should I prioritize today? It pairs the user’s current state with the most relevant coaching path. The indicator moves and ranks by recovery data, turning the compass into a priority system.
After twelve iterations, the form shifted from navigation to prioritization. It needed to carry meaning without explanation.
Today’s Recommendation turns the selected state into one clear action, supported by the user’s data. Together, they answer: What matters today? What do I do next?
Outcome
The work delivered a full product foundation: design tokens, component definitions, motion annotations, interaction patterns, and documented logic across onboarding and the home screen. I also built interactive HTML prototypes to test branching flows, state changes, and the core coaching experience.
Because the product is still in development, success is framed through product readiness: a clearer decision model, reusable system logic, scalable components, and a home screen architecture that moves users from biometric data to daily guidance.
Why It Matters
People often spend more time with their health app than with their doctor. Morph treats that relationship with care, deciding what appears, in what order, and why.
The product does not simplify the user’s body. It makes the signals easier to act on. From onboarding to the home screen, users feel understood, see their current state, know what to do next, and have a path to deeper context when they need it.
Pillars — From Metrics to Meaning
Custom pillars designed to turn biometric complexity into sustained health focus.
I designed twelve custom pillars to organize related health signals into clearer focus areas. Instead of showing sleep, HRV, stress, metabolism, and recovery as separate metrics, Morph groups them into clinically grounded frameworks. Each pillar connects signals that influence one another, such as sleep architecture and circadian alignment, stress patterns and recovery speed, or metabolic efficiency and load capacity.
When users choose This Month’s Focus, they commit to one pillar. That choice shapes the guidance that follows, so daily recommendations begin building toward a larger health goal.
Outcome
The work delivered a full product foundation: design tokens, component definitions, motion annotations, interaction patterns, and documented logic across onboarding and the home screen. I also built interactive HTML prototypes to test branching flows, state changes, and the core coaching experience.
Because the product is still in development, success is framed through product readiness: a clearer decision model, reusable system logic, scalable components, and a home screen architecture that moves users from biometric data to daily guidance.
Why It Matters
People often spend more time with their health app than with their doctor. Morph treats that relationship with care, deciding what appears, in what order, and why.
The product does not simplify the user’s body. It makes the signals easier to act on. From onboarding to the home screen, users feel understood, see their current state, know what to do next, and have a path to deeper context when they need it.
Home Screen as Guidance Architecture
Now the user lands on the home screen. They've just shared their health story. The entire first experience is personalized.
The home screen moves the user through a series of intentional moments: understand your state, decide what to do about it today, commit to a longer-term priority, then go deeper if you want to understand the reasoning.
At the foundation are three core scores that synthesize all the data the user shared. The Morph Score is the proprietary synthesis—it's the user's overall state. The Sleep Score shows how last night's sleep is driving today's recovery capacity. The Fatigue Score shows the accumulated load and how much resilience capacity remains. These three scores work together to create the narrative of your current state. When you see them shift, you're seeing your body responding to your habits and choices. That narrative becomes the basis for everything that follows on the screen.
State to Action: Compass & Today's Recommendation
Translating biometric signals into a ranked priority and a clear next step.
Pillars — From Metrics to Meaning
Custom pillars designed to turn biometric complexity into sustained health focus.
Compass answers one question: what should I prioritize today? It pairs the user’s current state with the most relevant coaching path. The indicator moves and ranks by recovery data, turning the compass into a priority system.
After twelve iterations, the form shifted from navigation to prioritization. It needed to carry meaning without explanation.
Today’s Recommendation turns the selected state into one clear action, supported by the user’s data. Together, they answer: What matters today? What do I do next?
CI designed twelve custom pillars to organize related health signals into clearer focus areas. Instead of showing sleep, HRV, stress, metabolism, and recovery as separate metrics, Morph groups them into clinically grounded frameworks. Each pillar connects signals that influence one another, such as sleep architecture and circadian alignment, stress patterns and recovery speed, or metabolic efficiency and load capacity.
When users choose This Month’s Focus, they commit to one pillar. That choice shapes the guidance that follows, so daily recommendations begin building toward a larger health goal.
Outcome
The work delivered a full product foundation: design tokens, component definitions, motion annotations, interaction patterns, and documented logic across onboarding and the home screen. I also built interactive HTML prototypes to test branching flows, state changes, and the core coaching experience.
Because the product is still in development, success is framed through product readiness: a clearer decision model, reusable system logic, scalable components, and a home screen architecture that moves users from biometric data to daily guidance.
Why It Matters
People often spend more time with their health app than with their doctor. Morph treats that relationship with care, deciding what appears, in what order, and why.
The product does not simplify the user’s body. It makes the signals easier to act on. From onboarding to the home screen, users feel understood, see their current state, know what to do next, and have a path to deeper context when they need it.