Design System Success: Mindset Matters!

Published in

Just Eat Takeaway UX

12 min readOct 24, 2023

Understand the significance of having the right mindset when working on a design system, and how this can amplify its impact.

Read more about what a design system is here.

Ellis Capon is a product manager with a passion for user experience and design systems, currently working on the Just Eat Takeaway.com (JET) design system, PIE. Previously Ellis was part of the NewsKit design system team at News UK, working with brands such as The Times, The Sun, Dow Jones, The Wall Street Journal and many more. Before that he moved around Lidl, working in both the UK and Germany on various IT and software projects, as well as working at a small software company.

In the world of design and front-end engineering, a powerful tool has emerged in recent years that promises to streamline workflows, foster consistency, and elevate user experiences: the design system. A term that was first coined in the 2010s by people such as Brad Frost with his Atomic Design book and Yandex with their BEM framework; design systems are now widely used by teams and organisations all over the world, coming in all different shapes and sizes.

However, this systematic approach to design is not a new concept. In 2006, Hugh Dubberly stated that “Systems design first appeared shortly before World War II as engineers grappled with complex communications and control problems. They formalised their work in the new disciplines of information theory, operations research, and cybernetics.”

Design systems are most certainly descendants of this method of thinking. However, amidst the excitement and technical hurdles surrounding their potential, one crucial factor often goes overlooked — mindset.

Embracing Collaboration

When working on a design system, it’s easy to focus on the technical problems first. However, in my experience, a large part of achieving success in design systems is collaboration. I’ve seen plenty of examples of teams implementing the best possible technical solutions, but without collaboration, it’s all for nothing.

Within the JET design system team, we try to involve engineers at the earliest stages of the design process to capture any thoughts or limitations that may cause headaches later on. We have also built a robust design review process, meaning any UI change must get approval from a designer before being released by our engineers.

A design system is not just a collection of components and guidelines; it is a shared language that connects designers, developers, and stakeholders, ultimately improving how we build products.

By adopting a collaborative mindset, individuals can break down silos, encourage cross-functional cooperation, and harness the collective expertise of the team. Collaboration fosters creativity, encourages diverse perspectives, and ultimately leads to a more robust and cohesive design system.

It’s also vital to work with the consumers of the system, with the consumers in this case being designers, engineers and product managers. This will help build trust between you and the consuming teams and ultimately improve the future ways of working between the two parties. It’s a two-way street, though. Many consumers of design systems who are working with a dedicated design system team feel threatened by the thought of people advising how they should and shouldn’t implement code/designs.

Consumers

Consumers (engineers and designers who use any artefacts of a design system) of a design system do not need to feel threatened by the maintainers of the system. Ultimately, they are here to support consumers where they may need guidance or assistance in how to use the system where the documentation does not help. The design system team can be used to review PRs, give feedback on design system usage in code or Figma, give advice on pattern best practices or be used to pair with, depending on the size and availability of the team!

When the consumers of a design system embrace this collaboration with the maintaining team, they begin to build relationships with stakeholders who they may not have previously engaged with. By now employing the assistance of the design system team, they are increasing the number of eyes caring for their products, resulting in a higher quality output and are in essence increasing the size of their team.

Maintainers

Embracing collaboration is paramount for the maintainers of a design system because it fosters an environment of collective creativity and innovation. Design systems are not static entities; they evolve to adapt to ever-changing user needs, technology, and design trends. By working collaboratively with designers, developers, and other stakeholders, maintainers can harness the diverse perspectives and expertise of the team, leading to more comprehensive and well-rounded design solutions. Collaboration also promotes consistency and coherence, ensuring that every component and guideline within the system aligns with the overarching vision and goals of the business.

Moreover, when systems teams engage in open dialogue and welcome feedback, they build trust and engagement among other product team members, fostering a sense of ownership and shared responsibility for the design system’s success. In essence, collaboration not only enhances the quality of the design system but also strengthens the bonds within the team, ultimately resulting in a more effective and adaptable design framework and a set of consistent, high-quality products. Given that the design system will constantly evolve, this collaboration becomes even more critical in ensuring the future maintenance of the system through its various iterations.

