Case Study
Real-time Healthcare Data Experience
Overview
Duration:
3 months
Solo UX Researcher, UX/UI Designer
Phone Interview, Journey Mapping, Site Map, User Story, Storyboard, Competitive Analysis, and Behavioral Usability Test
Role:
Materials:
Tools:
Figma, Zoom, Laptop, and Mobile Devices
Papyrus is an on-the-go data medical app that improves connections between patients and medical professionals through confidential information security, telehealth, education, data analysis, and accountability.
The aim of the project was to solve the problem of record keeping for medical facilities and the interpersonal conflict from patients receiving care and tracking their health.
The Problem
1. Overwhelming Record Storage
Documents are being recorded physically and placed in files where it is stored in file cabinets or in alphabetical shelves.
​
With new or current patients, new information must be added into these files causing clutter and overwhelming search and find.
This leads to:
-
potential diagnosis error, and inaccurate health progression data
-
file disorganization
-
Misplacing data in the wrong location and time-consuming data retrieval
2. Loss of Health Information
After the patient completes their tests and examinations, doctors send the results to the patient via electronically or mailing address.
​
Patients are often given numerous paperwork to keep track of their finances, medical records, appointments, and prescriptions. Medical terms are used without explanations, causing confusion.
Without proper documentation from current visits, patients are faced with:
-
losing paperwork
-
increase calls to the hospital for assistance which recur wait times and voicemails
-
missed appointments and prescriptions
-
delay health treatments
3. Lack of Health Progress
Patients are focused on their daily tasks which can cause them to forget to take medications, pay medical bills, and appointments.
The result:
-
slow health progression
-
lower chance of health prevention
-
increase hospital visits and emergencies
Questions to Ask
After identifying the problem, I focused on 5 questions to create the outline for Papyrus's information architecture and research. These questions determine the app navigation and the level of resourcefulness for each feature.
What type of inclusive interface will meet the users' needs?
How do I design features that track patient's progress effectively?
How do I simplify data for patients and medical professionals to understand?
In what ways can the app notify users that will assist with their health journey?
How can I improve the communication between the user and their assigned medical professional?
Challenges
Preference or needs differs from each healthcare specialist based on the type of care. Overwhelming findings of this data must be narrowed down to MVP (minimum viable product) that can be implemented to across all medical departments.
The Solution
Users can journal their progress and symptoms in real-time which medical experts can review and plan accordingly before appointment
Customizable educational topics on the home screen for quick learning about symptoms and remedies
Features like trend charts showing health progress for each day, week, and month based on user's specific needs
Set reminders to take medication and keep track how much is left
Schedule an in-visit appointment or telehealth to reach a professional for any questions on prescriptions or results
Design Timeline
Discover
Length: 2 weeks
-
Evaluate Goals
-
Interview and survey stakeholders
-
User stories, persona, and journey mapping
Define
Length: 3 weeks
-
Competitive Analysis well-known apps
-
Sketch wireframes and portray storyboards
-
Make connection with journey map to create a sitemap
Develop
Length: 4 weeks
-
Draft Wireframe
-
Build UI elements
-
Mockups
-
Usability Tests
Deliver
Length: 3 weeks
-
Prototype and finalize app
-
Reflect on project and feedbacks
Discover
1
User Research
Qualitative Research
Surveys were sent throughout social media to contact participants and understand the age range, gender, health habits, daily task, and learning. After receiving participants, I proceeded to schedule interviews to further discuss their answers.
Upon findings, I discovered:
​
-
One user found difficulty accessing her account via email due to a broken link from the clinic website
-
Older users explained a lack of technical skills to to navigate through the account, low readability, and relies on a family member to complete paperwork and schedule appointments
-
​
​
All three users emphasized for easy navigation, large text, and results from their actions (positive and negative outcomes).
​
User Stories
For the MVP, I center my designs towards navigation, accessibility, and simple UI elements to address the five main points for optimal experience.
01
"I want to know when I can take my medication and know if I took them already so I don't forget"
02
"I want to know where I can store and find my medical documents and keep them organized"
03
"I want the capability to access data and check my progress on the app"
04
"I want to search for articles that improves my health and more information about my health"
05
"I want to be able to access to my doctors to discuss about medications and treatments"
Journey Map Sketch and Personas
Supported by the storyboard, the sketch was focused on nine steps of the journey map - from the users' circumstances with their health provider and evaluation - to the actions of their treatment. The idea did not change however, the user journey is adjusted to accommodate different needs.
Define
2
Competitive Analysis
Apple Health
Strength: Apple has easier navigation with three tabs: Homepage summary, sharing, and browse
Weakness: App contains other apps for users to try and does not link them to the user's Apple account
Opportunities: Link other health and fitness apps
Threat: Covers all health formats
Mercy Portal
Strength: Hospital provides secure accounts for patients and doctors posts records online
Weakness: Customer Service was not responsive in terms of account issues. Redundant navigation
Opportunities: Use security or other methods of to log in effectively
Threat: Well-known hospital which provided programs and assistants
Sutter Health
Strength: Mobile and Desktop Accessible for appointments, records, and a number of health providers
Weakness: Limited types of professionals and various links to sign up for resources
Opportunities: Connect with other hospitals for data information
Threat: Efficient mobile app in a saturated industry
Credit Care
Strength: Available appointments for all medical fields and easy payment option solution
Weakness: Pays based on credit limit. Does not
Opportunities: Use security or other methods of to log in
Threat: Well-known hospital which provided programs and assistants
Sketch Ideas
Sketch
Notifications and Home App
UI Ideas for notifications to animations of the logo
Storyboard
Aligns user persona with the step process and the app's purpose
In the early sketch process, I highlighted features from Apple Health and Sutter Health app that could be useful for the wireframe. For instance, the hamburger menu from Apple Health would display the organized tabs of all the medical records in categories. Another feature that was interesting was the trend and how it displayed many types of health-related topics.
I established an animation after the log-in screen of a white dove flying to the home screen. Notifications would prompt on the screen and direct users to the screen.
I used the emoji to depict how the user is feeling in a simple way which was placed later in the wireframe and prototype.
Site Map
From the collected data, I constructed a navigational path of the log in and sign up for users to enter information. Password can be located via email or text messages which structures the privacy onto the app for easy and secure access.
3
Develop
Wireframe
One of the early wireframe version, I wanted to include:
-
a line graph that depicts the days and the intervals that the symptom occurs
-
a medical summary at the bottom of the graph with tracking information of prescription intake
-
On the right, medication notification is shown
-
Hero statements that engages the users' attention
Important points
-
Influence from Apple Health such as bar graphs and color line graphs are familiar and understanding
​
​
Comparing the competitive analysis, I created the wireframes and information architecture for the UI. The focus was on the MVP which is to track the health information through documentation and meet the users' needs to progress their health which solves five of the main points.
Deliver
4
Style Guide
Papyrus designs are inspired by the gradients of the ocean which gives a representation of life, hope, and truth. Blue is a familiar color in the medical field that signifies professionalism, cleanliness, and harmony. The array of beautiful colors subcategories.
Design System
Accessibility
Papyrus comes with five accessible settings under the General tab: text-to-speech, voice command, enlarge texts, dark mode, and languages.
-
Accessibilities improves the inclusivity of the app
-
The language settings have four different options: English, Spanish, Vietnamese, and Mandarin. These languages were chosen based on the geographical location and client interviews
Mockups
A
Light Mode
B
Light Mode
Dark mode
Before the finalization of the hi-fi prototype, two different mockups of the homepage were given to the users for A/B testing. The users preferred Mockup B due to the simplicity of the categorized icon and tab which were easier to locate.
Also, Mockup B light-colored tabs and recommended topics are distinguishable and aesthetic. I've created the night mode for contrast
Usability Test
Before
Clients were called back to initiate the usability test. From the results, there was lack of security for the users' privacy and required more protective measures.
Other responses such as the UI layout, did not appear aesthetically pleasing and there was little micro-interaction. One user was unable to read the 14px font-size. Users were confused about the lack of functionality of the home screen and asked to include a contact communication with a primary doctor via phone and video call.
​
Positives: The users enjoyed the easy navigation and idea of uploading documents to store in the app. They found the medication app useful to keep track of their medicine.
After
I made revision and updated the app in the following:
-
Simplistic, modern UI layout with interactive animations when selecting choices, buttons, and screen transitions
-
A contact section for the pharmacy and the medical expert which the users can alternate locations and reach experts via video call or phone
-
Reiterated the medical records options from the hamburger menu onto the home screen with visual icons. Log out CTA button and other menus are added to the hamburger menu
-
Modified the navigation bar at the bottom of the screen with new icons and icon size reduction
-
An accessible option screen for first time users. The accessible options are: Enlarge Font, Text-to Speech, Voice Command, and Dark Mode.
-
Designed a language option with 4 languages: English, Spanish, Vietnamese, and Mandarin. The language and accessible options can be customized in Setting
-
Added a bill Payment CTA for quick online payment
Impact and Takeaways
As the result, the users and medical professionals are able to transfer confidential information into the app which increased user engagement and efficient navigation.
Users are now able to communicate effectively with their medical expert of updates regarding their health. There are some points, I learned about the medical app:
-
Features such as simple menus, tabs, and icons are easy to navigate for users
-
Papyrus can notify a user's forgotten password and username through text and email which ensures extra security.
-
The text are larger for clear legibility and colors are calm to ease readability
-
Logs tracks down what was written at the beginning of the app and helps professionals seen the underlying cause
-
Accessibility of a text-to-speech and voice command creates more engagement to article topics and comprehension to the information within the app
-
The language option opens new form of engagement. Overall, user engagement has increased
Reflection
​
-
Interchangeable wireframes map expressed reiteration and solutions to address the users' needs
-
The app photo enhances faster solution to storing and receiving copies of paperwork
-
In the future, I would improve topics relevant to the patient's status, further improve communications between the patient and the professional, add dependents to the insurance and bill payments, and add responsive designs across devices in IOS and Android