Company
ICANotes
Product
Chartface
Approach
Desktop
Framework
Angular
Platform
Web
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
Features
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
Intro
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.
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.
QA 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.
Sprint Run
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.