hilo_logo.png

This responsive digital platform aims to integrate family-centered care into diabetes management. By demystifying the illness for young patients and encouraging parents to provide the appropriate type of care and support, hi.lo empowers young patients to take charge of their own health. 

Roles

Lead Designer + Researcher

Timeline

hilo_mockup.png

2020 ECUAA Graduation Award
for Community Engagement

September 2019 - May 2020

Featured Interview

Check out this interview about my project and my observations about design in healthcare: 

Screen Shot 2020-12-22 at 11.04.44 PM.pn

Objectives

listen.png

Understand the needs of
the patients and their families

Through online discussions, interviews and podcasts, I identify the pain points of the individuals involved in the management of the child’s health

participatory.png

Employ participatory design methods

By working with individuals who were diagnosed with diabetes as children, and their caretakers I was able to understand their lived experiences

values.png

Integrate research findings
into the digital platform

Using the insights from the research process, I formulate a set of values to base the UI off of. These values helped me make my design choices  

Research Process

Secondary Research

To start off, I looked into existing research material. The list of resources comprises mostly of academic studies, podcasts, and online discussions. Using the information we gathered from these sources, we created maps that reflected our understanding.

Ecosystem
Ecosystem

press to zoom
Online Communities
Online Communities

press to zoom
Patient Experience
Patient Experience

press to zoom
Ecosystem
Ecosystem

press to zoom
1/7

Primary Research

I wanted to learn and practice some participatory design methods in this project. This was a great way to get the users involved and understand their perspective, experience and needs. For this process, I primarily involved individuals who were diagnosed with diabetes as children.

Culture Probe
Culture Probe

press to zoom
Probe Findings
Probe Findings

press to zoom
Case Study
Case Study

press to zoom
Culture Probe
Culture Probe

press to zoom
1/11

Values

To sum up my research, I used short and digestible values that I would implement into my design. This is a way of synthesizing that I found to be accessible for me as the designer, as well as for my audience.

Redefine.png

Redefine “child-friendly” content

Instead of patronizing cartoons and characters, employ accessible and engaging visuals.

Put.png

Put the child in the middle of their own health journey

Let them be the main participant in their diabetes management.

Promote.png

Promote engagement in the diabetes community

Forming a community allows child patients to know they are not alone and parents to share their tips and advices.

Encourage-1.png

Encourage caretakers to engage and support

Show them ways they can guide and help their child in an appropriate and non-invasive way.

Encourage.png

Encourage transparency and honesty

In other words, don’t sugar coat things. Be honest and realistic about symptoms and potential dangers.

Provide.png

Provide customizability + tailored content

Every person’s case is unique- narrowing and filtering down the material can reduce confusion and information overload.

Design Process

Design Process

Features

After conducting secondary and primary research and doing the Business Model Canvas and the Value Proposition Canvas, these are the features that I found would be the most fundamental in hi.lo. However, overtime, I expect them to change.

log.png

Activities, insulin, medication, carbohydrates

discover.png

Visualized data acquired from log entries and readings

glucose.png

Real-time blood glucose + recent readings

trends.png

Interactive education material + incentives

profile.png

Customizable preferences

+ settings

Site Map

This diagram shows the functions and actions of the site page-by-page. It involves the caretaker and the patient’s profile as well as the medical devices connected to hi.lo.

Site Map.png

Visual Exploration

Trying out some of the potential layouts at a higher fidelity allows me to visualize what type of visual identity I want hi.lo to adopt. I tested out a variety of styles and components for the Glucose function as a way to explore.

Visual Exploration 1.png

High Fidelity Prototype

Using the wireframes, I developed my first high fidelity prototype. These screen were used in the co-design workshops. In that session, we re-designed a number of elements within the screens. Changes and adjustments from the feedback received from this prototype were integrated into the final one.

Edit 1
Edit 1

press to zoom
Edit 2
Edit 2

press to zoom
Edit 3
Edit 3

press to zoom
Edit 1
Edit 1

press to zoom
1/3

Product in Action

Desktop

Trends

This tab allows families to analyze the child’s health data in a holistic and visual way. The filter allows for more selective investigation. In contrast to the existing clinical data charts, this data visualization is accessible to all of the participants of the child’s health, including the young patient themselves.

This tab allows families to analyze the child’s health data in a holistic and visual way. The filter allows for more selective investigation. In contrast to the existing clinical data charts, this data visualization is accessible to all of the participants of the child’s health, including the young patient themselves.

Filters.png
Desktop.png
glucose.png

Mobile

Glucose

This is used by the caretaker to receive live updates and leave notes for themselves and the child’s co-caretakers. They are also able to view past readings and send icon messages to their child’s device.

Tablet

Discovery

The discovery tab is a section for young patients to learn more about their diabetes. To keep the user engaged, hi.lo integrated intriguing graphics, interactive tasks and challenges and unlockable features.

Tablet.png

This is hi.lo in all 3 of its responsive platforms.

hilo_mockup.png

Check out some of my other projects

Group 427.png
Group 428.png
dark.png