Infield's mobile app, HealthySteps, delivers medical instructions to hospital patients before and after surgery. The goal is to help patients get better, faster. It was coded and shipped with no input from UI or a design team.


The Infield Health Logo Redesign

Project Parameters

  • Client: Infield Health
  • Timeframe: 2.5 weeks
  • Goal: Redesign Infield Health's Healthy Steps app

Overview

  • Enroll in the app and conduct task analysis.
  • Evaluate current solution based on heuristics, available and user research.
  • Determine the most appropriate workflow/user flow. Apply techniques to reduce patient cognitive load and increase trust.
  • Sketch and mockup a new visual design

My Role

  • Research
  • Concept development
  • Personas
  • User Flows
  • Sketches
  • Prototyping

A first look at the app


In preparation for our first client meeting, we conducted an initial heuristic analysis of the current version of Healthy Steps and identified some places it could be improved.

Heuristics

  • Learnability: Incorporating a first-time-use guide and "help" page can enable users more easily understand how best to use Healthy Steps.
  • Memorability: Because Healthy Steps is delivering a wide range of information that can currently move off the screen in the task list, 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 satisfaction as they complete tasks on the list.
Infield Old Splash Screen The original home screen
Updated Splash Screen The home screen in our completed design

Task Analysis

  • After our client meeting, it was clear we needed a complete understanding of the full patient journey.
  • We researched packets patients recieve from doctors and hospitals.
  • We chose orthopedic surgery, and looked at time frames and all requirements.
  • We paid close attention to writing down every possible situation a patient could experience.
  • We separated the pre-op, post-op, and day-of-surgery tasks to get an understanding of where the app could be helpful during each part of the patient journey.

Task Flow Task Flow for Knee Surgery

User Research

User Survey

  • We sent a user survey to respondents who underwent surgical procedures in the past.
  • Our questions focused on packets of information patients recieve from doctors and hospitals.
  • We particularly wanted to gain information on how helpful packets were with specific tasks identified in our task analysis.
  • We found that respondents do carefully use the information in the packets, but we could make that info more accessible.

User Interviews

  • We conducted interviews with both doctors and patients.
  • The object with patients was to gather information on what they would find helpful and how they would use a mobile guide.
  • With doctors, we wanted to gain an understanding of what should be prioritized.
  • We found that risk assessment, medication adherence, and scheduling follow-up appointments are the main tasks we need to emphasize.
Survey Responses Survey responses regarding content of the packets.

Mind Map

  • Using information gathered from the task analysis and user research, we identified all pain points and tasks and parties involved in the surgical process.
  • Brainstorming as a pair we recorded and sorted this information on post-it notes.
  • These were then organized so that we gained a greater understanding of how an app could address each issue
Concept Map Early Mind Map for Our Design

Personas and Userflows

Persona Considerations

  • The sheer amount of tasks and situations Healthy Steps needs to address requires robust personas.
  • We need to create personas that cover a wide swath of potential users.
  • All possible functions and options should be considered along with how useful they are for each persona.
  • A detailed user story should be developed to our user flow can be complete and specific

The Three Personas

  1. Peggy: 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
  2. Frank: 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
  3. Kelly: 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.
Personas Wall of Personas
User flow Userflow for persona "Peggy." (Note: we changed her name)

Paper Prototype and Usability Testing

Sketching

  • My partner and I identified specific tasks from our user journeys.
  • We then conducted five minute "design studio" sessions, where we each spend five minutes sketching solutions, then compare.
  • We chose the best aspects from each other's solutions and sketched every screen required for a full prototype.

Prototyping

  • For our paper prototype, we sketch all of our main screens, along with every possible overlay for different tasks.
  • We chose paper as the main method for our testing so we could quickly iterate on our design.
  • When completed we had sketched a total of 54 screens.
  • The main screens were pasted onto cardboard to mimic the real app for testing.
  • Each screen was photographed and uploaded to PopApp, so we could better understand how the app would work and look directly on the smartphone.

Usability Testing

  • For usability testing, we identified specific tasks from each aspect of the patient journey.
  • We then approached subjects, and starting from our home screen, instucted them to complete these tasks.
  • From these results, we iterated on both the app flow and screen design until the flow was intuitive for our subjects.
Sketches "Design Studio" sketches
PopApp Screen Paperscreen uploaded to a PopApp Screen
Usability Test Usability Testing

Patient Experience Map

  • For what was viewed as our most valuable deliverable, we created a detailed 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.
  • From this exercise, we were able to better understand where the opportunities were for Healthy Steps to be most useful.
Experience Map

High Fidelity Mockups

  • Using our paper prototype as a guide, we created detailed mockups using Adobe Illustrator.
  • These screens were then loaded into Omnigraffle to create a spec doc that could be sent to developers to code the app.
  • 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.


  • Home Screen with Pre-Op Tasks


    Task Completion Badge


    Pre-Op Homescreen with Menu Sidebar


    Help Screen


    Day of Surgery Driving Directions


    Day of Surgery Instructions


    Information About Condition and Procedure


    Example Article Popup


    Readmission Risk Assessment


    Medication Schedule with Popup Detail


    Medication Schedule in List Format


    Complete Medication List