UX design

Project Detail

Foxconn iAI team and Foxconn HPC (High-Performance Computing) team collaborated on HaiLabel - a web-based tool that helps annotate videos and images for computer vision algorithms. HaiLabel is a derivative of CVAT(a free open-source labeling tool). Our goal is to simplify the data annotation process and bring an overall good look and feel to the UI. Provide a pleasing annotating experience for users.

Project timeline
Aug- Nov 2020
Team member
Sarah Chen (UX Designer)
Raunaq Chamdia (Product Owner)
Haotian Deng (Project Manager)
Aaron Kauer (Engineer)
Lujie Wang (Engineer)
UX Designer
For model training, data scientists need to annotate data. However, a team of data scientists usually spent about 1,033 hours annotating more than 256,000 objects. Annotating data is extremely time-consuming and boring. Is there any way we can automate this manual process?
HaiLabel is our accessible solution. Take a couple of minutes helping our users generate all annotation results at their fingertips. HaiLabel is derived from the Computer Vision Annotation Tool (CVAT).
View project
HaiLabel display

Product Video

1. Sign in/sign up
First of all, you have to sign in or sign up to HaiLabel.
2. Create an annotation task
Create an annotation task by pressing Create a new task button on the tasks page or the window icon located in the center of the tasks page. Then, you can specify project name, labels and attribute of the task and upload images/videos. Advanced configuration dropdown menu allows you to choose image quality, overlap size, segment, and etc. Click the Submit button and it will be added into the list of annotation tasks. Then, the created task will be displayed on a task page.
3. Annotation process
By pressing the Automatic Annotation button to get started. You will need to choose the server, model, and version for the task. The status of the process is showed on the message box. You can click the hyperlink Annotation Tool on message box to check annotation process.
4. Check annotation
The annotation tool consists of:
Global Navigation(Top) - pinned header used to navigate HaiLabel sections and account settings;
Workspace - space where the image is shown;
Tools sidebar(Left) - contains tools for navigating the image, zoom, creating shapes and editing tracks;
Objects sidebar(Right) - contains label filter, two lists: objects(on the frame) and labels(of objects on the frame) and appearance settings;
Workspace navigation(Button) - main control functions for next, back, play/pause, full screen, zoom, and image info;

The following figure is an example of a fully annotated image with a rectangle shape.
5. Settings
(Optional) Users can click on the user profile on the global navigation and go to settings. Settings contain parameters users could adjust that affect desired annotation results. You will have two tabs: Player and Workspace. You are able to change the image adjustment and task detail by clicking and dragging around.

Design Planning


By planning ahead, I am able to prioritize my to-do list. I can feel more in control of the whole project and stay in the moment. No more running around not knowing where to turn to.

HaiLabel timeline

Define & Ideate


To better understand how we want to construct the core experience for users, I first designed a user flow. This helped us focus more on the annotating process and needs of the user and less so on the details that we would solidify later on.

HaiLabel user flow

With the design opportunity in mind, I moved forward to ideation. Meanwhile, I work closely with developers to make sure the design is feasible.

HaiLabel Low-fidelity wireframes

User Testing

validate & iteration

We've kept evolving our product in alignment with user's feedback. I observed 6 users and how they interacted with the flow. Through having multiple times of user testing, we found out how users felt and listed key points of how to iterate the product.

HaiLabel user testing

Build & Refine

Visual guideline

I need to create a visual guideline that is used across the product before start prototyping. I chose a bluish color theme to convey simple and clean feelings. For the font, I decided to go with Lato. Lato is a sans serif typeface which makes the interface easy to read.

HaiLabel visual guideline

Final Design

Interactive Prototypes

After setting the visual guideline, I jumped into designing high-fidelity wireframes and ended up making them interactive.

HaiLabel final design

Other projects

Let's work together!

If you are in search for a proactive and creative design partner who:
has intuitive and powerful design aesthetic
willing to listen your feedback in the design process
can give guidance well beyond design in the user experience process

...I may be the perfect fit!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.