Heart Health
Heart Health is a mobile application to monitor heart patients and enhance their education to maintain in healthy heart.
Case Study Overview
​
A Hear Health is an application to help patient with hearth diseases of monitoring their heart health daily and enhance their education to maintain in healthy heart. I am the UX/UI designer in this project to create the app from scratch.
My Role: UI/UX Designer
​
Deliverables: Product Strategy, User research, Competitive Analysis, User Journey, User Personas, Storyboard, User Flow, Sketches, Wireframes and Prototype
​
Timeline: 4 Weeks
Problem
The term “heart disease” refers to several types of heart conditions. Heart disease is still on top of all diseases which cause death in the world.
Heart monitoring and having enough knowledge about their diseases are kind of essential for these types of patients to prevent of getting to the hazard life status.
​
Solution
This app tries to get and simplify all information about heart monitoring & patient educating based on less texts and more visual to make all these paths easier for them.
Design Process
Competitive Analysis
Competitive analysis has done between Cardiograph, Heart Rate Monitor and Heart Rate Plus Pulse. These are top 3 applications for monitoring patients' heart rate.
.jpg)
​
The SWOT is for Heart Rate Monitor Application.
Market Research Key Insights
​
User Survey & Interview
To obtain more information from my users I did survey and Interview.​
User Survey & Interview key Insights
Based on the survey & Interview I found out the main key Insight of users of the application.
-
Most users announced that they need to know all details about their heart issues in a simple way of description, and able to monitor that daily.
-
Users preferred to see more videos and some pictures while using the apps rather than text or descriptions.
-
Most of the patient's family needs to know how they can take care of their patients or if they need surgery, how make patients ready for their procedure.
-
Most Elders users said they prefer using the feature to listen about all the steps.
-
Users who have some devices and batteries need to know and get all their information about their health status daily.
-
Users need features for information in different languages.
-
Users need a feature to explain specific vocabulary in simple words for them.
User Persona
With the survey and interview results, I created a Persona to represent the typical user of the app.
Experience Maps
By user journey map and an empathy map Nila's mental model further has illustrated.
User Stories & User Flow
To resolve the users' needs based on the user research, I created several user stories.
And based on the user stories, two major features need to be included in MVP:
​
1. Feature to monitor my heart beating and know during a day what is the status of user's heart.
2. Get more visual information and get educated about user's status when it is not on risk.
​
And two minor features for easy use:
1. Login as with able to choose native language.
2. Design less steps to get my daily heart information to get more simple information faster.
Site Map
Site map was created to structure the pages.
Sketches & Wireframes
Before pushing pixels, sketches have done to find the best solution. Then, in Figma, they all transferred into Low-Fidelity Wireframes.
​
Iteration
Some pages iterate throughout the process like the prevention page. The second version makes the change accordingly to show the date, time and more information that user needs beside of adding more icons.
​
Branding Work
With the wireframe settled. Mood board and style tile were created to present my font selection and color palette.
.
High Fidelity Prototype
​
.
User Testing
After conducting user testing, some feedback has been received which caused to do some iteration for refined prototype.
​
1. Users reflect they need to have consult and challenge pages to add.
2. Some users mentioned they need to have option to choose their device for monitoring.
3. Users feel it is good to have a transcript page for videos as well.
4.Some users mentioned some iteration while they tap on some icons.
​
Refined Prototype
User Testing
three user conducted interview to test if the app work as it should be.
Here are some feedbacks from the user:
1. Users reflect the location icons displayed on the map when using the Find a Route feature is not clear enough.
2. Some users find it hard to realize the suggested bus line when using the find a route feature.
3. Users feel it's unnecessary to tell them the page is for login. It's better to see the brand information on the first page. With the feedback, the prototype was iterated.
​
​
Refined Prototype
Learnings
This is my very first project. I accomplished from conducting user research to prototyping step by step. I learned how to incorporate user insights in each step. It helped me built a solid foundation of user-centered design.
​
Next Steps
-
Developing Family, Consult and Challenge Rewards Features
-
Adding Reminders Feature
-
Adding Calendar Feature
-
Design for smart watch
​
Learnings
-
This project was so useful for me to understand more the value of research when I am working in healthcare and need the huge team research for designing an application. Besides having more Empathy with user makes get more information which helps me to get closer to design which is their needs.
-
​I learned about how much healthcare market needs valuable applications. Based on my research marketing I realized more application needs lots of new features which some companies don’t care more about that.
-
At the end all user testing which I did were awesome experience that I learned how to improve my design and so lots of iteration based on my user's needs.
​