Company
Hearty
Product
Telehealth
Approach
Mobile first
Framework
React/Js
Platform
Web/iOS
Hearty is a dedicated telehealth platform designed for heart disease management. Built with patients in mind, it combines a friendly, intuitive interface with powerful clinical tools. Like Teladoc, it streamlines access to virtual care, but with a sharper focus on cardiology — making it easier for patients to connect with specialists, track health data, and manage their care journey in one place.
Build a scalable design system to ensure visual and functional consistency while meeting WCAG 2.2 AA accessibility standards.
Streamline user flows to reduce time-on-task and minimize friction.
Deliver a visually engaging yet simple interface that avoids cognitive overload.
Apply a user-centered, mobile-first approach, ensuring usability across devices.
Create an experience that feels like a natural extension of a patient’s routine checkup, while guiding them to complete their profile with ease.
Fragmented patient experience – Users had to navigate between multiple systems for vitals, prescriptions, and scheduling, creating unnecessary friction.
No clear routine guidance – Patients lacked a structured way to follow up on daily or weekly health check-ins, leading to inconsistent self-monitoring.
Overly clinical interfaces – The design felt intimidating rather than supportive, discouraging patient engagement.
Accessibility gaps – Key functions like audio support, touch targets, and color contrast weren’t aligned with WCAG standards, creating barriers for older or visually impaired patients.
Redundant sign-ups & logins – Reliance on third-party modules (for checkout or scheduling) forced patients to register multiple times, adding frustration.
Poor information hierarchy – Essential actions like scheduling an eVisit or updating vitals were buried in menus, making task completion slow.
- Look & feel
- Implement a design system
- User centered design mobile first approach
- Compliance with WCAG 2.2 AA standards
- User flows, UX wireframe, prototype, motion design
- Touchpoint (Product design, Webapp, Website, CRM)
Patients facing
Patients seeking medical advice, consultations, or treatment remotely.
Use Cases:
Non-Emergency Medical Consultations: Patients can connect with healthcare providers for minor health concerns.
Prescription Refills: Patients can request prescription renewals.
Follow-up Appointments: Patients can have follow-up visits without visiting a physical clinic.
6 months
- WIP
- Review
- Development ✅
- Shipped
- Archive
Final product shots in action
Flows
Sign in / Sign out / Create account
User profile (Registration)
Upload medical records
Schedule / cancel appointment
Add / remove provider
Pay per visit (Add / remove card)
Payment history
Notifications
Take vitals
Call
Chat
Patient virtual door
Chat history
ePrescription
Remote hospital registration
Out Patient Follow up window
Cardio Home for the Elderly
Live Chat box - connecting live with RN
Case Study
I began with competitive research and visual inspiration in Figma, followed by mapping user flows through wireframes. From there, I identified recurring patterns, primitives, and components to build a scalable foundation. As a UCD-certified designer, I prioritized a user-centered, minimalist approach to ensure clarity and ease of use. To elevate the experience, I integrated motion design for responsive feedback and collaborated with the design team to validate components in Storybook. Prototypes were tested with users, and throughout the sprint, I iteratively presented designs to stakeholders—refining based on feedback until alignment was achieved.
Setting 8pt grid system
Exploration 1 – Warm & Inviting
Style Guide
Developed a style guide defining typography, color palette, iconography, and UI patterns. The primary ruby red conveyed warmth and urgency, paired with muted grays (80/20 balance) for clarity and contrast. Established font hierarchy to maintain readability and consistency across screens.
Heart Character
Created a friendly heart character as a guide, adding personality and reducing clinical tone. Integrated optional audio prompts for accessibility and engagement.
User Interface
Designed with 20px corner radius and pill-shaped CTAs for a soft, approachable feel. Minimalist layouts ensured clear navigation, intuitive interactions, and a consistent visual hierarchy to support usability.
Exploration 2 – Corporate Look 👩🏾⚕️
Color Scheme
Applied a blue, gray, and white palette to evoke trust, clarity, and a clinical tone aligned with healthcare standards.
Typography
Chose Inter for its clean geometry and excellent readability, ensuring compliance with WCAG 2.2 AA accessibility standards.
UI Elements
Structured the layout with grids, columns, and consistent spacing to create a balanced, professional interface that emphasizes precision and reliability.
Exploration 3 – Modern & Minimalist 👓
Color Scheme
Used a high-contrast palette with black CTAs and muted grays, ensuring accessibility and a clean, modern aesthetic that meets WCAG 2.2 AA standards.
Typography
Applied the Inter typeface with a major third scale, starting at 16pt, to create a consistent rhythm and strong hierarchy that feels both professional and approachable for healthcare users.
UI Elements
Developed functional, lightweight components built on the Shadcn design system, ensuring flexibility, scalability, and consistency across the app.
Visuals
Incorporated simple, purposeful illustrations to clarify content and support comprehension without overwhelming the interface.
Animations
Added subtle, spring-based transitions and micro-interactions to guide attention and create a polished, intuitive experience.
Responsive components
User testing
To validate core workflows, I created a clickable prototype simulating the patient journey for heart disease management. Participants were asked to complete key tasks, including:
Signing in with a one-time code for secure access.
Completing their health profile, including medical history and current medications.
Uploading prescriptions and lab reports directly into the app.
Recording vitals such as blood pressure, heart rate, and weight.
Selecting a cardiologist and filtering providers by specialty and location.
Scheduling an eVisit and confirming appointment details.
This testing surfaced friction points in data entry and provider search, which were later addressed through streamlined forms, input automation (e.g., insurance card scan), and simplified navigation.
Optimized Exploration 3 👓 — UI Enhancements
Onboarding Flow: Refined the intro screen illustration to create a more intuitive, guided onboarding experience.
Account Creation Options: Expanded the “Create Account” path with alternative sign-in methods, reducing friction for users hesitant to fully register.
Form Inputs: Improved input fields with labels placed both inside and outside containers to support clarity, accessibility, and error prevention.
Insurance Card Scan: Added the ability to scan insurance cards, enabling automatic population of patient details and reducing manual entry errors.
Doctor Search & Filters: Introduced a filter function (including location) to streamline provider selection and make searches more relevant.
Secure & Simple Sign-Up
We streamlined the onboarding process with a HIPAA-compliant Phone One-Time Code (OTC) verification for secure identity confirmation. Patients can sign in seamlessly using Face ID or biometrics, ensuring both convenience and privacy. All authentication data is encrypted in transit and at rest, with session management aligned to HIPAA requirements for safeguarding protected health information (PHI).
Smart Specialist Search
Quickly locate the right healthcare provider with a multi-parameter search engine. Patients can filter by specialty, expertise, cost, ratings, language preferences, insurance coverage, and real-time availability. This ensures they find the best-fit specialist aligned with both their medical needs and personal preferences, reducing friction and saving time.
eVisit a Doctor Anytime
Patients can self-schedule virtual visits with just a few taps, viewing a comprehensive list of upcoming and past consultations. Each appointment includes built-in options to reschedule or cancel for flexibility.
The integrated chat feature allows patients to securely exchange messages, share medical records, upload lab results, and attach photos—ensuring physicians have the necessary context before or during the consultation.
For real-time care, HIPAA-compliant video conferencing serves as the primary channel for patient–physician interaction, enabling face-to-face visits without the need to travel. The system is designed for quick access, continuity of care, and streamlined follow-ups.
Usability testing
