UX CASE STUDY: CONCEPT / DESIGN / content strategy/ user research / USability testing
For a Springboard UX design course, I completed over 100 hours of coursework in user-centered design: recognizing a problem, validating the problem through user research, creating personas, content strategy, information architecture, wireframing, prototyping, user testing, and visual design. This is my Capstone Project…
Understanding the Problem
I bend down to hit the tennis ball coming across the net, I hear the sound of pop, and a buckling of my knee sends me dropping to the ground. I’m afraid to know what it is, but after researching orthopedic doctors, I make my way in to a new clinic to get it checked out. I see the form, the laundry list of questions about my medical history. This again…previous surgeries, allergies, medications, family history, the list goes on. When was that surgery I had? Where is the contact info of my primary care physician and why can’t I think of her name? What are the dosages of vitamins I’m taking? I fill out the form relying on memory, leaving several areas blank and call it good enough. Is good enough ok when you’re taking care of your health?
This app addresses these issues, collecting health data in one cohesive format, helping people take control of their health.
The process to solving the problem
I had an idea of what I wanted to solve, but do others have similar pain points? User research was the first step in identifying the behaviors of health seeking individuals – what are their current health tracking practices? Is tracking their health important to them? Using Google forms, I conducted a survey of 30 targeted users, and interviewed 5 in person.
Survey participants who expressed an interest in talking further about their health were interviewed in person to gain deeper insights. I was careful not to ask any leading questions but to ask open ended questions to get them to talk. I started to hear a pattern in two main pain points, the first of which surprised me.
1. Users that track the health data of family members say they tend to do so with more tenacity than their own health.
2. Users revealed frustration with having to recall a doctor’s name or clinic, when they had an appointment, and where those test results can be found.
Empathy Maps & Personas
In order to gain a deeper understanding of my users, I created two distinct personas using the research gathered from surveys and interviews. I focused on the behaviors and goals of my users, leaving demographics aside. Though the personas created are fictitious, they represent real feelings and behaviors of users. I also created an empathy map for each persona, helping me consider what and how my potential users are thinking and feeling.
Lean UX and MVP
Lean UX follows a strategy of maximizing value and minimizing waste. This is done by focusing on a minimum viable product (MVP) and gaining feedback quickly from users with a build-measure-learn process. With the insights gathered from research and personas, I focused on the most frequent user patterns and pain points with following features:
1. Import a health report from an exam
2. Apply a filter function so users can get to their health data easily
3. Add a separate user (ie-family member), with same health view
4. Doctor/practitioner contact info function
5. Calendar/appointments function
With the features identified, I created user stories that will help to keep the product user focused.
Using the same actions from the User Stories, I conducted an open card sort online through OptimalSort. 9 participants completed the Card Sort, some of which added additional thoughts in written form. The following insights were revealed when analyzing the similarity matrix, dendograms, and participant centric analysis.
• The majority classified groupings consistently
• 4/9 participants followed a similar cluster grouping, with 4 dominant sections: My Medical History, My Family, Appointments, and Family Doctors.
• Added notations: In the Medications feature, enter when the medication was started and stopped, and enter symptoms next to each medication - this feature would be a consideration for the next version.
Information Architecture and User Flows
Building upon the content and feedback from the card sort, I developed a site map and user flows to help see the structure and flow of pages. I created 3 different flows users would walk through to visualize those steps and how quickly they can get to their need.
Sketching & Wireframing
The designer in me was excited about this next phase: gathering all the content collected and see it come to life with sketching and wireframing. I sketched out wireframes by hand to help me map out the functionalities, and made for easy editing. My focus at this stage was on optimizing the navigation and getting the user to their need quickly and easily.
After working through my sketches to get the content organized, I used the Sketch application to create wireframes. This step helped to see the user flow from page to page, as well as clarify space allowance and proportions of content for legibility within the mobile app specifications.
Using Sketch and InVision, I adapted the wireframes into a clickable prototype. The content remains in low-fidelity form with simple boxes and circles to represent buttons and icons, the visual design will be added after testing and iterating on the prototype. The flow between Sketch and InVision makes a seamless process to assist in iterating. The following low fidelity prototype was then tested to elicit user feedback.
Three participants were chosen for usability testing, moderated in person. Each participant was briefed before the meeting so expectations were set. Five scenario tasks were asked of each participant based on the MVP:
1. Input exam results
2. Find your mothers medications
3. Input a health appointment
4. Search a doctor’s contact info
5. Add a user
It was invaluable to hear participants talk out loud while navigating the app. I received great insights while they were questioning a task or adding their advice on what they expected to see. Based on the tasks performed and other general feedback, I will move forward with the following iterations:
• Add a user: test plus symbol vs. text
• Exams: edit text to “Test Results”
• Calendar view: test the need for this function vs incorporating health info with other calendar apps (Google, Apple)
• Profiles: design function to upload a photo or icon to identify each user
• Doctor info: ability to import a doctor’s info from other Contacts apps
After several rounds of iterating and testing the prototype with targeted users and gaining valuable feedback of their needs, it was time to add a visual interest and depth with visual design. My first step was to come up with the name Healthprint, to express the intent of the app, and the personal nature of ones health information. A look and feel was then developed including color, typography, graphics, and style guide illustrating the visual hierarchy. The look and feel is one of soothing colors to evoke the sensitivity of health. A clear hierarchy of typography in a legible sans-serif font reminds the user of the clean, organizational nature of collecting ones health data.
Final Touches & Reflection
With the visual design defined, the next iteration of prototype will incorporate the design for testing in a high fidelity prototype. Prototype 2.0 to come.
Working through the product design process, I found myself having to go back to personas and user stories to stay focused on the MVP, as I wanted to creep in more design features. The build-measure-learn model was extremely valuable, and I found myself excited by user feedback. Observing and listening to users was a highlight for me, being able to connect with people and feel their frustrations. I look forward to developing more products to tackle human needs, and try to make life a little easier for them.