Care ADHD Coach: Component-Driven Mobile App Design

Reusable Components, Design System, Mobile Coaching Application
Year: 2024
Technologies: Figma, Component Library, Design System
Categories: Mobile App, Coaching App, Component-Driven Design
Platform: iOS & Android
Design System: Care ADHD Component Library (Reused)

Introduction

Care ADHD Coach is a companion mobile coaching application designed to provide real-time behavioral support and guidance for individuals with ADHD. Unlike Care ADHD Patient which focuses on clinical tracking and symptom management, Care ADHD Coach emphasizes behavioral coaching, practical strategies, and motivational support through an interactive companion experience. The app guides users through daily challenges, provides evidence-based coping techniques, and offers personalized coaching tailored to each user's unique ADHD patterns and goals.

The objective of this case study is to showcase how Care ADHD Coach was built using a component-driven design approach—leveraging the entire component library, color system, typography, and design patterns established in the Care ADHD Patient design system. Rather than starting from scratch, the coaching app reuses every existing component (buttons, cards, forms, dialogs, navigation patterns) to build a cohesive, branded experience while dramatically reducing design and development time. This case study demonstrates the power of a well-built design system and how thoughtful component architecture enables rapid product development without sacrificing consistency or quality.

Background

Developing Care ADHD Coach presented a unique opportunity: build a new companion app while maintaining brand consistency and user familiarity. The challenge wasn't just UX design—it was maximizing the value of an existing design system through strategic component reuse:

Component Inventory & Reusability: Care ADHD Patient's design system contained 12 core components (buttons, cards, input fields, modals, navigation patterns, progress indicators, lists, badges, etc.) plus 40+ variants. The coaching app needed to leverage these existing components rather than creating new designs, proving the design system's flexibility and scalability.
Design System Consistency:** The visual language (Jost & Roboto typography, #29a587 teal accent, neutral color palette, specific spacing/corner radius values) needed to feel instantly recognizable to Care ADHD Patient users. Reusing established design tokens ensured consistency automatically.
Accelerated Development Timeline: Traditional app development involves weeks of design iteration. By adopting an existing component library, the coaching app design could be completed in a fraction of the time without compromising quality or coherence. This demonstrates ROI of investing in a robust design system.
User Familiarity & Learnability: Because all UI patterns are identical to Care ADHD Patient, users who already use the patient app instantly understand the coaching app interface. This reduces cognitive load and accelerates adoption—users don't need to learn new interaction patterns.