MedTrack

Health Records For All

Building a fluid health access interface for patients - MedTrack

Built for
MedTrack
Role
Lead product designer
Industry
Health Tech
OS Platform
iOS (Mobile)
Team
Product Manager • Front End  Developer • Back End Developer • Doctors • Pharmacist and Lab Technicians

Introduction

We launched MedTrack to end patient medical data fragmentation in Africa.

In 2018, I set out on a mission to end patient medical data fragmentation for Africa’s 1 billion citizens alongside an incredible team of doctors, lab technicians, pharmacists, engineers and designers.

We believe patient health records should be easily trackable, safely transferable, progressive and secure. The mission is to build a universally accessible and portable health record system for Africa's 1 billion plus citizens.

For reach in under represented and unconnected citizens, we are driving scale by connecting citizens’ health data to already established national digital ID systems. 

We have successfully empowered doctors to provide a seamless patient experience using our web app service and now needed to provide a way for patients to become custodians of the health data generated. This set us out to build a mobile wallet-type app that will help users track their health information regardless of their primary facility, physician or location. 

Thus my journey began.

Project Summary

An opportunity to build a patient-centred experience that augments physician care.

The goal here is to empower patients track their health information and access critical data without the current bureaucratic barriers

In drafting a plan to build a decentralized health information system that travels with the user, I had to spend time discussing the possibilities and barriers with service providers such as community doctors, lab technicians, pharmacists and most importantly, patients on defining the major needs, complimentary use cases and nice-to-have.

In Africa, caregiving is hindered by communication blocks between patients and physicians. Siloed patient medical information and the general lack of patient involvement through out the caregiving experience is also a major contributor to this problem.

MedTrack allows facilities to capture a comprehensive picture of patient health information, medical history and other clinical data. Here, I set out to design a solution that empowers patients to take control and have oversight over the captured data.

The Challenge

Our inability to track our health information as easily as our financial transactions

We have dedicated services to track every financial transactions in our lives. Why is it so difficult to track our personal health records as easily as we do our finances? The current challenge stems from a lack of sharable information and oversight over personal health information data. During research, our stakeholders expressed concerns around these three (3) key areas:

1. Information gaps

As individuals visit multiple healthcare facilities, healthcare providers often have to rely on patients' recollections, leading to potential gaps in their medical history and making it challenging to make well-informed decisions.
An illustration showing a doctor interacting with a screen for MedTrack

2. Duplications

Instances of duplicated prescriptions and diagnostic reports contribute to issues such as misdiagnosis, unnecessary repeated tests, and the risk of double dosing.
An illustration showing a doctor interacting with a screen

3. Fragmented tracking

The inability to effectively track and access comprehensive healthcare information hampers the delivery of basic caregiving and frustrates individuals seeking consistent and coordinated healthcare services.

The Goal

Build a portable health record solution to help Africa’s 1 billion citizens track their health wealth.

Create what will eventually become a mobile health wallet for Africa’s 1 billion citizens. A solution that will augment patient interaction with their physicians and other point of care services. The goal is to connect the three key data point areas under consideration.

Prescriptions
Diagnostics Requests
Clinical visits

Defining success

Defining parameters that will signal success for this project

Designing for the three main health data sources, Ghana Card integration, and enabling patient control access to their health records are going to signal our parameters for success.

0.1 Design to connect the 3 main key data points

Across Africa, the majority of healthcare encounters revolve around three vital data points: diagnosis, prescriptions, and diagnostics. These key elements heavily shape and influence the course of medical care.

Diagnosis

Enabling patients to access their diagnosis information from clinical visits. Diagnosis sit under encounter under which other associated data is recorded.

Prescriptions

Empowering users to access detailed information about prescribed medications, including drug types, dosages, and the source of the prescription.

Diagnostics

Facilitating users' ability to reference specific laboratory or imaging requests and their corresponding reports, which are crucial for physicians to validate their investigations.

0.2 Successfully connecting the digital to the physical

