Learn From the Best: Product Design Principles

In my job as Design Team Lead at SimpleSite, I’ve recently been part of creating a set of Product Design Principles. In this process, I spent a lot of time studying the theory, learning about best practices, and getting inspired by some of the most successful companies.

Being able to connect the theory with concrete, real-life examples has been a huge help for us as we’ve worked on defining our own principles. That’s why I decided to put together this article. It consists of 2 main parts:

1. 4 characteristics of the best Product Design Principles
   I also wrote about these in my more elaborate guide to Design Principles.
2. Collection of the best Product Design Principles
   Scroll down a bit if you’re just here to get inspired by Asana, Codecademy, Medium, Pinterest, and more.

Whether you’re here to learn what the best Product Design Principles have in common, or simply get inspired by some concrete examples, I hope this article will be useful!

‍

4 characteristics of the best Product Design Principles

As you’ll see in the examples later, there’s no one-size-fits-all when it comes to the format of your Product Design Principles. However, there are certain characteristics that the best ones seem to share. Use them as guidelines when creating your own set of principles, and let the examples at the end inspire your formatting and phrasing.

‍

1.️ Small in number ✓

Aim for 3 to 5 principles to ensure they will actually be remembered and used. More than that won’t be manageable, and there’s no way you and everyone else will be able to remember them all.

A small number of principles will make decisions easier — too many will make them harder.

Take Pinterest as an example. While each of them is clarified with a few headlines and sentences, they stick to just three principles:

1. Lucid
   It’s intuitive, not learned. It makes the user feel powerful. It makes the content taste better.
2. Animated
   It’s colorful. It’s visually responsive. It’s unexpected.
3. Unbreakable
   It’s built for exploration. It’s impossible to mis-tap. It’s reversible.

‍

2. Differentiating ️✓

Why should someone pick you and not your competitor? Your Product Design Principles should help you answer this question.

Universal Design Principles are for everyone. Your Product Design Principles are not. Copying a Universal Design Principle and slapping your name on it is redundant. Avoid truisms like “We’re user-friendly” and “Keep things simple”.

Ask yourself: Could the opposite be a Design Principle for another product? If not, it’s probably too universal to be a good differentiator for your product.

Consider the “[Option A] over [Option B]” format to emphasize what your product is and what it is not. This will help you say no to features and ideas. The early Product Design Principles by Medium are a great example of this:

• Direction over Choice.
• Appropriate over Consistent.
• Evolving over Finalized.

Choice, consistent, and finalized could hypothetically be prioritized in another product, which makes these principles work as differentiators for Medium.

‍

3. Unambiguous and actionable ️✓

Your Product Design Principles should help you take action in your daily work. They’re meant to eliminate potential solutions and guide you to a decision. A vaguely phrased statement with ambiguous terms won’t do that.

A great example is Codecademy’s first Design Principle. It’s extremely specific, it explains the underlying rationale, and it provides a concrete example:

• One Column
  Whenever possible, we have constrained our entire content to a single-column layout. This helped us focus on the core purpose of the page, while also giving us more control over our narrative. A one-column layout was also easier to implement within our first responsive design system, by minimizing variation between different screens and form factors, such as mobile and tablet.

‍

4. Concise and memorable ️✓

Even if you limit yourself to 3 principles, you and your team won’t be able to remember them if they’re abstract and long-winded. They won’t stick in your minds and encourage a certain way of thinking. Instead, make sure your Product Design Principles are concise and memorable.

Asana shows a good example of well-phrases Product Design Principles. Here are a couple of them for inspiration:

• Increase confidence through clarity.
  Within the application, and more broadly within teams, it is unambiguous what is happening and why.
• Be consistent and standard, and innovate when it’s worth it.
  Users should feel like Asana is familiar yet modern.

Asana uses both icons and text labels to increase the clarity of their features, and even tooltips when a user hovers anything they can interact with (see screenshot below). They stick to familiar patterns, yet keep the design modern and joyful to use. I’m personally a big fan of Asana.

‍

The best examples of Product Design Principles

The following products are sorted alphabetically, not by the quality of their principles. They’re all great, yet very different in their formatting and presentation. Check them out, get inspired, and use whatever you can when creating your own! We’ll cover the following:

1. Asana
2. Codecademy
3. Degreed
4. Firefox
5. Medium
6. Pinterest
7. Windows
8. Wonderbly

Asana

This nice article explains why and how Asana created their Design Principles.

• Allow users to focus on their work without interference.
  A user’s focus should be in their control, only distract users with changes that are personally relevant.
• Increase confidence through clarity.
  Within the application, and more broadly within teams, it is unambiguous what is happening and why.
• Foster productive and emotionally satisfying interpersonal dynamics.
  Users feel like they are part of a team, where they can count on each other to do their part, and feel like they’re moving forward towards a common goal.
• Design for fast, effortless, and intentional interactions.
  Simple and common tasks should be frictionless and obvious; complex tasks should feel efficient and delightful. But, speed should not lead to inaccuracies.
• Empower everyone through progressive discoverability.
  Everyone at all levels of experience with Asana should feel like they know how to use the product, regardless of how many features they use.
• Be consistent and standard, and innovate when it’s worth it.
  Users should feel like Asana is familiar yet modern.

Codecademy

For a full description of each principle, check out this article.

1. One Column
2. Social Proof
3. More Contrast
4. Few Form Fields
5. Keeping Focus
6. Direct Manipulation
7. Visual Hierarchy
8. Visual Recognition
9. Larger Targets
10. Design for Edge Cases

Degreed

With a set of 12 Design Principles, Degreed has too many for easy recall. At the same time, not all of them share the common traits of the best Product Design Principles. I’ve included my favorites below.

5. Focus the user on one primary action at a time
Guide the user by focusing screens, views, or actions on one primary task. Be ruthless with the prioritization, make the choices stupidly simple. Limit distraction. All elements and styling that are not helping the user focus on the primary task can be considered as visual clutter and a huge distraction for the user. Be aware that everything in the interface has to be processed by the user’s brain, the less there is to process the lower the cognitive load is.

6. Minimize user input
User input takes a lot of effort and time. Always strive for the least amount of user input to reach a goal. Every input that is required from the user increases the friction that the user experiences and increases the chance of giving up.

8. Make decisions for the user
Don’t be afraid to make decisions for the user. Offering less choice and options will give the user a more confident feeling, because there is less to worry about. Be aware of the paradox of choice; offering a lot of choices will make the user feel overwhelmed because he/she needs to assess each and every option if it meets his/her goal.

11. Don’t go for ‘WOW’, go for ‘of course’
Never chase the ‘wow-effect’. Product design succeeds when it solves the problem or need of our users in the best possible way. Design the product effective & delightful. The reaction we are after from our users is “Of course, that is obvious”.

Firefox

Notice how they do things a little differently at Firefox, showcasing that there isn’t a right and wrong when it comes to the format of your Product Design Principles. Each bullet is what Firefox calls a Design Value, with related principles below.

• Takes care of you. Principles:
  – user-sovereignty
  – default to privacy
  – no surprises
  – actionable advice
• You help make it. Principles:
  – research gives a voice to our non-core community
  – start people with smart defaults
  – implicit as well as explicit customization
  – invite people to be more than users
• Plays well with others. Principles:
  – user control and choice
  – simple to use the services you choose
  – suggest ways to get the most out of the web
• Exuberant. Principles:
  – feels like there is a person at the other end
  – fun tools are easier to use
  – humor and whimsy
  – have a point of view
• Finely crafted. Principles:
  – see also our visual design guidelines
  – continuity of look and feel across platforms
  – perceivable quality is vital
• Global. Principles:
  – global means local and local and local
• Balances power and simplicity. Principles:
  – 80/20/2: default to surface minimalism and easy access to the rest
  – user-agency and understanding, not just less
• Makes sense of the web. Principles:
  – focus on real human tasks and contexts
  – many real tasks involve a browser and other tools
  – quick access to your stuff and web
  – no jargon
• High user-performance. Principles:
  – performance is objective, but responsiveness is subjective
  – a happy user performs better

Medium

Note that these are mentioned in a reply as “… a few of the early design principles we crafted at Medium”. They’re not necessarily the official and final ones, but still a great source of inspiration.

