Best Buy ESG

I was the ACD in charge of the ECommerce Style Guide (ESG), which standardized all the design, UI and development elements for our team. ESG was enormously successful, used on 200+ projects to date, saving an estimated 5,000 hours.

Why Are We Doing It This Way?

I asked this question after taking over the ACD position. Without a dedicated design and UI style sheet, my team was constantly taking design elements and ux cues from older pages, which were often outdated or incorrect. This caused continuous rework and churn that trickled down, from design to production and development.

The Main Goals of ESG

Before the team started, we put together a long list of prerequisites of what we wanted from a style sheet and dev platform. For version 1.0, we narrowed it down to 4 top priorities.

1. BAKE the standards into esg

We baked all the design, production and dev standards into ESG. This drastically cut down on waste and forced dev to use the same coding style on every project.

2. Works with Bootstrap and our CMS

ESG had to work within the Bootstrap.css framework that the site used and our CMS. It had to be self-contained yet interact well with the rest of the site.

3. Adheres to brand standards

ESG couldn't exist in a vacuum. We worked with the UI team on ESG and made sure every bit of type, border, everything met with Best Buy brand standards.

4. Good Documentation

We kept the ESG wiki up to date with every release. We also had a full PSD design sheet to pull from (see below) and a live sheet for developers (click here to see).

The Design and Development Guide

My team captured and standardized every commonly-used design and UI element including compare charts, parallax, buttons, backgrounds, typography and more. For development, all you had to do was adding the appropriate class to create anything on the sheet. 

Design Standards, More Efficiency

ESG dramatically changed the project process: with all the standards baked into the design and code, all the reviews started to become unnecessary and the projects became much more streamlined.

Success and Widespread Adoption

ESG became the default design, UI and development platform for our team. We rolled out 7 releases of ESG and over 200 major projects used it in 2016. 

Below is a sample of some of the projects that used ESG. I was ACD, leading both UX and design, on many of the below projects.