Case study 1Case study 2Case study 3Case study 4
Case Study 1

Services Summary App for a Hospital

Through Google's UX design courses, I was asked to choose a prompt and create a case study for a "Service Summary App for a Hospital" using the UX design process. Using this prompt, I worked on a fictional app for Seaside Hospital.

Timeframe:
Mar 2023 - Sep 2023

overview

Product

Seaside Hospital would like an easy way for patients to view their service summary for past visits, with the ability to pay bills using an app. This app targets patients of the Seaside Hospital System who prefer to use technology over using the phone or mail.

Problem

Many people don’t understand the services that are being performed and why when they visit the hospital. They would like more clarity into what has been performed and the associated costs. They would also like to pay their bills using an app rather than by mail or phone.

Goal

Bring clarity to services rendered at the hospital or by a doctor as to what was performed, why it was performed, and how much they owe for the services.

Responsibilities

As the UX Designer, I was responsible for conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Mock up with 4 different phone screens of Services Summary for Seaside Hospital

Understanding the user

User research summary

My research consisted of building empathy with users provided in the course. I put myself in their shoes based on the demographics and other information provided and tried to answer questions from their perspective. 
Research found that patients are quite busy and don’t want to spend time on the phone talking with billing to understand their medical bills. They would prefer a way to view details via an app before they pay for their bill.

Pain points

Timeliness

Users wished there was an easier way to view services rendered rather than getting it in the mail many weeks later.

Payment

Users would like to pay for their bill quickly and easily without depending on anyone to assist them.

Understanding

Users don’t fully understand the healthcare system and why services are being rendered.

User Persona

Problem statement
Jerry is a busy small business owner with very little time and needs easy access to hospital services rendered without the hassle of calling billing every time.
User journey map
Mapping Jerry’s process revealed how nice it would be to be able to have technology available for viewing the summary, as well as getting assistance for questions and payment.
Persona actions and task list

Starting the design

Paper wireframes
I wanted to come up with what the main screens for this services summary app would be so that I could address the user's main pain points. I wanted to make sure that the payment button was clear and easy to find on each relevant screen.
Digital wireframes
As I was designing the app, I made sure to prioritize the user's feedback regarding the issues they faced. Specifically, I focused on providing the option to pay bills through the app and making it easy to access past service information.
App on phone screen highlighting pay bill and how to view more information
The ability to dig deeper into understanding why a service was rendered and how the bill associated with it was key to this design. To avoid long phone calls with billing, I added a feature for patients to contact billing through the app.
Phone app showing how user can send a secure message to billing at the hospital
Low-fidelity prototype
The low-fidelity prototype showed how a user would move through viewing service summaries and paying a bill so that we could perform a usability study with users.
Low fidelity snapshot of a prototype with connections between each phone screen
Low-fidelity prototype
Usability study findings
I conducted two rounds of usability studies with users. The first round helped influence design for taking wireframes to mockups. The second round used a high-fidelity prototype and highlighted additional areas that needed attention.

Round 1 findings

  1. Users want better cues in the app for knowing when hospital visits occurred
  2. Users need more detailed information when paying their bill
  3. Users need improved navigation

Round 2 findings

  1. Additional context needed for the prior visit cards to be useful
  2. The use of bottom navigation was an improvement, but needed refinement
  3. The payment confirmation summary improved the overall payment process

Refining the design

The goal was to allow users to scan through prior visits and allow them to choose a specific visit and view additional details about their service. Before the usability study, it wasn’t clear to the user how to select the most recent visit, so I added a sort to the visits along with date information included in the prior visits cards.
2 phone screens showing before and after usability study changes
Navigation was unclear for the users, so to simplify things, I removed the hamburger menu and decided to go with a straightforward view using a bottom navigation bar and a large Back button at the top to replace the logo where applicable.
2 phone screens for before and after usability study highlighting changes in navigation structure
Mockups
Mock up with 4 different phone screens of Services Summary for Seaside Hospital
High-fidelity prototype
The final prototype provided more precise navigation and a cleaner payment process. It also provided the right amount of detail in the summary portion for the user to understand the services rendered.
High fidelity prototype showing connections between various phone screens
High-fidelity prototype

Accessibility considerations

1. Color contrast

Color contrast is something I checked throughout the design process to ensure it meets AAA standards.

2. Iconography as visual aid

The usage of icons as a visual aid in identifying different parts of the design including navigation.

3. Font legibility

Used a font that provides good legibility with height, width, and thickness.

4. Tap Target Size

Used large buttons, inputs, and navigation icons.

Going forward

Takeaways

Impact

The Services Summary App made it easier for patients to understand the services rendered by the hospital system. The app also simplified the payment process by allowing patients to easily access and understand the details of their healthcare expenses. With the Hospital Services Summary app, patients can stay informed and in control of their medical care.

What I learned

During the design process of this app, I realized the importance of conducting multiple iterations of usability studies. By involving users in the design process, I gained valuable insights that I would not have discovered otherwise. The usability studies helped me uncover many issues and improve the overall design of the app.

Next steps

1. Prioritize pain points

There were a few pain points that were uncovered early in the usability studies that can now be prioritized.

2. Ongoing user research

Continue to conduct user research to identify new pain points that should be addressed.

3. Accessibility with developers

Work with developers to ensure that accessibility best practices are being included in development of the app.

Up next

Milliman Product Design System
EmailLinkedIn