2022

2022

Experimental Case Study — Bookmark Manager on Mobile App

Experimental Case Study — Bookmark Manager on Mobile App

Manage your bookmark with comfort

Overview

Overview

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.

My Design Goals

My Design Goals

  • Improve visual hierarchy.

  • Discover more about earthquake in general.

  • Communicate my design process.

Design Principles

Design Principles

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.

Problems and Solutions

Problems and Solutions

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.

Tab Button

Tab Button

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.

Tab Button Result

Tab Button Result

Navigation Bar

Navigation Bar

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:

  1. Redesign active indicators.

  2. Change the icon to be more consistent, minimalist and familiar.

  3. 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.

Earhquake Information

Earhquake Information

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.

FINAL DESIGN

FINAL DESIGN