Jo Ionescu
UX/UI Designer
Your First Aid
A cross-platform social good utility that helps people learn first-aid designed during my Google UX Design Professional Certificate
Project Overview
The Product:
„Your First Aid” is a social good utility focused on helping people access immediately step-by-step first aid guidelines or call an ambulance when help is needed. Through the app, the user can access and learn life-saving first-aid procedures.
"Up to 59% of ‘pre-hospital’ deaths from injury could potentially be prevented if more people stepped in with some simple first aid, according to new research commissioned by the British Red Cross and conducted by the University of Manchester.” (University of Manchester)
Project duration:
April 2022 - May 2022
My Role:
UX designer designing the app from concept to delivery
Responsabilities:
Competition research, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Personas
User Research
Problem Statements
Ideation
UNDERSTAND
THE USER
User journey Maps
Competitive Audit
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs.
A primary user group identified throughout the research was working adults who do not know where to find step-by-step information on how to save lives.
Research revealed the frustration of this group in not finding structured content about the steps needed in first aid while having the possibility to also call emergency services.
A secondary user group identified as young adults, who want to learn and know more about first aid.
Research revealed the frustration and disappointment of this user group of not being able to find clear and easy-to-understand content that is well supported visually.
User Research: Pain Points
Content
Young adults do not know where to find clear and easy-to-understand content that is well supported visually.
Knowledge
Working adults cannot find step-by-step content in first-aid that can be accessed fast when an emergency occurs.
Copy
Content that is not easy to understand for everyone due to specific wording and terms.
Time
Young adults don’t have time to make themselves aware of first aid, finding it difficult when an emergency happens.
Persona Research - Understanding the target audiance
The data from my research showed that I had 2 main user segments
Problem statement:
Johnny is a student who needs to learn and understand better first-aid procedures because he wants to react and help when an emergency happens with his dad’s heart.
Problem statement:
Sarah is a working adult who needs to learn and understand better first-aid procedures because she wants to know and understand health conditions and medical emergencies.
User Research: User journey
Mapping Johnny’s user journey revealed how important it is for users an easy way to find the information (like the search bar) and also, to have different ways of accessing the information, like visual, and audio, keeping in mind the consistency in labeling.
User Research: Competitive Audit
I conducted a competitive audit to check out the market as a whole. Reasons why the competitive audit was important to me:
-To determine standard practices on the market
-To identify the user experience given by the competitors
-To identify features that might not work o what can be changed/improved
-To identify unique features
Ideation
Sketching out the idea of how a user may use the app for learning first-aid procedures, helped to visualize a potential experience and I had a better understanding of the user's environment before starting development.
The environment can be at home learning peacefully about first aid but also on the move or in a stressful situation when the user needs to call emergency services and give first aid, being supported by the app.
Digital Wireframes
Low-Fidelity Prototype
Usability Studies
STARTING THE DESIGN
Digital Wireframes
As the initial design phase continued, I made sure to provide users with easy and intuitive access to the app’s screen and features through a visible burger menu, an emergency call button present on all pages, and the lessons that serve the purpose of the user flow.
Adding the search bar along with the audio option for written text creates accessibility and gives more value to the app, as the audio option can be used while performing the first aid to a victim. Visual elements / explanatory images give a better understanding of the steps followed and support better visual learners.
The low fidelity prototype connected the primary user flow of learning fast and easy how to give first-aid, so the prototype could be used in a usability study with users.
Usability Studies
I conducted two unmoderated usability studies. Findings from the studies 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.
Parameters of the usability study:
For a better understanding of the findings from the usability study, I organized the answers based on themes, created insights, and prioritized them.
Usability Studies Findings
1. Users want a better content structure and better cues (labels) for a more intuitive experience.
2. Users want more accessibility support through audio and a search bar.
3. Better access to the emergency button.
4. Users want to have the option of first-aid certification.
Even though based on the first usability study, the users were able to successfully complete the task / the user flow - of getting to know the app and accessing the courses for further learning, they also felt confused, frustrated, and lost. The app’s layout, the structure of the content, and the lack of accessibility were not providing an intuitive user experience.
The users’ further considerations helped me improve the design and the usability overall by:
-> bottom menu vs. burger menu
-> “More” and “Settings” are structured with better labeling and layout
-> “Learn” vs. “Home” to reduce the cognitive load of recognizing the word and its function
-> A better approach to the “emergency” button through a design more intuitive, accessible, and visible
High-Fidelity Prototype
Mockups
Accessibility
REFINING THE DESIGN
Mockups
Early designs allowed for some customization but after the usability studies, I created a user interaction more intuitive, and easy to navigate through, for example adding the search bar along with a better-structured menu, for a better user experience.
Accessibility Consideration
1
Use of colors and fonts easy to be seen by color-blind users (blue and red). Hierarchy in typography creates accessibility to screen readers.
2
Incorporated a clear typography hierarchy for readability and comprehension. Also, adding elements like a search bar and audio to text improves the user experience and brings value to the app.
3
Clear labels for interactive elements and alternative text to images that can give access to screen readers for users who are vision-impaired
Information Architecture
Responsive Design
RESPONSIVE DESIGN
4
The responsive website was created to ensure most users can use the Your First Aid lessons/guide.
The website contains the mobile app functions, with some adaptations to work efficiently on a browser with various screen sizes.
I used the sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Choice of color creates accessibility for color-blind users and the visual hierarchy is accessible to screen readers.
For the responsive design case study, I have used the mobile-first approach. Designing from the smallest to the biggest screen through progressive enhancement was the best strategy to choose. Thinking about the users: who they are, how and where they will use the app, makes the mobile phone the first device that they would use not only for reading and learning but also in case of emergency.
Design System
To create a maintainable and scalable UI, I made a branding and design system for Your First Aid and its responsive website. It helps the workflow become more efficient and establishes principles for the application to follow through consistently, which ultimately will enhance the user experience.
Logotype
I design a logotype that grabs attention, makes a strong first impression, reinforces the brand identity, and I believe that is memorable.
Color Palette
I use gray and blue as the primary colors and the other three colors to maintain the visual hierarchy and signal the function of elements.
The combination of colors visually conveys the urgency of an emergency. Thinking about accessibility, red (used mainly for CTA) and blue are the colors that are the easiest to be seen by color-blind users.
rgba(166,166,166,1)
#A6A6A6
rgba(1,7,141,1)
#01078D
rgba(168,31,1,1)
#A81F01
rgba(1,7,141,0.50)
#01078D
rgba(215,216,251,1)
#D7D8FB
Typography
Thinking about accessibility, Proxima Nova is one of the most readable typefaces. It is also very known to users, used online, in books and articles to t-shirt prints.
Also, Proxima Nova is available in seven weights—thin, light, regular, semibold, bold, extra bold, and black, which helps the information hierarchy.
Next steps
Takeaways
Self-Reflection
GOING FORWARD
Takeaways
Impact
Targeted users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
One quote from peer feedback: „This app is very useful much more that I can have it on the phone and also on the laptop! Makes me feel safe knowing I can care better about my family and myself!”
What I Learned
While designing the app, I learned that the first ideas are only the beginning of the process. Usability studies and peer feedback are important processes that influence each iteration of the app’s design.
Next Steps
Finish the whole app and conduct another usability study.
1
Identify any additional areas that need iteration and research to discover new features.
Keeping up with users’ needs it’s a must in the design process.
2
Work more towards accessibility and details.
3
What I would do differently and what is my personal learning
-
I certainly would pay more attention to user testing and the questions asked.
-
I believe that there is room for improvement in the way the questions are formulated and also should be taken into consideration multiple user flows (if there are more).
-
The first idea would most likely not be the final idea. Do not get attached to the first idea.
-
Listen to users. You might think that you know what the users need only to end up finding out that you are wrong.
-
There will be multiple iterations throughout the process.
-
The design process is not linear there are a lot of ups and downs, back and forths.
Coming in the support of users, a better visual for the emergency call button makes it easier to access. Giving the opportunity of first aid certification built confidence for users and improve their knowledge, preparing them better for emergency cases.
