Company
Cardio Clinic
Product
Telehealth
Approach
Mobile first
Framework
React/Js
Platform
Web/iOS
Hearty is a Telehealth app, tailored specifically for heart disease management, it offers a user-friendly platform reminiscent of Teladoc, streamlining access to vital medical services.
- Implement a design system ensuring consistency while adhering to WCAG 2.2 AA standards.
- Create intuitive user flows that improves time to complete a task.
- Design a visually appealing interface that is engaging without complexity or cognitive overload.
- Implement a user-centered approach with a focus on mobile-first design principles.
- Overall feel should add user to usual check up and complete profile
- Task completion inefficiencies.
- Absence of a design system causing inconsistency in operations and look & feel .
- Visitors encountering difficulty in locating relevant information.
- Misleading design patterns impacting perceived affordance.
- 3rd party check out system leads to an additional sign up.
- 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 start by conducting competitive research and gathering inspiring references in Figma. Next, I map out flows from UX wireframes and identify patterns, primitives, and components for construction. As a UCD certified designer, I prioritize user-centered design principles and take a minimalist approach to ensure a clean interface and optimal user experience. Later, I integrate motion design for enhanced visual feedback. I collaborate with the design team for evaluation before proceeding to UXR testing. Throughout the sprint, designs are iteratively presented to stakeholders for feedback and refinement.
Setting 8pt grid system
Exp1 (🩸Warm and Inviting)
Style Guide
Crafted a detailed style guide encompassing typography, color scheme, iconography, and UI patterns. Utilized ruby red as the primary color for warmth and attention, balanced with muted gray at an 80/20 ratio. Defined font styles, sizes, and hierarchy for consistency and readability.
Heart Character Design
Designed a relatable heart character to provide visual guidance and a human touch, with enabled audio functionality for engagement and guidance.
User Interface Design
Created persuasive design elements with 20px corner radius and pill shaped CTA, focusing on a minimalistic approach for clear navigation, intuitive controls, and consistent visual hierarchy to enhance usability.
Exp 2 👩🏾⚕️ (Corporate look)
Color Scheme:
I curated a color palette featuring shades of blue, gray, and white to convey medicinal look.
Typography:
I selected the Inter font for text hierarchy, ensuring AA standard readability.
UI Elements:
I integrated structured grids, columns, and consistent spacing to achieve a refined and organized appearance.
Exp3 ( 👓 Modern and Minimalist)
Color Scheme
I opted for high contrast with black knockout CTAs and muted grey tones to meet WCAG AA standards.
Typography
I chose the Inter typeface with a major third scale for readability at base size 16pt, aligning with AA standards and setting the healthcare product’s mood.
UI Elements
I crafted easy functioning components along with the Shadcn design system.
Visuals
I designed relevant illustrations to complement captions and enhance communication.
Animations
I created subtle animations with spring curves and delays for smooth transitions and engaging micro-interactions, breathing life into the UI.
Responsive components
User testing
For usability testing I made a clickable prototype. This allowed users to navigate through tasks such as signing on with an OTC, completing their profile, adding prescriptions and reports, taking vitals, selecting a doctor, and scheduling an eVisit.
Optimized Exploration 3 👓 UI
- Revise the intro screen illustration for intuitive onboarding.
- Enhance the “Create Account” option to offer alternatives for users reluctant to register on the app.
- Ensure input labels are both inside and outside containers for user convenience and error prevention.
- Implement a feature allowing providers to scan insurance cards for automatic details retrieval.
- Incorporate a filter function, including location, to facilitate doctor selection.
Simple sign-up
Streamline the sign-up process with Phone OTC verification for added convenience and secure identity confirmation, and utilize Face ID for seamless sign-in experiences.
Search by various parameters
Efficiently find the ideal specialist using a search engine that considers patient preferences such as expertise, price, rating, language, and available time slots.
eVisit a doctor right away
Self-scheduling, with a comprehensive list of consultations with options to cancel or reschedule. Additionally, chatting feature facilitates quick response and sharing of medical records, photos, laboratory results, and other vital information. Video conferencing, also serves as the point of contact between physicians and patients.
Before / After
Usability testing
