Introducing Bulb’s design system
Originally published by Luke John and Alla Kholmatova at bulb.co.uk blog on May 23, 2018.
What is a design system?
First off, let’s clarify what we mean by a design system. For us it’s a collection of shared patterns and practices that allow our team to build quality user interfaces consistently and quickly. Patterns are the repeating, reusable parts of the interface, such as buttons, colours, icons. A bit like LEGO bricks. Practices are how we create, organize and share those patterns.
A pattern library is typically a website or an application where design patterns are stored and documented. Having one is a good practice, as it allows our team to use the shared design patterns to build products with. Take a look at Bulb’s new pattern library.
Why have one?
There are four main reasons why we have a design system at Bulb:
1) Efficiency
At Bulb we launch projects fast, to provide more value to our members. Having an effective design system allows us to reduce duplicate work by reusing interface elements, just like you’d reuse a kit of LEGO parts. Keeping all the design and code patterns in one place (in our pattern library) also makes it easier to maintain, test and update them.
2) Consistency
The number of Bulb’s products and the team members working on them is always growing. Today we’re building and maintaining ten products, including our Feed-in-Tariff programme, Prepay, and SMART products. As we scale, our goal is to ensure that our members are experiencing the same quality and consistency of design, no matter what part of Bulb’s brand they interact with. A unified design system will help us to achieve that.
3) Design and code quality
Having a design system means we don’t have to compromise on quality, even when we build and ship features fast. As teams notice more use cases and fix the bugs, the patterns improve. From a technology perspective, sharing common code paths makes it more likely that edge case issues will be surfaced and solved for all our members. By improving individual patterns, the whole system becomes more robust over time.
4) Accessibility
In the last few months we’ve been making a lot of effort to make Bulb’s products and tools accessible, as we’ve talked about in previous posts (here and here). Having a design system is invaluable in making and keeping Bulb’s products accessible, as it allows us to reuse accessible patterns across all of the products. As Allison Shaw in her talk on accessibility in design systems wisely noted, “Design systems are the perfect vehicle for your company’s accessibility efforts because they provide so much foundation upon which the products are built.”
Bulb’s pattern library
Our pattern library is the single source of truth for storing, documenting and sharing design patterns. It’s only five months old and we’re still working many things out. But here are some of the things we especially like about it:
Living
The code in the pattern library is the same as the code on Bulb’s website (not all of the websites yet, and not this blog for example, but we’re working on that). The pattern library is built with the patterns in the library, so when we update something in our pattern library, it updates across our websites too. For example, if we discovered one of colours we used on our site had low contrast, we could update it in the pattern library and see that reflected across the site.
Led by research insight
User research underpins all our design decisions. So, we decided to put research insights alongside patterns in the library. This powerfully communicates their purpose and design rationale.
Focused on accessibility
Using accessible design patterns to build new features will help to keep all our products accessible as we grow. Working with accessibility expert Heydon Pickering we also developed accessibility guidelines and checklists.
Built for collaboration
The pattern library is easy to set up — just type simple commands to run the library locally. All documentation including pattern examples are written in markdown, which makes it easy for anyone in the team to update the docs.
With automated library publishing, each pull request gets its own version of the library. Once the pull request is merged to master, we automatically publish the latest version to http://design.bulb.co.uk. This helps the whole Bulb team have access to the latest version at all times.
Most importantly, the library encourages input from different disciplines across Bulb. From glossaries and tone of voice to principles and research insights — everyone in the team has a space to contribute to the design system and learn from it. It’s not only for developers or designers.
Encourages experimentation
When designing Solar, we focused on the features which encourage cross-discipline collaboration throughout the design and development process.
We’ve made all our pattern examples editable so that it’s easy to try out copy, and different variations and states without having to get the development setup installed on your machine.
An editable pattern in action
We’ve also set up shareable playgrounds which enables design in the browser. This is great for experimenting with pattern arrangements and quickly testing copy and behaviour responsively.
Next steps
Rolling out across all the products
We’re still rolling out Solar across all our products. Right now we’ve got two of our products using it, with varying depth of usage. We’re excited about having all our products make use of the pattern library and being able to take advantage of the shared code base and pattern improvements.
Improving the patterns
The pattern library has grown fast and started off with concurrent development and design versions. This led to divergence between code patterns and the variants and states of those patterns. There are still many patterns which we are intending to group and rebuild to better reflect our principles and guidelines.
Migrating to Typescript
Our pattern library also started out as a Javascript codebase and the majority of our patterns are still written in this language. At Bulb we’ve since fallen in love with TypeScript (Bulb 💖s TypeScript) and are in the process of migrating all our patterns to TypeScript. We’re excited to have a single language in the future and get the benefits of TypeScript for all our patterns.
Open sourcing
We’re super excited to share our pattern library publicly, and are looking forward to opening up and sharing with the design and development community. This builds on our first step in open sourcing, when we released the inclusive design audit of Bulb by inclusive designer Heydon Pickering. Once we’ve worked out which parts of Solar are stable, we’ll be releasing some of the tools we’ve built for our public pattern library as open source projects.
Do you have thoughts on design systems? We’d love to know about them. Tweet to share them with us.
And if you’re interested in green energy and design systems we’re hiring product designers and engineers at Bulb. Come work with us!
