White Label Design System

Role: UX/Co-Lead Designer

Our client at B&G Foods came to us with a monumental project: they wanted to update the websites for their portfolio of over 50 brands, many of them household names like Ortega, Cream of Wheat, Weber Seasonings, and Bear Creek. And they needed them done as quickly as possible.

Building a Plan and a System

As a team, with Content Strategy and UX leading the way, we did a full audit of every single brand site. We looked at what kind of content already existed, how many products and recipes each site had, what kind of categories and filters they used, what kind of nutrition data was associated with products. We grouped each site into “small”, “medium” or “large” based on the amount of content & customization they needed. At the same time, we were also developing product and business goals, figuring out who our target audiences were, and developing user personas and use cases.

We then set about designing a design and component system we called White Label. We mapped out all the different components we’d need for the sites- homepage blocks, featured products and recipe blocks, footers, FAQs, text blocks, page headers, navigation- and began wireframing and designing all of the blocks and variations in desktop, tablet and mobile. We worked closely with the front and back end developers as we designed and they built component blocks, testing and updating as we went. And even as the project kicked off with the brand sites, we still continued to come back and update the core components, or add new components.

We also designed a White Label style guide template, including a type scale and a button/form template, so we could easily swap colors, fonts and styles for each brand.

We wanted the White Label styling to feel “designed” but still generic enough to serve as a starting point, a step above high-fidelity wires. We knew that in our very short time span, there may be some smaller sites where we only had time to swap colors, fonts, button styles and images. Our foundational work in setting up the White Label design helped us save time without sacrificing good design.

Categories and Filters

Some of the websites needed more than just picking up the current Category and Filter content and moving them to the new site- they needed to simplify.

Maple Grove Farms was one of those sites. The products are straightforward- they sell 4 different types of items: Maple Syrup, Dressings, Baking Mixes and Maple Candy. But the cluttered hierarchy of the Categories made the Product section overwhelming. The main categories included your typical product types (i.e. Dressings), but also things like “Sugar Free”, which could also describe some of the dressings. Browsing the products was unnecessarily confusing, and for a site with only 4 main product types, we knew that needed to change.

I worked with our Content Strategist to audit the existing categories. Our solution was to keep it simple. We kept the original high-level categories that made sense: Syrups, Dressings, Baking Mixes and Candies. And we got rid of the descriptive high-level categories like Sugar Free. In fact, we got rid of all sub-categories and instead introduced a Nutrition filter to the Products page. Grouping all of the nutrition based items under a clear label made it easier for users to do product-wide searches for things like gluten free and sugar free.

Branding & Visual Design

The B&G Brands had varying levels of style guides/brand assets that were passed to us at the beginning of the project. Some of them, like Ortega, had robust style guides with patterns and colors to work with. Others came with a logo and maybe one or two brand colors, and very outdated websites. So it quickly became apparent that not only were were building websites, we were also helping to craft their entire brand’s look and feel. As a design team, we worked together to create a Style Tile template that we used to sell our initial ideas for colors, fonts, images, and site elements to both our internal account stakeholders and the client.

Establishing those brand styles up front helped us not only quickly jump into design, but be able to really customize each site, so that while built on a system of common components, each website has a distinct look and feel all its own.