Redesign a web-based manual facial landmark annotation platform (internal use only) for a startup company specializes in computer vision technologies, face analysis and auonomous driving. Employees are going to collect data by labelling 51 points on different facial features in face images in a fixed order, which can support the face recognition algorithm. The new design can greatly reduce the error rate, increase the accuracy and efficiency while ensuring the simple and friendly user experience.

Existing  Problems

Here are the main problems gathered from user interview:

1. Long Labelling Process, Complicated Order
Users always feel hard to remember the correct order and easy to get lost.

2. Cluttered & Overlapping Dots
Points are overlapping with each other and affecting on the following steps.

3. Incomplete Label Reference
Human face features varies a lot at different angles. Side face references are also needed.

4. Toolbar Improvement
Users also need tools for quick actions: redo, undo, restart, etc.


Main Improvements

1. What’s the correct labeling order of different facial features?

The 51 points are devided into 8 groups: left eyebrow, right eyebrow, nose bridge, nose line, left eye, right eye, outter lip, inner lip in different colors. 

Users can easily follow the right order in the progress bar, and understand the current status (completed, current or uncompleted).

The reference drawing can also assist with ine labeling process, as well as telling users the position of each points.

The submit button will be activated when all the 8 groups are done.

2. How many points are there for different facial features?

The number of the feature points of each face components varies a lot. A small mistake will greatly affect the final result. 

The new labeling process is like drawing polylines. The line will be 
extended from the previous point to the mouse cursor, untill user finishes the last point of the currrent group.

3. The normal reference doesn’t work for the face in profile.

There are 5 drawings of face from different angles: front, 3/4 view(L/R), profile(L/R).

Users can select the reference drawing that matches their current face image at the beginning, and follow the detailed instruction.

4. What if many points are overlapping with each other?

Users can get rid of the cluttered and overlapping points and get a clear view by using the filter above the image.

5. How to revise points in the previous steps?

Users can get rid of the cluttered and overlapping points and get a clear view by using the filter above the image.

Style Guide