MedLog Case Study | Juan Jacinto

Juan Jacinto
Juan Jacinto
Published in
8 min readJan 18, 2018

Real-time updates on your loved one’s care

Overview

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, “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 digital solution for this challenge.

My Role

The three-man-team consisted of Russell Carey, Steven Skola, and myself.

My role in the project was:

  • Conducting user interviews
  • Creating a creative brief and persona
  • Brainstorming solutions
  • Creating a user story map
  • Sketching low-fidelity wireframes
  • Conducting card sorting exercises
  • Designing high-fidelity wireframes
  • Prototyping wireframes
  • Designing the high-fidelity mockup

Design Process

I followed a human-centered design process with my focus being on the user’s needs, goals, and pain points. My design process was about empathizing, defining, ideating, prototyping, and testing.

Research

To learn more about families with children staying in a hospital for an extended period, I researched different local organizations 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 parents needs when they come here?
  • Are most of the families 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 The 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 child 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. Several ideas to solve these pain points arose:

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

Connecting families with housing already have the attention of several organizations, so we discarded it for possible solutions. The team was split on educating families about their child’s illness and keeping parents updated on their child’s medical need.

The solution 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 off the research patterns.

The persona’s goals were to:

  • Stay up-to-date on my child’s condition daily.
  • Make critical medical decisions and requests when needed for my child.
  • Spend time with the child at the hospital while taking care of the family back home.

The persona’s pain points were:

  • Medical staff failed to treat her child as she would have liked.
  • Lack of privacy and respect from the medical staff.
  • The inconvenience of being away from home.

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.

User Story Maps

The user story map helped me figure out what features to focus on and what to include in the MVP.

Some of these features were:

  • Add new patients
  • Verify patients
  • Read 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 only keeping the features essential to solving the persona’s pain points.

Sketches

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

Wireframing

With the sketches as a starting point, I began creating low-fidelity wireframes in SketchApp. 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 for the medical notes feed, medical notes screen and verification form.

Usability Testing

It was time to test the wireframes. I created an interactive prototype in InVision so users could navigate through the design. I created a list of tasks and asked users to complete them. The purpose of the testing was to determine if any features could be improved and to see how users navigate through the app. Some of these tasks were “add a patient” and “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

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.

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.

Setting’s Icon

Users weren’t tapping on the settings icon because they were confused on 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.

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

After implementing these iterations to the wireframe, I built the high-fidelity mockup. 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. Users caught onto this theme quickly.

To add a new patient, users needed to fill out the “new patient form.” 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 field” and 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.

High-Fidelity Mockup

Retrospective

If I were to revisit this project:

A phase I could have spent more time on is researching. I believe that I would better results by asking non-leading questions. I underestimated the importance of empathizing with users and 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 called MedLog to validate a new patient. This feature could not 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 identification 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!

--

--

Juan Jacinto
Juan Jacinto

UX designer with a focus on design strategy and psychology.