Designing a solution to seamlessly integrate health information records with national identification systems, to transform these ID Cards into a physical MedTrack app experience

National Identity Card

The National Identification Card known as the Ghana Card is a secure, multipurpose identification card that serves as unique identifier for Ghanaian citizens.

ID Card Integration

Using the Ghana Card to verify user identity and linking health record data we signal a unified data integration for universally accessible.

0.3 A solution that gives patients control over their health data is a strong requirement

Due to MedTrack's patient-centered approach, a solution designed around giving users an overview of physicians access to their medical data is a key requirement. Here, users can control and manage access.

Physician Access Management

Ability to revoke physician access to specific encounters

Physician Access Control

User overview of individuals/facilities who have access to their medical data

user groups

Who are we primarily building for?

What demography will likely use MedTrack, at what point will the user most likely need to use the solution being designed and what use case scenarios will signal a success?

Primary user demography falls under 3 categories

Kwesi
Patients with chronic diseases
Agyeiwaa
Individuals who see concierge doctors
Pearl
Patients who travel often and as such experience healthcare with multiple touch points
01
Patients with chronic diseases
02
Individuals who see concierge doctors
03
Patients who travel often and as such experience healthcare with multiple touch points

When will a user likely need to use the app?

Most users will use the app as a point of reference when discussing medical history with doctors or other caregivers.

How easily will users interpret information?

Glanceability was a key factor in determining certain design queues and choices. Using average day phrases and queues was also an important component to improve information assimilation.

What does success mean to a user?

There are three key success points; mapping medical information to a particular encounter date and time, proper tracking of medication dispensation and diagnostic report and lastly, securely sharing access to this information with physicians who may not be your primary caregiver.

The Solution / Explorations

Designing a solution that increases patient oversight and participation in caregiving. There are 4 primary key areas of focus

Prescriptions
Diagnostics
Clinical visits
Health Data

Physicians and facilities are already generating patient data using the MedTracks web app. These data are centered around patient's prescription history, diagnostic reports (lap and imaging data) and clinical visits. The goal here is to provide a way for patients to become custodians of the health data that is being generated.

Originally not included was the Health Data section, which was later planned to serve as an engagement gateway for first time users. Here, the system could serve users with curated content based on the data they share. Tips on chronic disease management and other health tips can be good strategy to engage these groups.

Designing for an information loop

Color System

Generated primary colour schematics

Slight variations were made to the main brand palette due to the high mobile pixel density. The three primary colour were largely maintained as is.

01 Primary

#MTBlack
#141f2a
#MTPrimary Blue
#3952a6
#MTWhite
#fffff
#MTBackground
#f6f8fb
#MTOutline
#eOeaf4

02 Typography

#MTPrime Label
#141f2a
#MTSub Label
#5a7083

03 Secondary

#MTRed
#fe5858
#MTGreen
#00b066
Here, color palette selection work together to create consistency in products.

Typography

Type Schematic

Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the screens. OS under consideration here is iOS and thus the preference for SF UI Text.

01 Heading Labels

H1 Heading
SFUIDisplay, Bold, 34pt
Line height: 34pt, Letter spacing: 0.0pt
H2 Subheading
SFUIText, Bold, 21pt
Line height: 34pt, Letter spacing: 0.0pt

02 Body Labels

Body Copy
SFUIText, Medium, 17pt
Line height: 24pt, Letter spacing: -0.1pt

03 Secondary Labels

Secondary Label
SFUIText, Medium, 15pt
Line height: 18pt, Letter spacing: -0.28pt
Input Field Label
SFUIText, Medium, 15pt
Line height: 18pt, Letter spacing: -0.28pt
OS under consideration here is iOS and thus the preference for SF UI Text

Spacing

Defining the spacing base unit

A spacing system is to support visual consistency in page layouts. Using a spacing unit of 8px as the base value and setting that ratio to 1 allowed me to create a consisted spacing rhythm. This is particularly important to maintain that visual consistency.

Spacing base unit

