Allegheny Health Network — Saving Hearts Project
--
Year: 2015
Client / Company: Allegheny Health Network
Role(s): User Experience Designer
Contributions: General App Concept, Main User Flow, Contextual Inquiry, Wireframes and Mid-Fi Mockups, Clickable Prototypes, Animation Narrative.
Final Result / Deliverable: iPad App with a Full Experience for Patients and Healthcare Providers.
Problem
Saving Hearts was a semester long project at the Carnegie Mellon Entertainment Technology Center sponsored by Allegheny Health Network. AHN was looking to develop a technology based solution to decrease the readmission of patients diagnosed with Congestive Heart Failure, a chronic heart disease that is incurable but that can be stabilized and controlled with the right medication and an improvement in life habits.
AHN asked us to develop an iPad based experience that would teach their patients about the importance of taking medication, having a good diet and excercising regularly. The biggest constraint for this project was the target demographic: Diagnosed Seniors, likely under-educated and financially challenged.
How to design a habit changing experience for third age users with little knowledge of technology, who live on a tight budget and that don’t have the intellectual tools to understand the cause-effect between their condition and their life-habits?
Process
As the UX Designer assigned to this project I lead the iniative of creating a disrupting experience that would appeal our audience and achieve the results we were aiming for.
In order to understand the details of the condition and the problem, we met with a client team composed by Cardiologist, a Cardiac Nurse Practitioner, a Pharmacist, a Nutritionist and a Physical Therapist.
From this meetings we got a lot of useful information about the patients, their habits and their ongoing treatment. It was easy to determine that we needed a engaging experience with a strong feedback loop that would help the patients to understand the implications of having a chronic heart disease.
One particular area that I started addressing within my design analysis, was the idea of creating a dynamic experience that could serve as a resource for both the patients and the healthcare professionals. My first design approach to the problem was to determine which was the process used by the physician to explain the condition to his patient and detect why it was ineffective.
The process looked like this:
1 Appointment with the Doctor, in which the patients are informed about the diagnosis and current state of the condition.
2 Patients receive Informational Booklets. A new appointment to start the treatment is arranged.
3 Before starting the treatment, the patients meet with other healthcare professionals (dietitians, pharmacists, etc.). They provide the patient with further information about their condition and treatment.
After analyzing the flow and the diagnosis process I determined that there were three main problems:
- The process was extremely disjointed. The patients were receiving the same information but with different angles that didn’t necessarily connect.
- The printed booklets were very dry and they didn’t seem to have a connection to the main diagnosis thread.
- The patients didn’t have a time to built and mental relationship between their condition, their life-style and the upcoming treatment. They were only seeing the value of the medication since this is the most critical component of the treatment.
Here is an example sheet of a classic medication booklet given to patients with heart conditions:
It was pretty clear that the main problem was the lack of empathy with the patients context reflected on a cold and disconnected experience. Based on these findings we decided to create an educational app to replace the old and dry booklets. We also decided that we wanted an app with a very insightful experience that would include engaging mini-games and a healthcare provider mode to allow the healthcare providers to use it as a resource to explain their health recommendations and treatments.
A a UX Designer I was in charge of creating the interaction flows, the content experience and the general graphical interface composition. Part of my work was also to create a seamless transition to the games that were being conceptualized by another team member (game designer).
By testing with early iterations of a user flow and performing discovery interviews with the stakeholders and certain patients, I was able to define the required experience and its components.
Here is a photo of one of the user interviews that we performed to learn about out target demographic.
In these interviews we used different design research techniques like AEOUT Observations combined with Participatory Activities to encourage users to share more insights. After finalizing the first set of interviews and analyzing the available data I came up with some conclusions and I suggested the team to rule our experience by four main design heuristics:
- Visibility: Everything in the app should be visually relevant, high contrast and readable.
- Redundancy: In order to tackle any issue with the experience progress I suggested the team to create different interactions and mechanics to move through the app.
- Feedback Loop: The app should provide constant feedback of its current state and upcoming states as well as giving a clear indication of progress.
- Symmetry: The flow of the app should be symmetrical. This means that the app navigation should hold a pattern and build familiar routes to progress and review the available content.
Now that we had some facts and a clear roadmap I started designing a flow for the app.
Here is an example of an early user flow that was used to determine the main heuristics:
I also started working on the concept and the tone for the content. The idea was to create very minimalist and consumable content, without being childish and favoring engagement.
I proposed a series of animations that would play next to a small snippets of information. Here are some early concepts for those animations:
To arrive to the final flow and content proposal we performed several interviews with patients and individuals with similar demographic characteristics. We showed the patients our wireframes and tested for specific issues like readability and cognitive load. This also helped me to define the navigation tree and the user interface componenets for the app. It also helped to create a consistet set of patterns that were implemented in the final design.
Here is the final proposed user flow with final low fidelity wireframes:
Patient / Story Mode
Healthcare Provider (HCP) Mode
Wireframes Examples
Solution
The final app is a friendly and encouraging experience that allows patients to comprehend their situation. More importantly this app enables a framework of dialogue between the patients and the health care providers. Patients who learn about their disease through this experience are in a better position to understand their condition and assume the responsibility of being compliant with their treatment and self-aware of the impact their life style has on their well-being.
Here is a great example of the clarity and simplicity that we were able to deliver with the final app. The dry medicine guide shown before is now transformed into an engaging narrative :
Finally, here is a video demo that shows the fluidness of the interactions and the use of different navigational elements and feedback loops to increase comprehension and effectiveness:
