Role
UX Designer
Responsibility
UI/UX design
Duration
2 months, 2023
Company
NCS and Smartone Hong Kong
Background
NCS sought to launch a cutting-edge video analytics system powered by IoT and real-time camera data. The goal was to help retail businesses, including Smartone, a leading Hong Kong telecommunications firm, track shopper traffic patterns, behaviour and demographics across 30+ branches.
This system revolved around creating a Retail Video Analytics Dashboard to enable business stakeholders to monitor store traffic patterns, analyse operational efficiency, enhance personalised customer experiences, and facilitate informed decision-making by offering real-time and historical analytics.
Objectives
The dashboard aimed to translate complex data into actionable insights, addressing:
My role
As part of the UX team, I collaborated closely with another designer for the dashboard’s end-to-end design. This included conducting research, engaging stakeholders, iterating designs, and prototyping.
Weekly discussions with developers, business analysts, and product managers ensured alignment across teams and rapid iteration.
The dashboard was successfully launched in mid-2023 and has been adopted by multiple NCS business partners, including Smartone and shopping malls.
Given the short project timeline, I quickly immersed myself in understanding the dataset and visual requirements.
Card sorting with business users
To organise extensive data requirements, I facilitated card sorting sessions with Smartone’s operations and marketing staff. We organised extensive datasets into intuitive categories. It revealed patterns in user behaviour and clarified which metrics were critical for daily business decision-making.
This approach ensured we prioritised the right data for visualisation, laying the groundwork for an effective dashboard structure.
The insights from card sorting informed the information architecture, which structured the dashboard into three key categories: visitor, staff, and overall traffic data. The sitemap provided a clear framework, guiding both design and developer feasibility discussions.
I created wireframes to conceptualise data visualisations, showcasing key metrics like traffic flow, dwell times, and customer demographics. These wireframes were iterated based on client feedback to align with functional and business requirements.
Rapid usability testing using wireframes
I conducted rapid usability tests with four participants from the client’s key business departments. They performed tasks like finding metrics or identifying trends using the wireframe. Based on their feedback, we iterated several times.
Key Findings and Updates:
Mood boards
We explored multiple dashboard styles. The client chose a professional yet approachable style that informed the final design.
Final prototypes
The prototype for the retail analytics dashboard showcased both overall analytics and individual store views, providing users with actionable insights through intuitive visualizations such as bar charts, line graphs, and heatmaps. These visualizations were carefully designed to align with client preferences and the research findings, ensuring the dashboard met diverse user needs.
Multiple Traffic Data Visualisations
While the product requirements specified general traffic data visualisation, business users emphasised the need for comparative insights across different periods, stores, and store areas. To address this, I designed the “Traffic Over Time”data section with three tabs, allowing users to toggle between views:
These tabs enabled intuitive comparisons directly on linear charts. Additionally, users could hover over specific data points on the charts to view precise traffic numbers, making the data both detailed and actionable.
Customer-to-Staff (CTS) Ratio at a Glance
The CTS ratio, a key metric for operational efficiency, was primarily used by business users to identify crowded periods and allocate staff accordingly. To visualise this, I implemented a heatmap display that highlighted average busy hours over a month. The darkest colours indicated the busiest time slots with the highest CTS ratios, enabling the operations team to quickly identify peak times and optimise resource allocation.
Real-Time In-Store Heatmaps
The system’s capability to display real-time traffic data was leveraged to create store-specific heatmaps. These heatmaps visualised the “hottest” zones within individual stores, assisting users in understanding traffic distribution across the floor plan. After discussions with the technical team, the heatmap implementation was confirmed to be feasible within existing constraints, ensuring a smooth integration into the system.
All-in-One System Settings
The dashboard also supported self-service system management for partnering companies. Admin staff could independently manage store information, edit system users, and define roles, giving them autonomy over system configurations. This feature not only empowered partnering companies but also reduced the manual workload for NCS staff, who previously handled these settings manually.This prototype successfully combined intuitive design with functional efficiency, delivering a powerful tool tailored to meet the needs of both business users and technical teams.
Design systems
To ensure consistency and scalability, we developed a robust design system that captured the interactions, styles, and guidelines for future iterations.
The Retail Video Analytics Dashboard was successfully launched in mid-2023, revolutionizing how NCS’s business partners monitor shopper behavior and optimize operations. Post-launch usability testing revealed further opportunities for refinement, leading to key improvements:
Using the right tool for data visualisation
This project taught me the value of selecting the most effective visualisation tools to communicate data clearly and intuitively. By tailoring visualisations to user needs—such as implementing heatmaps for CTS ratios and interactive line charts for traffic comparisons—I learned to balance technical feasibility with user comprehension. This skill was pivotal in delivering insights that business users could act on effortlessly.
Lessons learned
Working within an aggressive timeline highlighted the importance of balancing speed and quality. While compromises were necessary during development, post-launch usability testing proved invaluable for iterative improvement.
My biggest takeaway is that iterative refinement after an MVP release allows the product to adapt to evolving user needs while maintaining team efficiency. This experience reinforced the importance of agility and collaboration in delivering impactful, user-centered solutions under tight constraints.
