During the Winter of 2022, I had the amazing opportunity to work as a contracted UX designer at Porton Health, a company that provides telehealth medical services for healthcare providers. I was honored to collaborate with talented product managers and front-end engineers to redesign the Porton Booking App while growing my knowledge and gaining practical experience as a professional UX/UI designer.
Summary
Prompt
Porton Health wants to enhance patients’ user experience when booking an appointment online with their BookApp by considering the accessibility of the app from a patient’s perspective and the minority groups including senior patients (65 years old+) and people with a disability.
Target Users
-
Patients who are new to telehealth
-
Elderly patients
-
Patients with a disability
*here, target users refer to the target group that this redesign is focusing)
Goals
-
Simplify the process of appointment booking
-
Check and eliminate all accessibility issues
-
Clarify instructions for booking and immediately notify patients when they are not eligible to book at a clinic
Research
User Analytics
38x
more patients using virtual care after the Covid-19 pandemic
43%
of patients using telemedicine are adults 65 and older
50%
more usage of telemedicine for people living in rural areas
User Surveys
-
More than 1/3 of the participants reported that they did not find our online booking to be more convenient than traditional booking methods (phone booking and online form)
-
Out of 50 participants, 8 participants found the online booking process to be confusing and 5 participants were not successful in booking an appointment
-
The top 3 challenges for booking include:
-
Confusing instructions
-
Long process/ too many steps
-
Small text
Competitive Analysis
1. Cortico: Medical Clinic Booking System
Auto-fill user information for registered patients e.g., patient's profile, doctor, pharmacy, etc.
2. Virtual Clinics
Making the content fill up the screen for clear visualization. Use color coding to filter the available time slots.
3. Mikata Health
Simplifying booking preferences and appointment availabilities into short steps. Presenting a smooth user flow using bright colors and icons.
Research Findings
-
Telemedicine service became more common after the pandemic, and it is convenient for senior patients and people in rural regions
-
Since this app was initially designed for clinics to manage their patients better, the app designer may have ignored the patient's user experience. Users have reported challenges with using BookApp due to the tedious process and confusing execution.
-
Compeitor's platform has a common advantage: a simple and easy user flow.
Ideation
Design Solutions
Color Coding Message: Use different colors for the cards to instruct patients with methods to login.
e.g., Blue- Default, Red-Error, and Yellow- Caution.
Combining Steps: Reduce the number of clicks (and loading time) by combining the steps of the booking procedure. Here, I combined the doctor's selection and appointment details into one page.
Optimizing UI: The calendar in the original design wastes the real state on the screen. I enhanced the UI by resizing the calendar and time selection to become proportional and expanding all buttons to fill the width and maximize the entire section.
Information Hierarchy: The confirmation page should be clear for the users to scan and click complete. I used a table to sort the information and separate the heading and content. The additional notices are moved to the bottom for clear visualization and allow users to scan quickly from top to bottom.
User Testing
Professional Feedback
.png)
Engineer 1:
"The UI looks better and cleaner. I like how you combined the steps but you also have to consider how it would work for the backend. We used to have separate doctor selection and appointment details in two steps because appointment types depend on the doctor selected. Now that they are combined you have to think about the mechanism and user flow."
.png)
Engineer 2:
"The website looks much better than before. I like the colored notices for different types of clinics, but I think there are too many notices and messages on the first step that it may be overwhelming for users. I would suggest putting the messages on one card. Also, you have to think about how they would look on mobile screens. When content is stacked up, users may have to scroll a few times before they reach the ‘Next’ button."
Product Manager:
"You did a good job reducing clicks and making the booking process easier and more direct for the users. However, you have to think about our primary users who are elders and people with a disability. Consider enhancing the text, color ratio, and buttons for better visualization."
Reflection
Takeaways
During my four months of contract at Porton Health, I was given multiple projects by Dele, my product manager, and my mentor. I was challenged to work on tasks simultaneously while managing my time schedule and collaborating with cross-functional teams for feedback. In this particular project, I learned to conduct user research by analyzing the work of our competitors and by interviewing our users (patients and clinic providers). I was encouraged to leverage my background in psychology to design with user experience in mind and follow accessibility guidelines. I am thankful that many of my ideas were supported by my manager and established by the engineers. They helped me to enhance those ideas and they make them become realistic solutions that can be executed and launched to help countless users in virtual care and telemedicine.