Project Vision
Firsthelp is a free first-aid learning platform designed for all users to understand the basics in advance so that they have knowledge to help themselves when in accident. The product is available on both dedicated mobile app and responsive website.
The goal is to design the app for social goods which aims to encourage people to learn first-aid in order to understand basic knowledge as well as allowing users to get quick access to emergency contact numbers and nearby hospital locations.
Challenges
1. Design an emergency mode to support users that need quick information
2. Create a user-friendly interface for familiar and unfamiliar users
3. Create a seamless learning experience for all users
Kickoff
Initially, I intended to create a first-aid learning app and responsive site for social goods. I planned to design a user-friendly site that emphasize on learning experience so that people at all age can learn easily so that they are confident when they have to help others in urgent situation. So I interview users to gain some initial insights. What is surprising is that users expect the app to be able to help them while in emergency situation. That is the reason why the emergency mode of the app is also taken into designs.
Here are some key questions that I interviewed users:
-
Have you practiced doing first-aid before?
-
When is the latest that you conducted first-aid?
-
How confident are you when you have to do first-aid?
-
How important you think of learning first-aid in advance?
Personas
After empathizing, I came up with 2 different personas. One focused on using the mobile app. Another focused on using the desktop website. I defined their pain points as the stated problem statements below.
User Journey Maps
Competitor Analysis
I compared the three most popular first-aid websites and a local app. By analyzing and comparing the strengths and weaknesses, I found a gap to develop my product further to best serve the users needs.
-
None of competitors have an emergency mode
-
Most of them provide too much information
-
All don't have a nearby hospital search feature
-
Each of them has only one language
-
Some of them don't have interactive quizzes for learning
Brainstorm
My ideation stage of sketching the crazy 8's to find possible solutions for the product. Other than that I combined these ideas and started sketching the features that will benefit the users as much as possible.
Starting The Design!
After identified the user flows and did lots of sketches, I created a digital wireframe which later is developed to be a low fidelity prototype.
Dedicated mobile app flow
Responsive design wireframes (Desktop, Tablet, Mobile)
Information Architecture
Once I had created a rough concept of features and how they'd be organized, I gathered ideas up as the sitemap shown. This helped me understand which screen states I needed to design better.
Conducting Usability Study & Get Feedback
I did a UX research study plan and planned to interview 5 people with wide age range and different backgrounds. I conducted moderated usability studies for both lo-fi and hi-fi prototype which the main findings uncovered are as shown.
Users couldn't see the emergency call button because there's only numbers provided.
Users are confused of the separation of the call list and nearby hospital features because they couldn't decide which one to access first when in emergency.
Users couldn't notice the learning section clearly as I didn't provide clear detail descriptions.
Examples of affinity diagrams to identify common insights that needs to be improved.
Before VS. After Usability Study
>
Users couldn't see the emergency call button because there's only numbers provided
The emergency number with a call button is provided on the home screen to support users for quick contact
Users are confused of the separation of the call list and nearby hospital features because they couldn't decide which one to access first when in emergency
>
Both features are combined into one page (S.O.S menu) allowing users to find everything at a glance
Users couldn't notice the learning section clearly as I didn't provide clear detail descriptions
The sections are clearly labeled with a description and a progress percentage of learning
Challenge Accepted!
Solving Challenge 1 : Emergency mode to support in urgent situation
As users expected to be able to get quick access not only the tips but also the phone number, the instant call button is added to the homepage to let users easily call when in in need.
Solving Challenge 2 : User-friendly interface for familiar and unfamiliar users
I designed concerning the colors and UI elements that make users feel casual when accessing the site. I also provided illustrations and outlined a straightforward user flow to create an easiest experience for all users.
.png)
Solving Challenge 3 : Create a seamless learning experience for all users
Not only an easy and straight forward flow but also providing a consistent design across platforms for users to choose based on their needs.
Style Guidelines
As a brand identity, I wanted to emphasize a user friendliness color for all ages so I picked turquoise tone and emphasize clearly with a red color which represents emergency. The elements have a round corner to give a casual vibe for learning, not formal. The design on both mobile-based and web-based are consistent.
Product Mockups
Next Steps
The app and website need to be updated based on the latest usability test feedback to enhance UX. Following this, I plan to incorporate additional flows and content for a more realistic user flow, ensuring the product's utility and user-centric design.
Key Takeaways
The good design comes from good process of empathizing and ideating but the better design will come after the usability test. What I think is good enough for users is never always correct. Users provide a useful feedback which makes the product even more better. That’s why it is said that ‘always put users front and center in design’.