Revamping Data Input Feature

Duration
4 months
Skills
UX Research, Product Designer
Collaborators
Product Managers — Gerin Baskara QA — Thomas Frontend Developers — Fawwaz, Fellicia Carbon Project Managers — Zelvin, Ahmad, Lukman

Overview

Fairatmos is a B2B startup in Carbon Technology industry in Indonesia. During the time, it has over 5+ conglomerate clients. Clients and internal project managers frequently struggle with data entry, resulting in excessive support requests and inefficient meetings

Impact

  • +33.33% increase in Usability Score
  • No meeting requested so far when the new design is published.

Problem Discovery

How it Started

When I first joined Fairatmos, it was during the time that we are building products intensively and rapidly deliver to the clients. However, we ran into a problem where we received many complaints regarding the data input feature in AtmosWatch.

In the context of the new technology and niche carbon-tech industries, we have not been exposed enough to these type of data which leads to the confusion of users.

Problem Discovery

Initial Hypothesis

There are no indicators.

In the carbon tech world, there are required general data, and data that are tied to a specific methodology.

Non-contextual and repetitive icons.

The icons are being duplicated without representing the data.

No specific sequence.

The data are scattered, and it was not even sequenced in alphabetical order, leaving the users confused.

Unclear hierarchy

Inside the navigation of data management, there are: data input, tree measurement, and grievance tracker where essentially it is all data input.

Problem Discovery

User Interview

I conducted interviews a total of 5 users to better understand the struggles, and potential skipped issues we might have encountered.

Problem Discovery

Defining User Behavior

There's a difference between expertized user and general user

Expertise users

  • They know the data that is required for their project methodologies, but the data is too much that they can't just recall it one by one.
  • They often flustered to locate the data input menu, and how to navigate between the data input menus when there are multiple methodologies in one project.

General users

  • They are not familiar with the technical terms when inputting data.
  • They don't know which data is necessary to be input that relates to the project
  • They frequently asked for a manual tutorial session (Google Meeting)

Problem Definition

Findings

Hassle to know which data falls under which category of carbon project and sub-projects

In general, a carbon project consists of 4 different categories: project area, climate, biodiversity, and community. Then, a project usually have different and can be multiple methodologies at the same time which requires different type of data. This need is not met by the current interface and confuse users.

Sequence of data input process & Duplicated icon illustration that are not contextual enough

There is no particular order of the data input, making the users confused what based the sequence in the interface. Furthermore, the duplicate usage of icon makes it harder for user to find a particular menu as it is not contextual enough.

The inability for user to know which data have been filled and when was it last updated

Users need to click the data input menu one by one to know whether it is filled or not. While few data have the feature of seeing the historical changes made to that data, others don't.

Poorly structured navigation menu

There is an overlap in the menu hierarchy, where 'Tree Measurement' and 'Grievance Tracker' which should be a part of 'Data Input,' is incorrectly separated into its own category. This creates confusion and reduces user navigation efficiency.

Design Exploration

Iterations

Focusing on Navigation Menu

I audited the current information architecture, then worked with PMs and Climate Tech Specialist team to further enhance the grouping of the data input.

Explored design options

I drafted some lo-fi designs then presented it to the product managers to further discuss which design serves the product's purpose better. This resulted in the following 2 (two) designs:

Design Exploration

User Testing

I conducted a user testing alongside with the product manager to see how the users respond to the new proposed designs. These findings are then presented to stakeholders and got a buy-in to be executed immediately.

  • Users preferred new designs over the current design.
  • Users chose flexibility over a determined sequence due to the availability of data (Option 2)
  • No major usability issues on the new design

Solution

Solutions

Streamline the user experience by organizing data inputs into clearly defined categories and sub-categories aligned with carbon projects, ensuring an intuitive sequence that simplifies navigation through a unified data input menu.

Unique icons that are actually contextual to the data name and Indicator of filled data

Deliverables and Implementation

But.. (in reality) the implementation needed more plan and iteration

As we discussed with the engineering team we have decided to divide the design into 2 parts

Create the main navigation menu first

Create the submenu after

Impact

Metrics

No meeting requested so far when the new design is published.

Indicating that the new interface is informative enough not to ask for further assistance to Account Manager

Usability score increased by 33.33%

To compare old and new design, a UT is conducted with Maze; resulting in an increase for the new design.

User InterviewUsability TestingHeuristic EvaluationCross-functional Collaborations