Google UX Certificate - Stayin' alive app

1. Stayin’ alive web app
Gemma Fornons
May 2021

2. The product:
CPR rhythm tracker based on a list of songs
with a correct chest compression rate which
also includes all theoretical information about
this technique.
Project overview
Project duration:
May 2021

3. The problem:
Cardiopulmonary Resuscitation (CPR) is the
first line of defense against cardiac arrest, the
top cause of death in the world. When the time
comes to perform CPR, it needs to be second
nature, as it can be the difference between life
or death.
Project overview
The goal:
Provide an easy, accessible and fun way for
people to learn how to correctly perform CPR.

4. My role:
UX/UI
Project overview
Responsibilities:
User research, wireframing, prototyping

5. Understanding
the user
● User research
● Personas
● Problem statements

6. User research: summary
User research involved interviews with people of different age groups (15-35, 55-70), living
arrangements and health issues. Some had been CPR-trained, some not.
Originally, it was assumed some of these users would not be receptive towards the idea of
mixing music (something fun) with CPR training (something serious), but it was noted that
the idea was met with more acceptance than expected.

7. User research: pain points
Difficulty
CPR is seen as a difficult
technique involving a
heavy theoretical load
Timing
CPR might be needed
unexpectedly, so
resources should be
accessible at all times
Human factor
Performing CPR is hard.
In a life or death
situation, most people
struggle just to keep
composure.
1 2 3

8. Persona: Marta
Problem statement:
Marta is a young
nurse/health ed trainer
who needs an engaging
tool to teach CPR in
several venues
because she wants to
raise awareness about it.

9. Persona: Julià
Problem statement:
Julià is a retired man with
heart problems
who needs to be able to
perform or explain how
to perform CPR at any
time because he wants
to avoid dying from
cardiac arrest.

10. ● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

11. Digital wireframes
It was important to create a
smooth way for the user to
see all app options
- Big buttons
- Lower menu to
reinforce main links
1st item is song
list
Bottom
sticky
navigation

12. Digital wireframes
The song page allows users
to see all possible CPR
songs in one single page
Songs can be
favourited
Scrolling

13. Low-fidelity prototype

14. Usability study: parameters
Study type:
Unmoderated usability study
Location:
Barcelona, remote
Participants:
5 participants
Length:
40 minutes

15. Usability study: findings
Users want a faster way to
access a song AND/OR
emergency services if
needed
Emergency mode Accessibility Filtering
Users with hearing
difficulties need an
alternative way of
following the rhythm fo
the songs
People want to sort
through the song list
faster
1 2 3
Educational materials
Users want more visual,
easier to understand
educational materials
4

16. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

17. Mockups: home
● Fast-access buttons
for CPR and
emergency services
● Bottom menu
adapted accordingly
Before usability study After usability study

18. Mockups: Song list
● Added search box and
advanced search
filters to improve
filtering
● Added a ‘star’ system
to mark favourites
● Added backlink to
improve navigation
Before usability study After usability study

19. Mockups: Song
● Added ‘quick-song
access’ page with
associated video and
vibration to support
CPR rhythm
After usability study

20. Mockups: Educational materials
● Divided text into
steps, with a short
paragraph and
illustration each
● Added backlink to
improve navigation
Before usability study After usability study

21. Mockups

22. High-fidelity
prototype
https://xd.adobe.com/view/0e269077-dfb5-41fb-ab
e9-814c606ff8a8-5b75/

23. Accessibility considerations
Colour accessibility
WCAG was taken into
account when choosing
color palette for the app
Icons were used in some
buttons, in addition to
color.
Animation speed &
Interactions
All animations are below
500 ms
Gestures are never the
only way of accomplishing
an action
Labels
All buttons, links, tags and
components are labeled
to ensure readability if
using a screen reader.
1 2 3

24. ● Takeaways
● Next steps
Going forward

25. Takeaways
Impact:
The app makes users feel like Stayin’ Alive
really thinks about how to meet their needs.
A quote from peer feedback:
‘I’ll be the master of CPR in style!’
What I learned:
While designing Stayin’ Alive, I could really
understand the value of doing multiple iterations
based on feedback (provided by usability studies
and/or peers). There was a massive improvement!
I also honed my Adobe XD skills and created my
first “social for good” app, which was very
rewarding.

26. Next steps
Conduct another round of
usability studies to
validate whether the pain
points users experienced
have been effectively
address.
Consult with an expert to
make sure the app is fully
accessible and equitable.
Conduct more user
research to determine
any new areas of need.
1 2 3

27. Let’s connect!
IThank you for your time reviewing my work on Stayin’ Alive app! If you'd like to see more or get in
touch, my contact information is provided below.
Email: gemma@mail.com
Website: about.me/gfornons

28. Thank you!