A complete UX overhaul of a wellness app — transforming a visually fragmented experience into a calm, coherent, and retention-optimised product.
Cue Wellness is a mobile wellness platform designed to help users build sustainable health habits. The client came with an initial Figma design — functional in structure but inconsistent in execution. The redesign focused on elevating the visual language, improving usability, and aligning the product with the emotional expectations of a wellness audience.
Beyond the design deliverable, the engagement expanded into an ongoing consulting relationship — overseeing the handoff to development, advising on product decisions, and supporting the launch strategy.
The original design contained the bones of a good product — the feature set and user flows were directionally sound. But it suffered from a series of compounding issues that would have hampered user trust, engagement, and retention at launch.
Colours, typography weights, and spacing varied across screens without a governing system. This created a fragmented, unpolished feel that would undermine user confidence — particularly critical in the wellness category, where trust and calm are the baseline expectation.
Components were designed screen-by-screen rather than from a reusable system. Buttons, cards, and input fields lacked standardisation, making developer handoff error-prone and future iterations slow and expensive.
Key actions and content lacked clear prioritisation. Users would have struggled to identify what to do next, leading to higher drop-off and lower activation rates — especially in onboarding and the core daily-use flows.
The visual tone didn't match the product's purpose. Wellness products succeed when they feel calm, considered, and trustworthy. The original design leaned clinical and generic, missing the emotional register that drives daily engagement and word-of-mouth growth.
The original files were not dev-ready. Layer naming, component organisation, and annotation were insufficient for a clean build, creating risk of interpretation errors and rework cycles between design and engineering.
Each design decision in the redesign was made with user behaviour and business outcomes in mind. Here are the core improvements across the product.
Defined a structured colour palette with primary, secondary, and semantic tokens — ensuring consistency across every screen while reinforcing the brand's wellness positioning.
Established a clear typographic hierarchy using a limited set of styles — headline, subheading, body, caption — applied consistently to guide attention and improve readability across devices.
Built a comprehensive component library — buttons, cards, inputs, modals, navigation — using Figma's auto-layout and variants. This dramatically reduces development time and ensures visual consistency as the product scales.
Redesigned the onboarding sequence to reduce friction, highlight the value proposition early, and get users to their first meaningful action faster — a critical driver of long-term retention.
Reorganised the navigation and screen flows so users can intuitively access their core tasks — habit tracking, progress review, and recommendations — with minimal taps and cognitive effort.
Designed complete interactive states — hover, active, loading, error, empty — for all key components. This creates a responsive, polished feel that builds user confidence and reduces confusion.
Audited and corrected colour contrast ratios across text and interactive elements to meet WCAG AA standards — reducing legal risk and expanding the product's accessible user base.
Organised the Figma file with clear layer naming, component descriptions, spacing annotations, and a dedicated developer notes page — reducing build ambiguity and accelerating the development timeline.
Design decisions compound. The improvements made across this redesign have direct and measurable implications for how Cue Wellness will perform at launch and beyond.
"A wellness app that feels chaotic cannot ask users to trust it with their health. Design is the product's first promise."
Reduced cognitive friction and a calmer, more trustworthy UI directly correlate with improved day-7 and day-30 retention — the most critical metrics for subscription wellness apps.
A structured component library and dev-ready files reduce build time and back-and-forth between design and engineering, cutting estimated development costs and shortening time-to-launch.
A streamlined onboarding flow with clear value signals gets users to their first "aha moment" faster, directly improving activation rates and reducing early churn.
Clearer CTAs, better visual hierarchy, and refined UI states improve the conversion funnel from free user to paying subscriber — the core commercial driver of the business model.
The component library means new features can be designed and built in a fraction of the time, with no visual regression — enabling the team to iterate quickly without accruing design debt.
WCAG AA accessibility compliance opens the product to users with visual impairments and reduces regulatory risk — particularly important for App Store and Play Store feature consideration.
The engagement didn't end at design handoff. Acting as a product consultant through the development and launch phase means the design integrity is protected, the build stays on track, and the client has an experienced strategic partner navigating the complexities of taking a consumer app to market.
Overseeing the gap between great design and successful execution — ensuring the product that ships matches the product that was designed, and that the launch is positioned for early traction.
Reviewing builds against design specs, flagging deviations, and resolving designer–developer interpretation gaps before they compound.
Advising on feature prioritisation, scope decisions, and release sequencing to ensure a focused, high-quality v1 launch.
Supporting App Store submission, onboarding flow optimisation, and early user acquisition strategy to drive a strong launch window.
A structured, phased process ensured the redesign was grounded in the product's goals rather than aesthetic preference alone.
Conducted a thorough review of the original Figma file — documenting inconsistencies, usability issues, missing states, and gaps in the component structure. Established a clear brief for what the redesign needed to solve.
Before touching screens, built the design foundations: colour tokens, typography scale, spacing grid, and base components. This ensured every subsequent design decision was consistent and scalable.
Redesigned all key screens using the new system — onboarding, home dashboard, habit tracking, progress views, settings, and profile — refining flows and interactions at each stage.
Iterative review cycles with the client to align on visual direction, adjust flows based on feedback, and validate decisions against the intended user experience.
Prepared development-ready Figma files with annotations, component documentation, and a design-to-build briefing session to onboard the development team with full context.
Currently supporting the client through the active development and pre-launch phase — advising on product decisions, reviewing builds, and preparing the go-to-market strategy.