.png)
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.
Requirements
Activate's primary requirements established at the beginning of the project were:
- Activate must automatically create a barcode number after users input necessary product information.
- Users need to be able to edit the information associated with their products.
- 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.
- 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:
User flows
Challenge
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.
Solution
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:
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.
Refinements
After completing the initial explorations, it was clear we had to add to our requirements.
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.
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.
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:
Step 2: user enters product data to be associated with the barcode number, like company name and product image:
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.
Step 4: user sees their generated barcode number and is able to download their barcode image:
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.
The user then specifies how many base products the higher-level product contains:
The user confirms that the information entered on the previous step is correct:
Users see their generated barcode number on the final screen:
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.
The Products page shows users all their products in a data table along with the associated barcode numbers and the product status:
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:
Outcome
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
Reflection
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.