Leaders

Leaders of a design system should wholeheartedly embrace collaboration because it’s through collaboration that the full potential of a design system can be unlocked. A design system’s success depends on its ability to unify diverse perspectives and expertise across an organisation. By fostering collaboration among designers, developers, product managers, and other stakeholders, leaders can harness collective creativity and problem-solving, leading to more innovative and user-centric design solutions.

Collaboration also ensures that the design system remains aligned with the broader business goals and user needs, promoting consistency and efficiency throughout the design and development processes. Furthermore, when leaders actively seek and value input from team members, they not only create a more inclusive and engaged work environment but also demonstrate their commitment to continuous improvement, which can inspire and motivate the entire team. In summary, leaders who embrace collaboration in the context of a design system empower their teams to excel and drive the organisation towards achieving its design and business objectives.

Ensuring flexibility

Design systems are not static entities; they evolve and adapt over time. A mindset which fully embraces flexibility acknowledges that iteration and refinement are essential. Being open to feedback, embracing change, and continuously learning allows designers and engineers to refine their work and ensures that the design system remains adaptable to future needs and trends.

Design systems come in all shapes and sizes. Some organisations use a Figma component library and call that their design system. Some align their design component library to a web or app code component library. Other organisations use proprietary software to build and manage their design systems, such as Zeroheight, Knapsack or Supernova. But ultimately, it does not matter, so long as the chosen solution benefits the organisation and improves its design and development processes and the people working on the design system connect people.

Whilst working at News UK on the NewsKit design system, we began by making our components very opinionated. We carried out research, and design best practices were adhered to, however, we locked down the components and made a lot of usage decisions upfront. Complex components, like the audio player, came with all the functionality pre-configured, making it difficult for consuming teams to override. But this became a problem for consuming teams. As Nick Dorman says in his blog post “They found it hard to use, and minor customisation was complex. They ended up abandoning half of the radio player component, only integrating the audio player part”.

Despite the need to be rigid in some areas, flexibility is a key characteristic of a design system. As the maintainer of the system, it’s not unusual to be far away from the consuming team and despite best efforts to understand their needs, it may not be realistic to grasp this. Lowering the barriers to entry and ensuring flexibility is the best shot. This will also help with the adoption of the system, giving consumers more of a sense of control, rather than being forced to use a component that doesn’t quite work for them. At Just Eat Takeaway.com, we build our PIE web components in such a way that ensures full flexibility for our consumers, enabling them to compose components that are fit for purpose for their specific needs, bending to the needs of our consumers in contrasting business areas.

Fostering empathy

Design systems serve as a foundation for user experiences. To create effective and meaningful designs, empathy is crucial. A mindset centred around empathy involves understanding user needs and anticipating their pain points, then designing/building solutions that prioritise usability, performance and accessibility. By infusing empathy into the design and engineering processes, teams can ensure that the design system resonates with its intended audience.

An easy trap to fall into is to build a design system that works for you, and not the consumers of the system, or the end users. Given that some design system teams are often detached from the core product teams, they lose touch with the day-to-day work of product designers or engineers working on building solutions for end users. This can lead to the most brilliant, component-full, advanced design system being produced, however, if it’s not useful to the user, what’s the point? Melissa Perri’s brilliant book “Escaping the Build Trap” outlines this exact problem many products fall into as teams focus on shipping features, instead of the value of these features.

We took the approach within the JET design system team to launch our documentation site when it was fairly lightweight, missing a lot of the information required by teams. Rather than front-load this, we took the approach of listening to feedback from our users to ensure we included the content they needed on the site, rather than the content we thought they needed. This empathetic approach is similar to that taken by the .GOV team at GDS, which I gained invaluable insight into when spending the

Read more about why we built the pie.design site in this blog post by Jordi Fornells

Design systems folk can do a few things to help get closer to the user and ensure that the design system is effective for their users.

