Marketing Design System

Lead UI/UX Designer | Sketch, Invision, Abstract, Figma

The Marketing Design System is something unique to external clients and brand suppliers. Shell, Valvoline, Pennzoil, Mobil 1, Chevron, B’laster, Avalanche, and 3M are just a few of the brands we partnered with to create specific brand pages on napaonline.com. This design system is a collection of reusable components, guided by clear standards, and responsive behavior to ensure efficiency, and consistency in designs. With the creation and implementation of this design system, these projects increased rapidly.

Overview

NAPA wanted to generate more revenue through brand pages on napaonline.com. Each brand page leverages the marketing design system which is consistent with the NOL UI and our brand standards. The brand suppliers are able to create their page based on the reusable and responsive web components. Once they select the components that work best for them, I built their pages leveraging the design system. Before the creation of this design system, each page would take around 40+ hours to customize and create. With the implementation of this design system, production time took about 4-8 hours depending on how many pages the supplier requested.

The Challenge

Be consistent with the NAPA Brand but also find a unique way to give each brand page it’s own flavor.

Business Goals

Design responsive web pages we can sell to suppliers in order to boost SEO and increase sales for that product.

The Process

As the lead, I was responsible for the creation of the design components. I implemented this design system so we could rapidly create pages for a variety of suppliers.

The Results

Over 34 web pages have been created for a variety of suppliers using this design system.

Figma Variants

This video shows how the design system was used in order to speed up the design workflow. Please ignore any errors, typos, or misclicks made in the video for the sake of the demonstration.