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.
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.
Increased task efficiency by 65% through page layout reorganization.
Designed 10+ new screens for desktop and mobile site versions.
Created a simplified mobile version of the internal management platform, allowing technicians to quickly access and locate information when needed.
When looking at the users, I found that several different technicians could use this site for different purposes, but much of the time, this site would either be accessed at the grocery store, which was where the carts would be operated, or within the warehouse where carts were maintained before being sent out.
I spoke with the team of 7 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 understand the site’s pain points, I walked through the site myself and noted any areas that could potentially be improved.
Much of the site's issues lay with lack of visual hierarchy, lack of text alignment, as well as a lack of visual interest.
To understand what might be a better design for this kind of management platform, I took a look at other sites that also manage different pieces of information that are displayed on one page. The goal was to look at other sites that successfully manage multiple pieces of information and maintain a live product.
Building on the issues identified through the visual audit and user interviews, I decided to change certain design elements of the site. One of the major changes I discussed with the product manager was the addition of info cards on the pages containing each individual cart’s information to contain all the different types of information and make it easier for the technicians to locate whatever they were looking for.
Created different visual options for the pages that were on the site and designed new visuals for pages that were planned to be built.
I received input on priority placement of certain sections and further context on how technicians might interact with the page. For mobile screens, I received input on the most essential pieces of information that technicians would use and which ones were less often used.
The final design I came up with utilizes a card style format to contain different sections of information. Several key changes made here were:
The final design of the cart detail page has key actions prioritized and moved to the top of the page for easy viewing. The information on the page has been condensed and collected into multiple cards for a more organized layout. Additionally, there are tabs included in the card that contains cart info and more, for easy switching between different pieces of information. This keeps the user from having to scroll down on the page and saves them search time.
The mobile version of our desktop site was designed to be more minimal, with less information on the page than seen on the desktop site, and prioritizing the main key functions that are needed to maintain the carts in the field. This version would primarily be used on site by the technicians and would allow them to quckly document or diagnose any issues found with the carts.
Users were tasked with locating a piece of information on the screens while being timed. First I asked members on the team who didn’t usually use the website to find something on the current site and then later asked other team members to find something using the redesigned screens. 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.
Implementing more accessibility: Making sure that text that is clickable can be seen as such in various ways.
Responsive Screens: Continue designing for mobile and tablet views so that technicians will have the options to use an optimized version of the site on whichever device they choose to use.
Additionally, I will continue to further refine site as new features are found to be needed and developed.
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. Unfortunately, the live site is no longer available for viewing as our startup was shut down in June 2024.
