top of page

HYPERTRACK

A User-friendly and Personalized Hypertension Tracking Application

This is a circulate research program, which focused on topics surrounding complex socio-technical systems, integrating design for services interactive artifacts, information and technology for the prevention of chronic disease through a human-centric approach. Multi-disciplinary teams built on previous data and context to address challenges within Cardiovascular health.

C-CHANGE

Canadian Cardiovascular Harmonized National Guidelines Endeavour (C-CHANGE) guidelines program referred at OCADU as the Circulate project.

Sponsors

The Circulate project is an ongoing design research study sponsored by Sunnybrook since 2017. The physician sponsors share their expertise in the background, scope of needs, desired outcomes of the project. 

New  hyper.jpg

What is Hypertrack?

HyperTrack is a user-friendly and personalized hypertension tracking app, a "companion" style to build connection and trust while providing support information for millennials.

Our goal

Re-design the patient experience of blood pressure monitoring at home. By:

  • Reducing false-reading & non-emergency ER due to false-reading while easing anxiety/stress associated with monitoring.

  • Making blood pressure monitoring simple & more intuitive.

  • Motivating self-care & self-regulation.

“OUR GOAL IS PERSONAL INFORMATION FOR THE RIGHT PERSON AT THE RIGHT TIME"

MY Role

UX/UI Designer

Involvement

  • User research

  • Journey mapping

  • Storyboarding

  • Service blueprint

  • User Flow

  • Wire-framing

  • Illustration

  • Prototyping

  • Visual Design

Project Scope

6 Designers

Tool

Figma

Miro

Illlustrator

Procreate

My Impact

  • Implemented comprehensive user research, developed storyboards, and engaged in journey mapping exercises. Conducted usability testing and subsequently refined the design based on user feedback.

  • Designed the app's user interface, creating wireframes, high-fidelity mockups, and prototypes that were well-received by users and stakeholders.

  • Collaborated closely with team members, contributing ideas and solutions that improved the app's functionality, user experience, and overall impact.

mockup_apple_iphone_13_pro_max_2021_737a828a3d.png
Newaa.png

THE PROBLEM

Patients with hypertension conditions are experiencing challenges in accessing support information beyond numbers on blood pressure (BP) machines and a lack of health literacy relating to hypertension and BP monitoring.

adas-01.png

Taking the lipstick from the table

And when there is a lack of support information, communications and connections, it will result in poorer self-management of hypertension and lead to more people visiting emergency rooms even without an emergency.

User research

Study found that high blood pressure, or hypertension, is increasing at an alarming rate in millennials. People aged 22–36 in 2017 were less healthy than same-aged people in 2014. Hypertension, dyslipidemia, and type 2 diabetes mellitus increased by 10%, 7%, and 19%

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8263296/

The target audience we decided to choose was millennials, and by interviewing 4 doctors and by looking the previous research on patients who have hypertension, some issues like negative mental health issues, lack of support information, etc., have appeared as essential considerations in our design.

PERSONA

The persona was created based on the previous years' research and the insights we've discovered during the user research. The persona offered a guide for us to determine the potential design directions.

gashs-01.jpg

JOURNEY MAPPING

This journey map showcases patients' pain points and benefits from when they initially find out that they need to measure their blood pressure, using a BP cuff to obtain abnormal BP readings. This map informs our project goals and areas of focus as we address the challenges of self-managing and shifting lifestyles to maintain and manage blood pressure.

Studio 3 - Design Brief(1).jpg

KEY INSIGHTS

01 Lifestyles Changes

Attempting to change patients' lifestyles may be difficult, as there are many emotions & factors (i.e. time, motivations) that individuals may need to address to make healthier choices.

03 Health Literacy & Knowledge Transfer

Different people require different information based on where they are in the process, from getting CVD results to purchasing/reading blood pressure machine numbers.

02 Communication Barriers

BP Machines instructions & support information may be hard to follow due to many factors (lengthy, language barriers, font size, motivation). This may cause frustration or panic when running the machine or receiving high readings.

04 Complicated technology/operation

Overwhelmingly complicated technology & relative operations required in processing testing & reading results lead to difficulties & confusion for patients as the misunderstanding of the reading might cause them to go to the doctor when they don't need to.

05 One function Capabilities

BP Machines only test BP but hardly do more for patients. BPM can only do one thing effectively, which is measuring BP. What can the multi-functionality be to prevent panic in reading?

SERVICE BLUEPRINT

The service map starts at the point diagnosis, taking into account: touch points, emotions, stakeholders & internal interactions

https://miro.com/app/board/o9J_lts8bRU=/?moveToWidget=3074457366613793581&cot=14

Studio 3 - Design Brief(3).jpg

DESIGN DIRECTION

We come up with four design directions: package design, speculative design-BP machine, monitor re-deisgn, and app design. For this project, we choose app as our first design priority.

Our target audience, tech-savvy millennials, will soon prioritize health. An app catering to both patients and clinicians can address multiple service touchpoints, making dense C-change guidelines more accessible. This platform streamlines data storage and information retrieval for users and physicians, enhancing the patient journey with minimal effort.

COMPETITIVE ANAYLSIS

From the marketing research, we selected three products to analyze their features and strengths/weaknesses. Doing this helps to further design concept on what should be included and what are some features that the current app lack of.

Hyptersion track apps-01.png

THE GAP

