Activate: empowering small business owners to create barcodes for their products

How can we guide small business owners through the painful process of creating the barcodes required to sell their products?
My role
Lead designer
Bailey Brand Consulting

Barcodes are an essential part of most businesses and are scanned over 6 billion times each day around the world. Each barcode contains a product's unique identification number, and GS1 is the global standards organization that developed and manages those numbers.

For small business owners just starting out, getting a barcode is the key to having their products reach a large audience. However, assigning a barcode number to a new product required advanced technical knowledge—the manual was 100 pages! The barrier to entry was too high, and small business owners were left with a choice to make: either invest countless hours into learning an overwhelming process, or hire expensive consultants to do it for them.

Users and audience

Small business owners comprise roughly 90% of GS1's members, but the existing barcode number tools serve large companies and supply chain professionals. Activate is the first tool created specifically for those who need it most:

  • The home-chef-turned-entrepreneur whose granola Whole Foods wants to stock
  • The inventor of an exciting new product who wants to start selling on Amazon
  • The owner of a small brewery who wants their beer to be sold in local convenience stores

These people are required to get barcode numbers in order to take their businesses to the next level, and they don't have the time or resources to learn an advanced, technical process.

Scope and constraints

  • Activate is a web app and the client wanted to focus on desktop screen sizes alone and not support tablet and mobile.
  • Unfortunately, there was no budget to do research of any kind before launch—I had to make decisions based on instinct and trusting the client's subject-matter expertise.


Activate's primary requirements established at the beginning of the project were:

  1. Activate must automatically create a barcode number after users input necessary product information.
  2. Users need to be able to edit the information associated with their products.
  3. Users need to be able to create product hierarchies. For example, the barcode number for a pack of three t-shirts should be associated with the number for a single t-shirt.
  4. Users need to be able to create barcode numbers for products with a variable price that depends on factors like weight, volume, or length. This is a special use case outside the norm that must be supported.

My role

I took over as lead designer towards the beginning of the project after the previous lead designer had left the team. I was the primary client contact, designed the bulk of the interface while directing a few other designers as necessary, occasionally wrote some UX copy, and communicated with the developers during implementation.

Design process

Understanding how barcode numbers work

The first step to designing this experience was wrapping my head around how barcode numbers are actually created. I had a lot of conversations with the client and mapped out the logic:

A flow showing how barcode numbers are generated
How barcode numbers are created the manual way

User flows


The experience was initially mapped out at the page level by the client in powerpoint (151 slides), and the project started as us just producing the UI. However after reviewing the client's mockups, I could see a lot of UX concerns.


I asked a lot of "how come" and "what if" questions while discussing some of the underlying UX issues with the client. After a couple conversations, we were given the ability to work a little more independently on finding the best solution.

This is the user flow we landed on for the barcode number creation process:

User flow for Activate
Activate flow for creating a barcode number

Initial explorations

We started with the flow for the most common type of product for our users: creating a barcode number for a fixed-price product sold directly to consumers that does not contain other products.

An overview of the steps of creating a barcode number
Initial exploration of how a user would create a barcode number for the most common type of product.


After completing the initial explorations, it was clear we had to add to our requirements.

A before and after of the product information screen design
A comparison of the initial product information screen and the final version.

Misspellings of brand names are extremely common, so rather than having the user enter any value for the product's brand name, we wanted to provide some constraints to make sure the data was correct and consistent from product to product. In the final version, the user selects the brand name and sub-brand name from a pre-defined list. This list contains a combination of the most recent terms used and the most frequently used terms. There is also a small link to create a new brand or sub-brand if this is the first time they're using it.

Two screens with highlighted portions showing data entry updates for brands and subbrands
A comparison of the initial product information screen and the final version, showing an adjustment made for better data quality and consistency.

Selling products in multiple languages is also common, so it was clear we needed to add functionality that would allow the user to input translations of product information. For example, a Canadian business owner would want to give their products a name in both English and French. For each text field, we added another for the corresponding language as well as a link to add an additional translation.

Two screens with highlighted portions showing translation options
A comparison of the initial product information screen and the final version, showing an adjustment made to allow users to input product information in multiple languages.

Final designs

Creating a barcode number for a base-unit product

Step 1: user provides basic information to determine the number of digits in their barcode number and the format of the product data:

A web page design showing how users specify which type of product they are creating

Step 2: user enters product data to be associated with the barcode number, like company name and product image:

A web page design showing how users enter product information

Step 3: user confirms the information entered on the previous step is correct. The product name is automatically generated by combining the product information provided, however the user can rearrange those terms through a drag and drop interface if they'd like to change the order.

A web page design showing how users can edit the automatically-generated product name

Step 4: user sees their generated barcode number and is able to download their barcode image:

A web page design showing that users have a convenient way to edit product data if they realize they made a mistake

Creating a barcode number for a higher-level product

The process of creating a barcode number for a product that contains other products (like a multi-pack) is a little different. After selecting the type of product in step 1, the user then selects which products are contained within the higher-level product they're creating.

A web page design showing a robust table with search, filters, and pagination allowing the user to navigate through hundreds of products

The user then specifies how many base products the higher-level product contains:

A web page design

The user confirms that the information entered on the previous step is correct:

A web page design

Users see their generated barcode number on the final screen:

A web page design

Data management

Users also have the ability to view and manage the data associated with each of their barcode numbers.

The home dashboard allows users to get a high-level view of their products and quickly go to the products they added most recently.

A web page design of a dashboard

The Products page shows users all their products in a data table along with the associated barcode numbers and the product status:

A web page design

The page for an individual product shows all the product's information, the ability to get the barcode for that product, and where it falls within a product hierarchy if applicable:

A web page design showing product information


As sometimes happens in agencies, we handed off the final designs, had limited communication with the developers, and never got to see the finished product or any metrics post-launch. We hear it is a very successful tool, but unfortunately we're not sure of the specifics.

If I had the opportunity, these are the metrics I would look at to determine the success of the product and where improvements could be made:

  • Completion rate of each barcode creation flow
  • Completion rate of the onboarding flow
  • Feedback and help requests given to customer service


This was my first project at my agency and my first large product design project. Given that and the fact that I had no mentor and was figuring it out on my own with no experience, I'm happy with the way it turned out.

Looking back a couple years later, I would make significant changes—the accessibility is poor and the UI and interaction design can feel clunky at times—but that's reflective of my growth as a designer. And since handing off this project, I've created a GS1 design system. I'd love to update the Activate experience to use it, and that would address accessibility issues, provide more intuitive interactions, and lead to a better overall experience.

Next up

GS1 Design System