David Fenigstein

UX designer

Healthy Steps

Designing a new mobile app in a 2 week marathon

Infield Health's mobile app, HealthySteps, delivers medical instructions to hospital patients before and after surgery. The goal is to help patients get better, faster.

To help reach that end, the purpose of this effort was twofold.

To provide Infield Health with a patient journey map detailing opportunities to continue improving the product following our delivery.
To redesign the existing mobile app with an improved user flow and high definition visual designs.

Parameters

Client: Infield Health
Timeframe: 2.5 weeks
Team: 2 User Experience Specialists
My responsibilities: All - Each section of this project was collaborative work between me and the other UX designer on the team

Deliverables

Discovery research
Personas
Userflows
Patient Experience Map
High Fidelity Mockups
Interactive Prototypes
Technical Specifications

Tools

Adobe Illustrator
Sketch
InVision
PopApp
Survey Monkey

Discovery Research

Heuristic Analysis and opportunities for improvement

We conducted an analysis using Jakob Neilsen's Principles for UX Design. Three heuristics stood out as major opportunities for improvement

Learnability: Incorporating a first-time-use guide and "help" page can enable users to more easily understand how best to use Healthy Steps.
Findability: Because the information needed is not always readily available, there's an opportunity to make it simpler for users to find information they want to return to.
Satisfaction: A progress indicator could help the patient gain a sense of progress as they complete tasks on the list.

Survey responses

User Research and Task Analysis

After meeting with the client and presenting our initial analysis, it became clear that a more complete understanding of the problem was necessary.

Procedure

Interviews and surveys with both patients, who represent the user group, and with doctors who are experts in the field.
Analyze patient packets that are provided to guide patients through a surgical procedure.
Use the results of the research to diagram the task flow including all situations a patient may experience.
Dividing the procedure timeline into pre-op, day of surgery, and post-op tasks to examine points in the process where the Healthy Steps app could be most helpful to the patient.
Mind map our discoveries to prioritize application functions.

Major findings

While patients carefully use the information in the packets, there are opportunities to make that info more accessible.
Risk assessment, medication adherence, and scheduling follow-up appointments are the most common concerns of doctors.

Task flow

Early Mind Map to inform prioritization

Mind Map

Using information gathered from the task analysis and user research, all pain points and tasks involved in the surgical process were identified.
Brainstorming, we recorded and sorted this information on post-it notes.
These were organized to gain a greater understanding of how an app could address each issue

Ideation

Personas and User Flows

Considerations to guide persona creation

The sheer amount of tasks and situations Healthy Steps needs to address requires robust personas.
Personas should cover a wide swath of potential users.
All possible functions and options should be considered along with how useful they are for each persona.
Detailed user stories were developed so that our user flow would be complete and specific.

The Three Personas

The overwhelmed patient: A busy, working mother of 3 who broke her wrist. She does not want to spend time thinking about prioritizing and understanding tasks. She has no use for medical jargon.
The independent patient: An older man with a blocked artery. He does not want to be a burden to his wife or children, so he wants help remembering all required tasks and knowing what to expect at each point in the patient journey
The caretaker: A young college student who will act as a caretaker for her grandmother. Her grandmother broke her hip and does not speak English. Kelly will need the information to be simple so she can translate, and wants a complete understanding of how she can best care for her grandmother.

Wall of personas

Patient Experience Map

For each stage of the journey we determined

1. How the app is helpful.
2. The level of activity the app will undergo.
3. The specific tasks the user is experiencing.
4. How the user is feeling, and what they are thinking.

Prototyping and Usability Testing

Design Studio sketches

Sketching

My partner and I identified specific tasks from our user journeys.
For each task, we conducted design studio sessions, where five minutes were spent sketching solutions, and then results were compared.
The best aspects from each other's solutions were selected to plan for prototype design.

Paper screen uploaded to PopApp

Paper Prototyping

Paper was chosen as the early prototype method to minimize time required to iterate on the prototype.
For the paper prototype, each main screen was sketched on a mobile cardboard cutout.
Overlays were created so that all tasks within the app could be complete and interactive
A total of 54 paper and cardboard screens were created.
Each screen was photographed and uploaded to PopApp. This app enabled creation of a full interactive clickable mobile experience from a paper prototype.

Usability testing with the paper prototype

Usability Testing

Specific tasks from each aspect of the patient journey were identified to run guerilla testing with subjects in the area.

Subjects were given representative scenarios and asked to complete tasks starting from the home screen on the paper prototype.

From these results, we iterated on both the app flow and screen design until the flow was intuitive for the subjects.

Following the iterations, the screens were uploaded to PopApp for the final round of testing.

High Fidelity Mockups

Visual Design Process

Using the paper prototype as a guide, detailed mockups were designed using Adobe Illustrator.
These screens were then loaded into Omnigraffle to create a technical specifications document.
The client was so impressed with our results that he sent the screens to his development team to be immediately coded. Below are examples of some key screenshots for Healthy Steps.