Data Labeling Tool Re-design
AI Labeling
Label Maker is a SaaS tool for developers and data scientists to label images in datasets. The labeled datasets can then be exported to train AI and machine learning models. A year after re-design, this product is re-named to AI Labeling.
Company/
Oracle
Role /
Sole UX/UI Designer
Collaboration /
PM, Engineer
Year /
Dec, 2021- Feb, 2022
Context
Re-design Label Maker
Spatial team at Oracle delivers products on spatial analysis and a variety of applications that utilize Oracle database. Without an in-house designer, they often reach out to us for design support.
Label Maker is one of the tools that have already been built. However, since there’s no designer involved, PM wants to work with a UX designer ad hoc to make it user-friendly.
It is a time-bound project so there isn’t much time for user research, but fortunately the PM is very knowledgeable on various use cases of the service which makes the re-design project easier.
Before design
Understand Existing Product
Since design is ad hoc, I first met with the PM and developer who built this tool to understand the existing information architecture and workflows.
I learned there are for major workflows in Label Maker, here’s the user journey of a developer or data scientist using the service.
Audit Information Architecture and Design
With the user journey mapped out, it became clear that the existing UI doesn’t reflect user journey. There are several problems:
Header
Navigation
Hard to scale
Existing product mixes header and navigation in one bar, the limited real estate making it challenging if more features needs to be added in the future.
Poor IA
Poor Information Architecture
Terminology is misleading: it’s hard to tell the difference between Define Label and Create Label. Users won't have a way to know what they each does before clicking into them.
Export is simply one of the actions that's supported. Placing it in main navigation reflects poor IA.
​
Data source listing
Lack Call to Actions
Resource listing and actions to manage the listing are in one page, and there's no call to action buttons in the page, making it hard to know how to manage data sources at first glance.
Instead of having it open after clicking on a call to action button, this dd new data source section is always present at the bottom, cluttering the page and adds distraction
Information Architecture Re-worked
Below is the existing IA. Certain workflows are placed in places that do not match users' expectation. For example, user still needs to configure data by selecting dataset when they get into Define Labels workflow. These mismatch makes the user journey less fluid.
I re-worked the IA based on the user journey. Simplifying workflows by combing related, sequential workflows under one major workflow. Below is the result:
Design
Information Architecture
Before
After
Navigation is changed from a horizontal nav on top to a vertical nav menu on the left. When not used, it can be collapsed.
Design
Connect Data
Manage Data Source
Having a data source connected is the first step. User can connect data from either object storage or Oracle database.
Data source is the secondary tab under Data, as once a data source is connected, user rarely needs to go in here again.
Add Dataset
Once a data source is connected, user can then add one or multiple dataset from a data source. Each dataset contains series of images.
View Dataset Details
Existing design does not support viewing data (images) of a dataset. After re-design, user can click on name of a dataset and view all the images within the dataset.
Design
Create Labels
Before
After
Workflow Simplified
There are 2 major changes to simplify the Create Labels workflow.
Terminology is made consistent
Current design has various jargons such as label groups, label class. In this re-design, all are removed and only "labels" are used.
Separate other workflows
Create Dataset workflow is separated so Labels page is a place dedicated for labels creation and management.
Label Task
The term label class is removed. Instead, labels and label task is introduced to represent the same concept.
To create labels, user needs to select what type of label task is it, the configurations would change based on label task selected.
In total, there are four types of label task:
-
Image classification​
-
Object detection
-
Semantic segmentation
-
Instance segmentation
Image Classification
Image classification is the task of assigning a label to an image from a predefined set of categories.
Input
Output
Object Detection
Locate the presence of objects with a bounding box and types or classes of the located objects in an image.
Input
Output
Semantic Segmentation
Semantic segmentation is the task of assigning a class label to every single pixel of an input image.
Input
Output
Instance Segmentation
Instance Segmentation is a variation of image segmentation that deals with detecting and delineating each distinct instance of an object appearing in an image.
Input
Output
Create Project
Renamed
In re-design, what was called "Create Labels" is changed to "Project". To get to labeling, user selects one or multiple datasets and a set of pre-defined labels to start a project.
Select data
Select labels
Project Page
Before
After
Full view
After
Top Section Collapsed
After
Different Labeling Task
Label menu is moved to the right, so the images becomes the main focal point.
Content in label menu would update based on the task type.
After