Sean Baik — zerOth

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

Wireframing

User Testing

Prototyping

Test & Launch

phase 01

Empathizing with the user.

Adults who lack the confidence and knowledge to perform emergency care before professionals arrive.

Emergencies happen. Whether or not there is someone capable of lending a helping hand, you may find yourself in an urgent situation where every second counts. While even a small reaction in the right direction could help save a life, not everyone is equipped with the knowledge, or qualified enough, to know what to do. Obstacles that the primary user group faced include medical anxiety, lack of resources, confusing UX, and dull UI.

Key Pain Points

Continuity

Medical training and emergency care apps and websites are not offered with the same experience across various platforms.

Ease-of-Use

Available platforms showcase a cluttered UI with too much information for inexperienced users to understand and use.

Accessibility

Many medical apps have cluttered user interfaces that make it difficult for users with disabilities to easily navigate.

Interface

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.

Location

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.

Interactivity

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.

SOS

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.

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.

Responsive Website

Experience the high fidelity prototype

↗

Dedicated App

Experience the high fidelity prototype

↗

Crafting with intention.

ACCESSIBILITY CONSIDERATIONS

Hierarchy

Clear visual hierarchy was implemented to support ease-of-use and intuitive navigation for screen readers / ATs.

Audio

Audio support for emergency care guides allows for users to perform first-aid without having to read or see the screen.

Anchors

Landmarks, fixed navigation bars, and CTA buttons were used to help users move through the site fluidly

BRAND DEVELOPMENT

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.

#80D0F4

#E9F8FF

#F2F7F9

#EB5545

#909090

#000000

#FFFFFF

SF Pro Text

Semibold, 25 px

SF Pro Text

Semibold, 20 px

SF Pro Text

Medium, 20 px

SF Pro Text

Regular, 20 px

Title

SF Pro Text

Bold 18 px

Body

SF Pro Text

Medium, 18 px

Subtitle

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

Takeaways

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.

Lessons

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.