Prototyping & Interaction Design
Personal Health Record (PHR) Mobile App
Role
UX/ UI Designer
Tools
Figma
Kaltura Capture
Microsoft Office
Skills
Prototyping
Wireframing
Sketching
Duration
4 months
(Aug 2021 - Dec 2021)
OVERVIEW
The project involved designing a Personal Health Record (PHR) application based on pre-defined user stories. It was an individual project as a part of the curriculum for the 'Prototyping And Interaction Design' course of the MS-HFID program at Bentley University (Fall 2021).
GOAL
The goal was to create a mobile application that provides simple and easy, on-the-go access to personal health record services including medication refills, billing, appointments, and so on, to transform the patient experience in the digital domain.
PROBLEM
Users need to manage the essential aspects of their Personal Health Record (PHR) services with ease and flexibility of time and location. This includes managing access to their PHR information easily, managing their appointments, medication, billing, accessing and understanding test results, contacting and communicating with the care team, and so on.
APPROACH
I explored the personal health record services space to understand it and used this knowledge to decide upon the features, architecture, and flow of the mobile application, in conjunction with user stories. I followed it up with the construction of high-fidelity wireframes and a prototype on Figma to resolve interaction issues.
SOLUTION
(Interactive Prototype)
THE PROCESS
User Stories
Pre-defined user stories were provided, with each outlining certain acceptance criteria that were employed to decide upon the features, user journey, architecture, flow, and interface design of the application.
Architecture
& Flow
Each user story addressed a part of the user journey that was explored to outline a workflow for that user story. All the workflows were collectively used to guide the architecture and flow of the app.
Wireframing
& Prototyping
Hand drawn sketches were used to ideate and iterate app screens based on the architecture and flow diagram. Tidwell's Designing Interfaces was referred for design conventions and understanding.
Paper and cardboard prototyping were leveraged at this stage to decide upon the screens and flow roughly. This was followed by the generation of low-fidelity wireframes on Figma to generate the basic UI elements for the app screens.
These low-fi wireframes were then validated via prototyping on Figma to finalize the screens, their flow, and the UI elements on each screen.
Annotations were utilized to describe the usage of design guidelines, and adherence to rubric and heuristics.
Once finalized, a style guide was created and referred to for the generation of high-fidelity wireframes and the final prototype. To view and interact with the final prototype, click here to go to the Solutions section.
Style Guide
A style guide was prepared to ensure consistency and continuity through the app's design. Every component to be used was listed along with it's various instances of usage.
Google's Material Design components were used throughout the app, with some modifications, as and wherever deemed necessary.
REFLECTION
Limitations &
Challenges
-
The prime challenge was understanding the healthcare services domain in the US and the associated PHR services, especially as someone belonging to a different country with a different cultural context and approach to healthcare services.
-
Considering the limited availability of time, it was difficult to explore additional details in order to expand upon the features, incorporate them, and iterate further to build a more comprehensive experience.
Next Steps
-
Conducting a usability test to spot pain points in the design and iterate further.
-
Expanding the solution space to support accessibility.
Takeaways
-
Even though coming from a different background can be challenging, it can also prove as a good learning experience to expand upon current understanding in order to build a broader solution.