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
UX Team – 3 UX Designers
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 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.
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 UI and development platform for our team. We rolled out 7 releases of ESG and over 200 major projects used it.
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.