At Customer.io, we’ve spent the last year turning our styles and coded components into a full-fledged design system. One of the biggest changes is that our work is now guided by a design direction that includes design principles.
Design principles are a set of opinionated, actionable, and aspirational tenets that provide guidance for design decisions. Here are some examples.
Even a single person design ‘team’ can benefit from articulating a design direction through principles. Principles can help communicate decision making to others and facilitate unified and reasoned product design.
Opinionated: a design principle should take a stance that can be argued or debated. “Clean”, “Intuitive”, and “Accessible” are universally good design, so they don’t help guide your team when it’s hard to make a decision.
Actionable: a design principle should be specific enough to take action on. “Clear” or “Mindful” might sound nice, but they are hard to interpret in day-to-day design decisions.
Aspirational: a design principle is most helpful when it can push your product to be better than it is now. That doesn’t mean all of your principles need to be future-thinking, but if none of them are, how will your design evolve?
A design direction will not work without buy-in from the product team. If you have the privilege of including Product Managers, User Researchers, or Developers in the brainstorming process, it’s more likely that people will understand and use the design principles. That doesn’t mean choosing through consensus. The final decisions should be made by the design team.
We split into groups of two and chose two products with user experiences that we admired. We spent about 30 minutes listing out interactions or areas we liked, then trying to answer: “Why did the company choose to design it this way?”. These notes turned into cards for Step 5.
We took a list of about 20 design dichotomies and individually voted on which ones we would choose if forced to choose between the two. Afterward, we discussed which dichotomies brought up strong opinions on our team. Some examples of design dichotomies are:
During the discussion, it became clear which dichotomies guide our product, and we turned those into cards for Step 5.
The last group activity we did was brainstorming what makes our product special. We used a few guiding questions and sticky notes to try to distill: Why do people choose Customer.io? Why do they stay? What do they love about our product?
After we all wrote down our responses, we grouped them into themes and these became cards for Step 5.
I used Figma to organized a bunch of themes we saw across the three activities. Eventually I had 5 stand-out groups. I created statements to represent each and then got feedback from the rest of the team. We went through 2 or 3 iterations before landing on our final design principles.
Here’s where we landed!
We’ve been using these principles for a few months and so far they have helped us make hard decisions. As our design team and company grow, I’m sure these will evolve too.