Overview
Between 2019 and 2021, I worked as a UX Engineer. Designing and developing the front-end of SAAS intelligent vision system. The goal was to allow business owners operators to train smart video security cameras using image classification. The system was built to empower business owners with minimal technical expertise to label and annotate images and security footage, enabling more effective AI-driven security monitoring.
Intended for FMCG industries during COVID. Our goal was to ensure that trained video security models recognized compliance with health standards in food packaging industries.
Sample Test Case for Product Development
A well-trained video/image model should accurately identify workers in food packaging industries who are wearing PPE kits and those who are not.
Client
Wins!
Implemented and scaled the design system, designing and implementing visuals and interactive animations
Built 40+ responsive components and webpages integrating with API services
Improved site performance and reliability by 28%
I also served as the UX Writer for the english version of the site
Stack
Angular
SCSS
TypeScript
NodeJS
Key Features
Built
Developing an Image Marking Tool for Bounding-Box Annotations
To enable users to train image classification models, I built an image marking tool that allowed users to annotate images using bounding boxes. This feature helped define areas of interest within images, improving training accuracy for AI models. Key aspects included:
• Implementing drag-and-drop bounding box selection
• Ensuring smooth real-time rendering for a seamless user experience
• Supporting multiple annotation types for diverse security use cases
UX Engineering
During usability testing on the early iterations, we noticed that users struggled to accurately place bounding boxes, often misaligning them or accidentally overlapping annotations. The system lacked real-time feedback, forcing users to manually adjust their selections—a process that was both tedious and time-consuming.
Mapped out user workflows and identified key friction points in the annotation process.
The system lacked real-time feedback, we introduced hover-based tooltips and visual cues, guiding users through accurate labeling without requiring additional clicks.
The new system reduced annotation errors by 40%, allowing users to focus on accuracy rather than corrections.
Implementing HTML Canvas for Interactive Image Overlays
To facilitate dynamic image interactions, I leveraged HTML Canvas to overlay annotations on images. This enabled:
• Zooming and panning for detailed annotation work
• Layered interactions, allowing users to modify existing annotations
• Performance optimization to handle large datasets smoothly
UX Engineering
It takes an image/video library of 1000+ sources files to train an image learning model. That means users have to tag and annotate 1000+ files manually to teach it to detect a certain object or person.
During early prototype testing, I noticed users struggled to zoom, pan, and interact with images while annotating. The existing system forced users to constantly reset their view, disrupting their workflow and adding unnecessary friction. Users needed to move quickly between images, yet they often had to restart their annotations due to a lack of smooth, intuitive navigation controls.
Users needed a smooth, intuitive way to navigate images, yet the system lacked interactive controls like zoom and panning. This led to constant workflow interruptions as users manually reset their view.
Introduced pinch-to-zoom, two-finger panning, and tap-to-adjust gestures to mimic intuitive touch-based interactions
Created an interactive tutorial overlay, reducing onboarding time for new users by 25%.
Enabling Internationalization for Multilingual Audiences
Understanding that the platform would be used globally, I integrated internationalization
(i18n) support, ensuring that:
• All UI components dynamically adapted to different languages and locales
• Users could easily switch between languages without disrupting workflows
Challenges and UX Engineering
This project was primarily designed for the Chinese market, meaning the default language,
UI layout, and user expectations were centered around Chinese-speaking users
An English version was also needed as a supplementary offering for international partners and non-Chinese-speaking stakeholders
As a UX Engineer, I approached this challenge by considering both linguistic and structural differences between the two versions.
Additionally, the way Chinese users scan and interact with information differs from Western UX conventions. Chinese interfaces tend to favor denser content layouts, fewer page navigations, and more inline descriptions, whereas English-speaking users generally expect a cleaner, more segmented structure with more white space
Error Handling and Hueristics
To improve the usability and resilience of the system, I implemented robust error handling mechanisms and applied usability heuristics to minimize user friction across several user input mediums.
• Responsive forms needing regex for password and input validation
• Tooltips to convey information and tool context, in english and chinese.
• Error states and guidance
Challenges and UX Engineering
This project was primarily designed for the Chinese market, meaning the default language,
UI layout, and user expectations were centered around Chinese-speaking users
Proactive Error Prevention
• Designed real-time validation to prevent annotation mistakes, such as overlapping bounding boxes or incorrect label assignments.
• Implemented auto-save functionality to prevent data loss in case of connectivity issues.
• Introduced guided tooltips and in-app instructions to educate users on best practices while labeling images.
User-Centered Error Recovery
• Created undo/redo functionality to let users quickly revert changes.
• Developed graceful error messages with clear, actionable solutions, avoiding vague alerts like “Something went wrong.”
• Designed a progressive feedback system—for example, warnings before irreversible actions and success confirmations after key steps.
Applying Heuristic Principles for Better Usability
• Followed Jakob Nielsen’s usability heuristics, ensuring principles like error prevention, visibility of system status, and user control & freedom were well integrated.
• Conducted usability testing sessions, leading to UI refinements that reduced annotation errors by 30%.
• Applied Fitts’ Law and Hick’s Law to streamline interactions, reducing annotation time and improving task efficiency.
Page undergoing updates