Anurag

Home

My Skillset

Projects

Testimonials

Book a call

TIMELINE

Aug 2019 -

Dec 2021

Aug 2019 - Dec 2021

Aug 2019 - Dec 2021

TEAM

1 PM's

4 Front-End Devs

5 Backend Devs

4 QA's

2 DevOps

TOOLS & STACK

TypeScript

Angular

HTML

CS

JavaScript

FOR

Project Overview

From mid-2019 to 2022, I worked as an SDE Contractor at Huawei, from

L&T Tech Services, India in UX/Front-End Engineering.

A team of 15 developers, we set out to build a web-based

'Intelligent Camera Vision Training' System to complement Huawei's Security Camera Platforms and product suite.

Designed, developed, tested and deployed for chinese markets as 'Holosense Secure Vision'

PRODUCT GOAL

The goal was to allow 'Business owners & Operators' or 'HoloSense Users' to custom train their video/camera security systems using image vision techniques.


Here's the user flow to train image vision systems -

Defining the product use-case

The goal of the product was to be able to train security cameras to recognize pre-defined patterns or specific objects in the recorded footage.


But then, the pandemic hit us in early 2020.


COVID-19 really affected industries all across the world, one of the most affected was the food packaging industry. The question they now faced was ensuring new public health safety and hygiene standards were implemented.


Things could be disastrous if the COVID virus were to spread through our food networks.

Improving health standards in the food and packaging industry and ensuring compliance became an immediate necessity.

We were deep into our product development cycles when the pandemic hit in early 2020. COVID-19 really affected industries all across the world.


Food and packaging industries needed to overhaul food safety standards before distribution amongst the public.


improving health standards in the food and packaging industry became an immediate necessity.

Wins !

Implemented and scaled the design sytem, implementing UX, visual design & structure and interactive animations

Built 40+ resonponsive components and webpages with REST API integration

Improved site performance & efficiency by reducing cyclometric complexity by 28%

I also served as the UX copywriter for the english version of the platform

My Contributions as a UX Engineer

Developing an Image Marking Tool for Bounding Box Annotations

To enable users to train image/video 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 Challenges

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 Challenges

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 Support for Chinese 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

UX Engineering Challenges

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 & 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

UX Engineering Challenges

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.

Let’s build something

exciting together :)

Book a call with me!

I’m authorized to work across the USA :)

Anurag Harishchandrakar

2025