top of page
redtowhite.webp

Heart and Stroke: UI Redesign

Overview

Screenshot 2022-10-03 152447.png

Summary:

My colleagues and I decided to choose the Heart and Stroke Non-Profit Organization as our UI Redesign. We believe that this organization is important and that it needs more awareness and internet traffic to get users more insight into Heart Disease and how to take care of themselves better.

 

Responsibilities: UX Research 

 

Tools: Figma | Miro | Google Docs | Google Survey | Google Sheets | Zoom | Github

 

Collaborators:

Louise Enriquez:UX Researcher

Nadia Granata: UI Designer

Prachi Patel: UX/UI Designer

​

TIMELINE

2 1/2 weeks to complete

Research Process

To start, we gathered 6 people to interview to share their insights and feedback on heart health. We also conducted a survey to get people’s opinions on what they felt was most important about heart and stroke.  We did try to reach out to the foundation through several platforms, but unfortunately, we did not receive a response. Despite this, we powered through!

4 Competitors

6 Interviews

46 Survey Responses

User Inisghts

08_6. User Insights.jpg

Survey Results 

surveyresult2.png

What did we learn?

  1. Most users know someone who suffers from a heart condition

  2. Users have limited knowledge when it comes to heart health.  This includes signs of a stroke or heart attack and risk and prevention of heart disease or stroke.  As you saw from the survey, users know SOME information, but are not aware of all the risks and symptoms. 

  3. We also learned that most people would click on the Heart and Stroke Foundation website to gather the information they don’t have.


Following the user research, we decided to focus on people’s limited knowledge of heart health.

Screenshot 2022-10-18 151034.png

Problem?

Users primarily use the website for:

To gain knowledge on heart disease and stroke, particularly signs and symptoms, risk factors and prevention methods.

 

User Insight:

Majority of users have limited knowledge when it comes to risk factors, signs and symptoms and prevention methods of heart disease and stroke. 

 

​

So….

How might the Heart and Stroke Foundation website make it 

easier for users to absorb information on heart disease and stroke based 

on their personal experiences with 

cardiovascular conditions?

Competitor Analysis

We made a competitor's analysis to compare and contrast Heart and Stroke Foundation's Strengths and Weakness  with other Non-profit Organizations.

competitoranalysis.png

User Persona

We created a user persona.  Meet Hector Hart!  A 45 year old stockbroker from Toronto, who’s married and has 2 kids. Let me take you on Hector’s journey to heart health.

User Scenario

Let's take a look at Hector's User Scenario to understand him better and how would this website redesign help him with his research about The Heart and Stroke disease.

01_5.2. UX Scenario.png

Solution

How exactly were we going to find out what should be redesigned to help users better absorb the information they receive from the website?

We conducted user observations on the website.  Some of the things users highlighted were that:

  1. The website is too negative

  2. There’s not enough imagery 

  3. There’s too much text

  4. The layout is distracting

**put in a quote from user observations**

Knowing this, we began the UI process of our redesign.

Card Sorting

After getting insights from our users and evaluating our non-profit website, we as a team place all the data on miro and went into Card Sorting. Card Sorting is probably one of my favourite tasks during user research because you get to add or subtract topics from their categories and find a way to make it simple and user-friendly.

04_1. Card Sorting Structure.jpg

Site Map

Time to Site Map our Heart and Stroke redesign with the help of Figma we were able to create a well structured system for future clients to navigate our website with ease and comfort without any errors.

05_2. Site Map.png

Low Fidelity Wireframes

Now that site map is done, we as a team decided that we are happy with the website architecture. We move into the wireframing process. This is where the magic begins for the redesign. 

HeartandStrokeWireframemockup.png

Accessibility Tests

Now that site map is done, we as a team decided that we are happy with the website architecture. We move into the wireframing process. This is where the magic begins for the redesign. 

UI Style Guide

Now that site map is done, we as a team decided that we are happy with the website architecture. We move into the wireframing process. This is where the magic begins for the redesign. 

03_2. UI Style Tile.png

High Fidelity Prototype

After listening to our users' feedback and insights, going over the data and finalizing our UI design; we can go to the final process of this project by creating the High Fidelity Prototype bringing our redesign to life.

HeartandStrokeHifi.png

Final Product

We tested and iterated on our prototype and applied our style guide to create our final redesign. Now our users will be able to navigate the Heart and Stroke website with a new perspective and will able to navigate the website with ease.

Final Thoughts

As we come near the end of this case study, we just want to highlight a couple of things we would possibly like to develop for the future.


Some things we’d like to see in the future for the website are:

 

  • Adding an AR/XR feature for our website 

  • An app dedicated to connecting caregivers to support workers

  • An app dedicated to connecting and supporting those living with heart conditions to medical professionals as well as mental health resources.

 

I believe that with today’s technology anything can happen. We can learn more about human anatomy at the comfort of our own home or set up a virtual doctor's appointment with the help of AR/XR development. I’m so excited for the future to come.​

bottom of page