This is a small personal side project where I redesigned Gempabumi page of Info BMKG App.
BMKG is an Indonesian non-departmental government agency for meteorology, climatology, and geophysics. Recently I visited the app because of UI Design Challenge held by League by Design Jam Indonesia. I realize there are lots of improvement that can be done from the app. So I decide to redesign it from a UI Designer’s perspective.
Improve visual hierarchy.
Discover more about earthquake in general.
Communicate my design process.
Before I jump into the design, I define some principles as my guidelines.
Recognizable
In few glances, user can know important information about the earthquake
One Information at the time
This can help user navigate and focus on important information
Keep It Simple
With better visual hierarchy, it can minimize user distraction.
I mainly redesign the “Gempabumi” section. Here’s how the current design looks like.
The overall design looks good. Text and background has good contrast, the color looks completely fine to me with minimalistic vibes. But there is one or two things that can be improved visually, from layout, hierarchy, alignment, contrast, and typography.
The first thing I notice is text-to-background contrast. I use contrast plugin in Figma to check the contrast ratio of active text and background.
As you can see the active text color (#7BEF12) and background color (#4F85DF) has terrible contrast.
Next, the active button tab indicator which is I hardly notice because of the color and position. So I change it to make it more subtle and easy to noticed. Also I slightly change the height to 130px (status bar included) for better whitespace and breathing room elements inside.
I notice few issues within the navigation bar, such as:
Icons are too complex.
Unfamiliar and ambiguous icon for general people.
No text labels that describe navigation bar destination.
So I change the icon to be more consistent, minimalist, and familiar. Then I add label text that provides short descriptions of destinations..
Here are few things that I improved from previous design:
Redesign active indicators.
Change the icon to be more consistent, minimalist and familiar.
Add label text that provides short description of destination.
Earhquake Information
The main problems are:
Time and magnitude information doesn’t feel connected and the position is not good for scanning.
The center alignment in time information makes reading experience quite hard and decreasing the users reading speed.
Inconsistent icon colors and size.
Inconsistent icon to text distance.
The Solution:
Display earthquake location as the first information, followed by magnitude and tsunami warning indicator.
Additional information appear when user slides the bottom sheet.
Consistent icon sizes and colors.
Similar information group together for better reading experience.
The overall design is good, but I think it lack of visual hierarchy and customisable. So, I tweak one thing or two for make it more appealing.
Add information filter so user can filter it by location and magnitude
Add total ongoing earthquake information.
Improve card visual hierarchy by add red background in magnitude information so it grab user attention first, increasing location font size and weight, and better icon usage.