Most of the products we found only record blood pressure numbers, and there is no further support information in the app that can educate on different levels of blood pressure numbers. There is no overall health information support and suggestions for people able to manage stress and other factors. In the current market, most BP monitoring apps do not have additional information to calm people down and be more aware of how to react to the BP levels and how to get it under control.

Through research and the insights from subject matter experts, we found that to change someone's behaviour and to help people see the long-term effect; it is necessary to provide additional information rather than merely show the BP number. Other health information may help to understand better how to manage BP but also shows how small changes can bring more benefits to overall health and wellness.

How Might We

Incorporate targeted personalized information into the design of a home blood pressure monitor to facilitate self-care and reduce improper use and false reading; customized information for the right person at the right time?

IDEATION PROCESS

INFORMATION ARCHITECTURE

To start off, we broke down the app to it's different functions and information we want users to get out of it. Taking into considerations elements such as graphs & socialization aspects.

Process-01.png

WIREFRAME SKETCHES

Started to define layout, function and information hierarchy. Also, how we would implement the virtual assistant aspect. We explored way in which we can implement the different archetypes into our design.

Sketch-01.png

ART DIRECTION

After sketching out the low-fidelity wireframes, we started to think about the art direction of the app. We began to ideate the avatar's image and the app's illustration and style.

WIREFRAMES

After the ideations, we started to create wireframes on Figma. Through the workshop sessions and feedback from patients and physicians, here are the refined wireframes before the final design:

hypertrack-01.jpg
vsva-01.jpg

USABILITY TESTING

Validating & Iterating

Before we refined our design concept, we conducted two online workshops to gain feedback from 2 physicians and 3 patients. The workshops aimed to examine the concepts, contents, usability and language. The main changes and insights include:

THE FINAL DESIGN

Introducing Hypertrack

阿斯顿.jpg
noun-knowledge-1168678_edited_edited.png

Knowledge transfer made easier for physicians & patients as all information is stored in one place

Simplification of this information which can allow
users to start building health literacy around best Blood pressure measuring practice as well as, make knowledge transfer easier between patients and physicians as all data is stored in one place.

app screen-01.png
app screen-01.png
noun-communication-4811326_edited.png

Providing communication & support information at the right time

Provide communication and support information at the right time through blogs and chat features. As well as, what to do with different measurement reading to reduce emotional burdens and stress associated with high readings due to a lack of context, through addressing challenges in the users life that can cause it.

noun-checklist-4845537_edited_edited.png

Encouraging consistency & building health literacy around BP Measuring practices

Notification systems which allow users to stay on
track on when they should be measuring to
reduce the complexity of the process and ease
individuals into this new lifestyle change.

app screen-01.png
noun-gamification-2888432_edited_edited.

Driving/nudging behavioural change & reducing social isolation in BP measuring

We understand that this is a new lifestyle change
and we want to drive/nudge behavioural changes
through reminder systems and use elements such
as gamification aspects to keep users on track as
a form of motivation and to incentivize behaviour
while reducing social isolation.

ONBOARDING SCREENS

The onboarding screens give users a summary of the app features. Users can create their accounts and connect with other apps like Fitbit, apple health, etc. And also record their personal health information.

asdf-01.png
十大-01.png

REDUCING ANXIETY AND RECORDING EMOTIONS

High blood pressure sometimes may be due to negative emotions, panic attacks or other situations that may trigger anxiety, stress, etc. Recording the feelings can help to know whether emotions will affect blood pressure. And when testing the blood pressure, using calm, aesthetic illustrations could help relax while waiting for the results.

阿斯顿-01.png
深爱的-01.png

Downloaded and iterated based on adobe stock

DATA RECORDING & SHARING

Daily, weekly, monthly, and yearly records of patient data will help patients better understand how to self-manage themselves. And for physicians, they can know the change in their patient's blood pressure and better help their patients manage their hypertension. Patients can also manually check and record daily briefing to check if something is missing (such as medicines) or what is something that caused high blood pressure.

谢谢-01.png

REFLECTION

We acknowledge there are certain risks for having an app like this as for some, this can be anxiety-inducing in the sense of "I don't have my BP machine, and I can't measure right now," "I'm too stressed to be worrying about my BP," or "What if I'm not reaching my daily goal quests for today?". However, with functions such as changing the measurement timings and daily quests catering to the user's current patterns and trends, the app focuses on the users' needs, nudging gradual changes over time. Therefore, we believe that the app still has a positive affirmation, focusing on what the user has been improving on while also bringing out habits/patterns.

One of the risks is that users might become too dependent on the app and not use good judgment, ignoring doctors' advice over the app. There are always risks of bugs resulting in irregular readings, crashes, and other tech-based issues that we should expect. We cannot determine all the risks at this stage of the process as we are in the early stage of prototyping. And also, more user testing and validations are needed with millennials as most of the users we interviewed or participated in the workshop are older adults instead of millennials. Thus, there might be differences in the insights and feedback.

Next Step

This is just the first prototype in a series of prototypes. As the sample size for our focus groups was quite small, and participants did not fall under the category of millennials, we hope more co-design workshops can be held with the target population to strengthen our proposal further. This feedback can be built on to develop future iterations of the app. Also, getting in contact with a copywriter to work on language would greatly benefit future designs. As this is a segment of the overall service design, packaging design is also something to consider as a way to promote the app and also start incentivizing behavioural changes in users to carry their devices that follow a similar visual language to the apps.

Poster_Port-03.png
MiniSugr_1.jpg
Flying iPhone X Mockups_edited.jpg
Whiip 11-01.jpg
bottom of page