• Direction over Choice. This principle was often referred to while we were designing the Medium editor. We purposely traded layout, type, and color choices for guidance and direction. Direction was more appropriate for the product because we wanted people to focus on writing, and not get distracted by choice.
• Appropriate over Consistent. This might seem controversial, but when applied across devices, its purpose is clear. We were willing to break consistency if it was more appropriate for the OS, device, or context.
• Evolving over Finalized. This is exemplified in the ability to share Medium drafts, write responses, and leave notes. The content on Medium should be antifragile, improving with use, and evolving over time. We did not want to design printed books for the internet.

Pinterest

For a full description of each principle, and how they’re made even more actionable with what Pinterest refers to as “The basics”, check out this article.

1. Lucid
   It’s intuitive, not learned. It makes the user feel powerful. It makes the content taste better.
2. Animated
   It’s colorful. It’s visually responsive. It’s unexpected.
3. Unbreakable
   It’s built for exploration. It’s impossible to mis-tap. It’s reversible.

Windows

Windows has 8 Design Principles, so likely too many for their employees to always keep in mind. They’re all of high quality though!

—

Reduce concepts to increase confidence

• Have you introduced a new concept? Why? Is it necessary?
• Can you get rid of unneeded concepts?
• Are you making meaningful distinctions?
• Does the UX continue the same concept?

—

Small things matter, good and bad

• What are the important “small things” seen often or by many?
• What small problems are you solving?
• Do less better.
• Don’t cut the small things in your experiences.
• Plan for the thoughtful details.
• Fix the small bugs.

—

Be great at “look” and “do”

• What is your UX great at? Does its look reflect what it is great at?
• Does the first thing users see reflect what the UX is great at?
• Does the UX match expectations?
• Is it obvious what users can do?
• Are you providing only the necessary steps?

—

Solve distractions, not discoverability

• Reduce distractions.
• Don’t let features compete with themselves.
• Commit to new functionality.
• These are not solutions to poor discoverability:
  – Pinning an icon in the Start menu.
  – Putting an icon on the desktop.
  – Putting an icon in the notification area.
  – Using a notification.
  – Having a first-run experience.
  – Having a tour.

—

UX before knobs and questions

• Turn down the volume of questions.
• Ask once.
• Don’t require configuration to get value.
• Was the question asked already?
• Look for opportunities to consolidate.

—

Personalization, not customization

• Does the feature allow users to express an element of themselves?
• Have you made the distinction between personalization and customization?
• Does the personalization have to be a new feature, or can it make use of existing features and information (such as the user’s location, background picture, or tile)?

—

Value the life cycle of the experience

• Consider the user experience at all stages:
  – Installation and creation.
  – First use and customization.
  – Regular use.
  – Management and maintenance.
  – Uninstall or upgrade.
• Walk through the experience as if it has been used for 12 months. Does it have:
  – Realistic content.
  – Realistic volume.

—

Time matters, so build for people on the go

• All UX principles apply equally at 12-inch and 20-inch screen sizes.
  Be interruptible.
• Account for starting and stopping (fast return, and do not get in the way of other UX).
• Account for getting and losing connectivity.
• Performance is the universal UX killer.

Wonderbly

Check out Wonderbly’s Design System in which these Principles are used.

1. Be Storytellers
   Avoid one-sided conversations. Leave a deeper impression on customers by reflecting their needs and aspirations, whilst delighting them along the journey. Engaging our audience will drive sales and loyalty. By unifying content, community, and commerce we can inspire people to explore, interact, and shop with us.
2. Join Our Club
   Create products, features, and qualities within our site that instill trust in the mind of the customer. Championing findability, reliability, and credibility will reduce uncertainty throughout the entire experience. Dependability will empower a customer to go from a one-off buyer to a lifelong customer.
3. Optimized Experiences
   Leverage fluid layouts and a device-agnostic approach to create an optimum experience for every type of user. Constantly strive to streamline and simplify the journey for customers. Make use of native features to promote products and explore new technologies.
4. Grandma First
   Our customers are not just tech-savvy urban mums but also digitally novice grandparents. We must deliver a simple, effective, and rewarding customer experiences for every type of customer. Helping people to make the right decisions and guiding them along the path to purchase wherever needed.