Think like a chef: how to use a design system
Learning how a system really works can elevate experiences from consistent to inspired
I spend a lot of my spare time consumed by YouTube videos and Netflix shows about the art of cooking. I don’t cook, but I’m fascinated by watching other people do it.
The time that I’ve spent watching others prepare food has given me an appreciation for the difference between a cook and a chef. A cook knows what to do to create an enjoyable dish, then they use that knowledge and repeat what works to create a consistent experience. A chef not only knows what to do, but why it’s done. They invest the time to develop a deep understanding of ingredients, tools, and processes. They know why certain ingredients work well together, how to use their tools effectively (like choosing the right pan to sauté vs. fry), and what processes to follow to achieve the outcome they want. Chefs take that knowledge and use it to find new and innovative ways to elevate their dishes into an experience.
Working with a design system can be a lot like cooking in a restaurant kitchen. In most cases, the system provides a repeatable recipe — everything that you need to make something that works. The components act as your ingredients, while the patterns and guides act as your recipes. The best practices, guidelines, and examples for systems like Polaris add another layer of instruction to create your cookbook or, in this case, your style guide. Combined, you have the tools and information you need to create something that will fit your product experience.
With this provided for you, it can be easy to start with a design system as you would in a kitchen — by grabbing your recipe, ingredients, and tools and starting to make your dish. But without an understanding of why and how the system works, you are limited in what you can do. By deeply understanding the system we can find new and innovative ways to use it and elevate the experience for our users.
Ingredients
Chefs spend a lot of time educating themselves about ingredients — they research, experiment, dissect, and test. They learn how ingredients work on their own and in combination with other ingredients, like how salt strengthens gluten and adds flavor. Armed with this knowledge, chefs can create heightened flavor experiences.
In a design system, components are combined to form an interface. Like ingredients, components are made of elements that influence their form and function. Taking the time to educate ourselves on the rationale behind why and how a component was designed allows us to expand on its use. It helps us find new and innovative ways to use the component to solve design problems.
Components and ingredients can be rigid or flexible. They might even come with documentation around their intended use. The documentation points to the best way to use the component, which is based on the problem it was designed to solve. Components become more rigid when the problems they solve are more specific. For example, in Polaris the account connection component has a very specific use (“to allow a merchant to connect or disconnect their store to various accounts”). When you look at the elements of the component you can begin to see how it’s rigid in its function. The elements are interconnected and rely on each other for the component to perform. A component like this would be hard to use in any scenario other than account connection because of its rigidity. Alternatively, the button group component is very flexible, it’s used to “display multiple related actions stacked or in a horizontal row to help with arrangement and spacing”. The button group component is simple in both its form and function, which makes it flexible to use across a multitude of scenarios. This understanding helps us to know when and how to use system components at the right time and in the right context without needing to rely on a recipe.
Recipes
The recipes in a design system are its patterns and guides. They explain and show how components can be used and combined in common, reusable ways throughout an interface. They give us enough information to reproduce common user flows and scenarios. While these reproductions may not be exactly the same as the original, they are consistent with its form and function. This helps to ensure that users always understand what product they are using, and how it works.
Consistency is what makes recipes useful, whether they exist in a design system or in a cookbook. What makes them important is the way that you use them to influence your work.
A less-experienced cook might look at a recipe as a set of rigid rules dictating how a dish has to be made. This cook follows the recipe closely, concentrating on moving through the steps, but not necessarily understanding why they’re important, or how to adjust to unexpected circumstances. To a chef, however, the recipe is only a guideline. It provides a general outline to get a sense of how a dish ought to be made. A chef is able to adjust a recipe based on their knowledge and understanding of why it works. Because of this, chefs know where there is room for deviation and creativity, and can improvise when they encounter problems or blockers. They use recipes as a source of inspiration in the creation of new combinations, flavors, and dishes.
The patterns and guides within a design system should be a guideline for how to create an experience, not a set of rigid rules. They should be changed and enhanced based on the context you are designing for. It’s more important that a feature fits into the flow of a person’s experience than for it to fit into a pattern that already exists. In some cases, no changes will be necessary and following the recipe is the best way to get the desired result. But learning about patterns, and understanding why and how they work, will help you shape new ways to use components and methods to achieve an enhanced result.
A feature team recently modified the responsive pattern of the layout component in Polaris to achieve an enhanced experience. The layout component consists of two columns with primary and secondary content. It creates a ⅔ + ⅓ layout on detail pages in the Shopify admin. The responsive pattern for the component specifies that the component stacks on a small screen, with the right column moving below the main column on the left. This pattern of movement might not always be appropriate for the context of the user and information hierarchy of the page that the component is on. In one instance, a feature team used the right column to show a list of actions a merchant needs to take to publish a listing to their Facebook marketplace. If the merchant does not complete any or all of those actions successfully a validation error is shown in the list. If the team stuck to the rules of the component their most important messaging (the list of actions and errors) would have been placed at the bottom of the page on small screens. In this case, the team chose to shape a new way to use the component in order to ensure a more usable and accessible experience for merchants.
Cookbooks
The documentation that exists to support the components, patterns, and guidelines within a design system come together in a style guide. A style guide is like a cookbook that specializes in a particular cuisine. In the case of Shopify’s Polaris, the style guide gives people information about components specific to the Shopify product experience. It guides people on how to use components to create common Shopify patterns and guidelines. It helps people understand how to create an experience that feels like Shopify. The style guide is specific to both the product(s) it supports and the culture of the company it’s influenced by.
A cook follows a cookbook, a chef references it. Depending on what level a cook is at in their knowledge of cooking, they may use cookbooks in different ways — as a tool to learn how to cook generally or as a resource to follow a specific recipe or understand an ingredient. Chefs use cookbooks for inspiration and to support the continued growth of their craft. They may also use cookbooks to reorient themselves with techniques or ingredients that they haven’t used in a while, or learn about new processes and innovations that others have contributed to the world of cooking. Chefs may also contribute to cookbooks by writing for them or creating their own. They share their learnings with others and show people how they have leveraged their knowledge and understanding of the elements of cooking to create culinary experiences.
To use a style guide the way a chef would use a cookbook is to approach it from a growth mindset. By learning the style guide you develop a deep understanding of the elements of your company’s product experience. Once you know the guide, and have developed a wealth of experience using the system it supports, it will become a source of information for you to both refer and contribute to. The world of design systems, like the world of cooking, is always changing. It’s the people that are using the system every day who can best share new components, patterns, best practices, and learnings.
Don’t get me wrong, being a cook is no easy feat. It takes a lot of time and energy to get to a level of comfort that enables a cook to know what to do in the kitchen and to be able to translate that knowledge into consistent results. But when it comes to cooking and design systems, creativity comes from curiosity. It comes from learning about the system’s elements and approaching them as pieces that help to explore and express an idea.
As a member of the Polaris team I spend a lot of time thinking about design systems and how people use them. I also spend a lot of time thinking about the roles and responsibilities of the people who build and maintain the system. The people on a systems team should act as stewards of the system — part of their responsibilities should be to help people learn it. In order for people to be able to think like chefs, the design system team needs to help them understand the rationale for how the elements of the system were built. The design system is a product that needs to be supported by services that help people use it, learn it, understand it, and contribute back to it. On the Polaris team, we’ve realized that as the design system matures we need to focus on these areas as part of keeping the system healthy — a topic that deserves its own article.
