Healing Helper
first-aid-sign-nhe-19666_1000.gif.webp
Tool to help people learn first aid.
Role: UX/UI Designer
Google UX Certificate
Duration: 1 Month
Screen Shot 2022-05-01 at 9.36.03 PM.png
Screen Shot 2022-05-01 at 9.36.14 PM.png
Screen Shot 2022-05-01 at 9.35.43 PM.png
Executive Overview
ezgif-2-693e6a2891.gif
I was asked to design a user experience for social good.

My solution was to design a tool to help people learn first aid, while considering various different user backgrounds.

The impact is Healing Helper teaches people first aid for many different life situations in an equity focused design model.
Meet the Users
Google UX Design Certificate - Persona [Template]-2.png
Google UX Design Certificate - Persona [Template].png
Meet Charles and Angelica, Healing Helper's User Personas. Charles is a 15 year old who is often left to watch his two younger siblings while his parents are at work. Angelica is a 25 year old who just moved out of her parent's place after recently graduating from college. They both would like to know first aid to ensure the safety of themselves and those around them.
 
Journey Maps
Google UX Design Certificate - User Journey Map [Template]-2.png
Google UX Design Certificate - User Journey Map [Template].png
Angelica and Charles' journey maps help outline the specific actions they take, their feelings with each action and improvement opportunities in the design. Their problem statements also outline their needs and why. These tools really help me understand them on a deeper level and empathize with them.
 
Competitive Audit
Unknown.jpeg
Unknown.png
The competitive audit I conducted for Healing Helper was very insightful. I wish I could have found more resources to compare, but these two alone were rich in information. I compared value propositions, app and website experiences, interactions, visual design and content. by doing so I was able to see what was successful for each as learning tools.
Crazy 8s
Screen Shot 2022-01-02 at 11.13.53 AM.png
While doing Crazy 8s, I thought about Charles and Angelica. I considered their problem statements and sketched out quick designs for a possible solution. This Crazy 8s exercise was restricted to 10 minutes.
 
Wireframes
Screen Shot 2022-01-02 at 11.14.20 AM.png
Screen Shot 2022-01-02 at 10.58.49 AM.png
After the Crazy 8s exercise, I drew out some wire frames, and then made them digital using Figma.
 
Low Fidelity Prototype
ezgif-2-6c721bec0b.gif
This is low fidelity prototype that was used for usability testing. It's pretty simple but has the basic information architecture that I would like to test.
 
Usability Study Plan
Screen Shot 2022-01-02 at 1.43.02 PM.png
Usability Study
 
Usability Study Analysis
Affinity Diagram
Screen Shot 2022-01-31 at 4.47.06 PM.png
 
Changes to Design
Challenges
756-7561211_teacher-icon-png-download-transparent-background-teacher-icon.png.jpeg
Lesson Not Memorable
"It's difficult because it's just one big block of text."
Solution
Make the teaching portion more interactive and visual.
4601f773e41c094849e10288a7aec5e8.png
More Representation
"I wish there were options for baby first aid for babysitters."
Solution
Have options for different user needs.
114-1147904_png-file-svg-mouse-click-icon-png-transparent.png.jpeg
Menu is Confusing
"I can't tell what map means, I assume its related to first aid."
Solution
Make the menu more clear with visuals and hierarchy.
Unknown-1.png
Unclear Expectations
"Oh no, I didn't realize there was a quiz! I better reread this."
Solution
Summarize what the user is getting into beforehand.
 
Make the teaching portion more interactive and visual.
Before
ezgif-6-0ce7f7ec7f.gif
After
ezgif-2-b3fd8f5ad7.gif
This improvement to the reading was based on user feedback and accessibility. If I had more resources I would like to push it further than this. The images are from a YouTube video I linked and used as a resource. If I had the opportunity, I would like to make it more of a visual narrative, where the user is the one who actually does CPR to a virtual person.
Make the menu clearer with visuals and hierarchy.
Before
Screen Shot 2022-01-03 at 12.21.25 AM.png
After
Screen Shot 2022-01-04 at 1.05.16 AM.png
Some of the users were having issues with the menu because the hierarchy was difficult. They also had some issues with knowing what exactly some of the options meant, so I made sure to add images. Lastly, they wanted an option to call 911.
Screen Shot 2022-01-05 at 12.39.26 AM.png
Another issue I observed was the user didn't notice they could go back to the reading. I decided the solution would be to make a more obvious difference between the menu options and the quiz options.
Have options for different user needs.
ezgif-2-693e6a2891.gif
In order to be inclusive for different people, I added in four more course options that would better represent those who need other options to learn. These include Child First Aid, Mental Health, Disabilities, and Neurodiversity.
Mock Ups
Screen Shot 2022-01-04 at 11.59.11 PM.png
At this point, I really focused on the user interface and making sure the placements of each piece were in the same spot so there was no weird shakiness while navigating. I also found icons and colors that communicated to the user their specific meanings.
 
High Fidelity Prototype
This is the high fidelity prototype. I focused on accessibility, representation and information.

Value Proposition:
Healing Helper is a First Aid learning tool that has options for all different types of people and provides an interesting way to learn first aid.
 
Reflection
IMG_0955.heic
This app was great to make. First Aid is important to me because I have worked in a kitchen where first aid is always good to know. I also was in Girl Scouts for 10 years so I learned it there! 

I appreciated going through the UX certificate and learning more about being a UX designer (and a bit about being a UI designer). I feel a lot more confident after doing this project and I look forward to continuing my learning!


I do wish I had more time to work on the final prototype. I think I could improve some of the ui with a different home screen layout, interactions in the reading and color scheme. Here's wire framing for a different approach I had in mind.