Teams

Determining your design principles

4 min read
Jessie Chen  •  Sep 8, 2016
Copied To Clipboard

Our design team at ZapLabs often found it difficult to compare competing designs or make design tradeoffs.

Well, we eventually realized why: Because we’d never determined our design principles.

Here’s how we went about creating them.

Inspiration

I set up a design team meeting and required everyone to present their ideas. For inspiration, I suggested my teammates check out Design Principles FTW, which has a great collection of design principles from Google, Facebook, Apple, and more companies.

Define design principles

After generating lots of solid design principle ideas from the meeting, the next step was to go deeper and define what exactly those principles were.

I set up a second meeting and asked everyone to write down their principles on sticky notes. Then we all put them up on the wall to group them and rank their importance.

“Good design principles force clarity and reduce ambiguity.”
Twitter Logo

Prioritizing design principles (round one).

Maslow’s hierarchy of needs

As we started to nail down our design principles, we needed a better way to visualize them. Back in June, I wrote a Lyft redesign article about their design principles. They used a pyramid shape (Maslow’s hierarchy of needs) to define the importance of order. It inspired me, so I decided to take this opportunity to give it a try.

I printed out the design principles we created and cut them into pieces. I drew a giant pyramid on the whiteboard and put a sample of Maslow’s hierarchy of needs next to it. Each of us got a set of principles and put them into the pyramid based on the way we wanted to rank them.

Oops! Conflicts happen

Some conflicts popped up. One: We couldn’t decide what was more important, consistency or efficiency, so we had a long discussion about it and eventually decided to group consistency and efficiency together. The reason is that consistency and efficiency often differ depending on what project you work on and where you are during the process.

For example, our engineers prefer consistency because they already built a style library. As designers, we have empathy for our users because of the extra number of clicks they have to go through. We want retention! We want to attract existing users of a competitor’s product to our product!

Well, we know some legacy patterns are stopping us from accomplishing all that. Why not explore options that can actually help them run their business more efficiently? What if there’s a need to prioritize efficiency over consistency for a specific case?

Here’s something I learned from going to design events

Don’t be afraid to create new patterns if specific legacy patterns aren’t working well.Twitter Logo Communicate with your engineers and product managers—help them understand the special needs. Hopefully, that way you can get your new design patterns into the next sprint.

Finalize design principles

Prioritizing design principles (round 2).

We had an idea to visualize the pyramid with pictures of examples next to it. I thought about burgers and how they have bread, meat, and sauce. I tried a few ideas and decided that meat is too specific. I replaced “meat” with “ingredients,” as it presents psychological needs better.

Here’s what we ended up with

  • Know your user = Bread (basic needs)
  • Clarity + Consistency & Efficiency= Ingredients (psychological needs)
  • Aesthetics = Sauce (self-fulfillment needs)

Principles diagram

I created a diagram with the goal of helping the rest of our team understand the principles and help them visualize the importance of each one.

Definition

Know your users

  • Understand user needs. You can’t deliver the right solution if you don’t understand user needs. Conduct user interviews to get to know your users.
  • Show empathy by adapting to user needs. Be aware of user needs and actual behavior. Manage your user’s expectations and understand that you are not your user.Twitter Logo

Clarity

  • Clarity is all about the relationships between elements. Consider the relationships between items on the page, and structure the page based on importance.
  • Create structure and hierarchy. Provide timely feedback that engenders confidence in the system. Users should know the consequence of each action they take.
“You can’t deliver the right solution if you don’t understand user needs.”
Twitter Logo

Consistency

  • Consistent interfaces. Allow users to develop usage patterns. Use standard controls and gestures consistently so that they behave the way people expect.
  • Consistent language. Use the same term when referring to a particular action or object, and communication pieces to avoid confusion.
  • Consistent use of established patterns. Users look for patterns they already know to shorten the learning curve and understand new experiences across programs.

Efficiency

  • User experience is seamless. It works across various screen sizes, platforms, and products. Efficiency matters when people are likely to use the app a lot and they are prepared to spend time learning it.
  • Efficient systems respect your time. Efficiency reflects the drive to get users to their goal by designing the shortest amount of time/number of clicks on task.
  • Leverage technology to drive efficiency. Use technology to adapt to existing behavior instead of making users adapt to computers.

Aesthetics

  • First impressions matter. A system that looks beautiful can further engender confidence and trust in the system
  • Aesthetics is a quality that people recognize, want, and need. It’s seen in design and in life, and it makes the use of that interface enjoyable.
  • Delightful. Your customers will look forward to using your product when it’s pleasant to use.

Importance

Recently I listened to a podcast by Julie Zhuo, Facebook’s VP of Product Design. She talked about how crucial is it for a startup to establish a clear set of design principles early on. Her insights boost my confidence believing our principles will make our products better.

“A lot of the purpose of having design principles is to really align people around what matters.

A good set of principles encodes that so everyone can have this shared sense of what’s important for us and what’s true to us. When new people join or when your company’s scaling, then it becomes easier for them to understand those things that are so unique and so important about the way that you do things and what you value.

We care about simplicity, and we care about people. When push comes to shove and you have to make a trade off, how are you, in those moments, as a team or a company going to prioritize? What are you going to care about the most?” –Julie Zhuo

(Listen to the full podcast here.)

“Users should know the consequence of each action they take.”
Twitter Logo

Looking forward

Design principles might not work for every company. For us, it’s helpful to have a set of principles that the whole team agrees on. We need principles that force clarity and reduce ambiguity.Twitter Logo

This article was originally published on Medium.