Meet Meridian, the 84.51° Design System

By Ryan Merrill, 84.51° Experience Designer

84.51° has been creating a suite of business-to-business products that empower Kroger and its consumer-packaged-goods partners to leverage data to make smarter decisions.

The products share similar audiences and users need to feel they are using a cohesive collection of products. To address this, we initially attempted to impose a standardized design language but found it stifled creativity and innovation.

While the intention was admirable, the rules and guidelines we explored limited how fast the products could be tested, improved, and released. In their infancy, the products needed room to breathe and grow without a strict ruleset weighing them down. We took a step back and decided to let each product find its unique voice to independently mature.

We initially attempted to impose a standardized design language but found it stifled creativity and innovation.

Growing Up

Now some two years later, both products are released and are maturing in both functionality and appearance. But that early stage of freedom gave way to an unintended but anticipated side effect.

The products resembled one another, akin to how one looks in a funhouse mirror: colors, fonts, and spacing were recognizable, but the distortions left users with a sense of unfamiliarity when jumping between applications. The products needed to feel like close siblings, but instead felt like distant cousins.

It was time to take a step back and examine what sort of experiences we value and how those can come to life through our brand and products. How could we begin to bring the products closer together, but retain the unique features developed in their infancy?

Creating a System

We knew that systems thinking would allow us to break down each product into common and shareable parts. We could choose what was working well for one product and see how that might work for the other.

This thinking kicked off a design system project at 84.51° meant to identify common design styles and user interface components with the hope of bringing the product experience closer together.

A design system helps teams create products and experiences that share design and code consistency across an organization. Teams can create standardized user experiences through documented design guidelines and principles. Product owners can leverage a shared component library to rapidly ideate, test, and learn from interactive prototypes. And developers can feel confident using battle-tested UI components built with accessibility in mind when translating design mockups into working software.

Product owners can leverage a shared component library to rapidly ideate, test, and learn from interactive prototypes.

But we knew that bringing our products closer together wasn’t going to be enough to create a cohesive experience to customers and partners of 84.51°. It’s one thing if our products look similar, but if our slide decks and marketing materials look disjointed, we are back at square one.

We are exploring how our products can influence our corporate brand and how the brand can influence the products. We know that each will have its own unique challenges, goals, and users, and are baking in room for self-expression along the way.

Introducing Meridian

At its core, a design system is a product serving products. And any great product should be branded in order to create lasting and memorable experiences for its users. We named our design system Meridian as a play on the navigational and data driven ethos behind our 84.51° name.

We released two major versions of Meridian and have learned a tremendous amount about how design systems can bring design, engineering, and product teams closer together. Design systems are a mountain of work and need to be given the resources to mature, fail, and grow. We’ve learned that the pixels and code are the easy part of creating a design system, it’s the people and relationships that are the most difficult and interesting.

There is a deluge of design system writing published these days, but we hope to offer a unique angle of our experiences creating one that influences products and a corporate brand for a large enterprise. We’ll be exploring topics such as how we chose a technology stack, how we are encouraging and measuring adoption, and what we are doing to create room for individual expression within our products and brand.