I designed a new app called Helping Hands to help high school students easily find and register for nearby first aid classes. The app shows class availability in real time, helping students decide when to sign up before spots fill up. Users can also 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.
To design an app with a simple, intuitive user flow, enabling high school students to easily register for nearby first aid classes.
High school students need a way to see which classes are near them so they can easily sign up for them, and the ability to see when classes are filling up before it’s 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
I conducted interviews, ran unmoderated usability studies, and built empathy maps to understand the users’ needs for the first aid app. Through this research, I identified high school students as the primary user group.
The usability study confirmed a real need for this product. High school students need an easier way to find nearby first aid classes so they can get certified. They also pointed out how helpful it would be to see when classes are filling up, so they can book in time before a spot is gone.
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 patterns within the affinity diagram so I could pinpoint the best insights to improve the product for 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 feedback from the usability study, I refined the wireframes to improve readability, spacing out the class list so users could browse and select with less friction. From there, I built a low-fidelity prototype centered on the primary flow: booking a nearby first aid class. This prototype became the foundation for the next round of user testing and design refinement.
Digital Wireframes
Low-fidelity Prototype
Usability Studies
I ran two rounds of unmoderated usability studies to guide this design. The first study gave me the insight I needed to take the wireframes and build them into a mockup. For the second round, I put a high-fidelity prototype in front of users and gathered feedback on which parts of the flow needed refinement to feel more intuitive.
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.
Moved app navigation to its own screen for easier use
Repositioned the back button to the top so users can navigate to the previous screen
I tested the Helping Hands app with real users and watched where the navigation broke down. They struggled to find their way around when the menu was positioned at the bottom of the screen, and the back button wasn’t positioned where their instincts expected it.
I moved the navigation to its own dedicated screen and repositioned the back button to the top, giving users a clear path to retrace their steps. The result was a flow that matched how people actually move through the app instead of fighting against it.
Added a clearer notification for outdated certifications
Designated the home page to spotlight the certification renewal promo
Round two surfaced a different problem. Users didn’t realize they had a certification to renew, so the promo sitting quietly on their profile was going unnoticed.
I designed a notification icon and pop-up that puts the renewal front and center the moment users land on the home page. Now there’s no ambiguity. Users know exactly when their certification is expiring and exactly what to do about it.
