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.
Me: UX Designer
1 Product Manager
2 Software Developers
September 2023 - February 2024
As the lead 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, the developer team, and our field technicians.
Aisleworx Media’s grocery shopping carts with digital screens, known as the Digicart, enables shoppers to entertain their children while also advertising grocery store products. The current internal service site had been initially built to contain information important to the maintenance of the Digitcart, serving as a hub for technical operations. While the existing site was functional, there were many opportunities to improve upon it as the site grew.
Digicart Operations: digicarts are placed in grocery stores and each cart sends its own data back to the internal service site periodically. Technicians monitor the service site and check on carts for any irregularities.
I spoke with the team of 7 internal company technicians to understand how the site was used on an everyday basis and how that could guide the redesign to serve the most important issues first. Along with understanding how the current site could be improved, I also wanted to know what new features the team needed to plan for future designs.
To further understand more about the site’s pain points, I walked through the site myself and noted any areas that could potentially be improved. My resulting findings showed that the site could benefit from improved hierarchy and better information organization.
After discussing bandwidth availability with the development team, we decided to focus on the screens used for cart maintenance for the first site update to so that efficiency in maintenance could be improved as soon as possible. Other screens would be further refined in later updates.
Small changes were made to help improve the efficiency of finding needed information, such as the reorganization of information to most relevant pages, moving most used sections to tops of pages, and reducing number of clicks needed to access certain pieces of information or actions.
Single Click Codes: identification numbers related to the product were kept at the top of the page and had the ability to be copy and pasted for other uses with a click.
As technicians work on maintaining products that are used in many different locations, there are constant changes in information that relate directly to the internal site. To account for shifting pieces, I added in in-line editing to make it easier and faster to change information on the site when needed. Additionally, we wanted to reduce the number of scrolling users would have to do when navigating a content rich page so I condensed groups of information into tabs when possible.
Clearer Layout: different pieces of information were contained in different cards to make it easier to visually differentiate between sections.
The original site contained a lot of text clutter, and while functional, was not always the most visually scannable. Creating distinct sections by using a filled in background and card type layout allowed for better readability.
Prioritizing and Condensing: several groups of information were condensed into a container with tabs so that users would be able to quickly switch between sections.
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.
During user interviews, we 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. However, the website was not optimized for mobile use, so that would lead to user difficulties. Based off of this information, the product manager determined the need for a mobile app of the internal site that would allow technicians to perform key tasks.
Much of the information on the service site is displayed on large tables that contain a lot of content, but mobile devices don’t necessarily have the size to support that kind of view.
Certain functions on the site may perform better on the laptop, so there is a need to determine which site functions should be part of the mobile design.
Much of the information on the service site is displayed on large tables that contain a lot of content, but mobile devices don’t necessarily have the size to support that kind of view.
I reduced content-rich tables to only essential pieces of information to help with readability for users. Full versions of the tables would need to be viewed through the desktop version of our site.
Logs and notes were two features that allowed users to record various important things about the cart they were maintaining. Allowing users to quickly enter notes and categorize them with a tap helped to streamline the process.
The main functions a technician would be able to take on the mobile app would be to diagnose any further issues of a cart and resume the rolling of ads on their digital screens to set the cart back into its standard mode. Using the desktop site would show the full range of actions a technician could take for a cart.
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.
After handing off my designs, our development team began implementing the design changes to the desktop site. This is the current state of the cart detail page. I will continue to refine the usability of the site's functions for better efficiency in future field use.
