following standards is cool again

Style Guides: Starbucks & Walmart

Two huge companies. One very messy problem.

A.The Set Up

You’re a large organization. You’ve got an org chart made up of lots of teams, and these teams are writing different applications. Now ideally, they would all share a design language that is consistent throughout each and every place it’s being used; and there would be no duplicate effort, or duplicate code when it came to implementing that design. And it would be amazing if you could change a button color in one place and it would be reflected everywhere in the project.Ideally.

A style guide is a good way of documenting the design system, standardizing it, and giving people an easy way to reuse it in many different places. We worked with both Walmart and Starbucks to make that a reality in their organizations for all of their React.js work.

B.The Challenge

At Walmart, this was a huge project that took almost two years. Walmart had a structure where its people were thinking about the design systems, and different design teams would meet up, talk about it, and create something. The problem is, there was no way of sharing these components between all the development teams.

Identify the Issue

To get Walmart on board with investing in a style guide, we built out proof of concept with forms and button styles that showed them all the different places where they were being used, the inconsistencies, and measured the additional payload these styles were adding to the website. Once the problem was clear, we started working on a new style guide that would address these issues.

Fix the Problem

We worked closely with the designers, on both a global and individual level, helping them standardize on different designs, common components, and documenting everything along the way. In the end, not only did we standardize their design system, but we saved them a lot of time and effort. In fact, other teams started using it for their projects, and even vendors building one-off projects for Walmart were able to use it and contribute.

C.The Public Solution

Starbucks had one of the first public style guides out there, so they were well aware of the benefits. At this point, we had gone through the process with Walmart so we knew what the pain points were and how to go about them when implementing a style guide with React.js.

Keep It Simple

We all love the ‘copy-paste’ function. Well in this case—not so much. The thing is, you can copy and paste code samples (like a button), but then you have to trace every instance of a button in order to replace it. With React, you can take all of the different UI components and encapsulate them into something that becomes a single tag (like a UI button tag). That way, once you improve something in the style guide, it works for all of the other teams who try to use that attribute.

This was a huge improvement and simplified the codebase and future updates.

D.The Results Are In

We learned a lot working on these projects with Walmart and Starbucks. As you can see, it’s more than just creating and messing with some code—we get to save a lot of people a lot of time and effort. Additionally, we’ve helped to provide both Companies with a public example of their approach to the modern web.

Time is money

By creating a reusable style code with reusable components it created a more consistent user experience, simplified code base, and saved lots of hours spent in maintenance update and creating new-but-shouldn’t-be-new components.

Improved accessibility

When you spend the effort to make a UI element accessible, using a system like this one means every other team using the style guide can benefit from those accessibility improvements.

Thinking in systems

Whether you are a designer or a developer, learning to think about resting components and thinking in systems helps you build more scalable and maintainable solutions.

We Are Formidable

Formidable is a Seattle-based consultancy and open source shop, with an emphasis on Node.js and React.js. We deploy a mixture of consulting, staff augmentation, and training to level up teams and solve engineering problems. Whether it’s transitioning to React, moving off Flash, or helping a startup build and scale an MVP, we’re ready to help teams of any size.

Interested in hiring or working for us? Get in touch or view our careers page.