Barcode decision assistant: helping supply chain professionals adopt the barcodes of the future

How can we help people decide which new barcode is right for their company's products?
My role
Lead designer
January 2021–January 2022
Bailey Brand Consulting

Most of us picture the same thing when we think of a barcode: a little graphic with black lines. This graphic encodes a product's unique identification number, known as a GTIN. Within the last 15 years however, more advanced barcodes have been developed that not only encode a GTIN, but also additional useful product information such as expiration date, a URL, allergens, point of origin, customer ratings, and so much more.

The cost of migrating to these advanced barcodes is high, and supply chain professionals at large companies don't even know which of the many options to pick. GS1, the international standards organization behind the barcode, is trying to deepen industry adoption of these more advanced barcodes to benefit companies and consumers alike.

Users and audience

The users for this tool are supply chain professionals at large companies. These are the people in charge of inventory management, product data, or logistics. They care about optimizing systems and processes and making sure their company's supply chain is running smoothly.

They know an extensive amount of information about barcodes and are an audience with advanced technical knowledge.


The client decided to start with an MVP: only the consumer packaged goods (CPG) and fresh food industries would be supported at launch, and it would be a desktop-only experience.

The team

My role

I was the lead designer for the project, which meant I did the user flows, wireframes, and usability testing. I was also the main point of contact with the client.

Other team members

Also on the team were the creative director for the brand, our director of web development, and an account manager.

Client stakeholders

On the client side, there was a marketing manager and two subject matter experts: standards engineers who specifically worked on migrating to advanced barcodes.


There was no writer on this team, and all content was written by the engineers. Even though the content was meant for a technical audience, the copy was far too technical, and there was too much of it.

How we handled it

This was tricky! We heavily edited their copy and frequently asked them if there was a clearer, more concise way to say something. Ultimately though, I wish there had been budget to include a writer on the team.

Design process

Getting the flow right

The clients provided a 100-page powerpoint detailing the flow they felt would be best. It was very much a linear walkthrough that was full of distracting information that interrupted the process of learning about advanced barcode options:

A user flow that the client originally proposed


The client had multiple competing goals for the project, and none of them were easily measurable.

How we handled it

We encouraged the client to align behind a single goal for the MVP. It was ultimately decided that the goal should be to help users understand the differences between their many barcode options and make an educated selection.

Rather than taking users down this defined, linear path, we recommended having users select their industry and then show a tabbed screen with information based on their selection. One tab would be all their possible barcode options that were filterable by various features, and each barcode would have its own detail page. The other tab would show the use cases for migrating to advanced barcodes, each with its own detail page. Ultimately, we wanted to center the actual tool that would allow users to compare their barcode options to find the best one for them. The client agreed.

The user flow that was agreed upon

Initial explorations

We started exploring what the barcode comparison page could look like, as that is the most complex screen. The basic idea was to show the barcodes the user could choose between along with some defining characteristics and any differences between them.

We also had the idea to have users select the barcode they were currently using so they could more easily compare it to the advanced barcodes and clearly see the benefits of switching.

Two explorations for a web page design
Two explorations of the barcode comparison page showing different filter placements and table layouts.

Ultimately, we decided to move forward with a large table with chip-style filters:

An annotated web page design

Building out the rest of the screens

After getting to a good place with the barcode comparison screen, we built out the others.

First the user selects their industry and the current barcode they use.

A web page design allowing the user to select which industry they belong to
Users choose from a list of supported industries and are presented with additional resources if their industry is not currently supported.
A web page design showing a screen allowing the user to select their industry and the barcode they currently use

Then they are taken to the filterable table.

A web page design showing a table with many different barcodes and their various features

After clicking on one of the barcodes, they'd see more detailed information about it.

A web design of a modal overlay
A detail modal for one of the barcode options.

If they wanted to learn more information about the benefits of switching barcodes, they could click on the "business use cases" tab and be taken to an informational page. They can then click on one of the use cases to read more about it.

An image showing a page with business use cases on the left and a detail page on the right
The business use cases page along with a detail page that speaks to the benefits of migrating to an advanced barcode for the selected use case.

