Design systems - How to get started, implement them, and avoid the pitfalls

Design systems are a subject that brings many opinions in the design industry - some people can see the good in them, and some view them as a set of restrictions that imprison a designer’s creativity. Our Design Director, Andy Ingham, having worked with and created multiple systems of different sizes and complexities, gives us his thoughts on the topic and some tips for design system success.Design systems come in all shapes and sizes; the larger they grow serving multiple platforms, they require a fine balance in approach. Underpinned by guides, tools, and visual elements, you can find yourself in trouble if one part isn’t quite right. Common misconceptions from designers are that they silo you into a monotonous mode of designing the same way, time after time, and when you try to break the boundaries, it's a no-go. As digital transformation accelerates post-global pandemic, we are in a time of shipping products quicker than ever, so when scope and time are mentioned, it's quickly shut down, and I totally get it.In my opinion, the issue doesn’t lie with design systems; it is the system that is flawed. A good design system shouldn’t feel restrictive, stopping your ability to design an optimal user experience. They should be intuitive and empowering. At Parallax, we approach our larger design systems as a logical and flexible framework, focussed purely on the client’s needs to build systems and experiences that are a joy for their customers to use.

How to create a great design system

Scoping

Design systems can get complex very quickly. When you’re starting out, it’s super exciting, and you’ll naturally have loads of ideas from systems you’ve come across previously. It’s really important you spend time upfront scoping out the entire territory your system will impact, highlighting common patterns, screen dimensions, and users. All of this will guide decision-making in creating a well-oiled design system. Assuming you have buy-in, give it an identity - it’s a super simple task that helps build internal excitement and involvement.

The best start

Don’t be afraid to build upon something that’s already been created. React component libraries like "MUI":https://mui.com/ help you ship products quicker; a good place to start is reviewing options against criteria you state as crucial for your system's goals and objectives. The faster you can start making progress, the better; you can quickly apply your brand to existing components by just tweaking a few visual elements.Most design systems fail because of a lack of strategy - think about everything from goals, user input, and how you’ll launch it. Like anything new, you’ll want to keep your design system simple and slimline. Think about the crawl, walk, run approach… your system can grow over time and evolve. But if you go too deep, too soon, you can shoot yourself in the foot and find yourself backtracking; this quickly eats up time in rework not only in design but development and could cause doubts amongst the organisation that it is the right way forward.

Shared goals

A set of principles or values to adhere to is key, so you can assess whether your system delivers against what you set out to achieve. A couple of design system principles that really resonate with me are:

• Tools over rules: Ultimately, this is about supporting teams and not governing them; this resonates with me as it allows that flex that we need as designers when designing experiences and products.
• The goal is cohesion, not consistency: Consistency is an outcome of a successful design system from it being intuitive for designers, developers, and product teams.
• Think about what you’re striving for and how your design system can become an extension of your organisation's mission, vision, and values.

Gathering momentum

In my experience, the best way forward is to test it early doors, speak to those using it, engineers as well as other designers, and start creating a roadmap for yourself and your team for aspects to explore and improve. You’ll probably find that it is a bit too loose and open to interpretation or that something is missing; this isn’t bad at all as it informs your next steps. Having a North Star and best practice example you’re aiming for is good, but don’t rush to get there. Enjoy the journey!, Documentation Documentation is crucial from the outset. It helps drive adoption and sets boundaries; think about your principles and values when writing - make sure everything is aligned, and the messaging reflects that. For foundational elements like type and colour, keep it high level but for certain components and patterns, designers and engineers will require a bit more detail as to when they should/shouldn’t be used or what can be edited, for example.

Tokens

There are many positives to creating and implementing design tokens; a shared language drives better collaboration and communication between designers, developers, and managers. Louis Chenais summarises them brilliantly _“The design system is your land, and your design tokens are the language people use to communicate design decisions with each other.”_ Design tokens represent an opportunity to communicate as humans and not robots; use them to your advantage to drive and maintain a scalable and consistent brand application that everyone understands.

So, should you implement a design system?

In short, yes. If you’re an organisation looking to scale and create cohesion between your digital platforms, experiences, and products to elevate customer experiences and create consistency for your brand, you need a single source of truth to work from. The benefits of unifying internal teams, products, and experiences for your brand with customers outweigh the investment of creating and maintaining a design system; the only thing that could put a choker on creativity is the lack of it in your design system.You’ll require a robust strategy from the outset so all decisions stay on track to achieving your goals. I hope this has helped in your approach to creating a design system. If you’d like us to review or create a design system for your digital experiences or products, "get in touch with us today.":https://parall.ax/