Motion Graphics
Exploration on sequential organization of information in time, and how pacing, rhythm, and transition can influence and construct meaning.
Adobe After Effects | Adobe Aero
Safety
Home
Create 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.
Reassurance
Profile
Tap on your friend/family member's avatar to focus the map and retrieve their most recent location and contact information. Navigate to the Profile section to edit your own profile details, manage all your contacts, and adjust basic settings.
Communication
Update Status
Indicate your current status during or after a disaster by selecting one of the following options: "I am safe," "I need help," or "SOS." Choosing "SOS" will promptly dial 911 and furnish emergency responders with your current location.
Alertness
Connect
Features include instant messaging, photo and video sharing, audio recordings, group chats, and calls. You can also stay informed by reading updates from regional and BC government news sources and listen to live radio broadcasts offline.
DESIGN PROCESS
01 EMPHASIZE
EMPATHY MAP
Pain Points
User Research
The importance of communication has been a prominent area of study, with numerous research papers highlighting the need for reliable communication methods in the context of past events such as the 2010 Haiti earthquake and the 2011 Tōhoku earthquake and tsunami. One of the key user groups identified comprises individuals who consistently engage in communication with their friends and family.
“I want to reach out to my children as soon as possible during and after an emergency disaster.”
As an accountant, Michelle works five days a week and only meets her children after work. She is looking for a tool that will help keep her family prepared for any emergency situation and allow her to stay connected from any location, even across long distances.
02 DEFINE
Design Opportunities
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.
USER JOURNEY
Mapping out the user journey of persona, Michelle, revealed the different touchpoints for users to access a dedicated app during an emergency.
03 IDEATE
COMPETITIVE AUDIT
Comparing the navigation experience to observe the unique advantages each system offers to users and evaluating where ConnectQuake stands in the market.
BIG PICTURE STORYBOARD
CLOSE-UP STORYBOARD
04 PROTOTYPE
IA SITEMAP
WIREFRAME
Taking the time to draft iterations of each screen on paper ensured that the elements made it to digital wireframes would be well-suited to address user pain points.
User Test
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.
05 TEST
USER TEST STUDY NOTES
AFFINITY MAP
Findings
Accessibility
Pay attention to size, font weight, color contrast, and position for user accessibility.
Clarity
Lack of CTA text and tooltips beneath buttons and icons for clarity.
Intuitivity
Enhance visual cues to help users intuitively access app features.
"I like to use two hands for faster navigation."
Participants found the size and placement of some buttons to be impractical for one-handed navigation. They expressed a preference for using two hands for better comfort. As a response to this feedback, adjustments were made by changing the positions of the buttons and incorporating smoother animations.
Challenge
A challenge in user experience design is ensuring smooth interaction with the screen during emergency situations. The design must accommodate users' need to navigate using their fingers in high-stress or urgent scenarios. To address this challenge, the design process involves a thorough examination of various interaction scenarios, including how users engage with the screen using one hand, both hands, and through gesture movements.
POSTER DESIGN
Next Steps
Testing
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Low Bandwidth
Explore other possible assistive technologies and expand offline usability, such as offline map download and navigation.
Experience
Consider adding low battery mode, dark mode, and other possible ways to improve the 'change status' feature with gesture design.