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

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.