Defining Design Principles
Defining Design Principles
Decentralize the design decision making process with design fundamentals
Effective teams (and individuals) name the behaviors they want to repeat and define the principles they want to adhere to. It’s a bit of a self-fulfilling prophecy: name and define, live them, repeat them. If you don’t define the vision, then it’s impossible to truly know what you’re building towards.
Jon Yablonski, author of Laws of UX (book) and the companion website, knows this. Laws of UX is “a collection of best practices that designers can consider when building user interfaces.” In Chapter 12 of the book he details a workshop for defining a company’s Design Principles.
Design Principles are useful because…
They are guidelines that represent the priorities and goals of a team and serve as a foundation for reasoning and decision making.
Allow the company to efficiently scale by decentralizing the design decision making process.
Help to frame how a team approaches problems and what it values.
Prevent bottlenecks from occurring by creating a shared understanding of what a successful design solution looks like.
Design decisions become quicker and more consistent.
The need to define Wunderite’s Design Principles became apparent as our team grew. It was relatively easy to maintain consistency with a small team. But as the team grew, it became increasingly challenging to maintain a unified product experience without getting bottlenecked by a few stakeholders.
To address this, we collectively workshopped our Design Principles
First we defined the team that would author the Principles. Who would have a stake in our product vision? We made the exercise mandatory for our entire Product-Engineering team and optional (but encouraged) for the rest of the company. Founders Peter and Joe also participated. In preparation, we circulated resources including Laws of UX (specifically Chapter 12: Applying Psychological Principles in Design) and an internal summary slide deck.
Second, we defined the success criteria for an effective design principle:
Principle should be direct, clear, and actionable, not bland and obvious (e.g. "design should be intuitive" is too broad)
Principle should solve a real question
Principle should be opinionated (e.g. what elements and features are we choosing to prioritize?)
Principle should be memorable
Then we diverged and gave everyone the opportunity to individually brainstorm what they thought would be important as a Design Principle. Given the distributed and remote nature of our team, operating across a lot of time zones, we decided to address this like a homework assignment. We created a Google Form for participants to submit their Principles.
Next, we converged in a meeting and reviewed the submissions as a team and voted on which ones we thought best aligned with our company goals and success criteria.
Once we had a final list of Principle candidates, we consolidated similar themes and refined the language of each Principle, to clearly articulate the expected outcome.
Note: Since running this workshop almost two years ago, we’ve become more effective at working and collaborating as a remote team. We also have a smaller span of time zones to work across, so the logistics are less challenging. If I were to re-run this exercise today, I would consider the following:Spend more time workshopping the principles together, rather than having “homework” to submit via Google Forms.
Use breakout rooms to workshop ideas in small randomized groups. (But eventually gather everyone in one group, bring it all together, and finalize the Principles).
Use collaborative tools like Miro to help workshop ideas.
Once we were happy with the Design Principles, we associated them with psychological principles detailed in Laws of UX.
Finally, we documented the Design Principles in Confluence and updated our new employee onboarding checklist. The goal is to circulate and advocate. See “Room for improvement” below for some reflection on this.
Wunderite’s Design Principles
Without further ado, here’s what the team came up with, roughly ordered in terms of importance…
Use simple language
According to Tesler’s Law, any system has a certain amount of complexity that cannot be reduced. However, we should ensure as much of the burden is lifted from users by dealing with inherent complexity during design and development, especially when considering language.
To achieve this goal, we must:
Optimize for the reader, not the writer.
Make actions targeted and specific.
Avoid industry jargon.
CC Product and design managers (language is a critical aspect of the product; don’t be afraid to ask for assistance when unsure).
Clarity over abundance of choice
According to Hick’s Law, we know that the time it takes to make a decision increases with the number and complexity of choices available.
To achieve this goal, we must:
Limit choices to no more than 3 items at a time.
Highlight recommended options.
Provide brief explanations when useful that are clear and no more than 80 characters.
Use concise multi-step forms in place of long and overwhelming ones.
Be consistent
According to Jakob’s Law, users prefer your site to work the same way as all the other sites they already know. This also applies to different pages and features within Wunderite. By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.
To achieve this goal, we must:
Use existing pages, components, and styles as a model for building new features.
When necessary, use data to inform if an existing design pattern is not working effectively and iterate on it if necessary.
Be consistent with change: if you make a change in one location, consider if a global change is appropriate depending on impact and effort.
When making changes, minimize discord by empowering users to continue using a familiar version for a limited time.
Familiarity over novelty
According to Jakob's law, we know that users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know.
To achieve this goal, we must:
Use common design patterns to reinforce familiarity with the interface.
Avoid distracting the user with a flashy UI or quirky animations.
Give the user control
According to Postel’s Law, we know that we should be liberal in what we accept from others.
To achieve this goal, we must:
Avoid making assumptions for the user; allow them to dictate the actions they want to take.
Be empathetic to, flexible about, and tolerant of any of the various actions the user could take or any input they might provide.
Anticipate virtually anything in terms of input, access, and capability while providing a reliable and accessible interface.
Accept variable input from users and translate it to meet our requirements.
Give users feedback
According to the Peak-End Rule, we know that people judge an experience largely based on how they felt at its peak and at its end, rather than on the total sum or average of every moment of the experience.
To achieve this goal, we must:
Identify key moments when the product is most helpful or valuable and…
Use tasteful animations, highlighting, progress indicators, notifications, or modals as visual cues acknowledging users' actions.
Delight the user by making feedback informative and useful.
Experiment with comic relief or entertainment to put the user at ease (e.g. confetti when they have successfully completed a form).
Don’t go overboard; use restraint when placing emphasis on visual elements to ensure they don’t become abrasive or cause discomfort for users with motion sensitivity.
Let the user know how many fields we autofilled, then highlight them
Have a clear hierarchy
According to the von Restorff Effect, when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
To achieve this goal, we must:
Make important information or key actions visually distinctive.
Carefully consider the effect that size, color, font, proximity, alignment, and negative space have on hierarchy.
Cluster related objects
According to Miller’s Law, we know that the average person can only keep 7 (± 2) items in their working memory.
To achieve this goal, we must:
Organize content into smaller chunks to help users process, understand, and memorize easily.
When grouping objects, consider which actions are unrelated and drop them from the group.
Design with accessibility in mind
According to Fitts' Law, we know that the time to acquire a target is a function of the distance to and size of the target.
To achieve this goal, we must:
Consider those with color vision or low vision deficiency by using appropriate color contrast and font sizing.
Use a mobile-first design approach.
Make touch targets large, with ample spacing, and placed in areas of an interface that allow them to be easily acquired.
Use industry resources for accessibility standards:
Confirm before you commit
According to Postel’s Law, we know that we should be conservative in what we do, but be liberal in what we accept from others.
To achieve this goal, we must:
Give users the option to cancel or undo an action.
For default settings, always choose the least destructive action a user can take.
Brief reflection
In preparation for publishing this article, I copied the Wunderite Design Principles that our Product-Engineering team workshopped nearly two years ago. That accounted for about 75% of the article. I added a few screenshots and GIFs to illustrate the principles, included context about how we ran the workshop, and reflected on where we could improve. In the process, I was struck by two things:
Examples that best illustrate our design principles are seemingly innocuous: modals, alerts, notifications, inputs, and language decisions. Interactions that are sometimes overlooked because they’re not “sexy” or not considered central to the app design. But these small and frequent interactions highlight how clear, simple, and accessible messaging are core to User Experience.
Early at Wunderite, we struggled with engagement; we had many powerful features that were loosely connected. Instead of trying to solve the problem by building new features, we addressed the issue by making simple changes through language, modals, and menu actions, making features more connected and accessible.
I contend that when trying to improve user experience, one of the most efficient and effective changes to make is updating language to be clearer (which is why “Use simple language” is our first design principle).I was really proud of how well we stuck to our Design Principles! Our app design has changed significantly over the years, but it was still quite easy to find illustrative examples.
Room for improvement
At Wunderite, we do a great job of documenting company best practices, but we have room for improvement when it comes to circulating and advocating. Often it seems like the hard work we put into documentation gets lost when a piece of writing is relegated to a Confluence page. It can be challenging as a remote-first company, where we don’t have physical spaces to post reminders of our principles and best practices, nor do we have the same kind of opportunities for impromptu in-person encounters and collaboration. If you work at a remote-first company, how do you handle those challenges?
Things we already do
Write it down; document best practices.
Include documentation and best practices in onboarding (we have this down).
Use online tools for collaboration (we’re pretty good at this, but I think we could make more use of real-time tools like Miro and FigJam).
Reference principles and best practices in product requirements (we’re adequate at this).
Reiterate in meetings and discussions, like 1:1’s, scrum, grooming, and retrospectives (we could do this more).
Things we’re working on
Repeat and advocate. Build our principles into the stories we tell internally, with customers, with prospects, and with the public.
Make meetings less rigid and routine and more like collaborative workshops.
Be more transparent: share our process and learnings with the public (like this blog post).
Collaborate more frequently across departments.
Wunderite is building intuitive next generation software for independent insurance agents and their customers. If you’re curious to learn more, check us out at www.wunderite.com.