top of page
Healing Helper
Tool to help people learn first aid.
Role: UX/UI Designer
Google UX Certificate
Duration: 1 Month
Executive Overview
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](https://static.wixstatic.com/media/107076_5497a500e6b74e1d99ce9c10ebed41fa~mv2.png/v1/fill/w_474,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D-2.png)
![Google UX Design Certificate - Persona [Template].png](https://static.wixstatic.com/media/107076_20a65986b1de434dbd2f171b56b7e236~mv2.png/v1/fill/w_474,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D.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.
Personas
Journey Maps
![Google UX Design Certificate - User Journey Map [Template]-2.png](https://static.wixstatic.com/media/107076_f2847afad62948d4970c1fb0b8b59626~mv2.png/v1/fill/w_474,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20Journey%20Map%20%5BTemplate%5D-2.png)
![Google UX Design Certificate - User Journey Map [Template].png](https://static.wixstatic.com/media/107076_34391eff648d45079a39b1a32e15df28~mv2.png/v1/fill/w_474,h_267,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20Journey%20Map%20%5BTemplate%5D.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.
Journey Maps
Competitive Audit
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
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.
Crazy 8s
Wireframes
After the Crazy 8s exercise, I drew out some wire frames, and then made them digital using Figma.
Wireframes
Low Fidelity Prototype
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.
Low Fidelity Prototype
Usability Study: Plan
Usability Study Analysis
Affinity Diagram
Usability Study: Analysis
Changes to Design
Challenges
Lesson Not Memorable
"It's difficult because it's just one big block of text."
Solution
Make the teaching portion more interactive and visual.
More Representation
"I wish there were options for baby first aid for babysitters."
Solution
Have options for different user needs.
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.
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.
Changes to Design
Make the teaching portion more interactive and visual.
Before
After
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
After
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.
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.
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
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.
Mock Ups
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.
High Fidelity Prototype
Reflection
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.
bottom of page