jidienne.com
Available for freelance
MedCareHub

Healthcare Interface: Mobile Booking App

Course project focused on high-fidelity UI execution. Transformed wireframes for a medical booking app into a polished, accessible mobile product across 20+ screens with a reusable component library.

When
Oct 2023
Type
UX / UIProduct
Tools
Figma
Link
www.figma.com ↗

Overview

Developed as part of a specialized UI design course, MedCareHub is a mobile health platform focused on social good. While the foundation was rooted in healthcare accessibility, my primary focus was the High-Fidelity UI execution—taking conceptual wireframes and transforming them into a production-ready, empathetic digital product.

Objective

The challenge was to take a complex user flow (medical booking) and apply a visual layer that felt “human.” I focused on how color theory, spacing, and micro-interactions could reduce the cognitive load and “medical anxiety” often associated with healthcare apps.

Key Screen Highlights

1. Secure Access & Personalized Dashboard

  • Logins: Designed a high-security entry point featuring clear primary actions and integrated biometric cues, ensuring data privacy is felt from the first click.

  • The Patient Dashboard: A central “command center” featuring personalized greetings and high-priority cards for upcoming appointments and health metrics, designed to reduce cognitive load.

2. Physician Discovery & Consultation

  • Doctors Available: Created a scannable directory using modular card components. Each card prioritizes the doctor’s specialty, rating, and immediate availability tags to help users make informed decisions quickly.

  • Telehealth Integration (Book, Chat & Call): High-fidelity screens for virtual consultations, featuring intuitive “one-tap” buttons for voice and video calls, alongside a familiar, real-time chat interface.

3. Seamless Scheduling & Calendar

  • Make Appointments: A streamlined multi-step booking flow that minimizes friction.

  • Calendar View: Developed a custom calendar UI that visualizes available slots and booked sessions at a glance, allowing users to manage their time without leaving the app’s ecosystem.

4. Financial & Profile Management

  • Payment Screen: A clean, trustworthy checkout experience with clear breakdowns of consultation fees and integrated insurance validation sections.

  • Profile Admin Screen: A management hub where users can update health records, manage dependents, and customize notification preferences for medication or appointment reminders.

Design Precision

  • Component Architecture: Developed a reusable library of buttons, inputs, and icons to maintain pixel-perfect consistency across 20+ screens.

  • Accessibility Standards: All color pairings and font sizes were vetted for contrast, ensuring the app is usable for individuals with visual impairments or those in high-stress situations.

Key Skills Demonstrated

  • High-Fidelity UI Design

  • Design System Creation

  • Visual Hierarchy & Layout

  • Accessibility (WCAG) Considerations