VILA

an EHR app for families
Project Overview
VILA is a family electronic health record (EHR) app that brings together your village when it comes to caring for your dependents. Users can access important medical documents, track medical appointments with a common calendar, and communicate with other caretakers and participating providers.
My Contributions
My Role:   UX Designer

Responsibilities: 
User Research
Persona Development
Ideation Sketching
Information Architecture
Wireframing
Prototyping
Usability Studies
Google Course Project
UX Designer
Apr 2024 - May 2024
The Problem 
Parents and guardians need to track medical appointments and share their children’s medical records with school, camps, sports, and other caretakers, so that they can ensure proper care for their children.

The Goal 
This project is intended to create a hub for families to track medical appointments and information. Parents and guardians can create their virtual village or support system by connecting through the app. Having centralized information accessible by all caretakers will help families of all kinds come together for their children.

User Research
I want to understand common challenges parents and guardians face when managing a busy schedule, coparenting, and tracking doctor appointments for their child/children. I also want to identify frustrations parents and guardians experience when obtaining medical records for their child/children.

I started my research by finding articles for parents about the process of obtaining medical records. I wanted to understand the general procedures and advice available to parents. I also read articles for grandparents caring for grandchildren, foster parents, and stepparents.

Next, I developed interview questions and began interviewing people I knew that met the target criteria. Ideal participants would be people ages 18 to 65 who are caretakers for children. It was important to include participants of different genders, who have children with disabilities, and have different guardian relationships.

User Personas

User persona Gladys
User persona Gordon
User persona Deborah

Wireframing

Paper Wireframes

My goal was to explore a variety of formats and find a design that is clean and easy to navigate. The icons placed in a grid format seemed easiest to view and provides an image for reference. Visual and written indicators provide multiple means of pathway recognition.

Paper wireframes for the VILA EHR app case study

Digital Wireframes

These features are intended to make communication easier between caretakers. The goal is to help users track and share appointments with caretakers in and out of the app. The features should accommodate multiple children and multiple caretakers.

Digital wireframes for the VILA EHR app case study


The app is intended to accommodate multiple caretakers with multiple children and different families. A child may be a part of a blended families or in a kinship placement or cared for by multiple family members.

Digital wireframes for the VILA EHR app case study

Low Fidelity Prototype

This user flow was created for a family with two children and one adult dependent. It demonstrates elements for primary caregivers vs secondary caregivers. Primary caregivers have the ability to change and share information. Secondary caregivers can view information allowing inclusion and sharing of important information.

Figma WireframesVILA EHR app wireframes
VILA EHR app high fidelity prototype

Usability Studies

Two rounds of usability studies were completed for this app. Both studies included 5 participants of various ages, genders, and backgrounds. The studies were unmoderated and had a series of prompts followed by an SUS scale survey. The initial study was used to improve upon wireframes in the low fidelity prototype. The second study was used to refine mockups used in the high fidelity prototype.

Usability Study    Round 1 Findings

  • Participants need different or multiple ways to add an appointment.
  • Participants need written cues included with the add icons.
  • Participants need a better way to get back to the homescreen.
Miro Affinity Diagram
VILA EHR app wireframe changes

After conducting the usability study, three updates were made. 

First, a home button CTA was added to the top dashboard to provide easier navigation back to the homescreen.

Text was added to the plus sign CTAs to indicate what action was being taken. Users will be able to find where to add an appointment, a dependent, and a caretaker more easily.

The final update to the prototype was to add a secondary way of adding an appointment. Users often looked to the child profile first, before looking under the calendar. Offering multiple options will allow users to more easily navigate this feature.

VILA EHR app wireframe changes

Mockups

When creating mockups, the visual design features of the app were taken into consideration. The color scheme is largely two shades of teal for a calming aesthetic and a dark gray as a neutral. Orange was used to add emphasis to notifications and alerts. Iconography was paired with text to create easily identifiable actions and a more accessible user flow.

VILA EHR app mockups
VILA EHR app mockup

High Fidelity Prototype

The mockups were refined to reflect what an actual account might look like.

In this prototype, Jane Doe is a caretaker for her daughter June, stepchild Jae, and father Jazz. The user is able to see aspects of being a primary caretaker as well a secondary caretaker.

VILA EHR app mockups

Usability Study     Round 2 Findings

  • Participants need better guidance and cues to locate document sharing.
  • Participants need multiple ways to add an appointment.

After conducting the second usability study, two updates were made. First, the wording was changed on the Sharing Screen from PDF to Document. This was done to keep the language more consistent and make the action clearer.

The second update to the mockups was on the Calendar Screen. When a user clicks on to the blank areas of the Calendar, a message will appear indicating that there is no appointment on that day. The message will also direct the user to the CTA below.

Miro affinity diagramVILA EHR app mockup changes
VILA EHR app mockup changes

Next Steps

Now that this EHR app is ready for development, addressing cyber security would be key. When handling private medical information, we must consider HIPAA and the ability for users to control access of others.

I would like to see cross communication between this EHR app and patient portal apps. This would be something worth exploring further with developers. I believe it would make the app even more useful.

Access to translated materials is very important for families who do not speak English as their first language. I would like to offer access to translation through this EHR app.

Impact

This EHR App will make communication and storage of medical information for caretakers of children and adults easy and accessible.

“I wish all medical record apps were this simple. Right now, I am using two of these [planners] to keep track of my grandchildren's needs.”
         - Tammy, grandmother & caretaker of grandchildren with special needs
"As a father of four boys, I definitely would use this for scouts, YMCA, public school. It would be convenient to have in one place."
         - Andrew, father of four
"I love this app. I think it would be easy for anyone to use. Five out of five!"
         - Sha-Ree, mother of one