top of page
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.

Desktop - 5.png

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

Screenshot 2023-08-27 at 3.24.03 PM.png

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

Screenshot 2023-08-27 at 3.24.03 PM.png

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

Screenshot 2023-08-27 at 3.24.03 PM.png

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. 

Wireframe - 2.png

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:

Wireframe - 3.png
Design

Information Architecture

Before

Screenshot 2023-08-30 at 10.38.17 AM.png

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.
150.png
Design

Connect Data

Frame 15762_edited_edited.png

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.
151.png
Object storage.png
Oracle DB.png

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.
Dataset.png
Frame 15743.png

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.
Dataset images.png
Design

Create Labels

L Abstruct Shapes 15.png

Before

Frame 15744.png

After

Labels.png

Workflow Simplified

152.png
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.
Screenshot 2023-08-31 at 2.47.20 PM.png
image 40.png
Screenshot 2023-08-31 at 3.33.26 PM.png
image 41.png
image 41.png
image 40.png

Separate other workflows
Create Dataset workflow is separated so Labels page is a place dedicated for labels creation and management.
Screenshot 2023-08-31 at 2.46.55 PM.png
image 41.png

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 ta
sk: 
  • 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.
Frame 15749.png
Input
Output
Drawer.png

Object Detection

Locate the presence of objects with a bounding box and types or classes of the located objects in an image.
image 42.png
Input
image 43.png
Output
Unresolved Duplicates.png

Semantic Segmentation

Semantic segmentation is the task of assigning a class label to every single pixel of an input image. 
63f498f8d4fe7da3b3a60cc2_semantic segmentation vs instance segmentation.jpg
Input
63f498f8d4fe7da3b3a60cc2_semantic segmentation vs instance segmentation.jpg
Output
Semantic segmentation.png

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. 
MEB9F.png
Input
MEB9F.png
Output
instance segmentation.png
Frame 15748.png

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.
153.png
Create project.png
Select data
Select labels

Project Page

Before

Frame 15750.png

After

Full view
154.png

After

Top Section Collapsed
157.png

After

Different Labeling Task
156.png
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

Export is "downgraded" to be an action of a project.

— THANKS FOR WATCHING —

bottom of page