INTRODUCTION
At Label Insight we took any packaged edible with a bar code 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 use this product data in many ways. They could compare their product against others in the same category, fuel an internal PIM, send it to retailer webpages like Amazon’s or Target’s, or populate SmartLabel^® pages which present product information in a normalized mobile–friendly format so consumers can easily find and compare what they care about for any product. It also lets brands add more product details that do not fit on the packaging.

THE PROBLEM
I was challenged with designing an interface that would allow the input of feeding instructions from 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 are the problems 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 to feed 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 for brands to display certain information if it appears on the package but still way too much for them 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. The task of inputting the package data was usually assigned to contractors or grunt workers with high turn over.

• Our customers wanted flexibility so they could mimic the packaging as close to the package as possible on SmartLabel^® but adapt as needed to compensate for its display limitations.

“There’s no way we can go with just one format. We need to have to have the flexibility to do it in tabular or paragraph form.“

There are no regulations around pet allergies so we thought we could replace the Allergens tab from the people food template with a new pet food tab called Feeding Instructions and leave the Guaranteed Analysis by itself on the Nutrition tab. This is exactly the high-profile location this information deserves.

A new Feeding Instructions tab needed a new icon and one that fits in with the existing icons. If possible it should also strengthen the difference visually 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 a fork and knife.

LABEL INSIGHT WIREFRAMES & PROTOTYPES
User testing was done on the data input interface and the SmartLabel^® display template with CS, customers and demonstrated to the SmartLabel^® core group. I needed to make sure it was going to serve both the users and the business. The users need to easily and effectively translate their packaging into the SmartLabel^® template while the business needs as lean as possible a solution that could be iterated on.

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. We gave the testers problems scenarios and asked them what steps they would take to see if they click through the happy paths or where they got stuck.

Try one out an early one for yourself

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 and can users locate it?
• What issues do users find with our proposed SmartLabel^® Pet Food template translating from the large free space on packaging to the limited display options of SmartLabel^®?

OUTCOME
Trying to design for inputting 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.

FINAL 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 a similar formula across their own packaging. This makes it easy for our most important users, our paying customers, to quickly get up to speed and publish their pages.

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 and 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