MedLog

Case Study - Product Design

Overview

About the project

Role
UX Designer

Project Duration
5 Months

Team
Me, CEO, Marketing Lead, Product Manager

Tools
Figma, Asana

A problem worth solving!

Parents with a hospitalized child experience high levels of stress. They must care for their child as well as continue with their daily life like taking care of their other kids, working, paying bills, and finishing chores. The lives of families undergoing this get turned upside down.

This experience can be incredibly traumatic for both the child and family. There are organizations in place helping families in this situation, but more help is needed. My team and I set out to relieve the stress of families with children in pediatric hospitals.

Challenge

The design challenge was prompted by the following question: “How might we help families with a child staying in a hospital for an extended period?” This design challenge had its unique difficulties. The HIPAA Privacy restrictions made it difficult to interview medical professionals and patients. We had six weeks to create a solution for this challenge.

Research

I researched different local organizations to learn more about families with children staying in a hospital for an extended period and came across the Ronald McDonald House. They provide housing and resources to keep families and their hospitalized children together. I contacted the Ronald McDonald house, and they paired me with one of their social workers for an interview.

Interview Questions

  • What services does the Ronald McDonald House offer?
  • How does a family or person qualify to receive your services?
  • How does a person get set up with your services?
  • How are families affected by extended stays in hospitals?
  • Are there other charities available to help these families?
  • What are some of the parent’s needs when they come here?
  • Are most of the family’s needs met?
  • What is the most common reason families experience an extended hospital stay?

My colleagues and I interviewed seven parents. Diving into what these parents go through gave me a different perspective. After the interviews I went back to study all seven recorded interviews and found the following patterns:

Defining User Pain Points

  • Parents felt medical staff failed to treat their child as expected.
  • Parents would like to stay up to date on their child’s condition daily.
  • Parents would like to spend more time with their children at the hospital.
  • Many found it difficult to deal with life away from their child in the hospital.

Ideation

These findings set the direction for the project:

  • Connect families with affordable housing opportunities.
  • Educate families about their child’s illness/injury.
  • Keep parents updated on their child’s medical needs.

The team was split on educating families about their child’s illness and keeping parents updated on their child’s medical needs.

After discussing the two solutions we rolled with was helping families stay updated on their loved one’s medical care. The idea was to provide users with access to medical notes, written by nurses during patient visits. I wanted to provide parents with daily medical records to improve communication between parents and the hospital staff.

Persona

The information I gathered for the persona was all based on the research patterns found from our interviews. Compiling my research into one persona helped me whenever I encountered a difficult design decision because I put my personal opinions aside and focused on the user’s goals and pain points.

Persona.png

User Story Map

The user story map informed me on what features were relevant to solving the user’s problems and let me know what to include in the MVP.

Some of these features were:

  • Adding new patients
  • Verifying patients
  • Reading medical notes

Creating the user story map was a learning process when it came to working with a team. Everyone had different opinions on what features to keep and which to throw out. We often referred back to our research and persona to make a decision. We tried to focus on keeping the features essential to solving the persona’s pain points.

Sketches

The purpose was to get out as many sketches possible. I held myself back from rejecting ideas while I was in the process of sketching. My colleagues and I went through the final sketches to discuss which ones we thought worked best.

Wireframes

I began creating low-fidelity wireframes in SketchApp with the sketches as a starting point. These early designs provided perspective on what the app would start looking like visually. Wireframing was helpful because I was able to iterate on ideas and get feedback quickly.

Wireframes.png

Usability Testing

It was time to test the wireframes. I created an interactive prototype in InVision so users could click through the design. I created a list of tasks and asked users to complete them. Some of these tasks were “how would you add a patient?” and “can you navigate to the settings page?” User testing led to some interesting findings.

Usability Testing Patterns

  • Adding a patient was difficult for most users.
  • The labeling on certain buttons and titles was confusing.
  • Users didn’t know where the settings icon would take them.
  • In the onboarding process, users were confused by the order the screens were in.
  • The instructional overlays on the first screens confused users.

Usability Testing Iterations

1. Onboarding Overlays

I initially created instructional overlays to help users understand what they saw on the screen. After testing, I realized that instead of assisting the user, I cluttered the screen and caused more confusion. I removed the overlays and simplified the screens so users would not need onboarding overlays. I increased the visibility of the call-to-action buttons and placed them at the bottom of the screen.

2. Adding a Patient

Users found it challenging to add a patient. They didn’t know what part of the button was interactive. Users also thought that by tapping the button they could add their medical notes, but the function of the button was to add new patients. I addressed this by moving the “Add” button to the bottom of the screen and adding a bright blue color to create contrast.

3. Settings Icon

Users weren’t tapping on the settings icon because they were confused about what the icon did and where it would take them. They asked out loud, does it open a new screen, or do the settings slide out. To resolve this, I changed the settings icon to a hamburger menu that slides out halfway across the screen as an overlay. Now users had the setting options available to slide out without having to leave the screen they are on.

4. Screen Sequence

The sequence of screens confused most users. They were taken straight to the add patient screen after sign-up. Now thinking about it users didn’t ask to add a patient yet, so that must have been unexpected to most. I changed the flow to take users to the MedLog dashboard after sign-up instead.

High-Fidelity Mockups

I built the high-fidelity mockup after implementing these iterations to the wireframe. A goal for me was to communicate that MedLog is trustworthy. I took a simplistic approach to the design and used blues to help convey trust to the users.

A common theme throughout the design was the placement of the call-to-action button. I positioned them at the bottom of the screen and users caught onto this quickly.

Users needed to fill out the “new patient form” to add a new patient. Designing this form was an interesting challenge. I didn’t want to overload users with a lot of text boxes and text, but I also wanted to make sure I had all the information needed. I had the form span over three screens instead of one so users could digest all the information without getting overwhelmed.

When redesigning the sign-up screen, I removed the confirm password fieldand replaced it with an “eye” icon next to the password field. The icon shows the password when tapped so users wouldn’t have to confirm their password, they could see if it was correct or not.

In Retrospect...

A phase I could have spent more time on is the research phase. I believe that I would have gotten better results by asking more non-leading questions. I would have liked to learn more about the challenges these families face.

I also want to find different ways to “validate new patients.” At the end of the “patient form,” users were instructed to call MedLog to validate a new patient. This feature couldn’t be tested but calling every time to verify a new patient could become frustrating and drive users from using this app. A different approach to verifying a patient is implementing a feature that verifies users by uploading a picture of their ID to MedLog.

Figuring out how much time I should allocate to each phase of the design process was difficult. In this project, I could have been more efficient if I spent less time creating high-fidelity wireframes and more time designing the high-fidelity mockup. Next project I want to focus on the structure of the design when wireframing and not the smaller details.

Thanks for reading into what my world was like for six weeks. This project was a blast and a complete learning experience!