Creating a marketing DESIGN SYSTEM

Bonanza is an online marketplace that empowers entrepreneurs to create their dream businesses, minus the busywork. I worked with product manager Reilly, lead developer Eric, front-end developer Ian, and QA specialist Jacob to create a design system for our marketing efforts.

Defining The Problem

Like most companies, our marketing campaigns have evolved and updated over time. However, we had no guidelines or systems in place to provide consistency from campaign to campaign. Many of our processes were complex, and systems were added to rather than iterated. For example, we had three different ways to create emails:

• Our on-site newsletter builder. We sent weekly and monthly newsletters through a content manager built into our site. We could send these emails immediately or schedule them for a future date.

• Our “mass mailer” tool. One-off emails like announcements, site updates, and feedback requests were built using a specific HTML template edited using a WYSIWYG / source editor. These emails would be queued to send out within the day.

• Hard-coded and built by programmer. The majority of our emails required a member of our development team to implement. These campaigns usually had complex triggers and multiple emails, and took an average of about five days to implement.

Using developer resources for new email campaigns became tougher over time as our team downsized. Our “next man up” mentality meant that there was no single owner of our email efforts. Following a trail of code left by previous developers was not efficient.

Identifying desired Outcomes

I wanted to establish a design system that could be reused in upcoming campaigns. This set of email marketing elements and modules would be reused in upcoming campaigns, including holiday projects like Cyber Monday, Black Friday, and Halloween, as well as seasonal surges like springtime gardening and Valentine’s gifts.

These elements could also be used in on-site marketing materials so that buyers could easily identify common threads. With this in mind, I crafted a handful of user stories to serve as a guide through this project:

• As a designer, I want to deliver visually stimulating marketing campaigns that increase conversion and satisfy the metrics set by our marketing team.

• As a designer, I want to have shared language and understanding of marketing elements so I communicate ideas quickly to our development team.

• As a marketer, I want to have consistency across our marketing efforts so that buyers can identify campaigns from their visual similarities.

• As a programmer, I want to save time by reusing work that I know is aligned with the product team’s expectations and goals.

• As a programmer, I want to know how each element will behave in any given campaign without rebuilding each time.

Designing a solution

This design system is made up of several elements. These included layouts, typography, iconography, visuals, and tone.

Layouts

It was important to me that these designs looked as engaging on mobile devices as they did on desktop. I created a layout pattern that used largely two-column frameworks, with the option to shrink to one-column for smaller screen sizes. I worked closely with front-end developer Ian and QA specialist Jacob to ensure the layouts and modules we created were stable across all devices.

The modules I designed for this system could be easily modified to work with a wide variety of content types. The first module is called the “HPL Module” and is most commonly used with our hand-picked lists (HPLs). This module was recently reused for seller spotlights on Small Business Saturday and our new gift guide homepage. The second module created is called the “Category Module” and is widely used in any of our emails that use product images. This module was also reused on our gift guide homepage, and can be found many other places on-site.

Typography

Our marketing design system did not have to completely align with our site styles, so we chose a typeface to complement our existing UI. I wanted to keep things bold and clean so that our copy was easy to read and didn’t distract from product images. For headlines, I opted for a clean sans-serif (Proxima Nova) and kept our branded font (Lato) for all other copy.

Iconography

The marketing campaigns we ran did not often use icons, so I opted to use standard icons that could be found in our site directory (via FontAwesome) instead of creating bespoke icons for each new campaign.

Visuals

Bonanza as a whole uses a nice mix of illustrations and photography, with site and transactional projects leaning more toward illustrations and marketing collateral using photos. The primary photos used in our marketing efforts are product images from Bonanza sellers. I pair these images with lifestyle photos that mirror our homepage hero images, giving an aspirational feel to our visuals.

For this design system, I created a simple illustration pattern that could either be paired with photos or used as a standalone graphic. Many of these campaigns are sent during celebratory times of year, so I wanted to bring in that feeling of joy and excitement with a simple confetti graphic. I used this to draw attention to hero photos of item images used in our most recent Black Friday email campaign.

Rather than creating new abstract illustrations like the confetti graphic, I opted to create several color schemes to use for seasonal marketing and specific campaigns. This creates a familiar motif for buyers, but keeps our efforts seasonally relevant to them.

Tone

Tone is not a large part of this design system, as we have a copy style guide that goes into great detail about language and tone used in Bonanza writing. As a general rule, we like to use a positive and upbeat tone that uses quips, puns, and other witty language to come across as a friendly acquaintance. I want shoppers to feel like Bonanza is familiar to them, and that we genuinely have their best interests in mind.

Measuring the outcome

This design system was in the process of being completed at the time of my departure from the company. I wasn’t able to see it fully implemented, but there were some key learning opportunities throughout this process.

Key Takeaways

• Documenting early saves time down the road. The knowledge lost when our primary email programmer left the company was unexpected and vast. Taking the extra time to document changes, updates, and use cases on a per-project basis will make sure everyone’s in the loop on future projects.

• Take time to understand stakeholder perspectives. I had multiple meetings with our developers to discuss the technical limitations of my proposed designs. This helped me learn what was possible on their end, and let them know that I was flexible with the final design.

• Consistency is the base coat for brand polish. Creating this design system will give a cohesive feeling to our marketing efforts. This will position our brand as a professional, reliable, and trustworthy company.

Back to projects