Case study: Info BMKG App Redesign

Disclaimer: this is a personal final project at Dibimbing

Introduction

Hello, I am Lenny. I was studying at Dibimbing bootcamp. Since I joined, I have learned a lot of things such as Design thinking to fathom the user needs, research plan and analysing research insight to make report, wireframing and mockup to design visualitation and more. In my final project, I want to discuss a case study the Info BMKG application.

Overview

Meteorology, Climatology, and Geophysical Agency (Indonesian: Badan Meteorologi, Klimatologi, dan Geofisika, abbreviated BMKG) is an Indonesian non-departmental goverment agency for meteorology, climatology, and geophysics. Info BMKG is an application from BMKG.

Role

UI/UX designer

Scope: User research, analisa, user flow, information architecture, wireframing, mock-up, design system, prototyping, and usability testing

Timeline : 4 weeks

Tools: Miro, Figma, WhatsApp, Zoom, Googlemeet, Voice Recorder

The Process

I use design thinking in the implementation of this case study. Design thinking is a way of thinking to solve problems with a User-Centric approach, to get solutions that are creative, innovative and what users need.

Empathize

At this stage, I will research to understand what users do, say, think and feel. Therefore, I made a research plan, a guide to the research stages, and user interviews.

Background

Since many natural disasters occur, especially in areas where natural conditions change frequently, the community needs information from the BMKG, which is functions to provide information in the fields of Meteorology, Climatology, Air Quality and Geophysics. So, the BMKG info application has a great opportunity to increase the number of users.

However, I think we need to know the responses of users of the Info BMKG application and their level of satisfaction to increase the comfort of using the Info BMKG application. Therefore, I use this application for my final project.

Existing App

The Info BMKG application is an application officially released by the Meteorology, Climatology and Geophysics Agency (BMKG) on May 6, 2012. This mobile application provides information on Weather, Climate, Air Quality, and Earthquakes that occurred in Indonesia. The features are very complete, there are even Weather Early Warnings, BMKG Press Releases, Notifications and Two Languages.

The Info BMKG application has been downloaded by more than 5 million users and has a rating of 4.6 on the PlayStore. Based on the many reviews given by its users, including display problems and others. Here are some reviews on the Google Play Store.

Planning the Research

Objective

The objective contains things to be achieved in this research, namely to understand how users use the Info BMKG application. So we need to know more about the problems experienced by users of this application.

Methodology

Kualitative — In Depth Interview

Sampel Spesification

The sample specification is the right target user to meet the objective.

1. Active users of the Info BMKG application for the last 3 (three) months
2. National Scale
3. Man / Woman
4. 18–50 years old
5. Have accessed the application at least in the last 1 month

Key Information Areas

is the information to be explored in this research, namely:

1. User profile
2. The general behaviour of users when using the BMKG Info application
3. Feedback and suggestions from users of the application
4. Difficulty in using the Info BMKG application
5. The Info BMKG app user ratings
6. The Info BMKG application user expectations

Discussion Guide

Conducting the research

The research carried out using the Zoom application.

Define

At this stage, we collect various information that has been obtained during the empathize stage. Then analysed and found the core of the problem.

Competitive Analysis

Competitive analysis is one of the methods used in research. This method compares applications similar to the application and identifies the weaknesses and strengths of competitors and opportunities that can be created.

The advantages of this method are:

• Help solve application usage problems, according to the definition of use
• Understanding the state of the product in users
• Informing the design process
• Know competitors’ strengths and weaknesses
• As evidence to make product changes
• Focus on the target market

(Source: Douglas)

Affinity Diagram

An affinity diagram is a method used to map a collection of similar information/facts to be more specific so that it can be analysed. The first thing I did was load the theme based on the user flow stages, then enter the problems found in each flow (the stages that the user goes through when using the BMKG Info application). After grouping the problems, pair the solutions that have been determined based on each problem that exists. Then group the solutions into groups in segments in the BMKG Info application.

Based on the verbatim, it can be seen that the features that are often used from the interviews are the Weather and Earthquake Forecast features. Then we get 2 themes, namely user responses to weather features and user responses to earthquake features.

Users who often use the weather forecast feature. They like the simple display and provide direct information, but the drawback is that they have to find the location manually. It would be more fun if they could use GPS automatically and arrange the names of regions/provinces in alphabetical order. In addition, the weather display is better to just be one, not separated like the current display and need an automatic refresh or refresh notification.

Users who often use the earthquake feature, they like this feature because it provides the latest information related to earthquakes. So far they are quite satisfied with the appearance of this feature. However, there are difficulties in displaying too many writings and the need to add the MMI scale in the menu of recent earthquakes and major earthquakes.

