Case study: Creating design principles for a team at Shopify

About how we extended the Polaris principles to the smaller context in my project at Shopify.

Having countless debates to make an agreement happens because there are different opinions, values, and belief. Honestly, this happens in a lot of teams. Where people will start to have a debate and using their own personal taste and opinion. This can drag you to a time-sucking debate that will lead you nowhere.

One way to avoid this is by creating a set of principles. But… is it worth the effort?

Chaotic tourists

When talking about the importance of having principles, I like to use this tourist metaphor. Without a solid principle in your team, everyone will talk in different languages. It’s like telling a French, an Italian, and a Korean to go to the same room and say “Go talk to each other.”

If you think about it, that’s pretty insane. So, if you’re wondering, is it worth it to invest time to create principles? Most of the time, the answer is yes.

Why bother to create one?

While I work at Shopify, our design system, Polaris1, already have a solid set of principles that serve as a source of truth for the whole organization.

So, why bother to create another one?

To start off, in our project, we had a hard time to make a decision when there is a trade-off. Later, we quickly realize that the high-level principles are the north star of the organization and not granular enough to help us make decisions. This is the main reason why we started to feel a need to adopt the Polaris principles and make our own.

The project was about improving the card UI system we have. I was lucky because I had a chance to lead this project. So, I want to share my learning and the process on how we did it.

yellowstroke-principles

Planning & research

Since we have the existing design and wanted to improve them. I quickly realize that we should start there. So, we did an extensive audit our design combined with the data we have from the users’ feedback.

1. Workshop: defining the problems

We gathered as a team and spent an hour to define the problems on the existing design. What we did was pretty straightforward, we observed few the elements of the existing design and put the problem on the post it.

Tips:

  • If you’re facilitating, prepare beforehand and set the agenda
  • Use super sticky post it. Ugh, normal sticky post sucks!
  • Involve your team, but keep it small
2. Grouping the problems

Once we finished, we have tons of post it on the wall. We grouped the similar problems together and label them. This helps us to focus on the bigger picture.

3. Prioritize the problems

Since there are tons of problems, we won’t be able to cover everything. Therefore, we prioritize the problems, we voted on what we think is the top 4 problems that we want to avoid.

Drafting the principles

Once we have the prioritization, the team decided to put me in charge to draft the first round of the principles. This approach has its own pros and cons. But we believe that was the most efficient approach we can take at that time.

Problems as the fundamentals

I use the problems as the fundamental, the role of having the principles that will remind us of what’s important and why.

Should derived from Polaris principles

In Polaris, the principles are “Put merchants first, Empower but don’t overwhelm, Build a cohesive experience, Be polished but not ornamental.” While drafting the principles, I have to keep this in mind to ensure the principles that I’ll come up with have a connection and still hold the true value of the higher-level principles from Polaris.

After weeks consulting with few people in the organization, reviewing them together with the team, and countless revisions. We were able to come up with the set of principles that represent the “ideal” experience we wanted our card UI to have.

The result

As a result, the principles really helps us to make decisions faster whenever we have few options. Not to mention, the team can easily give a push back whenever my work is not hitting important principles.

This mean, shared language that can help us to stay aligned. Here are the principles we ended up with:

  1. Focused
  2. Glanceable
  3. Personalized
  4. Valuable
  5. Aesthetic Integrity
principles-poster You can put up the poster to remind people

Practical application

But, Budi2, how do the principles help?
I’m glad you asked!

Well, let’s take a look on the card below.

marketing-card-before

The content is not personalized and not valuable to the users, it selfishly promotes the new section in our admin. Also, there are a lot of problems behind this card beyond the surface that will rather long for me to explain. Basically, it’s bad, like, really bad.

While we re-think the card, we refer to the principles a lot during the exploration. For me, this is much easier to focus my attention on what matters. For the team, they’re more comfortable to give the push-back when necessary. Most importantly, we have a shared language, which is really efficient. One time, somebody comes up to me and say “I don’t think it’s glanceable. Let’s find a better way.”

Here’s how it turned out:

marketing-card-after the redesigned card
Shopify-home-card-system A peek of home card system

Conclusion

Having design principles for your organization is necessary. However, if you don’t adapt the principles to your team, you’ll missed an opportunity to save a lot of time from debating over the same thing.

It also important to keep re-iterate the principles as you go. If the principles has no longer add value, you can replace or remove it, too.

Footnotes:

  1. Polaris is the Design System Language created by Shopify.
  2. Hello, that is my first name. Nice to meet you.

Next:

Common icon design problems you should avoid

Sep 17, 2018