It’s just over a year now since some of the design team made their way down to Brighton for Patterns Day. A one-day event for designers and developers that focuses on design systems, pattern libraries and style guides.
Valuable insight from some of the industry's leading product teams… each with very different interpretations of this established but intriguing approach to delivering design more collaboratively and efficiently. It was reassuring to hear that there’s more than a few ways to integrate an effective design system into production. Excellent news. At the same time, it was very clear that we shouldn’t adopt a design system, just to say we have a design system.
Over the following months, we began drawing up plans to define how we’d want our own design system to work. Having put it into play across a number of projects since, we’ve realised the benefits.
Bringing together a comprehensive set of versatile, consistent components. We’re able to develop consistent, collaborative products more efficiently, whilst keeping all members of the team aligned.
A shared language across the design team, creating a tailored, clearer handover. Whether we’re working internally or with remote partners, the design system helps us establish a more solid bridge between design and development. Patterns and styles are documented, along with expected behaviours and interactions.
Reducing design repetition and overall production time. It’s quicker and considerably easier for us to create features and templates with the pattern library housing a range of common components ready to use.
Works with our other processes. Our system aims to streamline a big part of the design production process, and integrate seamlessly with the way we deliver work at Kyan.
Responsive design with scalable components. We now design a screen once using common components, and easily switch to different screen sizes. This makes responsive design and tackling specific breakpoints much more straightforward.
Keeping a growing team aligned. As a design team, we’re a mix of user experience, creative front-end and designers. And over the last year the team has grown, welcoming in new talent, perspectives and experiences. It quickly became clear that keeping everybody totally aligned was key, and that a systematic approach to how we output or handover creative work was a missing piece for us.
Taking the time to look around at what’s out there already, and benchmarking what we liked and didn’t like, we were at a point where we knew a design system was a good fit for our way of working.
Aside to that, we were also getting to grips with Storybook, an open source tool for developing and documenting UI components. It was being used within a project to document and detail design system basics (tokens) like colour, spacing and typography, as well as producing an icon library. With all of that knowledge, it was then a case of collectively defining a structure.
A shared vision
Principles
Essentially the ways of working that we apply to any project. Every product will have their own unique values, budgets and aspirations. So while the system itself can be pretty rigid, the principles are there as a gentle reminder to ensure that the system fits into our design thinking, and not the other way round.
To define these principles, we gathered as a team to talk through design challenges and production hurdles we’ve come up against in the past. Everybody has them! Anything can be improved. With all of that in mind, we hit common ground on a few occasions.
Keep things consistent: Utilise components, patterns and details. Shake off any isolated features.
Cover all the bases: Remove guesswork. Deliver fully responsive designs and document breakpoints.
Stay aligned: Support each other. Ensure regular reviews and alignment with the team.
The old classic: Keep it simple. Build the system around your team and what works for you. Start off simple, and if it needs to get more specific, it can do.
The front-end team's input has massively helped us to fully understand what a system needs to cover, from a range of perspectives.
Setting the foundations
Styleguide
Once any branding/identity has been approved, we look to compile a set of basic styles that will flow universally across the entire design. This is the first step to laying down a system, and with our Sketch template all set with symbols and preset signposting, you’re ready for any new project.
Design systems should be flexible and welcome iteration, but the styleguide itself provides that nice sense of stability. For both design and development, it gives a firm brand insight for you to apply across all of your creative ideas. Having a styleguide in place early on helps reduce debates and clarifies all the little things that make up a design, ensuring a clearer, speedier handover across departments.
Covering the early foundations, setting up symbols to streamline the creative work that follows, providing an organised collaborative handover from design to development.
Bringing everything together
Pattern Library
As you begin to apply the core styles documented in the styleguide across product templates designs, patterns big and small begin to emerge. Elements take shape, while components naturally form, and this was really what took the most consideration when bringing together our own design system.
We’ve opted to keep our Pattern Library and categories relatively simple. Using our experience of Storybook, the overall setup still compartmentalises common design patterns, but enables us to stay flexible and ensures the system can be applied to projects of all sizes. This is obviously a big box for us to tick. In practice, we realised that going into too much detail wasn’t always relevant, and made the system feel over-engineered, which it never should be! It needs to unify the entire team, stay nimble and not introduce unnecessary complexity.
Part of a constantly evolving, extensive library of elements and components, walking through behaviours, edge-cases and variations.
The Pattern Library should be set up to grow with the product, whilst clearly defining what’s in place already. It’s essentially a large master artboard that will be continuously added to throughout the duration of the design process. As you begin to smash through key templates, you’ll soon be able to utilise the components stacking up in the Pattern Library, making page creation significantly quicker. You’re able to deliver a design at speed that applies the set styles and components effectively, rather than present a disjointed journey.
As the Pattern Library grows, it can get unwieldy. We like to keep it nice and tidy, organising individual components into clear columns, so it’s easy to digest and quick to find what you need.
There’s definitely lots of things to consider when attempting to bring your own design system together. It's been a big effort over time to get it in place, but a level of convention and systematic approach has always been a part of design at Kyan. The idea of a design system just takes that thinking and translates it into something more collaborative and manageable. It’s simply a part of how we produce creative work rather than a big entity in itself.
For us, the design system has enabled us to be more productive, communicate more clearly and ultimately deliver better products. No cutting corners, reduced repetition, and still with all of the freedom to explore and enjoy the design process. That’s the main thing.
Keep it simple, watch it come together, and make improvements along the way.
Why not find out how Kyan can help your team with our Design Systems for modern product design service?
Other articles from our design and front-end team
Streamlining our design systems documentation with Storybook by Helen McCarthy
Why do we love Next.js so much? by Dave Quilter
How everything will change and how technology can help us get there by Harry Ford
Why I love Problem Framing and how you can too by Laurent Maguire
