Summary

Diagnosis

All-in-one page UI
Extremely large set of buttons, always visible
Archaic, unexplained meanings
No indication of workflow

Prescription

Flow-based UX
Only show relevant information in hierarchy
Clear actions and next steps visible in proper context
Modern UI style with UI library

Diagnosis

All-in-one page UI
Extremely large set of buttons, always visible
Archaic, unexplained meanings
No indication of workflow

Prescription

Flow-based UX
Only show relevant information in hierarchy
Clear actions and next steps visible in proper context
Modern UI style with UI library

Our Mission

Productize an internal image annotation tool.

This image annotation software, known internally as just “V2” and externally as imageannotation.ai, is the tool that B2B clients are shown by the company during the sales pitch, in an effort to demonstrate the depth and quality of the image annotation data.

However, in order to grow the company, we had to change our approach. Instead of only having an internal tool, we wanted to externalize the tool so that many clients can use it on their own. The tool would have various points at which they can purchase services, like new photos and annotation services. This way, we would be able to create a steady profit stream and growth from this service.

The Diagnosis

Problem 1: The top bar alone has 22 different controls

Any viewer seeing this who isn’t on the team and been trained to use this is instantly mortified at the amount of options here. Every time a feature idea is added, aka feature creep, it is just added to the UI.

Problem 2: No indication of hierarchy

What is important here, and what is unimportant? You might not guess this, but actually there are 3 very important buttons which act as tabs here, the rest are more like filters. Those 3 are Streams, Classes, and Attributes.

Problem 3: No indication of workflow, requires training to use

If you are a client of ours, how would you use this? Well the thing is, this interface was designed to be used internally. So all the controls visible to every department are visible to everyone at all times. In fact here is an incomplete list of user types who would need to use this interface: Administrator, Annotator, ML Model Maker, QA, Client.

The Prescription

We answer “who is this for?” and “what problem does it solve?”

So far, my client has been using their internal tool to annotate images for the customer and then show them the results in their tool over calls. At this stage, we must constrain and define our focus.

Who it’s for: AI/ tech startup entrepreneurs, Machine Learning scientists.

What problem it solves: Someone who wants to make an image recognition model has to use multiple platforms. Dataset Studio allows a team of people to make a model from beginning to end without leaving the platform.

Flow-based UX

Rather than fitting everything onto a single screen, we create an information architecture whereby the user can understand how the system works at a glance, and is not overwhelmed.

Solution 1: Show Hierarchy.

First, I describe the problem as one of hierarchy. I sketched out how this hierarchy might be described visually. There are 2 main trees. The colon “:” will be used to show a child of the former element.

Tree 1: Project: Dataset (Images): Classes: Attributes
Tree 2: ML Models

I show this hierarchy in the visual design by placing a project switcher at the top, followed by the dataset tree below it, and the ML model feature last. This is also a hierarchy, because picking a Project will change the pieces below it. All the elements above are parents of those below.

The "Folded Letter" Design

I came to this concept by laying out the information hierarchy of the system. Once abstracted into a list, I conceived of an accordion or folded letter style concept. As you unfold the letter, its contents are revealed. Fold it back up and it is tucked away. This accomodates the different hierarchy trees.

Solution 2: Use a UI Library for Consistency

Here I chose some elements of iOS and MacOS design, and combined that with a Material Design library. I also used Material Design standards of web usability when it comes to basic things like sidebar navigation and search. The accordion concept however, is mostly a novel information architecture idea I came up with, but I’m sure you could find other examples of it out there since it is a pretty simple idea.

Standards of Usability

I use standard elements here like the sidebar navigation. This helps exemplify the structure, purpose, and hierarchy of the app.

Solution 3: Only Show Relevant Controls

Previously, all buttons were always shown. Now, the user proceeds through the system hierarchy, datasets, classes, and so on. And, at each stage they have only the controls that are relevant to that piece. So, for images they are shown image filters, and filters for things like annotation type.

Image Gallery

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Selecting a Class

Selecting a class will allow the user to edit it. Selecting a class object, a sub-class, will focus the elements beneath it. This shows two ideas: hierarchy, and only showing relevant information.

Solution 4: Multiple User Types

An image annotater has a vastly different role than that of an administrator, or a model maker, and so on. Here, I show some workflows for different user types. That of an image annotater, a project owner (perhaps a company owner as well), and a manager.

Adding and Managing Classes

Here an admin or manager user can create brand new classes and subclasses. They go through a user flow where each step they can choose attributes to assign to the classes, as well as colors. The user flow is step-wise and never shows more than is needed.

Annotating Images

Here, an image annotator type user can annotate images by creating a bounding box, followed by searching and selecting classes and attributes to assign to the image. We were also planning several annotation features such as a magic wand that would highlight objects automatically.

Animation of Color Picker

There were a few instances of using a color picker in Dataset Studio. One was while creating classes, another was while annotating, pictured here. This way, when viewing annotations, the viewer could see the difference by color.

Image Annotation Purchase Flow

We wanted to make our service self-serve, by allowing users to check out and purchase tasks such as image annotation, or photo collection. This way, they'd submit an order through our system and then the company would receive it and begin fulfilling their request. Currently, their orders are taken manually.

Dataset Studio: Designing an Image Annotation and ML Pipeline

Summary

Diagnosis

Prescription

Diagnosis

Prescription

Productize an internal image annotation tool.

Problem 1: The top bar alone has 22 different controls

Problem 2: No indication of hierarchy

Problem 3: No indication of workflow, requires training to use

We answer “who is this for?” and “what problem does it solve?”

Solution 1: Show Hierarchy.

Solution 2: Use a UI Library for Consistency

Solution 3: Only Show Relevant Controls

Image Gallery

Selecting a Class

Solution 4: Multiple User Types

Adding and Managing Classes

Annotating Images

Animation of Color Picker

Image Annotation Purchase Flow

Logo Design

Let's get in touch