Phones. Tablets. Phablets. Watches. TVs. As the platform ecosystem expands, the challenge of creating a cohesive, unified family of products becomes more complex. We want users to recognize our brand and have an intuitive experience regardless of the device they happen to be using. But how do we make cohesive products? What is a “Unified” design?

I think the first step to creating cohesion is to align our interaction models with our user’s mental models. In other words, deliver on user expectations.

“Functionality and aesthetics align with the expectations users have for how things should function and what they should look like.” —  Cameron Moll

And in order to do that, we must ask ourselves an important question:

Are those user expectations created from using our product, or a platform? Or both?

To create magically intuitive products, I believe we must separate the expectations users accrue on the device they use from the expereince we’re designing. In other words, we must delineate platform intuition from product intuition.

Platform Intuition

The average iPhone owner unlocks their phone 80 times per day. That action, and the other routine processes like checking the time, news feeds, content updates, etc. eventually become ingrained in muscle memory.

In the past, these OS experiences were fairly distinct from the 3rd party apps that lived on the device. However, with the release of Material Google now takes a much more authoritative view on how 3rd party apps should be designed and built for their platform.

Product Intuition

Product intuition, on the other hand, refers to the symmetry of our brand’s products across devices and is primarily manifest through a design system, or set of component that comprise the user interface. As our users become familiar with these components and relate them to our brand, product intuition grows.

The Balancing Act

Platform-specific standards like Material design have dramatically increased the potential for discord between the Android’s way of doing things and the experience you’re designing.

For instance, maybe the dialogs you’ve been designing for web and iOS have the “close” action at the top right, which is standard for those platforms. Material guidelines suggest placing close at the top left. Should you align to platform standards by putting it on the right, or leverage existing product intuition by putting it on the left?

Robinhood handles this very well. Take a look at the “Market Buy” screen on iOS and Android:

Both screens represent the brand well through the use of consistent color & iconography and are essentially the same, but they’ve opted to make a few very important component-level platform optimization changes for Android:

• Leveraging the Material floating “Review” button instead of inline
• Using the Material underline form field component
• Employing the Material header and back arrow navigation

These little changes make the experience far more intuitive for Android users while not sacrificing overall product cohesion.

An example like Robinhood makes the process of getting to cohesion look easy. Clearly articulating an approach that balances both product & platform intuition, especially in a large design organization, can be tremendously complicated.

One way to tackle this problem is on a component level through the design system. By weighing platform vs. product intuition for each component, we gain control over where the overall experience lands on the spectrum.

Tips for Getting Unified

Building Product Intuition

• Display consistent iconography
• Follow standard principles for imagery
• Use uniform color swatches

Optimizing for Platform Intuition

• Use ubiquitous native UI elements such as forms and controls with light skinning and avoid building custom components
• Leverage navigation standards like toolbars and menus
• Align to native finding patterns for search and browse

These suggestions are by no means comprehensive, and I’d love additional suggestions from those of you who have struggled with this problem as well.