ROLE
UX/UI Designer | Individual Project
April 2022, 4 weeks
DURATION
CONNECT QUAKE
A disaster relief app targetting BC earthquakes - The goal is to bring families and friends closer with comprehensive safety on the go — all in one place during and after the disaster.
Design an app that allows for quicker rescues and reduce the impact of anxiety on victims.
THE
GOAL
High risk of communication failure during difficult conditions and disasters.
THE
PROBLEM
ACCESSIBILITY CONSIDERATION
Designing touch targets to account for the physical dimensions of users.
​
Uses icons to help make navigation easier.
​
Provides an online community feature within the app that allows users to communicate through both text and speech.
USER RESEARCH
The importance of communications has been a major area of study, with a number of research papers published highlighting the need for reliable means of communication during extreme event settings.
One of the key user groups identified was individuals who maintain frequent communication with their friends and family. Research from past earthquakes and rescue sites has also highlighted that the inability to stay in touch was not the sole factor contributing to their stress levels. Other problems faced by these users included seeking assistance after a disaster, receiving additional instructions, and identifying optimal locations to meet up with others.
PAIN POINTS
Reassurance: Unable to confirm that family and friends are safe, possibly seeking medical help for serious injuries
​
Safety: Slow search and rescue - calling 911 does not immediately bring aid as the rescue team requires some location information
Communication: Unable to make local phone calls, as phone lines may be damaged, and there may be a larger volume of people trying to make calls
​
Alertness: Earthquakes are often unpredictable and may occur during both day and night time
WIREFRAMING
Taking the time to draft iterations of each screen on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
LOW FIDELITY
Easy navigation was a key user need to address in the designs, in addition to equipping the app to work with assistive technologies. I created a low-fidelity prototype using the completed set of digital wireframes, focusing on the primary user flow that connected the basic features within the app, so that the prototype could be used in a usability study.
MEDIUM FIDELITY
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
CHALLENGE
BEFORE & AFTER
Efficiency: Early designs allowed users to see only the status on the home page, but after conducting usability studies, I added additional information, such as the location of the last update and coloured icons to show the latest status (e.g. a green check mark for safe).
Accessibility: During the second usability study, it became apparent that the choice of colours was causing frustration. After checking the colour contrast using WebAIM, I decided to use a darker shade of green in the colour palette of my app. This darker shade passes AAA accessibility standards, making it a more inclusive choice for app users.
Home
Create your private (invite only) groups with friends and family
Receive real-time location and health status updates from friends and family for smarter, faster assistance in an emergency
SCREENS
Profile
Tap your friend/family’s avatar to focus the map and get last updated location and contact information
Go to Profile to modify your own profile information, all contacts, and basic settings
Change Status
Indicate your current status during or after the disaster with "I am safe," "I need help," or "SOS," which immediately dials 911 and provides emergency responders with your current location
Connect
Instant messaging, sharing photos, videos, audio recordings, group chats and calls
Read updates from regional and BC government news
Listen to live radio without an Internet connection
IMPACT & LESSON
Separated by the hectic pace of modern life, I considered how to approach a design concept that will virtually unite our loved ones during an emergency disaster. We never know where we will be when a disaster strikes, and it is critical to keep the lines of communication open at all times. Connect Quake preserves all vital communication on one app, on a single screen.
​
The design process is a continuous cycle of prototyping and testing. Through repeated iterations, I refine my designs based on contextual feedback received from user testing. These testing sessions reveal flaws in my design and enable me to make necessary adjustments towards a more user-centric design.
NEXT STEP
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Explore other possible assistive technologies and expand offline usability, such as offline map download and navigation.
Consider adding low battery mode, dark mode, and other possible ways to improve the 'change status' feature with gesture design.