Delhi Development Authority
Information Architecture Redesign
Disseminating the Elements of Pre-Attentive Processing:
Understanding Visual Perception through Psychophysics and the Neural Processing Mechanisms
Disseminating the Elements of Pre-Attentive Processing:
Understanding Visual Perception through Psychophysics and the Neural Processing Mechanisms
Personal Health Records Mobile App
Prototyping and Interaction Design
The Personal Health Record mobile app allows the patients to manage their personal health care needs such as communicating with their care team, setting up appointments, paying bills, ordering medication, and accessing lab test results.
My Role
UX/ UI Designer
Methods
Sketching, Wireframing, Prototyping, Interaction design
Tools
Figma, Photoshop,
Kaltura capture
Context
Contacting care providers, understanding test results, and running around to book appointments have been stressful for most patients. However, with easy access to smart devices and digital solutions, there is an opportunity to transform the patient experience and improve access to medication and the satisfaction rate.
Note: This project was part of a school project, a part of my interaction design and prototyping class.
User Stories
For this project, the user stories were pre-defined. They were used to guide the design and features of the app.
Login
Manage essential aspects of my Personal Health Record (PHR) using my mobile device.
Appointments
Managing my appointments on my mobile while I’m on the go
Medication
Easily request and receive refills to have continuous access to medication.
Messages
Sending and receiving secure messages to the care team
Bills
A simple way to pay my medical bills online
Lab Tests
Viewing blood test results with doctor’s feedback
Icons source: undraw/illustrations
Process
The PHR app aims to provide easy access to health information and simplify the process of accessing care. The process involved evaluation and learnings from:
-
User journey: The first step included exploration of the problem space. Coming from a different country & cultural setting, I was not aware of the approach to health care system in the US. Therefore, first step was to understand how patient care works and how people access healthcare through informational interviews and by observing the functioning of health services.
-
Analogous apps: Learnings from other services such as:
-
Ordering & purchasing processes of e-commerce website such as Amazon, Myntra
-
Payment transactions through banking apps such as BofA
-
iOS messaging features
-
Scheduling from other Medical apps
-
Data visualisation though iPhone's health app
-
-
Design iterations: The design process started with hand sketches, paper prototyping, wire-framing, and high-fidelity mock-ups. The mobile app design adhered to:
-
1o usability heuristics by Jakob Nielson
-
Design guidelines: Apple's human interface guidelines and Google's material design components.
-
Information Architecture & Workflows
The design started with:
1. Prioritising the frequency of use of various tasks, and
2. The workflows for each task
User story 1
Sending and receiving secure messages to care team
The criteria included having the ability to send and receive messages and indication, whether messages are from a physician, nurse, lab or other staff member.
Screens for User story 1: Sending and receiving messages to the care team
User story 2
Booking and managing appointments
The criteria included viewing available appointments, scheduling new and canceling appointments.
Screens for User story 2: Booking and Managing Appointments
View prototype link for all user stories
The Design Process
The design process started with hand sketches to explore ideas, to wireframes based on understanding the design conventions for mobile design and then to high fidelity mock ups based on UI standards and patterns. Here are few examples of my process:
Design iterations for ordering medication
Hand sketches
Wireframes
Hi-fidelity screens
Annotated screens, explaining adherence to heuristics and design conventions.
Style guide showing visual style elements, typography, icons, etc.
Demo video
Guided walkthrough for User story 1: Sending and receiving messages to the care team
Challenges and Limitations
During the project, various challenges and limitations arose such as:
-
Having no experience of using a personal health care service and initial challenges with understanding the problem space.
-
Finding an optimal balance between the app's usability and aesthetic appeal.
-
Time constraints limited the ability to conduct additional design iterations and usability testing.
Results and Next Steps
Through the final design of the PHR App, I was able to create an easy and effortless experience to manage personal healthcare. By providing simple onboarding, quick access to features, easy scan-ability, with this new design, individuals can communicate easily with the care team and have a comfortable experience completing tasks related to their health care needs.
If I had the opportunity to continue this project, some next steps would include:
-
Usability testing to test the ease of use and gather user feedback
-
Resolving the design further for accessibility
-
Customizing the app to suit the personal needs of each user