When setting out to define a set of product design and experience principles at Cluey Learning, I soon realised that while there's a lot of insightful musing on their value and great examples, of which my favourite might be those developed at Pinterest, there was little documented on how best to approach their development.
Should it be collaborative? Should the design lead retire between some headphones? A bit of both?
Well, in the hopes this may be helpful to other designer or design teams, here's how I approached the creation of the design principles for Cluey Learning.
Design principles are unique and sharp guidelines for anchoring design decisions. While we always consider, refine and iterate product features and flows, the experience principles which anchor those decisions;
In short, yes. Design principles ensure your design system doesn't turn into a variation of a UI Kit.
In, Everything you need to know about Design Systems, Audrey Hacq states...
"A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product."
A great definition, but what helps us as designers make the decisions about the design system we create? What makes the atoms we form, the right ones to use as building blocks for our unique products? The answer is: the principles behind them.
As we create a design system for our product, a defined set of product or experience design principles informs and anchors any decision regarding the atoms, molecules, organisms or templates we create.
While complying to web or application standards to ensure accessibility, a design system component should be granted access because it adheres to the overarching principles.
Beyond that, design principles help us determine the best elements to use from our design system to solve a given problem, and answer questions like, "Should we use a toggle switch instead of a radio list?" Or, "Should our delete button have an 'undo' or a confirmation?"
The answers to these questions should come out of your set of unique principles, which help to define the most important questions of all, "What kind of product do you want to be?" Or "What kind of product are you?"
Julie Zhao in A Matter of Principle states that a good set of design principles:
"... are solid. There is a weightiness, a certainty behind them. What looks right, what feels good — these are superficial things. A great designer defends her work based on principles that last, past one decision, past a thousand, that aren’t carried by whichever way the wind blows."
Design principles should reflect an overarching product ethos and in the case of Cluey, I looked at the company values:
We believe LEARNING changes lives.
We have the power of DIVERSE PERSPECTIVES,
The courage to pioneer, and the CONVICTION to follow through.
We act with RIGOUR, CONSIDERATION
And SAY IT AS IT IS.
A good place start, but these needed to be turned from values into something more definitive, and actionable. While they speak to important factors—diversity, honesty and growth—design principles should be specific, with a sharpness of meaning, clear rationale and solid examples to back them up.
This is important so that design decisions, so easily viewed as subjective, can be interrogated objectively.
The next step was to get the Post-its and Sharpies out and run some workshops focused on exploring more action-oriented language around the company values. I ran the workshops with a variety of teams throughout the organisation with a very simple exercise;
I asked participants to write down individually:
We then discussed and distilled them as a group, categorising and elevating them. Here's a sample of the words and groupings which came through each team:
Brand team sticky note snapshot
Marketing team sticky note snapshot
Education team sticky note snapshot
Customer Care team sticky note snapshot
Platform team sticky note snapshot
While each team leaned into their vertical, there was considerable alignment in terms of themes and language.
While these were more action orientated than the values, they weren't measurable enough. I needed to turn the words from applicable aspirations into sharp principles.
After some final deliberation with the other designers and product managers in which about 11 different principles emerged (some product orientated, some experience orientated), I was able to distil them into these 5 key principles.
It's important to note that while the principles have a certain unison, they also have the right amount of tension to ensure "rigour" is applied and force "conviction".
***
Focused and tapering to a point.
We aren't seeking endless engagement!
Cluey helps customers achieve their learning goals. Learning is continuous, however, we don't want endless engagement. We want clear goals.
Effective product experiences at Cluey are clear, evidence driven and goal-orientated, focusing on deliberate outcomes over endless engagement. Cluey experiences make things evident; starting with a need and offering a clear path to an outcome.
How do you make things Acuminate?
Don't leave things open for interpretation:
Deliver on promises and set clear paths:
Make things obvious:
***
Offering relevant guidance by being responsible and malleable
Learning is illuminating and experiences with Cluey should be visually dynamic.
Interacting with Cluey should be rewarding and advantageous, prospering growth and inspiring users to act. Therefore, our experiences should inform, enable and empower users.
How do you make experiences Encouraging?
Dial up the positive:
Don't force the issue:
***
Reassuring and safe
Things go wrong and people make mistakes. Therefore, experiences with Cluey should reassure, pre-empt and forgive users.
How do you make experiences Resilient?
Be pre-emptive:
Be forgiving:
Be re-assuring:
Harmonious through understanding, inclusiveness and repetition.
Receptive experience are harmonious experiences. Cluey is for everyone and understands people have different needs.
How do you make experiences Receptive?
Let people know Cluey is for them:
Demonstrate responsibility:
Our experience adapts and responds to different channels:
One thing at a time:
***
Fun, dynamic and vibrant.
How do you make experiences Pop?
Be luminous:
Mean it when using black and white:
Ensure graphics matter:
As a set, these principles are uniquely Cluey. While the how-tos may seem like generic best practice, there is a subtle distinction between best practices and principles. For example, products like Facebook, Instagram or YouTube are looking for endless engagement from users, therefore, "Acuminate" as described above is not a principle that applies in their product context.
Similarly, "Poppin'" is not a great principle for a product which is trying to evoke luxury, where a more sleek or monotone defining principle might apply instead.
The principles above are made manifest by the every growing Cluey Bricks Design System.
I hope this has been helpful, and that it enables or inspires you to be more forceful in the specificity of principles you define to help anchor design decisions, and build a unique design system.