Designing an improved digital experience to increase user engagement and modernize UI for an earthquake app.

Product Design
User Research
Prototyping
Client
MyShake is an earthquake app with 3.8+ million users, made by Berkeley Seismological Lab, USGS, and Cal OES.
Team
5 Designers
1 Project Manager
1 Developer
Skills
UX Design & Research, Visual Design, Design system, Product Strategy, Figjam, Figma, Google docs
Impact
Conducted user interviews and market research, created new modernized design system, restructured IA, increased user engagement by 35%
image of website on a laptopimage of website on a laptop

Overview

Problem

The app is currently outdated and lacks a good onboarding user flow. From user research, we found that users disliked the UI and has confusing navigation. There was a lack of purpose for users to be using an earthquake app. The goal was to retain an average of active users per week.

Solution

Our solution was to redesign MyShake to be an all-in-one earthquake care package. This included a brand new design system, restructured IA, dark/light mode customizations, and new features to increase user engagement and active users.

interface
MyShake Team
Project Scope

More information on the current state of MyShake

MyShake currently holds 1.7k reviews on the app store, with an average rating of 3.2 out of 5. This indicates a significant number of dissatisfied users, which we aim to address in order to enhance user retention. Our objective is to establish MyShake as the leading earthquake application in the market. Our unique value proposition lies in being the sole application that provides government alerts a few seconds prior to the onset of an earthquake.

1. Better distinction of EEW and CNN
2. More intuitive and faster navigation to important features
3. Better organization of content and features
4. Modern, more app-like aesthetics
[interface] image of a computer showcasing educational software (for a edtech)

Competitor Analysis Takeaways

Through the competitive analysis, it was found that the priorities were to simplify the app, have more features that catered for checking in on loved ones, intuitive navigation, and utilizing the half-screen map list better.

Prioritized Simplicity in UI
Redesigned an e-commerce flow for clarity and ease, boosting conversions and delighting users.
Useful features
Created a wellness app experience that empowers users to track progress and stay motivated.
Intuitive and relevant organization and navigation
Simplified smart device controls for a more intuitive, accessible connected home experience.
Half-screen map/list
Developed a collaborative trip planning tool that brings friends together, from inspiration to itinerary.

user interview highlights

Real feedback, real results

To solve what users needed in the landing page, I conducted 3 user interviews with a range of ages to fully understanding what they expect from this app. I also gained information on why they would user the app. I also asked them to do a cognitive walkthrough of the current app.

[headshot]
Man, 21 years old

"I am not sure if I would use this app unless it told me what to do and let me know ahead of time."

[headshot]
Man, 52 years old

"Current app is not that pretty to look at. The navigation in setting up is confusing as well. What is "

[headshot]
Woman, 54 years old

"I would want to be able to check in on my loved ones and see the earthquakes relevant to me. I am also not sure how to set up my own homebase."

USer survey highlights

Understanding users from a larger perspective

We surveyed 30 respondents across age groups and levels of interest in earthquakes.

What are features you expect from an earthquake app like MyShake?

Early alerts including when, where, and how intense. A safety / preparation kit and notification of family/rescue teams of safety/location where there’s no service.

When you first open an app like MyShake, what would you want to see?

Map/list of recent earthquakes, earthquake info / safety tips or a daily report chart like the weather app

‍

If you use MyShake (or equivalent), what do you like and not like about the app?

Likes: easy to use, live censor, alerts

Dislikes: UI is not user-friendly or aesthetic, "i feel shake" button is confusing, font/logo, map doesn't have color

Overall takeaways of user research.

Synthesizing all information gained from our research, we found the main reasons users would use a earthquake app and their expectations.

Priority #1: Personal Safety

Being crushed by falling objects, building collapse. (Getting to safety)

Priority #2: Family Safety

Knowing their status and location after an earthquake.

Priority #3: Property Damage

Potential damage to homes and belongings.

ideation

Sketching ideas

Taking our research, we created sketches based on our new IA. This also brought up new questions and concerns alone the way such as how should the landing page look, how should the pinned locations be shown, and what relevant details do people want to see.

