
Heart and Stroke: UI Redesign
Overview

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
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

Survey Results



What did we learn?
-
Most users know someone who suffers from a heart condition
-
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.
-
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.

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.

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.

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:
-
The website is too negative
-
There’s not enough imagery
-
There’s too much text
-
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.

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.

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.

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.

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.

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.​