top of page

Designing the Personal Health Record (PHR) application experience
Healthcare

MY ROLE

UX Researcher

UX/ UI Designer

TOOLS

Figma

Kaltura Capture

Pen & Paper

Microsoft Office Suite

SKILLS

User Research

Information Architecture

Interaction Design

Wireframing

Prototyping

User Testing

Competitive Analysis

TEAM

Individual Project

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).

PROBLEM

Users need to manage the essential aspects of their PHR services with ease and flexibility of time and location.

This includes managing access to their PHR information easily, managing their appointments, medication, and billing, accessing and understanding test results, contacting and communicating with the care team, and so on.

goal.png

GOAL

To create a mobile application that provides simple and easy, on-the-go access to PHR services

The app needed to address the requirements specified in the user stories including medication refills, billing,  appointments, and so on, to transform the patient experience in the digital domain.

plan.png

APPROACH

Designed and validated a solution that focused on the pre-defined user stories

Explored the PHR services space and used this knowledge to decide upon the features, architecture, and flow of the mobile application, in conjunction with user stories. 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 Research

User Stories

Aligned with the requirements and established a baseline for the project

Competitive Analysis

  • Analyzed PHR platforms that I had access to, and other platforms that were specific to the user stories.

  • These include Practo, Boston Children's Hospital, Apollo, NetMeds, WhatsApp Messenger, and so on.

Literature Review

Review scholarly and internet articles to gain an understanding of the domain as well as the userbase

User Interviews

  • Evaluated the problem space based on the user stories

  • Assessed user expectations, pain points, and mental models in accordance with the user stories

N = 5

User Flows

Vision

impairment

with age

One hand to hold the screen, finger of other to tap on the screen

Comprehension may get slower with age. Recall can take even longer.

Shaky hands, accidental taps/ touches, fat finger delays

Easier to say product names than type them out (hence ordering on call easier)

Skeptical of action-to-be-taken and unsure of the outcome

Low literacy and low digital / technical know-how

Multiple possible workflows from one place can be confusing and overwhelming

Intimidated by mordern UI aesthetics. Find it complex.

Familiarity with

e-commerce platforms such as Lazada and Tiki

Architecture & Flow

The purpose of the research was to

  • Establish a baseline for the project

  • Develop an understanding of what drives the user stories

  • Assess user expectations, pain points, and mental models in accordance with the user stories

Achieved via semi-structured interviews

An interview guide was created to assist with the process. I moderated and took notes for all of the interviews.

N = 5

Prototyping

Insights board

Vision

impairment

with age

One hand to hold the screen, finger of other to tap on the screen

Comprehension may get slower with age. Recall can take even longer.

Skeptical of action-to-be-taken and unsure of the outcome

Low literacy and low digital / technical know-how

Familiarity with

e-commerce platforms such as Lazada and Tiki

Shaky hands, accidental taps/ touches, fat finger delays

Easier to say product names than type them out (hence ordering on call easier)

Multiple possible workflows from one place can be confusing and overwhelming

Intimidated by mordern UI aesthetics. Find it complex.

User Journey Map

Some design considerations..

Interface

  • Simplification over modern UI aesthetics

  • Larger font sizes

  • Leverage font-weight in establishing hierarchies

  • Larger button sizes (especially CTA)

  • High contrast - maintain a minimum of 5.3:1
    (balancing branding with contrast requirements)

Feedback

  • Cues, reminders, and alerts

  • Pairing images and icons with appropriate text

  • Confirmations/ double confirmations for critical actions

  • System status visibility and clear feedback for every action

Navigation

  • Simple and straightforward user flows- Focus on the active task, limited secondary exposure

  • Progressive disclosure

  • No complex and quick gestures. Only single-finger gestures

Ordering

  • Voice recognition enabled searching and adding products to order

  • Prioritization of frequently ordered items

Prototyping

Completed in sprints and followed an iterative process

Each section and flow was reviewed with the user representatives for feedback and updated accordingly

High-fidelity clickthrough prototype

  • Created using Adobe Creative Suite

  • Concurrent clickthrough made available in Invision to support operational needs

  • Handed over to the development team along with design specifications

Responsive production scale design

Works with various screen sizes for mobile and tablet devices

Iteration 1

Iteration 2

Final High Fidelity Design

For different form factors

Information Architecture

Ordering app info arch.jpg

Choose SKUs

Submit inquiry

Order confirmation

Manage order

Receive order

Style Guide

To evaluate effectiveness and usability

  • On various screen sizes and devices

  • Spot gaps and issues, if any

  • Determine readiness for UAT

Conducted via prototype test runs and moderated interviews

Created a task list and a moderator's guide for debriefing and assistance during the tests.

N = 4

Outcome

  • Participants were able to successfully complete all the tasks

  • Found the design solution familiar, simple, and not intimidating

  • Expressed willingness to adopt

Delivery

User Acceptance Testing

  • Wrote functional/front-end UI test cases

  • Checked for gaps in approved and developed versions

  • Log bugs- review and resolve with the help of the dev support team

  • Determine the scope for successive releases

Final version

  • Cleaner release with minor bugs

  • Presented to stakeholders for approval and launch

Research
Analysis
Validation
Delivery

REFLECTION

track.png

Limitations and challenges

  • Lack of direct access to users

  • The majority of users were not acquainted with the English language

  • Users were digital immigrants

next-button.png

Next steps

  • Build on the existing application to fulfill the next set of requirements

  • Chart a UX plan for the next relsease

open-book.png

Takeaways

  • Try to leverage alternate routes of data collection while dealing with hard-to-access user populations, such as representatives and domain experts.

  • Iterative sprints save time and effort in the long run. While working with users with special needs, it is even more important to involve them early and seek feedback throughout.

bottom of page