<subject>[interface] image of a screenshot of a learning module (for a edtech business)</subject>
Interaction, drop down list
Clicking on on a listed earthquake would drop down to a detailed view where it would show graphs, how intense an earthquake is, and report information.
interface
Education Page
We could create more user engagement from daily facts about earthquakes. Safety information would be in the middle and trivias would be on the bottom to encourage learning.
image of tech solutions demonstration for hr tech
Half map and half list
We wondered how we should display the pinned locations where users could easily switch between maps to see different locations. We thought about having them at the very top and explored with the search bar being on top.
[interface] screenshot of the software interface (for a productivity tools business)
Uber-inspired dashboard
We believed this Uber-inspired dashboard could possibly make MyShake stand out as an all-in-one earthquake care package. Users would have easy access to all important information they needed to know based on our user research.

Putting essential features in order

Following a thorough analysis of user priorities, we developed an information architecture to determine the essential pages and features. It was concluded that the help page in the current application was redundant, functioning more as an FAQ. Consequently, my team and I opted to integrate this content into the profile page.

In light of the research findings, we decided to retain the map, recent earthquake updates, and safety information prominently on the landing page.

[digital project] image of digital artwork on a screen (for a graphic design studio)

Debating between 2 variations

Mocking up 2 variations, we contemplated on whether we should keep the half-map and half-list variation or our new bento dashboard. We wanted to get approval before we proceeded. We designed a mid-fidelity mockup and the team approved the new version of marketing MyShake as an all-in-one care package (V2).

Version 1
Version 2
interface
interface

Lo-Fi Variation #1: Map

In Version 1, we updated the UI and included a half-map and half-list. Pinned locations would be at the top and there would be a filter to set what magnitude and distance a user would want to see.

Landing with half map and half list of recent earthquakes.

In Version 1, we updated the UI and included a half-map and half-list. Pinned locations would be at the top and there would be a filter to set what magnitude and distance a user would want to see.

Recent earthquakes on bottom half section

In Version 1, we updated the UI and included a half-map and half-list. Pinned locations would be at the top and there would be a filter to set what magnitude and distance a user would want to see.

interface
interface
interface

Lo-Fi Variation #2: Dashboard

Landing on a personal earthquake dashboard with quick access to relevant features and content.

Map

When first opened up, location will be shown where you are located. When clicking on an earthquake near you, it will show that location.

Earthquakes near you / Safety Information

There will be a card list view of nearby/relevant earthquakes. When "General Earthquake Safety" is clicked, app will navigate to the safety tab. It allows for fast access to relevant information.

Design System

image of medicine boxes for a pharmacy

Introducing the improved MyShake

An all-in-one earthquake care package.

Redesigned UI

Every project starts with empathy. I dive deep into user needs to create solutions that feel intuitive and welcoming.

Movable Map

Great design is a team sport. I work closely with clients and developers to bring ideas to life, together.

Safety Information

Attention to detail matters. I obsess over the small things so every interface feels polished and purposeful.

Pinned locations

Design is more than visuals—it's about telling a story that resonates and inspires action.

Earthquakes near you listed

I believe in inclusive design, ensuring every product is usable and delightful for everyone.

Easier access to all important information

Curiosity drives me. I’m always exploring new tools and trends to keep my work fresh and relevant.

image of blog subscription (for a directtoconsumer electronics brand)

Provides peace of mind by enabling users to effortlessly check in on their loved ones' whereabouts. This feature is particularly beneficial for families with elderly members or children, ensuring they are safe and where they are supposed to be. Notifications are sent in real-time, allowing for immediate updates and reducing anxiety about the well-being of family members.

Offers enhanced personalization options, such as the ability to switch between dark and light modes, catering to user preferences for different lighting conditions. The user flow has been redesigned to be more intuitive, ensuring that navigation is seamless and user-friendly, which enhances the overall experience and accessibility for all users.

The interface is designed with a sleek, contemporary aesthetic that not only captivates users but also ensures they feel supported and informed. It consolidates all critical earthquake-related data, such as recent seismic activity, safety tips, and emergency contact information, into a single, easily accessible platform. This comprehensive approach allows users to quickly find the information they need during emergencies, enhancing their preparedness and response capabilities.

<subject>[interface] image of a screenshot of a learning module (for a edtech business)</subject>
manufacturing plant overview

Dash

View next project