In addition, there are several complaints regarding the glossary needed to understand terms/words that are difficult to understand, especially for new users, so it is better not to combine it with the ‘About’ feature. The appearance of the homepage needs to be improved for viewing comfort, such as writing highlights.

Based on the results of the interview, we get information that there are several features that are rarely used but are interesting to know, these features are: Climate, Air Quality, Maritime Weather, Aviation Weather, and Forest and Fire Weather.

Actionable Insight

So what we will do next is

1. improve the appearance of the Home page because on this page important information is placed, especially weather and earthquake forecasts.
2. Improve the appearance of the Weather Forecast feature by improving the display of weather info, adding automatic GPS to application settings, sorting alphabetically by area/province names, and provide automatic refresh of settings
3. Added MMI info to major earthquake menu
4. Moved glossary to separate menu for easy discovery

User persona

Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way.Creating personas will help you to understand your users’ needs, experiences, behaviours and goals (Siang and Dam, 2021)

Customer journey mapping

Journey mapping is one of the most powerful and commonly used tools designed to map/describe how users reach their goals. When we combine storytelling and visualization we immerse ourselves into the client experience (Bakusevych, 2020)

Limitation

Based on the interview results and affinity diagrams, we know that the parts of the application that are often used are the

1. Homepage
2. Weather and Earthquake Forecast
3. Glossary

so I want to improve the display in order to provide a more pleasant experience for users.

Ideate

User flow

User flow is a series of steps used by users to achieve their goals. At this stage the user shows their steps when using the product to completion.

Designing pages for websites and apps doesn’t always give the best results. At this stage of the design process we separate the look, feel, and process on what the user wants. An alternative step that we can do is to design user stages (user flow) so that we can focus on what the user needs to do and how to deliver it in the most effective way possible. It aims to provide a more pleasant experience for the user because they are the main focus (interaction-design.org).

The user flow that we got based on the previous step is

Information Architecture

According to the web iaistitute.org, information architecture is the practice of deciding how to arrange the parts of something to make it easier to understand. Meanwhile, according to uxbooth.com, IA helps people understand their environment and find what they are looking for, both in the real world and online. In other words, IA is the creation (manufacture-preparation) of structures for websites, applications or other projects, which allows us to understand where we as users and where the information we want in relation to our position (Feisal, 2018)

IA to case this study are

Wireframe

Before making a mock-up, I first made a wireframe as a schematic or blueprint (a detailed description of a plan) to help me think and communicate about the structure of the application design that will be made. here is the wireframe of the redesign of the BMKG Info application:

Mockup

Mock-up is the final result of a design. At this stage we create a combination of styles, colours, typography, and more. After going through several stages of research and ideas, the mockup for redesigning the BMKG Info application is as follows:

To find out what improvements I made, I will compare the differences between the old and new designs, as follows:

Design System

Making this design system will help us and the team in the future in developing existing designs

Prototype

After the empathize, define, and ideate stages have been carried out, I create a Figma prototype.

To see the prototype of the Info BMKG app redesign, you can try it here:

Link Prototype (Info BMKG Redesign App)

Test

Usability Testing (UT)

UT is useful for testing whether the new design that we create can help users complete their tasks. The UT process was carried out online using zoom. This UT was conducted to evaluate new designs.

Link Usability testing (Info BMKG Redesign App)

Task given

I ask the user to do scenarios:

1. Imagine if you want to know the current weather conditions and your family in North Banjarmasin and West Banjarmasin, but you are a bit confused by some of the terms in the display. What would you do?
2. If you get information about an earthquake that was felt but you want to know how much MMI happened. What are you doing?

So, the tasks :

1. Finding the weather in north banjarmasin and west banjarmasin
2. Finding the glossary
3. Finding MMI information on the earthquake page 5.0

Summary Insight

Design Recomendation

Maybe in the future this design will be even better if the appearance of the design is improved to be more colourful (especially those that are not much white) so that users are more comfortable using this application. Unfortunately, due to time constraints, I can’t do it yet. I hope in the future I can do better designs

Appendix

Douglas, Stephen. https://usabilitygeek.com/how-to-do-ux-competitor-analysis/

Bakusevych, Taras. 2021 https://uxdesign.cc/ultimate-guide-to-customer-journey-mapping-ux-tools-series-b973ca442213

interaction-design.org https://www.interaction-design.org/literature/topics/user -flows

Feisal, Daeng Muhammad. Get to know Information Architecture (IA). 2018 https://medium.com/uxid/mengenal-information-architecture-ia-24f517c61155

Lessons

During this final project I realized that the work of a UI/UX Designer is not easy.

Thank you for read this article. Please give feedback so I can be better.