Style Guides:
Starbucks and Walmart

Save Time, Money, and Effort by Standardizing the Design System Across All Teams
Background

Starbucks and Walmart are both huge organizations. Their org charts are made up of lots of teams, and these teams all write different applications. Both companies were encountering issues with consistency - if they changed a button color in one place, it might not be reflected everywhere else in the project. Efforts to keep things consistent were tedious and time consuming. It was hard to communicate changes across teams, and when the changes were communicated, the solution was often to hunt down every instance of a UI component and manually change each one. Both companies brought in Formidable to find a better solution.


Challenge
  • Create style guides that can be used across all teams using React to keep branding up-to-date and consistent with less time and effort
Solution
  • Audit inconsistencies and measure the payload they add to the websites
  • Standardize and document different designs and common components
  • Use React to take different UI components, such as UI button tags, and create standardized, abstracted APIs for each one
  • Create a clean, easy-to-use developer interface
Results
  • Scalable and maintainable style guides
  • Reusable style code with reusable components
  • Simplified code base
  • Improved accessibility
  • Consistent user experience
Benefits
  • Style guides were able to be shared with new teams and even vendors building one-off projects
  • Time, money, and effort were saved
  • Both companies left the project with a great public example of their approach to the modern web
Challenge

Ideally, all the teams within an organization would share a design language that is consistent throughout each and every place it’s being used; there would be no duplicate effort, or duplicate code when it came to implementing that design. For most companies, this is easier said than done. The end goal was to create a style guide that could be used across all teams using React to keep things consistent and save time, money, and effort.

Solution

The process began with an audit - we needed to hunt down the inconsistencies and measure the payload they were adding to the websites. Formidable worked closely with the designers on a global and individual level to help standardize and document different designs and common components in order to create the style guides.

Using React, we were then able to take the different UI components, such as UI button tags, and create standardized, abstracted APIs for each one. In doing so, all of the boilerplate and implementation details were transformed into a clean, easy-to-use developer interface. Now, when a UI component is improved in the pattern library, it will be updated across the board and will work for all of the other teams who use that attribute, without any additional effort.

Results

Formidable delivered scalable and maintainable style guides to both Walmart and Starbucks. Creating reusable style code with reusable components created a more consistent user experience, simplified the code base, and saved many of hours spent maintaining and creating new-but-shouldn’t-be-new components.

Benefits

The style guides Formidable created were so successful that they spread beyond the teams that we assisted directly. New teams began to use them on their projects, and even vendors building one-off projects were able to use and contribute to the them.

In addition to the time, money, and effort saved by the implementation of these style guides, the companies both left the project with a great public example of their approach to the modern web.

Conclusion

Thanks to the style guides created by Formidable, Walmart and Starbucks are producing apps with consistent branding all while saving time, money, and effort.


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 walmart.com to React, moving speedtest.net 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.