UX CASE STUDY – Dogs!

INTRODUCTION
At Label Insight we took any packaged food with a bar code and digitized every single piece of information on the package. We then created even more data based on what was collected (based on the ingredients, is it gluten free? Heart healthy?). I helped brands use this product data in many ways. They could compare their product across its entire category, fuel an internal PIM, send it to retailer webpages like to Amazon or Target, or populate SmartLabel pages which present normalized product data in a mobile–friendly format so consumers can easily find the specific things they cared in the same place no matter the product. It also gives brands a way to add expansive product details that don’t fit on the packaging.

 

THE PROBLEM
I was challenged with designing an interface for pet food brands to intuitively self-digitize the feeding instructions from their packaging, no matter the myriad of ways they are presented across the industry. Secondly, a major intent was to use this for SmartLabel pages but the Consumer Brands Association did not yet have a pet food template design to display these instructions. So I also needed to work with them to design a pet food template for SmartLabel and get it approved by the SmartLabel core committee which is made of VPs from the major brands (Pepsi, Conagra, Unilever etc). SO COOL to be a part of something consumers across North America will use to compare and find the best pet food products for their pet’s specific needs.

RESPONSIBILITIES
At Label Insight I was the UX designer on multiple agile teams. I was responsible for all UX research, wireframing, prototyping, stakeholder and user testing, and design deliverables. On this one we really needed to expand the collaboration beyond the Publish team and also worked with data, regulations, and the customer success teams to make sure this was not only easy to use with minimal training but also met any industry requirements.

I believe in the tri-force of power of a product manager, a lead engineer, and a designer all invested in the design thinking process and success of the customer.

PROCESS
At the start of any project I always confirm with stakeholders 3 things:

 

• • Who are we solving this for?

• • What are their problems?

• • What are their goals and the goals of the business?

We win when we create value for the customer and remove pain. After this level-set, I start with interviewing internal stakeholders to better understand our potential customers. I also start researching pet food packaging styles, requirements, and regulations.

MARKET RESEARCH
When it comes to feeding instructions, pet food packaging has only one requirement to inform an amount of food to feed for a given 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: either by a data table or by a text description. SmartLabel also has a handful of obscure requirements to display certain package information in specific formats. Way too much for brands to learn and memorize so the design need to have guard rails for these.

 

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 needed flexibility so they could mimic their packaging as close as possible on their SmartLabel pages while able to compensate for display limitations.

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

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 the SmartLabel core group. I needed to make sure it was going to serve both the users and the business. Users need to easily and effectively translate their packaging into the SmartLabel template while business needs as lean as possible a solution that could be deployed quickly.

I’m not testing if users know how to use forms. I’m testing if my solution solves their problems.

We tested with a very minimal InVision prototype. Building these are super quick, cheap, and effective. We gave the testers problems scenarios and watched what steps they took to complete each task and where they got stuck.

Try yourself

 

I had several questions I needed the prototypes to answer:

 

• • Do the data process teams have enough tools to adequately translate the packaging information onto their SmartLabel pages?

• • How much instruction and examples do we need in the include and can the data processors locate it?

• • What issues will the data processors find with our proposed SmartLabel Pet Food template, translating from the large free space on their packaging to the limited display options of SmartLabel?

 

OUTCOME
Trying to design for very complex tables on packages 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 any new UI components or tricky coding. “A no-brainer”, it was easy to get alignment from the core committee and my design became the official template for brands in the SmartLabel Implementation Guide.

FINAL MOCKS

Here’s a working example of an actual SmartLabel page utilizing my design:

https://smartlabel.labelinsight.com/product/10826955/feeding

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 the tool 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 zero confusion with some mocks looked like better data, the prominence of the visual and linked help was more effective at getting most users up to speed quicker once we refined it. We were confident the small confusions could be ironed out with ever improving iterations.

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