INTRODUCTION
At Label Insight we took any packaged edible with a barcode and digitized ever single piece of information on the package. Then we created even more data based on that package information (is it gluten free? heart healthy?). I helped consumer packaged goods companies utilize this product data in many ways including SmartLabel® which presents product information in a normalized mobile–friendly format so consumers can easily find the information they care about in the same place for any product. It also lets brands add more product details that don’t fit on the package.
THE PROBLEM
I was challenged with designing an interface that would allow the input of feeding instructions off of pet food packages no matter the myriad of ways they are presented across the industry and how it might display on a SmartLabel® page. Oh and guess what? SmartLabel® didn’t have a pet food template yet. It was purely for people food at this point so I also needed to work with the team to design how it would display on SmartLabel® and get that complete pet food template approved by the SmartLabel® core committee. No problem. Let’s do this…
RESPONSIBILITIES
At Label Insight I was responsible for design for a couple agile teams. I was responsible for all UX research, wireframing, prototyping, high-fidelity comps, stakeholder and user testing and approval, and design deliverables. For this project I also worked with data, regulations, and customer success team members.
I believe in the tri-force of power of a product manager, a lead engineer, and a designer all invested in the design process.
PROCESS
At the start of any project I always confirm with stakeholders 3 things:
- What is the problem we’re solving?
- Who are we solving for?
- What are the goals of the project?
This usually gets amended as the project progresses but serves as a basic compass before the full design thinking process begins.
With everyone now on the same playing field, I started with interviewing internal stakeholders to uncover who will be using this tool and what challenges they are going to face. I also started market research to learn about pet food packaging styles, requirements, and regulations.
MARKET RESEARCH
When it comes to feeding instructions, pet food packaging has only one requirement to inform the amount of food for a pet’s weight. How that is displayed on package is totally up to the brands and every brand does it differently. What I found was that this was usually done one of two ways, by a table or by a text description. SmartLabel® also has a small handful of requirements to display certain information if it appears on package but still way too much for anyone to learn and memorize.
INTERVIEWS
Interviewing stakeholders made a few things stick out:
- Customer Success needed a solution that would not require training or much support. This task was usually assigned to contractors or grunt workers with high turn over.
- Our customers wanted flexibility so they could match as close to the package as possible but change as needed to make sense for SmartLabel’s display limitations
“There’s no way we can go with just one format. We have to have the flexibility to do in tabular or paragraph form.“
SMARTLABEL® WIREFRAMES
I needed to start with the SmartLabel® side to establish the final output to inform the input design. I showed our internal teams the pitfalls of cramming pet food into the existing people food template to see the breaking points which helped guide the design process. We could just throw everything in the Other tab but this was some of the most important information on the package. We didn’t want it to get lost. The Nutrition tab seemed like a logical place since the feeding instructions were nearly always paired with the Guaranteed Analysis but users felt that it just made a mess of things. They were right.
There are no regulations around pet allergies so we thought we could replace the Allergens tab with a new one called Feeding Instructions and leave the Guaranteed Analysis by itself on the Nutrition tab. This was just the high-profile location we needed!
A new Feeding Instructions tab needed a new icon. I also wanted to visually strengthen the difference between the human food and the pet food templates. I thought the pet food Nutrition tab could be another opportunity for that. Plus, last time I checked, pets don’t use forks and knives.
DATA INPUT WIREFRAMES & PROTOTYPES
User testing was done on the data input interface and the SmartLabel® display template with lots of different groups. I needed to make sure it was going to serve both the users and the business. The users need to easily and effectively translate the packaging into the smartlable template while the business needs as lean as possible a solution that could be iterated on as needs developed.
I’m not testing if users know how to use forms. I’m testing if my solution solves their problems.
We tested with digital “paper” prototypes in InVision using full screen mocks that swapped out depending where the user clicked. Building these are super quick, cheap, and effective. Plus I don’t want to waste testing time having users superfluously typing in things.
I had several questions I needed the prototypes to answer:
- Do users have enough tools to adequately translate the packaging information onto the SmartLabel® page?
- How much instruction and examples do we need in the include?
- What issues do users find with our proposed SmartLabel® Pet Food template?
OUTCOME
Trying to design for complex tables with lots of columns was out of scope both technically and design-wise with the time we had. We tested a design where the tables were limited to 2 columns which required users to break up larger tables. It turns out users didn’t have trouble understanding how to break apart larger tables and the simpler tables were also easier to digest by users when using SmartLabel® on mobile.
- Over time customer success reported low to no time spent on user training and support. They got the hands-off solution they needed.
- The internal data QA team was able to replace their manual solution with this, cutting their effort time in half.
- The SmartLabel® template we proposed did not require and any new UI components or tricky coding. “A no-brainer”, it was easy to get alignment from the core committee and my mocks are even used as examples in the official SmartLabel® Implementation Guide.
HIGH FIDELITY MOCKS
Here’s a working example of a customer’s actual SmartLabel page that utilized this feature: http://smartlabel.pureharmony.com/product/6198683/other
LESSONS & NEXT STEPS
We learned that even though the back of pet food packaging is a kaleidoscope of presentations, most brands stick with the same formula across all their packaging. This makes it easy for our most important users, our paying customers, to quickly get up to speed.
We also learned that no one is going to recall or memorize the SmartLabel® requirements. Those needed to be readily accessible instead of buried in support documents.
Even though some users struggled with a version that had the most robust hand-holding, we decided to stick with it and revise it. While the zero confusion around the other mocks looks like better data, the prominence of the visual and linked help was more effective at getting most users up to speed quicker. We were confident the small confusion could be ironed out with an improved design later.
We also got some great suggestions from users for next iterations:
- Add a way to duplicate tables to speed up repetitive data input
- Make it easy to copy and paste tables and text blocks between products
- Build a wizard that could take CSV files to auto-populate tables and text blocks
- Think of excuses to involve actual dogs and cats into the design process so the team could pet them
