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.
Scope
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.
Challenge
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:
Challenge
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.
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.
Ultimately, we decided to move forward with a large table with chip-style filters:
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.
Then they are taken to the filterable table.
After clicking on one of the barcodes, they'd see more detailed information about it.
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.
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:
- 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.
- Users found the controls to switch industries and use cases difficult to find on the barcode comparison page.
- 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.
- 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.
Users would then be taken to a results page that combines information about their selected business use case with information about their barcode options.
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.
Successes
- 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.
Outcome
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.
