A Quicker Cup o' Joe
Starbucks Store Locator
Double tall mocha with an extra pump of superfast load time andReact on topNext Project
Two huge companies. One very messy problem.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.