Best Buy ESG

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

Role  –  Associate Creative Director, UX/UI

Poster of ESG style guide

Why Are We Doing It This Way?

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

The deal seaker  - user persona

The Main Goals of ESG

Before the team started, we put together a list of prerequisites of what we wanted from a style guide and dev platform and 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 development team to use the same CSS and Angular components on every project.

2. Works with Angular, Bootstrap and our CMS

ESG had to work within the Bootstrap.css framework, use Angular and Best Buy's internal CMS. It had to be self-contained yet interact well with the rest of the site.

3. Adjust well to UX/UI changes

We worked with the other UX teams in Best Buy to keep standards up-to-date sitewide. We needed a system that could adjust instantly to these updates in all our experiences without any errors.

4. Good documentation

We kept the ESG wiki up to date with every release. We also had a full PSD design sheet with shared symbols from a central source, ensuring consistent interfaces when symbols were changed.

The UI and development guide

This was the PSD my team put together for the UX and development team, including smart objects that were linked to a common folder.

Best Buy ESG one sheet with design elements

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.

New design / development process, much more streamlined

Success and Widespread Adoption

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

A sample of the projects that used ESG

Widespread adoption and success

ESG broadly adopted and used extensively. The entire eCommerce experience UX and development teams switched to it for their projects. It steamedlined the back and forth between development and design. It was used on over 200 project and saved an estimated 5,000 hours.