Cross-platform non-profit First-aid app.

Project overview.

• The product: A cross-platform tool to help people learn first-aid.
• The problem: Low-level of first aid knowledge.
• The goal: Design an app that will prepare a user for emergencies, and other first-aid tutorials that every person can use and implement on their own.
• My role: UX/UI designer, UX researcher
• Responsibilities: Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User research: summary.

I conducted interviews and created an affinity map from interviews and surveys to better understand the users I’m designing for and their needs. Different groups were interviewed but through research, I came to know busy professionals and teenagers who don’t have time to make themselves aware of the first aid find it difficult when some emergency happens.

Pain points.

Personas.

User journey map.

Mapping users’ journeys revealed how helpful it would be for users to have access to a dedicated First Aid app.

Competitive audit.

Goal: Compare the user experience of each competitor’s app.

Starting the design.

• Paper wireframes
• Digital wireframes
• Low-fidelity prototype
• Usability studies

Paper wireframes.

As it’s an app that will be used in emergency situations, it was decided to make it mobile-first. Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

Digital wireframes.

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

Low-fidelity prototype.

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering a baked product so the prototype could be used in a usability study.

Usability study: findings.

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Design.

• Mockups
• High-fidelity prototype
• Accessibility

High-fidelity prototype.

The final high-fidelity prototype presented cleaner user flows looking for the right information about first aid needed in different situations also has a customized profile and step-by-step instructions.

Mockups for desktop and tablet versions of the dedicated website.

Accessibility considerations.

The whole work took 63 hours.