UI/UX case study : Wave App

Indonesian’s Disaster Mitigation App

Disclamer : This work is part of skilvul Digital Talent Scholarship PROA UI/UX program that organized by the Ministry of Communication and Information of the Republic of Indonesia. Our team got the task to designing a natural disaster management application.

Product Overview

Indonesia is an archipelago country that surrounded by volcanoes. Therefore, Indonesia is the country with the highest potential natural disaster in the world. As UI/UX designer, we collaborated to make a breakthrough in designing an informative and easy-to-use named Wave App Mitigation Disaster Management.

Design Thinking Process

We are using Design Thinking methods, such as: Empathize, Define, Ideate, Prototype, Test and some improvisations to design Wave app.

1 — Empathize

At the first stage, we discussed the impact of natural disasters on people’s lives and classified the categories of natural disasters that often occur in Indonesia. After that we discussed how the community got information about the occurrence of natural disasters either before or after the disaster occurred.

2 — Define

After we researching, discussing, and gathering information, we got some pain point results. Then arrange them into HMW (How Might We) to solve existing problems.

2.1 — Pain Points

This is the pain points that we got from the discussion.

Figjam

2.2 — How-Might We

After we gathered the pain points, we continued brainstorming for HMW.

Figjam

3 — Ideate

At this stage, we collect several ideas that will be used as considerations for developing natural disaster mitigation applications.

3.1 — Solution Idea

In this ideation stage, we create an idea solution, which is to create an application platform with an attractive, interactive, and informative display. And then with our team we use the voting method to choose which idea is the best for developing the app.

figjam

3.2 — Affinity Diagram

In this section, we group the selected ideas into sections.

Figjam

3.3 — User Flow

Before the Wireframing stage and creating a High Fidelity UI Design, we created a simple user flow in the figjam file. With the user flow, we hoped that it can provide some user views and steps before using the application that my team and I will develop.

Main User Flow. — Figjam

App User Flow — Figjam

3.4 — Wireframing

Based on the results of the user flow then we proceed to the stage of making the wireframe.

Wireframing — Figma

4 — Prototyping

After we finished the idea creation, then we proceed to make a high-fidelity prototype so that the application UI is even better to understand.

High Fidelity — figma

To see a prototype of our application, you can find it at this link.

5 — Testing

After we complete the high fidelity prototype, the next step is to try or simulate the design that we have made. That’s why we’re looking for someone to interview and what users think of our design.

Respondent Criteria

• 18–55 years old
• All the general public who are employees and non-employees.
• Smartphone active user
• Have a good understanding of technology
• Domiciled throughout Indonesia
• Have the ability to speak Indonesian as a native language
• Have good articulation in communication

Test Scenario

• Introduction
• Briefly introduce the Wave application
• Q and A session
• Prototype testing based on:

1. [TASK 1] Asks the user to register and log into the application (stops at Home page)
2. [TASK 2] Asking the user to respond when receiving a notification that a disaster will occur
3. [TASK 3] Asks the user to create a Flood Disaster Report.
4. [TASK 4] Prompts user to make Emergency Service Call 112
5. [TASK 5] Asks the user to choose earthquake natural disaster mitigation
6. [TASK 6] Ask user to view app notifications that have been received and mark as read all notifications
7. [TASK 7] Prompts user to view Weather Forecast Information
8. [TASK 8] Asks the user to read the news/infographic of natural disasters and return home
9. [TASK 9] Requests users to view updated natural disaster info
10. [TASK 10] Prompts the user to view the question information about the application and natural disasters
11. [TASK 11] Prompts user to save user profile info and view report list
12. [TASK 12] Prompt user to Logout from Wave app

Asking the level of usability, convenience and satisfaction of the respondents each time they complete the registration, notification of natural disasters, and reports of natural disasters with a Likert scale
Interview session ended

Test Result

After finishing the prototype, the last step we should conduct is User Testing. We use :

• User Task Analysis method — a method to observe user behavior by interviewing them and recording the actions they take to complete a certain task or flow within our website or app.
• Single Ease Questions — a popular UX metric, a 7-point rating scale to assess how difficult users find a task.

In this case, we have a respondent: male, 31yo, work as a UI/UX Designer in Fintech Startup and live in Condet, Jakarta.

Conclusion

Wave is an application that provides real-time news and information about disasters in Indonesia, including Volcanoes, Earth Movements, Earthquakes, Tsunamis, Fires, Hurricanes and Tornadoes.

The steps in making a Wave application project with a Human-Centered Design approach. Design Process which includes Empathize, Define, Ideate, Prototype, and Testing.

Based on usability testing, our designs and iterations using the design thinking method are sufficient to meet these goals. However, there are some things that can still be improved in our design.

Based on usability testing, our designs and iterations using the design thinking method are sufficient to meet these goals. However, there are some things that can still be improved in our design.

Thank you for reading my UI/UX Case Study publication.