Run user interviews. Meet with the people within the organisation who will be using the system regularly and understand their pain points and needs. This will help you empathise with them whilst getting your face out there. Ensure that when you’re meeting with a wide range of people from different disciplines and backgrounds — the GOV.UK design system team have a brilliant page on their website for getting their consumers to share insights and findings from their users, building a framework for this research to be fed back to the team for them to iterate and improve upon.
Gain experience working on the consuming side of the system, building out the products that will be powered by the system. At JET, our design system team is made up primarily of people who originated from different teams throughout the business, ensuring we have a good understanding of how teams, products and services across JET work.
Ensure an open and transparent feedback loop. Be sure to make it clear how consumers can feed back bugs, suggested improvements or new features. This can be something as simple as an open, company-wide slack channel. At JET we have this channel with hundreds of contributors within it, with a standardised template of asking for help, suggesting improvements, or requesting feedback on implementation.
Build a diverse team that will manage the system. For the system to truly work for everyone, it needs to be built by people from different cultures, ethnicities, genders and skill sets. Given design systems lay the foundations for what teams build for their end users, ensuring you have a diverse team that takes into account everyone’s needs is essential.

Embracing continuous improvement

A growth-oriented mindset is crucial for the long-term success of a design system. It involves seeking opportunities for improvement, embracing new technologies and methodologies, and staying informed about industry trends. By fostering a culture of continuous improvement, designers and engineers can ensure that the design system remains relevant, innovative, and aligned with evolving user expectations.

Adapting to evolving users’ needs is vital if a product is to remain competitive and bring in new users. A great example of this happening at JET is when we launched our new Groceries proposition. Previously, JET displayed their product items within cards in a list, stacked on top of one another. However, in order to align with the industry and our users' expectations, we present our grocery items in a grid view. This is the expected behaviour for this product line, and so therefore the design system adapted to this new user need within JET.

As mentioned in the previous section, feedback-driven improvements through user interviews are also a great way to iterate and improve the design system. Designers and engineers should actively seek input from team members, stakeholders, and end-users. By collecting feedback, design system teams can identify pain points, uncover usability issues, and discover new opportunities for improvement. Within the JET Design system team, we run regular sessions with our consumers and use this feedback to shape the future of PIE.

A growth-oriented mindset is essential for the sustained success of a design system. It enables systems teams to adapt to changing user expectations, leverage emerging technologies, refine their skills, optimise existing components, and maintain relevance in a competitive landscape. By fostering a culture of continuous improvement, design systems can remain innovative, user-centric, and valuable assets for organisations.

Nurturing ownership and accountability

Design systems require champions — advocates who take ownership and responsibility for its success. A mindset rooted in ownership involves cultivating a sense of pride and accountability for the design system. Designers who view themselves as custodians of the system will proactively address issues, encourage adoption, and maintain the system’s integrity. In my opinion, this is one of the key attributes to unlocking the power of a design system. A design system should not be ‘owned’ by one team, but all product teams consuming the artefacts of the design system.

This process of democratisation can be a difficult one for the system team but also for the consumers. For the system team, letting go of their baby and opening it up for contribution, change and critique can be a difficult pill to swallow and it takes a lot of courage to finally make that change and let go. However, it’s one of the best things you can do to ensure the success of your design system within your organisation. We as humans care about things that we own and have had a part in creating. Once you educate consumers on how to contribute to the design system, something magical happens in that suddenly the number of people actively caring for the system grows.

At JET, we set up a pilot programme aimed at educating, upskilling and enthusing the consumers of our design system, PIE. These PIE Advocates are both designers and engineers who fly the flag for the design system and take some responsibility for it in their area, assisting their colleagues with high-level support and guidance, whilst being the subject matter experts for the design system in their business area. The benefits are two-fold as not only do the consumers get trained up in how to build, use and maintain the system, but they also alleviate pressure from the design system team when it comes to support, as the Advocates are now expected to carry out some of this first level support for their business area. The first team to pilot this is the Logistics part of our Product and Tech org — results to follow soon!

Summary

While the implementation and documentation of a design system are crucial, it is the right mindset that truly unlocks its potential. By fostering collaboration, flexibility, empathy, continuous improvement, ownership, and accountability, designers and engineers can harness the full power of a design system. With the right mindset, a design system becomes more than a mere tool — it becomes a transformative force that drives innovation, efficiency, and consistency in the world of design and engineering and ultimately improves the products they serve.