I designed a new app and responsive website called Helping Hands to help teenagers easily find and register for nearby first-aid classes. The platform allows users to view class availability in real time, helping them decide when to sign up before spots fill up. Additionally, users can renew their certifications directly through the app and store previous credentials for easy access.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
To design an app and responsive website with a simple, intuitive user flow, enabling teenagers to easily register for nearby first-aid classes
Teenagers need the ability to see which class is near them so they can easily book it. They also need the ability to view when the classes are getting full before it is too late to sign up.
Following these steps ensures that every design decision is user-centered, solving real problems with thoughtful solutions
Understand the problem and identify who your users are
Pinpoint the users needs and understand how the problem impacts them
Brainstorm potential solutions based on the research and insights
Create multiple design concepts based on your ideas
Evaluate prototypes to determine the most effective solution
User research
Personas
Problem statements
Competitive audit
Ideation
Andre Greene is a busy high school student who works full-time as a cashier who needs an easy way to find and sign up for first aid classes near him because he wants to become certified to protect his siblings.
Casey Simon is a busy college student who works full-time as a cashier at a local florist who needs an easy way to find and sign up for first aid classes near her because she wants to become certified to protect he loved ones and strangers in need.
My goal was to find a pattern within the affinity diagram so then I can determine what the best insights were to give the product a better user experience.
Busy high-school students struggle with tight schedules so they wanted a way to see when classes are filling up so they can book them before they are full.
Users voiced that it would be helpful for them to receive a notification when it is time to renew their certification. They wanted the option to access and store previous certifications easily.
Users wanted the ability to see when classes are filling up so they don't miss out on booking in time.
After gathering usability study feedback, I refined the wireframes to improve readability, which included spacing out the class list so users could browse and select more easily. I then built a low-fidelity prototype centered on the primary flow, booking a nearby first aid class. This prototype became the foundation for the next iteration of user testing and design improvements.
Digital Wireframes
Low-fidelity Prototype
Usability Studies
I conducted 2 rounds of unmoderated usability studies. The first study allowed me to take that information and create a mockup from the previous wireframes. For the second study, users used a high-fidelity prototype and gave feedback of which parts of the app needed to be refined to have a better overall user flow.
Designated home page with promo to renew certification
The back button had to be moved on top to allow user to navigate back to the previous screen
The design was changed based on feedback from the usability study. Users found the navigation difficult to use when it was at the bottom. I then moved the navigation to the top and gave it its own screen for easier access.
Clearer notification to renew outdated certification
App navigation was moved to its own screen for easier use
The design was modified due to the feedback from the second usability study. The users were unsure that they have a certification to renew therefore I added a notification icon as a reminder.
