HealthHub Connect

Medical care right at your finger tips

We revolutionize healthcare for seniors and patients by addressing challenges like medical jargon and appointment scheduling, offering a versatile online platform and user-centric design for empowered decision-making and enhanced healthcare experiences.

Project Overview

😫 The Problem

I am targeting users who experience three problems that I am trying to solve.

  • Difficulty in understanding medical lingo
  • Fast and convenient way to schedule and find a doctor of choice
  • Easy access to symptom information

👥 Users

  • Seniors
  • Patients

🎯 The Goal

The goal is to create an efficient and informative website that allows users to easily access information about medical services, learn about the doctor’s expertise, and book appointments seamlessly.

🏆 Solution

  • Versatile Healthcare Access: An online platform accessible both on the web and mobile, providing convenient access for patients to navigate and manage their healthcare needs effortlessly.
  • User-Centric Design: Simplifying medical information, seamless appointment scheduling, and easy access to symptom details, our product ensures efficiency and informed decision-making.
Understanding the User

User Research: Pain Points

Complex Medical Jargon

Many individuals struggle with understanding complex medical terms, hindering their ability to comprehend health-related information

Limited Access to Medical Care

In remote areas or busy lifestyles, accessing medical care can be a challenge

Information Overload

With the abundance of medical information on the internet, users often feel overwhelmed

Appointment Scheduling Hassles

Booking medical appointments can be a cumbersome process for many

Our Persona Profiles

Problem Statement

Kim is a non native speaking elderly senior who needs to be able to understand medical terms because she can feel confident and comfortable about her visits to the doctor.

Problem Statement

Johnny, a recent U.S. immigrant, struggles to communicate with dealership service advisors about his car issue due to a language barrier. He needs a solution for more effective interaction.

Problem Statement

Busy professional Max seeks a simplified car buying process to save time and reduce stress. He desires a  streamlined approach that avoids length negotiations at the dealership, allowing him to focus on other responsbilities.

User Journey Map

Starting the design

Low-Fidelity Wireframe Sketches

Patient Dashboard Screen

This paper wireframe illustrates the patient dashboard portal page, offering a preview of the diverse range of services available through Healthhub Connect. Users can seamlessly access and navigate through various features from this central hub

  • Card sections here will display the patient user their vitals. Tracking information related to the Heart rate, Blood pressure, and etc.

  • Appointment reminders and scheduling card will be located here. Easy for the user to see.

Schedule Appointment Screen

  • There will be a search, filter and sort feature option that will help patient users with their doctor search

  • There will be a search, filter and sort feature option that will help patient users with their doctor search

  • There will be a search, filter and sort feature option that will help patient users with their doctor search

Refill Medication User Flow

These sketches illustrate my thinking behind the 2nd feature of the product. “Medication Refill.” The point was to provide easy and intuitive to use management of the patient-user’s medication/prescrption

  • Here i’m visualizing what the flow of the “Medication Refill” process would look like. I’m designing a medication list view where the patient can manage their medication with corresponding options.

Symptom Checker Screen

The sketch here is for the “Summary” screen of the symptom checker flow process

  • Infographic illustration will highlight types of symptoms and also for home remedies patient users who might be interested in

  • The screen is laid out in an easy to read and scanned down format. Key important information relating to their symptom or illness

After-Visit Summary Assessment Screen

Patients, especially the elderly and non-English speakers, faced challenges understanding complex medical jargon in their notes, impacting recall and comprehension.

  • I crafted this sketch with the intention to highlight and design the way medical assessment information will be structured to read. I prioritized medical detail from the highest to least importance.

Low-Fidelity Digital Wireframe

From initial sketches, the evolution progresses with digital low-fidelity wireframes, adding depth with text placeholders and content for a comprehensive layout visualization. These flexible designs serve as a canvas for experimenting with different concepts and refining ideas in the design process.

Dashboard  Screen

Schedule Appointment Screen - Doctor Selection

Symptom Checker Screen

Medication Refill Screen

  • Progressing from sketches to digital low-fidelity wireframes.
  • Detailed content elements and text placeholders enhance visualization.
  • Designs at this stage are tentative, allowing exploration of various ideas.
  • Flexible platform for experimentation and refinement in the design process.

Low-Fidelity Prototype Demo

Schedule Doctor Appointment - Patient User Flow

Link to demo:

Presenting a low-fidelity prototype demo illustrating the user flow for scheduling a doctor appointment. This demonstration provides a succinct and simplified visual walkthrough, focusing on the essential steps and interactions involved in the seamless process of booking a medical appointment.

REfining The Design


  • Following the initial study with the wireframe, a key insight  led to adjustments in color theme usage, enhancing the website’s dynamism and improve the ease of information scanning.
  • Added a progress navigation feature for clearer user understanding of the current stage and next steps in the process.
  • Following the initial usability test, feedback highlighted concerns about color choices, specifically dor dates marked as unavailable. In response, I adjusted the color to a subdued grey tone, akin to the design used for the interactive CTA buttons .
  • I made changes to the time selection process by transforming it from a dropdown to set of buttons. This change enhances the patient’s user experience, providing a clear view of available time slots and facilitating easier decision-making.
  • In response to the feedback, I enhanced the visibility of the patient-user’s selected doctor, ensuring a clear indicator for them and facilitating a more straightforward understanding of their choice.

Accessibility Considerations

Multilingual Support

Ensuring inclusivity, the product provides health information in multiple languages, supporting users like Kim with limited English proficiency

Color Contrast & Readability

Thoughtful design with high color contrast and clear fonts enhances readability, benefitting users with visual impairments

Voice Command Integration

Seamlessly integrating voice commands for greater vocal accessibility

Hi-Fidelity Mockup Screens - Website

Hi-Fidelity Mockup Screens - Mobile Phone

High-Fidelity Prototype Demo (Website)

Here is the hi-fi prototype gif showing the “Schedule Appointment” task flow in website format

High-Fidelity Prototype Demo (Mobile)

Here is the hi-fi prototype gif showing the “Schedule Appointment” task flow in mobile format

Future Steps



Through solo testing and user feedback, this project provided valuable insights into design considerations. The impact lies in the enhanced understanding of user preferences and usability, contributing to improved design proficiency. While quantitative feedback underscores the iterative nature of the design process shaping my approach in future projects.

What I learned

I gained insights into designing a responsive mobile app, realizing the significance of sizing and layout for optimal information presentation. Challenges surfaced when adapting a website to a mobile format, emphasizing the need for strategic content selection that caters to both large and small viewing platforms.

Next Steps

Iterative Usability Testing

Conduct additional tests for refined prototype based on initial feedback

Feature Enhancement

I will design and implement new feature ideas I have that will further assist with accessibility

Usability Study Iteration

Execute another round of testing for the updated version to gather further feedback