UX CASE STUDY: DOGGOS

A closeup photo of my dog looking up at the camera
This one’s for you, Rhino!

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 SmartLabel® landing pages of four different cheese puffs snacks are shown to demonstrate how SmartLabel® makes it easy to compare lots of information about products
SmartLabel® helps me make better choices

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.

A collage of a dozen different pet food packages showing how no two are alike in their presentation of feeding instructions
I’m seeing lots of tables and supporting text…

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.

A display of my early wireframes showing trying to cram feeding instructions into the Nutrition tab of the SmartLabel® people food template
Doing some rapid mocks like these helped get quick feedback and identify big problems

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.

A collection of potential icons for the proposed SmartLabel® pet food template using bones and bowls for the Nutrition tab and a measuring cup for Feeding Guidelines tab
I tested a few icon ideas. No one liked the bowls.

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.

Try one out for yourself

A full screen grab of the linked live data input digital paper prototype that highlights with blue the clickable areas on the page
An early InVision “paper” prototype. Click to try it 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?
  • What issues do users find with our proposed SmartLabel® Pet Food template?
Three versions of the data interface are shown with no to a lot of help copy and links. Version C with the most robust instruction confused users if they would be stuck with only one format. A & B tested without any issues.
Version C with the most robust instruction confused users if they would be stuck with only one format. A & B tested without any issues.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s