Project Overview
Role
Product Designer,
UX / UI
Tools
Sketch, Overflow, InVision,
Userbrain
About
Prizer (now Credo) is a startup that creates personalized guidance based on a consumer's own medical data. This is to help them save money, time and optimize their health while aligning with the benefits and financial goals of Health Plans & Providers. With Prizer, users could take control of their medical records, learn about ways to better their health and receive medication discounts.
The Challenge
- Design a native mobile app that easily onboarded patients and imported their medical records
- Create a design system based on the established brand language
- Visually communicate test results and educate users with easy to understand UI and infographics
- Design a layout that allows users to add, browse, and filter their past medical records
Research
The Digitalization of Data & Healthcare
- The Cures Act mandates patient access to their medical data at no cost.
- The COVID-19 pandemic has forced more patients to connect digitally to their healthcare systems.
- FHIR created standard data access to patient medical records.
- Privacy laws enable individuals to exercise their rights, such as and in certain circumstances, individuals can take back ownership of their data.
- Patients, legal guardians, attorneys, and providers may all request copies of medical records yet most often may do so through online forms, written requests, or in person office visits.
- Some facilities will give requested records for free, however, most states have statutes for how much providers may charge for hard copies of patient records. These providers have 30 to 60 days to comply with these requests.
Primary User Demographics
- Men and women ages 50 and over
- Located primarily in the southeastern United States
- Medicaid and private insurance policy holders
- Close to retirement or already retired
- Regularly schedule doctor appointments
Ideation
Brainstorming
Based on preliminary research, our product team had a lot to unpack in regards to designing initial user flows and wireframes.
During a white-boarding session, we focused on the concept of a health timeline where all of a user's imported medical records would be presented and categorized by the years they accessed care. We also ideated on concepts around how to present promotional offers to users on a customized home screen.
A high level diagram explaining how Prizer would use patient data to customize a user's experience.
Userflows
Getting users onboarded to the app was one of the first tasks our design team focused on. In the process, Prizer would need to pull a user's past medical records in order to customize content. I was tasked with researching ways that current medical record apps obtain this information from their users.
I decided to break out the points of entry with two main user flows. The first being an independent sign up through the Prizer marketing website. The second path was having a user directly invited from email or text through their healthcare provider.
I also came up with the idea of allowing users to add entries to a "health diary". This feature was to act as a way to let them monitor their symptoms and potential health episodes right in the app for easy tracking. The user can then filter to see specific types of events on the timeline.
Wireframes
Homescreen
One idea that came up was the concept of a Prizer health score for some encouragement and gamification. The Health Feed would be customized based on the user's medical records. When they logged in, they would get suggestions for ways to save and be proactive about their health.
One of our assumptions was that most users would not be engaging with the app on a daily basis. So by presenting them with actionable cards, we could nudge them to stay engaged and increase their Prizer score to unlock even better offers.
Records
After consulting advisors in the medical field, we also decided to break up the timeline screen into two tabs. This decision was based on our discovery that medical records are often categorized by a patient's specific conditions.
The tabs were categorized as:
1. Conditions: Focused on the user's specific health conditions with expense breakdowns for each one
2. Timeline: Medical records, health diary entries, and a calendar view
Record Sharing
After interviewing friends and family within the primary user demographics, I uncovered an additional user pain point related to sharing records:
Oftentimes, the responsibility falls onto the patient to ensure that their records are shared across multiple providers.
When an office fails to do so, duplicate testing may occur which ultimately results in a patient paying more money. Not to mention the frustrations of follow up calls and emails to make sure the records are shared at all!
In an effort to make this process a better user experience, I created wireframes for a flow that would allow a user to filter their records and then export them to a provider via email.
Bite Sized Educational Content
The concept of giving users "bite sized content" to avoid cognitive overload was utilized for the educational design concepts.
I'm a huge fan of Mint and how it took the concept of social media stories and translated it into a way to educate its users on their financial health. This same concept was applied to my designs as a way to educate users on everything from preventative health tips to quarterly stats.
"Bite sized content gives people an option to learn in a more fun, engaging way."
Mid-fidelity wireframes exploring the concept of ways to utilize the idea of "bite sized content" in a story format
Branding & UI
Brand Board & Logo
Prizer already had an established brand deck with their main brand color. I was tasked with expanding the palette to include accent colors and to create a brand board that communicated the intended look and feel of the app's UI.
Our team brainstormed and created numerous logo concepts before landing on the final version below. It is an outline of a folder that is intended to represent medical records.
Prizer marketing brand board to communicate color usage, photography, and typography
Hi-Fidelity UI
When it came time to take my wireframes into hi-fidelity UI, I decided to use the neon purple brand color for the majority of way-finding elements. The accent colors were used sparingly and branded icons were created to add to splash screens to liven them up. I knew I had to use color sparingly as I took into account who the primary users were and that some may have accessibility issues.
Hi-fidelity wireframes utilizing the expanded color palette and bold brand color for way-finding