The principles behind Bulb’s design

 
simple-robust-personal-are-our-design-principles-at-bulb.jpeg
 

By Alla Kholmatova, Head of Design & UX at Bulb

Nearly a year ago we agreed on our design principles at Bulb. Ever since then, they have guided the way we work. This includes:

  • Having shared principles helped with our future work on the design system.

  • It gave us confidence in taking ownership of Bulb’s products, which had previously been designed by external agencies.

  • It aligned the team on our design approach and made priorities clearer.

  • As our UX team scaled from one to thirteen people in the last few months, design principles have been essential to bringing new joiners on board.

In this post, I’ll share Bulb’s design principles, the process for creating them, and how we’ve applied, tested and evolved them since.

But first, let’s define what design principles are and what makes them effective.

What makes effective principles

Design principles are the criteria that defines good design for a specific product or organisation. They can vary greatly between teams but the effective ones seem to have these qualities in common: they’re genuine, opinionated and memorable.

Good principles are genuine

Design principles are not just words. They should be manifested in the product.

Take “Visual and tactile” by Trello. Dragging a card across lists is a bit like moving sticky notes on a wall. You can see and feel it in the product.

 
  A screenshot showing dragging a card across lists in Trello

A screenshot showing dragging a card across lists in Trello

 

Citymapper’s “Design for humans” is another example. Many products claim to be human — few actually are. But at Citymapper, they spend a lot of time researching how customers talk about different parts of their app and use the same language in their products. So they’d say “Where are you going?” instead of “Search routes”, or “Thinking” while searching for results.

 
  A screenshot from    Citymapper   , showing how “Design for humans” principle manifests through in-app microcopy

A screenshot from Citymapper, showing how “Design for humans” principle manifests through in-app microcopy

 

Let’s test that: To test if your principles are genuine, show the evidence. Can you point to specific design patterns that embody “bold” or “tactile” or “human”? Do those qualities come up in user research, in customer feedback? It’s not enough to make principles sound good. They have to be true.

Good principles have a point of view

“Useful. Usable. Relevant.” Those principles are hardly helpful. Would you want to design a product that’s useless, unusable or irrelevant?

Depending on the design maturity in your organization you might need to emphasize those universal values but, really, they should go without saying. They should be done by design.

Effective principles have a point of view.

Medium’s “Direction over Choice” principle makes it clear that their team values simplicity over variety of options. To see this principle in action, compare Medium’s text editor to another popular word processor.

 
  Microsoft Word (left) and Medium (right) text editor

Microsoft Word (left) and Medium (right) text editor

 

The team purposely traded formatting choices for guidance and direction, to allow people to focus on writing.

Having opinionated principles can set you apart from competitors because they make you different. Everyone wants to design “usable” products, but a principle shouldn’t have a negative opposite — unusable, in this case. On the other hand, one company could focus on direction, whilst a competitor–on flexibility and choice.

An interesting example is the new Smashing magazine. Bold design choices, humorous copy and quirky touches are present throughout the site. By focusing on the identity, rather than only focusing on the content, Smashing stands out from other web publications.

 
  A screenshot from Smashing magazine, showing playful copy in error messages

A screenshot from Smashing magazine, showing playful copy in error messages

 

Let’s test that: To test your principles, try reversing them. Can you imagine an opposite quality working for another company? If the reverse is clearly negative (such as “usable — unusable” or “useful — useless”), a principle might be too safe and obvious to be useful.

Good principles are memorable

Effective principles don’t need to be looked up in a brand manual. People remember them.

Memorable principles tend to be concise and to the point. Take Wonderbly’s “Grandma first”. It captures succinctly the goal to design simple interfaces that work for “not just tech savvy urban mums but also digitally novice grandparents”.

 
  Wonderbly’s “Grandma first” principle as shown on their    design system website

Wonderbly’s “Grandma first” principle as shown on their design system website

 

“This is for everyone” by GDS is another example. It communicates in a powerful way that “accessible design is good design”.

It’s best not to have too many principles. Between three and five is just right for most teams. Any more, and people won’t be able to remember them.

Let’s test that: To test your principles think about how they will be used every day. How will they sound in design critiques and in everyday conversations? Will everyone be able to remember them?

Defining Bulb’s design principles

Teams arrive at their design principles in different ways. Some go through rounds of workshops or surveys, others conduct extensive user research. Sometimes principles simply get handed down from a creative agency who worked on the brand.

If a team is new to the concept of design principles, I like to start by running a writing workshop, which usually takes about an hour.

Get a mixture of disciplines together

The workshop is not only for designers — invite a diverse group of disciplines. At Bulb, we had developers, product managers, marketers, and our CEO in the session. If there’s a large team, you could split people up in small groups, run multiple sessions, and then debrief afterwards.

 
design-principles-workshop.jpg
 

Ask the right question

The purpose of the workshop is to define what good design means for your team. Avoid general questions such as “What do you think our principles should be?” Simply writing several inspiring values on sticky notes will only result in vague principles.

Be specific. Ask each person to write down what good design means for their team and their product.

Give them some constraints:

  • It should be a set of three to five principles.

  • An opposite mustn’t be negative.

  • For every principle, include a practical example that demonstrates it in the product.

Giving people a specific question and a set of constraints will encourage them to be more thoughtful when writing their answers.

Compare and discuss

When everyone is done writing, have a group discussion. In my experience, the discussions are the most valuable part of the workshop. Here you can compare your team’s answers and reveal how much unity you have in your design approach.

Are there many shared themes and overlaps? Have different disciplines ended up with similar principles? I find it especially interesting to see how different the responses are between people who have just joined the company, and those who’ve worked on the product for some time.

 
  The principles the team at Bulb arrived to individually during the writing session

The principles the team at Bulb arrived to individually during the writing session

 

Find shared themes

After the workshop, a smaller group can use card sort or a similar technique to define shared themes.

At Bulb, we noticed three of them:

1. Simple over flexible

Similarly to Medium’s “Direction over choice”, most people in the workshop mentioned putting simplicity above flexibility.

In practice, it means prioritising simple choices, even if it means more clicks, such as using binary questions in forms, one at a time. Or only including one message and one call to action per email. It also means writing simple, concise copy and avoiding jargon when talking to our users.

 
  Simple design for Bulb often means simple binary choices, even if it means more clicks

Simple design for Bulb often means simple binary choices, even if it means more clicks

 

2. Robust over delicate

Another quality was robustness. Like a good children’s toy — Bulb’s design should feel sturdy, inviting to explore and difficult to break.

This quality lives in Bulb’s aesthetics — chunky buttons and controls, large type, bold and simple colour choices, thick strokes, and simple layouts. The tradeoff is that we sometimes struggle to solve visual design problems where a delicate and subtle treatment might be more appropriate — it just doesn’t feel “bulby”.

 
  Bulb’s aesthetic is robust rather than subtle and delicate

Bulb’s aesthetic is robust rather than subtle and delicate

 

Robust design means that patterns don’t break when their content changes, or when they’re used on different screen sizes. It also means we aim to make our code robust and reusable.

Most importantly robust design is accessible and can be used by all Bulb’s members, regardless of their mental or physical abilities.

3. Personal

Finally, the “fun and personal” theme came through strongly.

Our informal conversational tone is a big part of Bulb’s brand. This manifests through our cheeky illustrations, playful copy, and bright colour palette.

 
  Illustration for payment holiday email

Illustration for payment holiday email

 

This principle even manifests in code. For example, our typography system is based on animal names and spacing system on planets (because, well, space).

We all like the Hippo on the Moon.

 
hippo-on-the-moon.jpg
 


Principles inform patterns

Even though we perceived Bulb’s design to be simple and robust, in reality not all of it was.

For example, here’s how our buttons and links have evolved since the initial interface audit nine months ago. Some of the styles were more in line with our principles than others. We used them to help us define the global form patterns in the system.

 
  A section of the interface audit for buttons and links (left) and the revised patterns (right). See more on our    Bulb Solar design system website

A section of the interface audit for buttons and links (left) and the revised patterns (right). See more on our Bulb Solar design system website

 

And here’s a more simple and robust Text Input. It’s also more accessible.

 
  A section of the interface audit for text inputs (left) and the revised patterns (right)

A section of the interface audit for text inputs (left) and the revised patterns (right)

 

Testing the principles (and patterns)

Just because we perceive our product a certain way, doesn’t mean our users do. And so we should test that regularly.

When working on the design of Bulb’s new native app, three visual variations used our brand colours in different proportions. One used pink quite heavily, the second was more white and clean, and the third one was significantly bluer.

We ran a small test with users to test the variants against our principles. Interestingly, the blue option was perceived as more robust and simple than the other two.

 
 

Not only did it help us see how visual design felt to users, it also contributed to our guidelines for colour proportions across all Bulb products.

Evolving principles

To make sure design principles remain useful and actionable, we constantly test them by applying them in our day to day work.

When reviewing designs in critiques, we try to make sure each piece lives up to all of our principles. Asking “Is it really simple? Is it robust? How could it be more personal?” allows us to have more objective views on the quality of designs.

Sometimes we notice that a principle doesn’t quite work. For example, the “personal” principle used to be “Fun, not formal” originally. But then we learned that our users don’t always appreciate Bulb being “fun”. Nobody wants a “fun” message about their payment statement.

This helped us realise that Bulb design should instead priotise being personal and showing empathy for our members. Fun evolved into personal.

 
bulb-design-principle-simple.jpeg
bulb-design-principle-robust.jpeg
bulb-design-principle-personal.jpeg
 

Bulb’s design principles as they are today. Poster design by Nicolo Arena

Design principles are of course never done. In the future it would be interesting to see how our UX team evolved, by looking back at how our principles changed over time.

Will we still be prioritizing the same things? Or will these qualities be so embedded in our design approach that they’ll go without saying?

As long as we continue applying and testing our principles, they should be getting better and remain useful for our team.

Alla Kholmatova