Dr. Marc Johnson
Case Study
Category
UX DESIGN
Customer
Google Certificate
Date
FEB - MAY 2024
Location
WILMINGTON, DE
Download Case Study
Summary
Problem
Currently, patients must stand in line and check in with the receptionist, then will have to fill out the new patient forms as they wait for their appointment.Solution
Our Doctor Check-In App will let users check in early and answer initial health screening questions, which will affect all new patients and people needing more time or disabilities by allowing them to answer initial health screening questions and handle their medical information at a more convenient time rather than before appointments.My role
UX Designer leading the Dr. Application website designResponsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating designs and designing both mobile as well as the responsive website design.
User research: summary
conducted user interviews, which I then turned into empathy maps to understand the target user and their needs better. I discovered that many target users hate standing in line to check in or having to fill out forms before appointments. However, filling out forms within a set period can be difficult and frustrating for many target users. This caused the stressful experience to become even more challenging for them, not allowing patients to relax before appointments.User Centered Design Process
Interaction
Doctor Patients are often busy during their doctor’s available hours, which is only heightened by having to stand in line to check in.
Automotive
The Appointment Check-in process should be automated and online instead of being manual & slower.Experience
Patients with dyslexia or who have difficulty processing information may have a bad experience filling out forms within a certain time frame.
User Research and Create Persona
The persona defined is based on our interview and survey findings:
User Journey Map
Sitemap (Information Architecture)
Difficulty with website navigation is having simple navigation for all sections, I used that knowledge to create a sitemap.
The goal was to make strategic information architecture decisions that would improve the overall website navigation of the patient portal.
Paper Wireframes
Writing an iteration of each possible screen of the mobile website on paper ensured that the elements that made it to the digital wireframe would be well-suited to address user pain points of not being able to fill out new patient forms before an appointment. From the home screen, I prioritized a quick and easy process to fill out forms, ensured the process was easy, and helped users save time.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on findings from user research.
More straightforward navigation allows users to locate critical website areas and elements essential to users. Will also add assistive technologies.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all the primary and secondary user flow screens, linking to the patient portal to fill out forms and check-in.
At this point, I had received feedback on my designs from the user study for buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
View low-fidelity prototype
Low-fidelity prototype
To create a low-fidelity prototype, I connected all the primary and secondary user flow screens, linking to the patient portal to fill out forms and check-in.
At this point, I had received feedback on my designs from the user study for buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
View low-fidelity prototype
Round 1 Findings
- The font size on the opening tabs must be increased.
- A back button from the calendar book must be added to the page.
- Appointment info needs to be shown at check-in.
Round 2 Findings
- A calendar with a date and time available needs to be added.
- Make all buttons the same color.
- An additional request appointment feature with a calendar and date. Once the date is selected, available appointment times will appear on the calendar. After selecting a time, submit the appointment request.
Mockups
Based on the insights from the usability study, I made changes to improve the Appointment Calendar by adding instructions to the page and a back button to return to the Patient Portal Home.
Based on the insights from the usability study, I made changes to improve the process. I added the Doctor’s name to the check-in process, having it show when confirming and not having the patient input the information.
High-fidelity Prototype
The hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.
View the Doctor’s Website
Accessibility considerations
I used high-contrast colors, so those with color sensitivity will have no issues.
Use headings and text of different sizes and mark them with headings for a clear visual hierarchy.
The site is designed with alt text for images and content on each page for smooth screen reader access.
Takeaways
Impact:
Our target user shared that the design was easy to use for appointment check-in, filling out forms, and submitting them when completed. They also enjoyed the images and thought the site had a clear visual hierarchy.
What I learned:
The best thing I learned was all that goes into a complete UX Design to create a good user experience. The most important takeaway was the need to always focus on the user’s needs when seeking the best solutions during the design process.
Next steps
Continue with usability testing of elements on the website.
Merge the mobile design and desktop for requesting appointments.
Continue to identify any additional elements needing improvement and ideate on those features.
