Lead Product Designer
Lead Front End Engineer
Lead Product Designer
Lead Front End Engineer
ABOUT THE PROJECT
At Label Insight, we digitized every single piece of information on any packaged food with a barcode. We then derived thousands of additional data points to show if something was gluten-free, heart-healthy, Whole 30, etc., based on the ingredients. I helped brands use this data in astounding ways. With the data we created, brands could finally accurately compare their own products across entire categories, power internal product information management systems, or send it to retailer webpages like Amazon or Target.
A lot of brands also use this data to populate SmartLabel pages, which present normalized product data in a mobile–first friendly format. SmartLabel allows consumers to easily find specific things about any product, such as allergy warnings, certification or recycling information, and much more. It also gives brands a way to add expansive product details that don’t fit on the packaging, such as really detailed ingredient definitions, sourcing or sustainability details.
SmartLabel helps me make better choices.
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). The SmartLabel design also has to be a mobile-first design so the design has to extremely efficient. SO COOL to be a part of something consumers across North America will use to find and compare the best pet food products for their pet’s specific needs.
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 our team and so we 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.
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 started researching pet food packaging styles, requirements, and regulations.
When it comes to feeding instructions, pet food packaging has only one requirement to inform what amount of food to feed for a given pet’s weight. How that is displayed on a 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 needs to have guard rails for these.
Every package I look at is at first a different chaos, but patterns always emerge to inform the design.
Even under pressure for time, we found ways to talk to enough stakeholders to discover a few key things:
- 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 being able to compensate for display limitations.
WIREFRAMES: Smart Label
SmartLabel has a basic design system that I have worked on evolving through their implementation guides every year. This makes life easier, being able to start with the decisions made in the SmartLabel Design system and work backwards to the data input forms on the Label Insight platform. As well, it helped identify where the SmartLabel design system fell short and what new UI might be required. Ultimately, we can’t lose sight that consumers will use these SmartLabel pages to navigate how to feed their pets.
I showed our internal teams the pitfalls of cramming pet food package information into the existing SmartLabel people food templates to demonstrate the breaking points. Also, users we tested with felt the Guaranteed Analysis nutrient table should be in a separate place from the feeding instructions even though these were most often right next to each other on the package. That was going to require designing a special top-level navigation for SmartLabel.
Some stakeholders thought combining the Guaranteed Analysis with the Feeding Guidelines would work, so I turned around some quick mocks for everyone to see for themselves. Once seen, most proponents changed their minds and we knew they needed to be in separate places.
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 Feeding Instructions deserves.
SmartLabel navigation tabs for people food. My cats only use knives or forks to knock off the table.
A new Feeding Instructions tab that replaces the Allergens tab would need a new icon, and one that fits in with the existing icons. If possible, it should also strengthen the difference visually between the human and animal templates. I thought the pet food Nutrition tab could also be another opportunity for that. Plus, last time I checked, pets don’t use a fork and knife.
WIREFRAMES: Label Insight
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 the leanest solution that can 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 minimal InVision prototypes. Building these are super quick, cheap, and effective. We gave the testers problem scenarios and watched what steps they took to complete each task and where they got stuck.
The big questions I need the prototype to answer:
- Can the data process teams instinctively translate their packaging information onto their SmartLabel pages with the minimal toolset of our design experiment and will brands be satisfied with how they display on SmartLabel?
- How much instruction and examples do we need to include, and how discoverable do those need to be?
I’m also going to carefully watch for any usability issues that I can fix with some quick tweaks before handing off the designs. In addition to the instruction input tool, we also tested three versions of the landing page:
Of the three versions tested, C with the most robust instructions initially confused but didn’t slow processors down, while A and B tested without any issues.
The SmartLabel template we proposed did not require any new UI components or tricky coding. We got quick alignment from the core committee, “A no-brainer”, and my design became the official template for brands in the SmartLabel Implementation Guide.
OUTCOME: LABEL INSIGHT
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 their larger complex tables into several simpler ones. As it turned out, we scored some big wins:
- The data input teams didn’t have trouble understanding how to break apart larger tables, while the simpler tables were also easier to digest by SmartLabel users, especially 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.
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 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 the tool instead of being buried in support documents.
Even though initially some users struggled with a version that had the most robust hand-holding verses more minimal designs, 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 also got some great suggestions from users for the 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 can take CSV files and auto-populate tables and text blocks
- Think of excuses to involve actual dogs and cats in the design process so the team could pet them like this beautiful boy (my previous dog, Rhino):