Emegency care.
Wherever you are.
UX Designer
6 Weeks
Product Design
View in Figma
Hero image
zerOth is a first-aid based medical platform built for social good, where users of all proficiency levels can easily access, follow, and learn emergency care procedures. Available both in standalone app and responsive website formats, zerOth offers users the ability to summon first responders, locate nearby facilities, and access personal medical data wherever they may be. The goal of this innovative product is to give people in our community a greater chance for survival before it's too late.
The Challenge
How can we develop an easy way for adults to learn, train, and perform first-aid care procedures, like CPR? Currently, available first-aid and emergency care platforms have lackluster UI’s, unintuitive user flows, and poor continuity between devices.
The Vision
Design an all-in-one medical platform dedicated to helping people easily access and learn emergency care procedures, locate and summon professional help, and find adequate aid and resources wherever they may be.
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
UX Research
User Testing
Hi-Fi Mockups & Branding
Test & Launch
phase 01
Empathizing with the user.
Key Pain Points
Medical training and emergency care apps and websites are not offered with the same experience across various platforms.
Available platforms showcase a cluttered UI with too much information for inexperienced users to understand and use.
Many medical apps have cluttered user interfaces that make it difficult for users with disabilities to easily navigate.
Competitors’ platforms do not offer intuitive interfaces, making it difficult for users from various age groups to easily interact with.
Meet the users.
James Richardson
35, Tax Attorney
Primary User
James is a busy Tax Attorney living in Scranton, PA. To maximize time away from work, they enjoy spending time with family outdoors. No matter where they may be, James is always prepared to react to any emergency. They are not comfortable using dedicated apps, and prefer using the website app in their smartphone to navigate their daily needs. James wants a way to learn how to perform first-response services before and during an emergency situation.
Susan Lee
22, Store Clerk
SEcondary User
Susan is a full-time store clerk living alone in London, UK. They enjoy exercising regularly as well as finding ways to stay healthy both mentally and physically. They use a few health apps, and have recently discovered that there is no platform that helped people identify and respond to emergency illnesses or life-threatening situations. Susan wants an accessible and intuitive app that helps them easily understand how to perform first-aid services like CPR
Mark Robles
25, Elementary School Teacher
Tertiary User
Mark is a full-time elementary school teacher living in Miami, FL. They greatly enjoy their career in education. During their free time, they like volunteering at the local shelter to help those in need. They know few personal health and medical apps, but have never used a first-aid training app. They are eager to learn about the basics of emergency care. Mark wants an easy to understand, enjoyable app that helps them learn how to perform first-aid services like CPR.
Analyzing the competitive landscape.
To better understand the impact zerOth would have in the real world, I conducted an audit of direct and indirect competitors.
This detailed analysis provided direction on gaps and opportunities to address with my new medical platform.
phase 02
Kicking-off the design.
Laying the foundation.
Lack of continuity and dull user interfaces were key pain points for our target users. With that in mind, I developed a sitemap that would not only increase interactivity, but also give users access to seamless multi-device usability. The main objective was to develop a strong information architecture and hierarchy considerations that would enhance the navigational flow for the users.
Sketching on paper.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes. In addition, a final version combining all of the starred features was developed to help guide the design further. I then sketched additional wireframes for each primary screen as outlined in the sitemap. Drawing the wireframes on paper helped me come up with consistent designs in a short amount of time.
Screen size variations.
Keeping in mind that an emergency situation can occur anywhere, I made sure to provide users with the option to access zerOth on a variety of different devices. To make this possible, I designed wireframes for various screen sizes. This step was taken in order to make sure the site would be fully responsive.
App - Home
App - Emergencies
App - Guide
Mobile Website - Home
Mobile Website - Emergencies
Mobile Website - Guide
Going digital.
Transitioning into digital wireframes allowed for detailed visualization and understanding about how the design could help address users' needs, all while elevating the overall user experience. Positioning essential actionable buttons in locations that are easy to identify and select was the key focus for this phase.
Tablet - Home
Tablet - Emergencies
Tablet - Guide
Desktop Website - Home
Desktop Website - Emergencies
Desktop Website - Guide
Progressive enhancement.
When initializing the design process, I had to make a choice between graceful degradation and progressive enhancement. Considering how I was developing a product that was intended for use during emergency situations, I opted for progressive enhancement, and began working on the device that is most accessible to most users: phones. Once the mobile wireframes were complete, I jumped into creating sketches for larger screens.
Connecting the dots.
Following the first version of the digital wireframes, I developed a low-fidelity prototype in preparation for user testing. The main user flow is: summoning medical professionals and following a guide to provide first-aid before 911 arrives.
Testing for usability.
Two rounds of unmoderated, remote usability studies were conducted to determine if the main user experience, finding the right emergency and performing first-aid, was easy for users to complete. The goal was to understand the specific challenges that users might face in the emergency identification, care, and hand-off processes.
Round 1 - App
Round 2 - Web
Affinity mapping.
Arranging all of the notes taken from the usability tests and breaking them down to similar categories helped uncover common issues that the lo-fi prototype had, and it prepared me for the first round of iteration.
Prioritized insights
Rapid Interaction
Users need a quick and easy way to contact 911 before performing emergency care.
Users need a way to find nearby hospitals and share location to first responders.
Progress Tracking
Users need an easy way to  track progress without having to reach for their phone.
Visual Aids
Users need more visual aids when taking an online course to learn effectively..
Page Access
Users need a quick and intuitive way to find the list of emergencies to help.
Users need additional ways to navigate platform intuitively (i.e. gestures, CTA buttons).
phase 03
Polishing the design.
Home Screen
Taking note of the insights from the usability study, and combining them with the users' needs, I improved the Home screen by bringing a eye-catching FAB to quickly access help, adding a hero image carousel with CTA buttons, and removing clutter to simplify the overall experience.
List of Emergencies
In addition, easy to identify icons and color coding to differentiate between various emergencies were added to enhance the overall user experience, especially during an emergency situation. Furthermore, the FAB button is visible on all pages of the responsive website.
All emergency SOS pages include key actionable buttons that serve important functions during an urgent situation. Items including an integrated map, MedID, and Call 911 were refined to better match the expectations of the users.
Final Mockups
Connecting the journey.
The final high-fidelity prototype features a newly improved primary user flow, taking the experience of summoning medical professionals, identifying emergency situations, and learning first-aid to an entirely new level. In addition, it now showcases a refined secondary user flow, where users can easily enroll to classes, take courses, and get certified online.
Crafting with intention.
Clear visual hierarchy was implemented to support ease-of-use and intuitive navigation for screen readers / ATs.
Audio support for emergency care guides allows for users to perform first-aid without having to read or see the screen.
Landmarks, fixed navigation bars, and CTA buttons were used to help users move through the site fluidly
To complement zerOth's intuitive and feature-packed user interface, I aimed to build a professional yet approachable brand image that conveyed a sense of comfort and trust. I incorporated different shades of blue, which represents "stability and calmness", to further emit a tranquil aura that seeks to counteract any level of anxiety and worry that may arise during an urgent medical situation. This theme was implemented across the entire platform to achieve a consistent brand identity.
SF Pro Text
Semibold, 25 px
SF Pro Text
Semibold, 20 px
SF Pro Text
Medium, 20 px
SF Pro Text
Regular, 20 px
SF Pro Text
Bold 18 px
SF Pro Text
Medium, 18 px
SF Pro Text
Semibold, 15 px
The name zerOth derived from the literal word zeroth, which means "immediately preceding what's first in a series." This represents all the people that take care of a patient before first responders arrive at the scene - the zerOth responders. The letter "O" was capitalized with a strike in the middle to symbolize the number zero, making it easily replaceable with the first part of the full word to recreate the minimal logos. In addition, "Oth" can be read as "oath", which is defined as "a solemn promise regarding one's future or behavior," which represents zerOth's commitment to contribute to social good.
phase 04
Moving forward.
"zerOth made me believe in a future where everyone is finally equipped with the right tools when we need it most."
- Participant from Usability Test
Users shared that the app and website made emergency care and contact much easier than they ever expected. While calling 911 and requesting help is a standard course of action for most people, being able to step into the scene to help increase the chances for a patient’s survival poses a completely new solution for everyone around the world.
Throughout the entire process of designing this app from conception to delivery, I learned that the best solutions come about when we listen to our users and let go of any biases that may come along. In the end, the user’s are the ones who will experience and use our products, which is why their feedback matters the most, especially when it comes to designing for social good.
Next Steps
Conduct research on how to make 911 calling and summoning quick and practical for devices like tablets and desktops.
Conduct additional usability tests to assess the level of impact zerOth has on everyday medical emergencies.
Develop new training programs and online courses to expand options for users and enhance the experience.
Up next.