Project Summary
Results
In first 3 months after deployment, the usage increased by 120% and generated 3 major pilots.
Timeline & Team
We had a 6 month timeline which extended to 8 months with 2 PMs and 2 developers.
Responsibilities
Requirements scoping
Experience Design
Design Strategy
Prototyping and QA
About
ShelfView leverages advanced computer vision and machine learning to deliver intelligent shelf solutions, ensuring compliance and maximizing revenue.
UX Improvements for Web Tool
06 Results
01 Intro
Poor Shelf Compliance leads to stockouts, Inefficiencies, and Inventory Inaccuracy:
Lost Sales & Revenue – Stockouts and poorly organized shelves lead to missed sales opportunities and frustrated customers who can’t find what they need.
Inefficient Operations – Lack of shelf compliance results in time-consuming manual audits and inventory management, increasing operational costs.
Brand & Supplier Disputes – Failure to adhere to planogram agreements can lead to penalties, damaged relationships with suppliers, and missed promotional opportunities.
Building an AI-solution can help retailers ensure shelf compliance and prevent stockouts
01 Maximizing Sales & Revenue
Proper shelf placement ensures high-demand products are easily accessible, leading to increased sales and reduced lost revenue due to stockouts.
02 Reducing Stockouts & Overstock
AI-powered shelf solutions detect inventory gaps in real time, enabling faster replenishment and reducing losses from empty shelves or excess stock.
03 Enhancing Customer Experience
Well organized shelves improve shopping efficiency, making it easier for customers to find products, leading to higher satisfaction and repeat business.
Underdeveloped UX interface hindered a key opportunity to showcase 90% Shelf Insight accuracy using AI-object recognition
Connecting UX with Business Goal
The business goal was to demo to prospective customers AI-powered shelf intelligence, and the tool needed a UX revamp
02 Understand
& Define
The existing web tool used primarily for debugging and machine learning purposes was only used by a couple of engineers to get feedback about the performance of correctly identified shelf insights. I conducted a series of internal research interviews to gather behaviors and motivations for developing and improving the existing tool.
I interviewed 2 internal Scandit developers and 1 PM to understand the purpose, opportunity, and challenges of shelf tooling to display shelf insights, data, and business goals.
Interview & User Insights
Reporting and Debugging
Testing machine learning insights and processing correct shelf insights.
Synching product libraries from retailers
Data loading and correct displays of products for the large catalogues.
Kickstarting pilots and prepare for retail customers
Validating business market and demonstrate invested value.
After clarifying future intention and purposes of the tool I prioritized UX goals,
Product Managers and IT Leads
Product Managers and IT Lead would like to easily lookup data and showcase the performance of the AI out-of-stock detection to be used in customer pilots.
Improve Usability and Data Visualization tool
Improve Usability and Data Visualization tool caused navigation, information hierarchy, and cognitive load issues for internal developers and PMs.
ShelfView’s AI Product Recognition Software
ShelfView’s AI product recognition software reached 90% accuracy, and shelf insights need to be reflected in tool so others can digest data.
03 UX Audit
A UX Audit included understanding existing skeletons of the site navigations, features, and information hierarchy. The initial homepage display the shelves in an aisle with high level information.
Audit: Aisle View Page
A UX audit revealed that there were issues with visual, text, and information hierarchy,
Audit: Shelf View Page
Proposed UX Improvements after Audit
Filter Shelf Insights for quick scanability
Product Managers and IT Lead would like to easily lookup data and showcase the performance of the AI out-of-stock detection to be used in customer pilots.
Improve Real-Time Data Updates
Improve Usability and Data Visualization tool caused navigation, information hierarchy, and cognitive load issues for internal developers and PMs.
Restructure
Layout & Navigation
ShelfView’s AI product recognition software reached 90% accuracy, and shelf insights need to be reflected in tool so others can digest data.
04 Design 1
I started designing with Scandit branding, visual consistency, hierarchy, and scanability in mind
Primary Sans-Serif (Helvetica) is a clean, modern sans-serif typeface that ensures legibility and precision across all digital and print materials. Its geometric structure reflects clarity, efficiency, and trust, making it the ideal choice for data-heavy content, dashboards, and user interfaces.
Primary Palette
Scandit Blue
Hex: #FA9819
Grey Tint
Hex: #B6C9CF
White
Hex: #000000
White Grey
Hex: #C6EBF7
Secondary Palette
Gray 1
Hex: #1E3D59
Gray 2
Hex: #DEEEFE
Gray 3
Hex: #48749E
Black
Hex: #E8EBEF
Aisle View Page
Shelf View Page
Development Feasibility
A UX audit revealed that there were issues with visual, text, and information hierarchy,
Aisle View Overview
Ensure accessible text, streamline information navigation, and maintain consistency across the platform.
Aisle View Overview
05 Design 2
After two sprints, I presented to the directors of ShelfView to align on the strategy and feasibility of the tech implementation. To build this product, we adopted a phased approach.
During the design phase, some data points were unavailable, such as product images and machine learning alerts for misplaced items.
As a result, we extended the timeline from six months to eight months, with the deadline set for the NRF tradeshow.
We also identified the need for additional headcount, specifically a developer, to assist with integrating and enhancing the upload speed of shelf images to the cloud platform.
Modules selected from the aisle
Navigating to previous and next modules
Reveal most important shelf insights at the top for quick scans
Phase Approached Design Development- Final Screens
Aisle Homescreen
Shelf Module Views
Filtering Shelf Insights
06 Results
After conducting thorough research, audits, and design sprints, our team successfully launched a demo and internal debugging tool. This tool allows the entire team to leverage it for production and a variety of use cases.
Demonstrating Capabilities to Future Clients
Shortly after implementing updates and design changes, the Product team received training to effectively showcase our capabilities to potential enterprise stakeholders.
Pilot Customers
Pilot Customers were able to visually grasp the capabilities and potential cost savings offered by the machine learning features of ShelfView.
Enhancements in Navigation & Product Search
Overall UX and design improvements sparked numerous projects focused on dashboard and tooling capabilities.
Testing and Debugging
Engineers utilized the internal tool as an effective communication resource for visualizing and testing the accuracy and insights of the product recognition tool.
