Designing a Medical Emergency SOS App
UX/UI Design
I experienced a real-life medical emergency with my uncle, who one morning struggled to breathe suddenly and urgently needed help. His son tried to assist but had no idea what to do in such a sudden, critical situation, which led to delays in getting the right help. Tragically, my uncle didn’t survive. It was a situation where no one was at fault it was simply a matter of not having the right resources or access to immediate help. As a son, he couldn’t have anticipated or been fully prepared for something like this.
In June 2024, when I got the chance to work on my UX graduate project, I knew I wanted to address this issue. Medical emergencies like these highlight a significant gap in resources and guidance, especially in India. This inspired me to take on the challenge of designing an app that could provide immediate, accessible support during critical moments.
Product: Life Line (SOS Medical Emergency App)
Status: Completed
Duration: 5 Months
Role: Product Designer
Tools Used: Figma, Trello, Google Forms, Pinterest
Problem Identified
Existing SOS Medical Emergency systems in India are complicated
There is no easy access to get help while in a medical emergency
The person has no idea on what steps to take while in a medical emergency
Opportunities
Bringing easy access to get help while in a medical emergency
Guiding user with quick medical steps to take
Save time as much as possible and get a quick help
Research
To begin my research, I started by creating a mind map to lay out my initial assumptions about the pain points users might face in medical emergencies. I wanted to confirm if these assumptions reflected real challenges, so I planned both qualitative and quantitative research methods, including interviews and surveys.
Mind Mapping (Assumptions)
For the interviews, I identified my target users and scheduled remote sessions with four individuals based in India. I converted my assumptions into specific questions to ask during these interviews. Through these conversations, I gained valuable insights into the challenges users experience during emergencies, which helped verify many of my assumptions.
Interview Data
Interview Questions
To further validate these findings, I created a quick survey on Google Forms based on the insights from the interviews and shared it with a broader group of 16 people in India. The survey responses showed similar pain points, which strongly aligned with the interview results. This confirmed that my assumptions were accurate and closely matched the real needs of users in emergency situations.
Survey Questions
Survey Data
Problem Finding
To understand the real problems users face, I started by organizing all the research data and digging deeper into it. I created a character a fictional person based on actual issues that users experience. This helped me see the challenges from a user’s perspective and get a clear idea of their struggles and goals.
Next, I used the "Jobs to be Done" approach, which helped me understand what users aim to achieve in emergencies. I then created an empathy map, where I looked at what users feel, think, say, and do. This helped me understand their emotions and how these feelings affect their actions when they need urgent help.
To learn more about the user experience, I created an experience map. This allowed me to see the common steps all users go through when they use current SOS services for medical help. After that, I created a user journey map to understand each person’s experience individually. This showed me any unique challenges faced by different users in emergencies.
Then, I wanted to understand what users expect to happen in emergencies. I used a mental model to break down each stage of their experience, pointing out problems and finding solutions for each step. This gave me a clear view of what users want and which issues need to be solved first.
With all this information, I moved to affinity mapping, where I grouped the insights from empathy mapping into categories. This helped me spot patterns in the problems, giving me a structured view of the issues. Finally, I listed all the pain points for each category and turned them into problem statements.
Each of these steps helped me understand the user's experience and also understand their deeper problems better. Now, I have a strong foundation to create solutions that truly address what users need during emergencies.
Problem Solving
At this stage of the project, I have a clear understanding of the core problems and what needs to be solved. To start, I did a competitive analysis to see how existing SOS services are addressing these issues and to check if there’s room for me to do better. I didn’t go into every SOS service worldwide but focused on some major ones.
Through this analysis, I noticed that most SOS services offer the usual way of getting medical help, like making a call. However, one service stood out it had a physical device with a quick action button to call for help. But I felt this wasn’t practical, as users might not always carry the device with them. There are also built-in SOS features on mobile phones, but my research showed that most people are unaware of these features and have never used them. This insight made me realize there’s a good opportunity here to make a difference.
Next, I worked on finding solutions. I used mind mapping based on my affinity mapping themes to brainstorm ideas for each problem. I did six separate mind maps, one for each theme, to explore different ways to address these issues. Once I had all my solution ideas, I combined them into a single mind map in a mobile app structure. I marked the essential features at the center and placed less important but practical ideas around the edges.
Now, I have a set of clear, practical, and feasible solutions that can truly address user problems. Each step in this process helped me develop solutions that are not only useful but also realistic to implement.
Now, I focused on organizing all the solutions clearly in terms of app features, arranging them in order with a detailed description of how each feature would work. At this point, I had a solid list of features for the app, but I also wanted to brainstorm how these features would look visually. I used Pinterest for inspiration, which helped me gather ideas on the design of some of these features, though I found only a few examples that matched my needs.
Work Break Down Structure
Archetype
Jobs To Be Done
Empathy Mapping
Experience Mapping
User Journey Mapping
Mental Model
Affinity Mapping
Problem Statement
Competitive Analysis
Mind Mapping (Solutions)
App Features List (Final Solutions)
Next, I created a user journey chart to map out the step-by-step process of how users would navigate these features in the app. Then, I developed a user journey map for a future scenario, imagining how a user would interact with the app during onboarding and in a medical emergency. This helped me analyze whether the features truly solved user problems and how they compared to existing SOS services. Through this mapping, I could see that each feature served a purpose and was making a real difference in addressing user needs.
For further validation, I sketched a storyboard to visualize the user experience, especially during a medical emergency for a loved one. This visual approach provided deeper insights into how users would start using the app and their experience in an emergency. These exercises reassured me that the features I designed were purposeful, practical, and aligned with solving real user problems. Each step helped me confirm that I was on the right track with my solutions and validated that they were effective and achievable.
Brainstorming ( Validating all the solutions )
User Journey Mapping ( Future State )
User Journey Chart
Storyboard
Brand Identity
At this stage, I had a clear solution in place and needed to give my app a personality and character through branding. I began brainstorming ideas for the logo, colors, typography, iconography, interactive elements, app name, and overall personality. The goal was to create a strong brand identity for the app. The app is called "Life Line," inspired by the idea that in emergencies, every second matters. This name reflects the idea that this app could be the "life line" that determines life or death. I wanted the brand personality to convey trust, hope, and reliability. With this in mind, I explored color schemes that would suit this personality. Initially, I thought of a colorful palette, but later, in the design stage, I realized that simpler, minimal colors like red and white would better convey a sense of urgency, reliability, and emergency readiness. For typography, I wanted a style that was simple and easy to read while still reflecting the brand’s personality. I chose fonts that were clean and legible to enhance the app's usability and accessibility. While I didn't go very deep into the branding details, as my main focus was on solving user problems, This simple brand identity supports the app's purpose and values. It creates a brand that feels trustworthy and reliable, matching the core mission of "Life Line."
Brainstorming
Prototype
Now that I had a clear identity for my app, I wanted to build a structure so I could move forward with prototyping. I started with information architecture by sketching the app's structure roughly on a whiteboard. I arranged all the features in a way that would make navigation simple and kept a clear hierarchy in mind. This quick sketching session, along with a basic site map, gave me a first look at how the app might take shape.
Using these sketches as a reference, I created a detailed user flow, breaking down each step to see how users would go through the app. This helped me understand the user’s journey, including the different steps they might take. I then made a clear site map to set up the app’s structure, making sure it would be easy for users to navigate and understand. Although I made some adjustments later in the design phase to improve user-friendliness, this user flow and site map provided a strong foundation.
With the app clear structure, I then focused on its visual look, including navigation elements, layout, and placement of all components. I started creating concept sketches to get a feel of how the app would look, focusing on better placement, a clear hierarchy, and highlighting important features. I also kept some design principles in mind, like making the app easy for users to remember and recognize.
At this stage, I felt confident about the app’s look and structure. I had a clear idea of how it would be organized, visually appealing, and easy to use.
Now it was time for execution, and I was excited because this was when the idea would turn into a realistic, working prototype. I began by transforming the concept sketches into low-fidelity wireframes. This first stage of wireframing helped me set up the basic structure, placements, elements, and overall flow of the app, focusing on all the UI screens. I paid attention to alignment, padding, and how the app would look visually. This gave me a solid foundation for the app’s structure.
Once I was satisfied with the basic layout and structure of the wireframes, I moved on to high-fidelity wireframes. At this stage, I refined the design by adding colors, icons, typography, and imagery to give the app a polished look. I focused on usability, readability, visibility, and accessibility to ensure the design was fully user-friendly. After several rounds of changes, I felt that the design was ready to move forward with prototyping, as everything was properly aligned and cohesive.
Next, I concentrated on interaction design. I focused on a single, essential interaction making the SOS quick action button on the home screen tappable. Since this button is the heart of the app, it was crucial to test how users would interact with it. To explore this, I quickly sketched a circular design, which intuitively represents an SOS button, and checked if it was easy to tap. I tested various sizes to ensure they worked comfortably for different thumb sizes and assessed the interaction within a wireframe to verify usability. This initial testing helped me understand how well the design worked for this key feature.
Next, I connected all the app UI screens, creating a functional flow by linking each feature to make it tappable and usable. I followed both the user flow and app flow, ensuring a structured experience with the main interaction in place. This setup allowed users to explore how the app works, and it was finally ready for testing with real users.
User Flow & Concept Sketches
User Flow
Site Map
Concept Sketches
Low Fidelity Wireframes
High Fidelity Wireframes
SOS Quick Action Button ( Testing )
Prototyping
Usability Testing
At this point, I was ready to test the app prototype with real users to see how well the idea worked. I scheduled user testing sessions and, on the testing day, got users’ permission to record audio and take photos while they used the app. I started by explaining the app’s purpose and gave them a simple scenario: they would go through the onboarding, explore the app, and finally, imagine they’re in a situation where a loved one needs urgent medical help.
Since I expected users might tap the SOS button right away on the home screen, I asked them to first explore the app before testing the SOS feature. This way, they could experience the app fully and give me more valid feedback on how everything worked.
After user testing, I asked participants some quick interview questions to get their feedback and understand their experience. I recorded these interviews and later listened to them, taking notes to help me analyze the responses.
To find common issues, I grouped similar feedback into patterns. Then, I did an affinity mapping exercise, where I organized all the feedback into categories and gave each category a name. This helped me see the overall view.
Finally, I went through all the problems from the affinity mapping and picked the ones that made the most sense for the app. Since the feedback was mixed, I chose the points that were practical and added value to the app, without being biased by any one opinion.
Iteration based on users feedback
I started improving the design based on the feedback I got from users, focusing on the points that made sense for the app. I received positive feedback, with just a few design changes suggested. I worked on these changes, keeping in mind what would look good and be easy to use.
Key Feedback from Usability Testing
Positive Feedback from Usability Testing
Usability Testing with Users
Affinity Mapping
High Fidelity Wireframes ( iterated )
I designed this with a focus on visuals and appearance. From my experience, most app bottom navigation bars look similar, so I decided to try something different. This new design felt simple and looked good visually.
Once I had a clear view that everything looked good with the UI screens, I moved on to designing interactions. This time, I focused on creating deeper interactions that would keep the user informed and engaged at every step, enhancing the overall experience.
I redesigned the bottom navigation bar based on user feedback. Users mentioned that adding labels to the icons would make them easier to understand, so I added names to each icon. However, the older design felt crowded with these labels, especially since one of the four icons (for navigation) was only useful when the SOS feature was activated. I decided to remove this icon from the nav bar, as it didn’t need to be there all the time. This change made the layout feel less crowded.
When I added labels to the icons, I realized I needed to increase the nav bar height, which didn’t look good with the existing circular icons. The icons didn’t align well with the nav bar’s curved corners. So, I redesigned it with curved top corners and added shadows for a more polished look. With only three labeled icons, the design felt simpler, easier to read, and less cluttered.
I also refined the icons themselves, making them more relatable and easier to understand based on observations from user testing. Overall, it was a good transformation, making the app more user-friendly.
Before
After
Once I had all the interaction designs ready and working on the UI screens, I started testing them myself to see how well everything was functioning. At that point, everything worked smoothly, and it felt like each interaction had a clear purpose.
Next, I connected all the UI screens to create a working prototype. This time, I went deeper with prototyping, making the app feel real, functional, and truly usable.
At this point, my app prototype is ready for the grad project handoff. I also decided to test it with real users again to gather feedback on how well the app works and how useful it is.
Final Product ( Solution )
LIFELINE is a medical emergency SOS app designed to help people provide immediate assistance to their loved ones during a medical emergency. The app is just one step away from offering multisource medical help. By long-pressing the SOS quick action button on the home screen, it alerts emergency contacts and prompts users to fill out a medical emergency form with four quick MCQs to send the right help. This removes the need for calling emergency services and explaining the situation.
The app also features live ambulance tracking with an estimated arrival time, designed to reduce user anxiety and keep them informed. It provides medical tutorials with quick steps and video guides for different medical issues, helping users stabilize the patient’s condition while waiting for the ambulance. These features are meant to keep users calm, guide them through necessary steps without stress, and ensure quick help.
Additionally, the app includes a chatbot to help users learn more about its features and services. LIFELINE is designed to be easily accessible, as most people carry their mobile phones with them at all times.
My initial goal for this project was to provide users with quick access to medical help, guide them on important medical steps, save time, and make the process as quick and simple as possible.
Feedback Gathered from Usability Testing
Interaction Design
Prototyping
LIFE LINE : SOS Medical Emergency App ( Final Product )