First round of user feedback

We showed the first prototype to a group of potential users at GS1's annual conference to get an informal initial reaction. We got a lot of great feedback:

  1. Users wanted a way to bypass selecting their current barcode, as some of them didn't know what it was and some of them were actually using multiple barcodes on their products.
  2. Users found the controls to switch industries and use cases difficult to find on the barcode comparison page.
  3. Users wanted to see the barcodes for the transitional period highlighted more rather than hidden within a modal. They were excited for the future state but were most curious about how to get there.
  4. Users were most motivated by their use cases, so those needed to be emphasized more and established up front.

Revising based on feedback

We edited the screens so that after selecting their industry, users would then select the use cases they were interested in (multi-select) and their current barcode. We added the option to skip this step in response to the feedback.

Web page designs showing screens that allow the user to select their business use case and the barcode they currently use

Users would then be taken to a results page that combines information about their selected business use case with information about their barcode options.

A web design of the final result screen

Usability testing

We conducted usability testing with five participants from the tool's target audience. These were 45-minute moderated sessions, and actually speaking with participants myself and hearing their thoughts first-hand was extremely beneficial. We spoke with the heads of barcode implementation at large CPG companies and got great feedback.


  • All participants expressed excitement over the development of this tool and said it contained valuable information.
  • All participants found the tool easy to use.

Areas for improvement

  • Participants had difficulty understanding what the tool does and the audience it serves. They wanted the tool to tell them specifically which barcode to use rather than presenting them with a variety of options.
  • Participants unanimously expressed that the content was too technical and that there was too much of it. This confirmed our initial feedback to the client. One participant said "there's a lot of stuff that's all gobbledygook to me."
  • Half the participants did not notice the table scrolled horizontally. We felt this was a result of the level of fidelity of the prototype and would be solved during the visual design stage, however we did want to test it again once we got there.
  • Participants unanimously mentioned the "next" buttons in the initial screens were cumbersome. This was something we clearly had to address.

Our recommendations to the client

  • Regroup to clarify the purpose and audience of the tool and assess whether we're on the right path. They should align behind a clear sense of what the goal is and who they're speaking to.
  • Have a collaborative working session to rewrite content where necessary to condense copy and make it less technical. For each sentence, they should ask "is this content necessary" and "is there a simpler way to say this?" When technical terms must be used, tooltips should be added to define them.
  • Present the benefits of migrating to advanced barcodes up front rather than towards the bottom of the page.
  • Because the tool wasn't capable of telling users exactly which barcode to use, we should change the name from "barcode decision assistant" to "barcode explorer," which sets more realistic expectations.

Retiring the project

The client team regrouped and unfortunately decided to not move forward with the project as it was originally conceived. Their team changed, and the new team decided that the original goal and audience defined by the previous team wasn't right—rather than speaking to technical people they wanted to speak to executives and therefore the content had to be significantly higher-level. In fact, they completely removed the idea of an interactive tool in favor of three informational pages that discuss the benefits of migrating to more advanced barcodes without showing any technical information about the barcodes themselves.

Because the project had changed so drastically from being an interactive service to being three static informational pages, I handed it off to a junior designer to complete. I still offered her guidance and reviewed her work, but ultimately I was needed on other projects.


It's really hard to work on something that ultimately doesn't ship, but I know it's just what happens sometimes. Even though I was sad to retire what I feel is such a cool project, I'm so glad the new client team took the time to go back to the drawing board, think critically about what they really needed, and then execute that new vision. That's not an easy thing for teams to do.

There are a couple benefits that came out of working on this project:

I gained experience conducting usability testing

This was a new area for me, and I'm so glad I got to do this. I decided on the overall testing plan, wrote the script, conducted the testing, and wrote a report of our findings. I feel confident that I could do this on another project in the future.

I learned Figma and convinced the agency to switch over from Sketch

This was my first time working in Figma, and I did it as sort of a pilot for the rest of the agency. I presented some of the benefits to my peers and design management, and they agreed we should switch over from Sketch. This is an ongoing effort that I am leading.

Next up