Pixels
Unit multiplier
Token
Visual
4px
0.5 ×
space.050
8px
1 ×
space.100
12px
1.5 ×
space.150
16px
2 ×
space.200
24px
3 ×
space.300
32px
4 ×
space.400
40px
5 ×
space.500

Spacing range

4
8
Compact
16
24
32
Medium
40
64
80
Large

Use cases

Compact
For Secondary label group and icon spacing
Medium
For Heading label group and less dense containers
Large
For large spaced elements
Spacing definitions

Icons

Standardizing iconography

Maximizing label comprehension reduces cognitive load with the effective use of iconography. Here, I explored two icon styles. A rounded-edge style to reflect a friendly approach but ultimately settled on a more formal, sharp-edge approach as it fit the overall theme better.

Custom icon set created to compliment brand style

Components

Designing elements into reusable building blocks

Main header component

Enhancing attention by using animations cues to highlight notification prompts that requires a users attention

Header title component

Bold and clearly labelled header titles were used to help users navigate content sections easily

Card section component

Using this layout as opposed to a tabbed option meant additional explanatory copy could be provided for each section title

Prescription component

Medication cards provide users with dosage information as prescribed my phyisicians

Interaction explorations

Granting physician access

When a user grants access to a physician's request, an in-app prompt with a subtle animation is employed to reaffirm the user's action.

Access request

An in-app animation prompt that reaffirms a user's actions
Geek out

Using visual cues to guide user action

Utilizing a red hue as a visual guide was a clever way to connect the lock icon with the action of or locking out or revoking physician's access.

Access request

Using colour as a visual guide to connect intention to action
Geek out

Reducing data entry errors

Broke the input fields down into blocks to match the Ghana Card numbering sequence and spacing - GHA 000 000 00 . The design decision here is to visually aid data entry and improve user experience with an added benefit of reducing entry errors.

Ghana Card Integration

Matching the Ghana ID numbering sequence to reduce entry errors
Geek out

Mapping prescriptions and encounters

Labels and dosage information were among the most frequently discussed points of interest during my time with patients and physicians. Being able to clearly convey information here was a major point of focus.

Here, I designed elements to prioritise clear labelling for dosage information and the encounter point they were generated.

Using a sticky ui to improve ux when scrolling

One of the ways I ensured that users were always aware of which prescriptions were associated with their encounters was through the implementation of a sticky header
Geek out

Mapping prescriptions to source

This was a great way to connect prescription information to their encounter source. Solving one of the main challenges of designing for information loop.
Geek out

Clinical visits. Designing to strengthen muscle memory

Visiting the 600-bed-capacity Ridge Hospital was a great source of inspiration for this design choice. The facility's colour-coded wards aid patient and staff navigate the the large multi-floor structure. I took inspiration to implemented a similar approach in the app.

By mirroring this concept, the aim was to enhance user experience by building muscle memory and minimizing navigation guesswork.

Colour coded ward inspiration - Photo of Ridge Hospital, Ghana

Below is how this idea translated into design.

Colour coded ward inspiration - Photo of Ridge Hospital, Ghana

conclusion

Bringing the different idea explorations together

Conclusively, these came together pretty well. A clear, well-labelled visual interface experience with an excellent information hierarchy and a strong visual brand. Subtle visual animations improved user experience.

PIN Code access setup
Sections for main action points
Encounter details
User-access control
Patient prescriptions listings
User settings

Summary

Summary and learnings

It was such an honour to be part of this project. Working on products that have direct effect on millions of lives are always a welcome challenge. Brainstorming through some of the solutions we came up with as a team was a great way to learn and contribute.

As a team, we quickly learnt that, our solution needed to present data in its simplest format. Removing all data distractions and only show relevant information to the user was a key requirement we weren't open to compromise on.

In terms of decisions I would have made differently, one area I'll definitely take a look at is our initial onboarding flow where we collect patient's health data such as allergies, blood groups and pre-existing conditions. A solution that makes sharing this information feel more natural would be a great one to explore. Hopefully I can do this for our next updates.

Definitely get in touch if you want to learn more.

Say