Table of Contents
Two years ago when I joined the product team at Thomas, I faced a design culture where decisions were based on the highest paid person’s opinion (HiPPO). Conversations went somewhere along the lines of “I don’t think XYZ will like this” or “that’s not their taste in design.”
My goal was clear: instill a user-centric culture where design decisions are based on user needs, data, & best practices.
…until I was punched in the face by reality — the team was no longer making design decisions to the taste of upper management, they were now making decisions to my taste. I was the new HiPPO.
Within the first month at the helm of design, we created the baseline for our design system to automate UI decisions, set up a dashboard of KPIs to track our success, and established an inclusive design process that allowed us to effectively get designs out the door.
Things seemed to be going well… until I was punched in the face by reality — the team was no longer making design decisions to the taste of upper management, they were now making decisions to my taste. I was the new HiPPO. (Cue the horror face meme.)
Although we made progress throughout the first few months, we were still missing an important piece to our design process: a set of user-centric & pragmatic design principles that gave the team guidance & autonomy in making optimal design decisions.
(Related: How We Adopted CSS Grid at Scale)
Hello Design Principles
Design principles (not to be confused with the traditional principles of design) are a set of guidelines for what your team or company believes to be good design.
Here’s a definition that’s spot on:
Design principles are the shared criteria for what good design means for our product and marketing materials. Think of them as a set of guiding ideas to help make design decisions, help keep all of our visuals aligned, and to help decide what features are most important to focus on.
Charli Marie, co-host of Design Life Podcast
When done right, they make your design process effective, efficient, & scalable.
But when done wrong, they end up as a list of theoretical cliches that state the obvious and don’t assist in the day-to-day design decisions.
Remember those company values you were asked to live by but struggled to put into practice because, well, they weren’t practical? That’s exactly what we wanted to avoid.
Our First Stab at Design Principles
Our goal was to get as pragmatic as possible to avoid spending time and resources on a set of principles that weren’t going to serve a purpose.
With this in mind, we went through an initial exercise where we documented the reasoning behind the decisions we made as individual designers. It happens to be that every designer on the team had their own internal set of design principles which they used to guide their decisions. Surfacing these principles was extremely useful in helping us build a shared mental model of how we made decisions as a team.
We used a combination of our individual design principles as a baseline. After a few debates, thorough research, and a sprinkle of user-centric best practices we came up with the following list:
1. User-First
It is key that we understand our users and their needs first. We never trick the user, we never manipulate the user.
2. Inclusive & Accessible
Everything we build should be accessible, inclusive and responsive by default. Designs should perform well in different contexts & platforms.
3. Design Consistency
Blueprint (our design system) is the single source of truth for design consistency.
4. Challenge Design Patterns which Don’t Make Sense
Contextually, if a design pattern doesn’t make sense, challenge the use case and consciously modify or suggest a new pattern for the situation.
5. Each Project Starts with the Research Phase
Let’s thoroughly research what we’re trying to solve for. Chances are other companies have already solved this.
6. Data-Driven
Use existing data and KPIs to guide our design decisions.
Looking at these principles two years later, they seem obvious (and maybe a little clunky). And that’s because at the time we were in a place where they weren’t — these were custom-tailored principles to the issues we were struggling with as a team.
For the next year, these principles helped the UX team stay focused on designing for the user and not the HiPPO.
Design Principles Applied at a Company-Wide Level
Time and time again we found ourselves debating and explaining the same user-centric concepts with other teams (e.g. why tricking the user isn’t an option, why this new product needed to be accessible, what accessibility meant, why our opinions should come last, etc).
We decided to use the same approach that helped us think cohesively as a design team and apply it at a company-wide level. The goal was to modify our design principles in a way that would be understood and effectively utilized by the rest of the organization.
After detailed feedback (and plenty of debates) from engineering, product, and marketing we came up with the following principles.
Thomas Design Principles
1. User-Centric
Let’s figure out what the user needs are first and design for that. We are not the user.
2. Accessible
Every design should be fast, responsive, & of low cognitive/physical effort for the user. Accessible products create a larger audience.
3. Data-Informed
Design decisions are better made when guided by data. Opinions come last.
4. Transparent
Transparent design decisions build trust in our products resulting in higher user engagement. No tricking or manipulating the user.
5. Unified
Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.
6. 80/20
80% of results come from 20% of the effort. Instead of solving everything, let’s aim for the bigger impact.
7. Early Delivery
The earlier we get designs in front of the user, the earlier we know what works and what doesn’t.
*Principle #5 was borrowed from Airbnb’s design principles — I couldn’t have worded this better myself.
We now had a set of company-wide design principles that not only provided us with the guidance necessary for making day-to-day design decisions but also worked as a tool that drastically improved our collaboration with other departments. From engineering to product and marketing, we were all speaking the same language.
The Pragmatic Part
We design things which we think are semantically correct and syntactically consistent but if, at the point of fruition, no one understands the result, or the meaning of all that effort, the entire work is useless.
Massimo Vignelli, The Vignelli Canon
Yeah, not what we’re looking for. The following set of guidelines helped us gain traction and create awareness of our principles along with their purpose throughout our company.
Specific to our organization
Each of our design principles addresses a specific friction point of our organization. If I were to take these design principles to another company, chances are they wouldn’t work. One of the most effective ways of getting other teams to adopt an idea or process is by making their lives easier.
Include why
Each definition of a design principle was coupled with a strong why. This takes a design principle from being theoretical and most likely to get ignored (e.g. all design decisions should be transparent without tricking or manipulating the user) to one that is informative and pragmatic (e.g. transparent design decisions promote the trust of our products. No tricking or manipulating the user).
Inclusive of other teams
Nobody wants to follow a set of “rules” that are being dictated by one team. Our design principles were designed to help us collaborate better as a user-centric organization. This meant speaking with other teams and thoroughly understanding the friction points from their perspective. This helped us design a set of principles that addressed issues at every level of our company.
Make Them Obvious
Once you have a set of well-defined principles, make them visible in places where your team and coworkers will be sure to come across them. An option is to design a poster and add it to every single conference room. If you don’t make an effort to increase visibility, no one else will.
To Conclude
Design principles aren’t meant to end all debates nor to get everyone thinking the same — different perspectives and stress testing designs are still crucial and necessary parts of the design process. But like a good design system, design principles are meant for us to automate the smaller decisions to make room for debate of the larger concepts and ideas.
Additional thoughts on design principles? Reach out & let me know.
Resources
I'm Julian, a product design leader and developer with a habit for experimenting (I did some cool stuff at Thomasnet.com). I mostly write about what I'm working on related to product design, front-end development, and experimentation.
While you're here, I'm currently in the market for a design leadership gig. If you're interested in working together, hit me up, or feel free to share my resume.
Notes From the Field
Designing Multi-Sided Platforms
A comprehensive guide on designing the experience and growing the engagement of networked markets.
A Pragmatic Approach to Design Principles
How we took our design culture from executive-centric to user-centric with the help of pragmatic design principles.
Server-Side Split Testing for Static Websites
When to use, when to avoid, and setting up your A/B testing stack.
How We Adopted CSS Grid at Scale
From team buy-in to fallbacks, here's the approach we took at Thomas with the implementation of CSS Grid.
Don't Fight The Notch — Designing for the iPhone X
Coming to terms with the notch on the iPhone X and its effect on mobile design.
Lessons Learned After Running 300 A/B Tests on 20 Different Websites
Over the past 2 years I’ve dedicated part of my career to building a conversion rate optimization (CRO) team from the ground up. Here's what I've learned.