Food for the Heart top banner.

Food for the Heart

UX Design Student Project | September - December 2018

Food for the Heart is a mobile health application that aims to raise awareness about heart disease for South Asian post-secondary students in the Fraser Valley. It suggests culturally rooted meals meant to reduce the risk of developing heart disease, and collaborates with local South Asian grocery stores to encourage healthier food habits.

Team

Zohaib Jafri

Art Director

Ishpreet Sekhon

UX Researcher

Kenneth Juang

UI Designer

Roles

Project Management

User Research

Data Analysis

UI Design

Prototyping

Copywriting

Tools

Illustrator

Photoshop

Xd

Figma

Domain Problem

Within the South Asian community, heart disease is an extremely common health concern. Many experience symptoms such as chronic pains and dizziness later on in life, and are at an increased risk of dying from heart attacks and strokes.

Its prevalence can be drawn from the fact that South Asian diets are high in cholesterol, and most live sedentary lives. Preventative measures are the most effective, but because South Asian youth often can't relate to heart disease, many do not take action when it matters most.

Presentation slide explaining the problems related to heart disease for the South Asian community.

Partner Organization

About SAHRC

SAHRC—The South Asian Health Research Collaborative—is a research group composed of members of Fraser Health. Their goal is to bridge the gaps in existing health research in relation to the unique health issues of the South Asian community within the Metro Vancouver area.

To achieve this, while also aiming to further health research in this demographic, SAHRC has been pushing for heart disease preventative initiatives. Barriers in community involvement, budgetary constraints, and lack of trust and interest from the focus demographic hinder these goals.

Presentation slide describing the barriers preventing SAHRC from pushing for heart disease preventative initiatives.

Research Insights

Our team conducted primarily ethnographic research to gather information. We also had frequent meetings with SAHRC's research coordinator, which I prepared questions for and facilitated.

I also took notes during these meetings to later draw insights. From my findings, two things became apparent: SAHRC uses the same outreach methods regardless of age group, and due to research constraints, SAHRC's research goals are not feasible at the moment. Because of this, we decided to frame our goal to target community involvement:

Presentation slide presenting the project's frame.

Persona

Through creating our personas from research notes, we determined that for SAHRC to reach our target audience, there needs to be a solution that connects with post-secondary students in an engaging but non intrusive manner, and consider their dynamic schedules.

Poster presenting our post-secondary student persona.

User Journey

We decided that our point of intervention ought to be the moment when our target audience is introduced to SAHRC. By engaging with post-secondary students in a way that is interesting and relevant to them, this would allow SAHRC time to foster engaging dialogue to build interest.

Presentation slide on post-secondary students' experience when SAHRC representatives try to onboard them.

Guiding Principles

With our research in place, our team then created three guiding principles to help direct our thought process and rationale as we designed our solution: Cultural Relevance, Preventative Measures, and Establishing Groundwork.

Presentation slide presenting our project's guiding principles.

Prototyping

UI Design & Animations

With our research and guiding principles established, I used Adobe Illustrator to create a style guide for the team, detailing items such as colour scheme and iconography. I also designed the interface and visuals for the recipes and grocery list screens with Illustrator, and added interactions and animations with Adobe Xd.

Adobe Xd prototype of each screen.

Solution

Onboarding

To onboard post-secondary students, the first touchpoint takes place at local South Asian grocery stores such as Fruiticana. A SAHRC booth with free samples of dishes listed on Food for the Heart would be set up, and a SAHRC member running the booth can use this opportunity to introduce young adults to both SAHRC and Food for the Heart.

This information is reiterated on info cards that are available at the booth for students to take home and read later on.

Concept render of how an in-store SAHRC booth and info card would look like.

Homepage

Food for the Heart is primarily a recipe app, allowing SAHRC to communicate information regarding heart disease and its preventative measures in an engaging manner. On the homepage, students can look up South Asian specific recipes and filter them based on criteria such as time and cost. Recipes can also be favourited for ease of access in the future.

Additionally, there is a discounts tab that offers digital coupons for ingredients used for the weekly featured recipe. This creates an intrinsic motivation for post-secondary students to keep making healthier dietary choices while also staying within budget.

Mockup smartphone to have an MP4 video clip superimposed onto it.

Recipes

The app provides a comprehensive list of ingredients and utensils needed, and walks students through the entire cooking process step-by-step. Voiced instructions can also be played when students' hands are busy cooking.

Certain ingredients essential to preventing heart disease are highlighted, and may be tapped on to provide information on their health benefits. A benefits tab is included to explain how the dishes as a whole help prevent heart disease, detailing how sodium and underlying conditions like cholesterol impact health.

Mockup smartphone to have an MP4 video clip superimposed onto it.

Language Options

Language options are available to translate recipes and ingredients with obscure English names. This also allows for opportunities for post-secondary students to share recipes with older family members, especially those who are not fluent in English.

Mockup smartphone to have an MP4 video clip superimposed onto it.

Value

Why is it needed?

By educating on heart disease through introducing culturally specific dishes, South Asian post-secondary students are able to become more proactive about their dietary habits. This in turn supports SAHRC's goal of promoting heart disease preventative initiatives, and paves the way for future research opportunities.

Final Thoughts

From this project, having the chance to apply various design methods has shown me their importance in any design process. By taking the time to understand clients, end users, and their interactions both with each other and with the product itself, the resultant knowledge can help inform crucial design decisions.

This concept can be refined through a more thorough design process. For example, we only created post-secondary student personas, limiting us from understanding other stakeholders such as SAHRC members. Having a more diverse set of personas could have helped us determine how to provide an experience that is widely applicable for all stakeholders, especially during the onboarding process.