Designing With Consistency

(originally posted on the 50onRed blog)

One of the things I love about being a product designer is the range of considerations that go into every decision. There are countless factors to deliberate that contribute to the success of a product, but one of my favorites may also be the most seemingly mundane: consistency. Consistency is the glue holding a design together. Without it, everything starts feeling disjointed and out of place.

There’s a handful of things to consider when ensuring a product design feels consistent: copywriting, UI elements, page layouts, navigation, and branding, to name a few. All of these pieces come together to create a design language that defines the product, and together they create an understanding of how to interpret and interact with it.

In this post, I’ll examine some of the things to consider when creating a product and take a look at why it’s so important to design with consistency in mind.

Copywriting

Although it’s often one of the most underestimated components of product design, copywriting is essential in conveying important contextual information, whether it’s about a specific piece of functionality, a strategic marketing message, or instructions and stipulations surrounding a particular feature. To create a truly great product, it’s essential for the tone and style of the copy to be consistent throughout. Consistent, well-written copy can be used to drive action and reinforce brand messaging, leading to a tighter connection between the audience and the product.

At 50onRed, we’ve determined that a casual tone and action-oriented style works best for our audience. We write copy with character and wit, as though we’re having a real conversation with our audience, forgoing the fluff to cut straight to what action a person should take given the situation. We carry this style across all of our products, and pull it through to our marketing materials to ensure we use a consistent voice across every touchpoint with our audience.

UI Components

Consistency is about setting people’s expectations of how to interact with your product, and nowhere is this more critical than in the elements of the user interface itself. Creating uniform UI components ensures that no matter where somebody navigates in the product, they already have a firm understanding of what different elements do and how they operate.

To accomplish this, things like form elements, buttons, and page interactions should share a common design language. For instance, if a form uses a toggle switch to alternate between two options, this should be the convention used in any other situation that also includes two options. Alternating between a toggle and something like a radio group causes an unnecessary disconnect in the language of the UI that could cause confusion down the road. This same concept applies to buttons and interactions, as well.

On the 50onRed Traffic platform, we use a single, high-contrast button to denote the primary action on a page. For all secondary actions, we use a more subtle button color. By making this convention consistent across our products, we’ve given our advertisers the ability to quickly assess the primary purpose of a page. Additionally, we pay close attention to how people interact with certain elements on a page.

For example, throughout our products, advertisers can hover over a table row to reveal additional options to interact with that item. Depending on the scenario, this could include the ability to navigate to nested items within the row or edit values in-line within the table. Despite the varying functionality on row hover, now whenever somebody encounters a table, they already have the expectation that they can hover over a row to further interact with it.

Page Layout

Also lending itself to the predictability of a good product experience is the layout of the page itself. Consistently placing things like headings, CTAs, and navigation elements in the same spot across the product will teach people where to look for them, reducing the learning curve necessary to gain familiarity with the visual hierarchy of the design.

Aside from just the way things are arranged onscreen, it’s also important to consider the conventions used to display the page content, such as tab containers, modal windows, and wells. Using the same methods for displaying certain types of content will set expectations for how to interact with them and define how a person’s actions will affect the view.

When we set out to redesign our Publisher Dashboard, we wanted to make it as easy as possible to use (duh). After we completed the discovery phase and got into some wireframes, we discovered that we could use the same layout across all the app views with simply a data visualization stacked on top of tabular data. That was it. Combined with dead-simple navigation, we were able to create a platform that was powerful, yet highly usable, which we never could have accomplished without first exploring how to make our layouts as consistent as possible.

Navigation

This one seems like a no-brainer, but I can’t tell you how many times I’ve been using an app or service where I constantly needed to re-orient myself after clicking around a bit.

While it’s crucial to have navigation that accurately reflects the information architecture of a product, it’s just as important to keep people situated as they explore. Using obvious selected states throughout the design can help alleviate confusion as to where the user is, while for products that have multiple, nested levels of navigation, breadcrumbs allow people to easily see the path they took and let them effortlessly navigate back up the hierarchy.

Recently, we set out to re-design our real-time bidding platform to increase usability and reduce flow-completion time. After assessing the current state of the platform and conducting a few brainstorming sessions, we knew we wanted to focus on re-organizing the information architecture and, subsequently, the navigation.

At the end of our discovery process, we ended up with a framework that better grouped functionality, which flattened the IA, and a breadcrumb convention that allowed us, not only to navigate back up the hierarchy, but also jump around to different sections within the platform. Using this convention consistently allowed for increased predictability of how to navigate and complete tasks in our platform, and although this framework is still undergoing internal testing, initial feedback shows that we’ve accomplished what we set out to do: making the platform more usable by giving our advertisers and publishers a better model for completing their workflow.

Branding

To me, branding is the easiest aspect of design to make consistent. Every brand’s visual identity has the same basic components: a logo, color palette, typography, and overall style. When considering all the previous ingredients of a design, ensuring a consistent brand standard is as simple as pulling the aforementioned components into the copywriting, UI elements, and page layouts of the product.

Of course, like with most things, there’s a balance that needs to be achieved. To do this, take a long look at the brand guidelines and devise a visual framework for the design — things like sidebars, navigation bars, page backgrounds, containers, headings, callouts, paragraphs, footers — then simply apply that framework consistently. That’s it.

When I joined 50onRed, we already had solid branding in place. It was my job to pull it through to all of the products I was charged with designing. One of the first things I did was determine what colors from our palette were best suited for different elements of the UI. Seeing as our primary brand colors were red and black, I knew that they would be better reserved for high-contrast items on the page and not foundational colors for sidebars or containers, to which I instead applied lower-contrast shades of grey. As I worked through the rest of the design, defining font styles and other page elements, I continuously assessed whether or not the direction I was going in was consistent with the framework I had designed. In the end, I was left with a clean, minimalist design style that allows our advertisers to focus on optimizing and running their campaigns, letting the product design gracefully fade into the background.

Designing products with consistency is important for a number of reasons. For users, consistency means more predictable interactions and higher usability. It allows them to learn the language of the product and reduces any confusion they may have navigating it. For the team building the product, it results in modularity, leading to highly-resuable code and a more scalable framework.

The benefits of designing with consistency are numerous. In fact, I’d even argue that it’s impossible to create a successful product without consistent design. As long as the components I mentioned above are considered with uniformity in mind, the framework for an outstanding design will already be in place, allowing more time to focus on improving the overall experience, and producing a decidedly better product.