A concept for a Canadian personal health record that pools information, tracks measurements, sets reminders, and starts online virtual appointments - all in one place.

A wave of relief.

Design and Technical Specifications

Typography

In line with Google’s Material Design guidelines, I chose Roboto, the standard typeface on Android devices.

Colour Palette

Primary Colours

First and foremost, I wanted an accessible colour palette. This meant choosing colour pairings considerate of different types of colour blindness and colours that work together by having high contrast for better visibility and readability.

I went with a dark shade of blue (#0E2338) since blue usually symbolizes feelings of calmness, trust, relaxation, strength and spirituality across various cultures - positive emotions to associate with someone’s management of their health.

The orange colour (#FF8000) supports these feelings by providing a sense of warmth, happiness, and courage - moods I want users to have so that they feel empowered to improve their health.

The black (#000000) and white (#FFFFFF) colours are primary in that they are a visual constant throughout the app as font and background colours.

Secondary Colour

This shade of grey (#525252) is used for body text.

Colour Contrast

For readability, all colours when placed against each other as background and foreground, have colour contrast ratios of at least 7.1 which meet the Web Content Accessibility Guidelines (WCAG) Level AAA standards.

Design System Adherence

Google (Android)

Wave Health was designed to follow Google’s Material Design Guidelines and uses a Google Pixel 2 screen template (411 x 731 px with a minimum touch size of 48 px).

Initial Design

My first design was a high-fidelity prototype with a lighter colour palette and a mix of serif and sans serif fonts. However, what’s key in the change illustrated above is the switch from a horizontal scroll format to a vertical list for ‘Recent Observations’. This change makes it easier for users to see all key information at once without having to scroll horizontally, especially if the information is critical.

To seek feedback on my initial design, I completed one user flow - add observations to a health record.

Key elements to these screens include:

• Floating action button (FAB) for primary items (reminder, observation, appointment) that can be added to the dashboard

• Connection to smart health devices (e.g. blood pressure monitor)

• Ability to quickly record relevant health information (e.g. symptoms and notes) to an observation

Design Critique Feedback

9 other UX designers provided me with insightful feedback on effective and ineffective elements of my initial design.

Effective Elements

FAB

3/9 people explicitly commented on the FAB’s simplicity, accessibility, and ease of use

“The button is easy to access and does not interfere with the content on the screen. I like how the sub-buttons appear to quickly do the tasks.”

Critical Alerts

4/9 people observed the effectiveness of using the red colour to supplement critical information

“It’s easy for the user to automatically notice abnormalities that are crucial.”

“It draws attention and does not only rely on color.”

Other elements:

• Dashboard content (reminders, observations, and appointments)

• Connection to health devices with Bluetooth

• Ease and clarity of the task’s flow (adding an observation)

Ineffective Elements

List Format

“The list of ‘observations’ can get longer if the user’s tracking many items, which would bring ‘Appointments’ lower on the screen. It might be inconvenient not being able to see appointments right away.”

Font Size of Critical Alerts

One person suggested using a bigger font size to make the critical alerts stand out more.

Design Solution

Based on the feedback, I kept all effective elements and improved on the others. During my iterations, I chose to go with:

• a darker shade of blue for higher contrast

• all sans serif typography to increase cohesiveness

• an information architecture to encompass three user flows including a change from a tabbed menu to a navigation drawer

User Flow 1 of 3: Stay Organized, Add Observations

To address the list format, simplify the interface, and maximize screen space, I grouped cards within blocks of categories (Reminders, Observations, and Appointments) and added a ‘See All’ action button to direct users to screens with more detailed relevant information. This keeps the ‘Overview’ screen’s length shorter so that critical information is not pushed down.

When adding an observation, users have a choice between entering a measurement manually or automatically from connected smart health devices and their most recently recorded measurement. In this case, the ‘Type’ (Blood Pressure) and ‘Measurement’ (115/72) have been automatically filled in. Users can also add additional information by selecting from the set of measurement-specific symptoms chips or typing in notes.

User Flow 2 of 3: View a Timeline of Your Health Record

Inspired by Google Calendar’s Schedule view, this timeline view is a reverse chronological account of a person’s health record. It includes items such as observations, prescription information, clinical notes, and diagnostic reports. Users can click on any of the cards for more related information or scroll down to see more of their health history. Although not explored here, just like Calendar’s top bar, users can click on the dropdown next to the month to reveal a half-screen month view and use the calendar icon on the right to focus on today’s date. Unlike Calendar which uses a hamburger menu on the top left to show other view options, users can do this in Wave Health using the three vertical dots on the far right of the top bar.

User Flow 3 of 3: Access Detailed Health Records

In addition to the timeline view, users can view detailed accounts of their personal health information through seven categories:

1. Conditions and Care - lists of the user’s conditions, procedures, and health goals

2. Prescriptions - where users can track their prescription orders, requests, and instructions

3. Circle of Care - the healthcare providers, facilities, and pharmacies supporting the user

4. Clinical Findings - notes, reports, and observations from medical appointments

5. Immunizations - a record of vaccinations and immunization

6. Allergies - a list of allergies and intolerances

7. Family Member History - conditions that the user's family members have experienced