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.
😫 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.
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
%20-%20KIM.webp)
%20-%20DAVID.webp)
%20-%20EMILY.webp)
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: https://rb.gy/fynl35
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.
Mockups
- 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
Takeaways
Impact
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
Feature Enhancement
