Making it yours — developing product experience design principles

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.

Why develop design principles at all?

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;

• Ensure our solutions are unique (or genuine) to the product
• Give us something to interrogate our designs with
• Remove subjectivity and reliance on gate-keepers.

Do we need principles if we have a design system?

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."

So, how did Cluey's Design principles come about?

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.

Workshops

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:

1. Words Cluey should live by.
2. Words that describe how we want Cluey to be perceived.

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}

Emerging themes

While each team leaned into their vertical, there was considerable alignment in terms of themes and language.

• Human
• Excellence
• Welcoming
• Practicality
• Growth
• Trust
• Boldness

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.

Refinement

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".

***

Acuminate

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:

• Be sharp.
• Be instructive.
• Use clear sign-posting.
• Don't say it, show it!
• If a concept is proclaimed; explain how and why.

Deliver on promises and set clear paths:

• Make sure users know what they’re in for.
• Recognise user interaction with relevant feedback.
• Recommend relevant next steps.
• Always offer a next or alternate step until a goal is achieved.
• Layout the path before the user's first step.

Make things obvious:

• Ask for details contextually.
• Reward users with micro-delight moments after they’ve completed a task (not before).

***

Encouraging

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:

• Tone down errors by humanising micro-copy.
• Maintain momentum by not overwhelming the user.

Don't force the issue:

• Suggest action but don't force.
• Guide, don’t dictate.
• Explain why a suggestion is being given.

***

Resilient

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:

• Use user data to maximise efficiency and relevance to their experience.
• Offer suggestions for known problems/concerns.

Be forgiving:

• Ask for confirmation.
• Offer changes and/or undo options if applicable.
• Offer auto-save or mechanism to continue later if a user is performing a large task.

Be re-assuring:

• Explain errors.
• Avoid dead-ends if a task is not complete.

***

Receptive

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:

• Keep language concise and minimise rhetoric.
• Offer tips or explainers for complex subjects.
• Design with semantic mark-up in mind.
• Use image descriptions and informative meta-data.
• Offer alternative communication options.
• Use natural imagery with diverse cultures and genders.

Demonstrate responsibility:

• Reassure users their experience is private.
• Reassure users their information is kept in confidence.
• Ensure interaction can be achieved in more than one way.

Our experience adapts and responds to different channels:

• Use responsive layouts.
• Use adaptive features.

One thing at a time:

• Define hierarchy of content.
• Maintain clarity of main, secondary and tertiary CTAs.
• Use a melodic pulse to guide users through their experience.

***

Poppin'

Fun, dynamic and vibrant.

How do you make experiences Pop?

Be luminous:

• Maintain vibrancy of colour.
• Contrast saturated colours.
• Avoid muted, pale or subtle hues, especially combinations which don’t meet accessibility contrast standards.

Mean it when using black and white:

• Contrast stroke weights of lines and shapes.
• Create clear hierarchy of size/weight between typography styles.

Ensure graphics matter:

• Use relevant bright imagery to heighten content, not decorate.
• Use icons, diagrams and animation to enhance comprehension, not just to minimise the interface.

***

But, are they unique?

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.

Applying the principles

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.