Aisleworx Media maintains their core product, the Digicart, a grocery cart with digital screens, through an internal management platform that allows them to perform various tasks relating to the product. This platform sees a need to continue to evolve as new features are being added.
1 UX Designer
1 Product Manager
3 Software Developers
October 2023 - February 2024
As the sole designer, I was responsible for the redesign of the desktop screens and design of the mobile screens for the duration of the whole design cycle until handoff to the developer team. I conducted research, iterated and tested designs, and finalized screens for coding. During this process, I collaborated with our product manager and the developer team.
Aisleworx Media’s main physical products were Digicarts, family-friendly grocery carts with electronic screens that played media on the side. These Digicarts were managed through an internal service site that contained detailed live information about the carts, and the site was monitored on a daily basis. However, the current site lacked key features and needed an improved layout.
Users faced several navigational and functional frictions when trying to perform daily cart maintenance and troubleshooting.
When developers initially built this site, they simply added the necessary features to the pages. This led to the design of the site being pretty inconsistent and offered opportunities for improvement.
The scope for this release was narrowed down to focus on cart maintenance, the primary function that the website supports.
Lack of context and feature functionality
Add missing features and pages to the site and implement additional contextual information for features where needed for a more streamlined workflow.
Disorganized content
Organize page content and layout to reflect user expectations for the page.
Lack of responsiveness
Create a mobile-friendly version of the website that technicians can use while in the field.
Information was condensed into tabs to reduce the amount of scrolling needed to view items on the page.
The original site was functional but lacked visual hierarchy and organization, so I reorganized the layout of different sections to be more informative and scannable.
I progressed through several different design layouts with the product manager before landing on the right combination.
Needed more system context, especially on cart detail page.
Proposed card layout made it hard for resizing on browsers while keeping a neat format.
A page with all the information about the hardware and software of a specific cart. Most important functions are prioritized for easier access and the layout is optimized to be easily scanned during daily maintenance.
A broader overview of how cart systems are operating within a store through relevant live data and other details pertaining to the overall maintenance of the cart systems.
High level overview of a specific grocery chain, displays overview data of stores that have cart systems.
Users were tasked with locating a piece of information on the screens while being timed. Results showed that those who used the redesigned screens were able to locate things at a 65% rate faster than those who had been using the original screens.
From my interviews, I found that 85% of the time users would be trying to access the service site from their phone while out in the field if operations were simple enough to do so. This validated the stakeholder's plan to build a mobile app for operations.
For our first mobile flow, we focused solely on the process of viewing of an individual cart's information while onsite, since that is all that is needed for maintenance.
Much of the information on the service site is displayed on large tables, but mobile devices don’t necessarily have the size to support that kind of view.
Certain functions on the site may perform better on desktop, so there is a need to determine which features will be included for mobile.
I created a mobile flow taking the user from the home page all the way to a specific cart's details. Only the most used and prioritized features were kept so that technicians would be able to focus on important in-store tasks.
Technicians would be able to quickly locate carts with issues by filtering according to ownership and identifying highlighted carts. Additionally, they could also use the search bar or scan a code on the back of the cart with their camera to pull up its corresponding details page.
Cart maintenance features were streamlined for cart detail pages on mobile to ensure that technicians would be able to complete tasks easily and quickly in the busy environment of a grocery store.
It was important to consider the technical limitations of the platform and the bandwidth of the development team while still delivering a functional experience within the timeframe I had been given for the site updates. I learned that constant communication and sharing of designs is so important and helps guide us towards the best outcome for users and stakeholders.
During this design process, I learned that there will be times where further research is needed to clarify design decisions and times where design iterations will be reworked due to potential constraints or stakeholder requests. The process towards a final product can be messy but rewarding once all the pieces fall into place.
