Case Study: Tempest Header Design System

Role: Technical + Design Owner

What is Tempest?

Tempest is a full service publishing platform and CMS designed to create, distribute and monetize digital content for enterprise customers. Tempest supports all areas of modern day publishing: responsive web design, social publishing, and making content accessible in places like AMP, Apple News and Facebook Pages. By combining technology, tools, services and yield management, Tempest helps over 100 publishers of digital magazines build audiences, businesses and brands.

These are examples of the old header layout options. Every site has the same set of elements, laid out slightly differently.

The Problem

Tempest's current design only allows for one site header layout option with a small number of configuration settings to change the look of feel of each brand. However, in the current state, sites are bound into strict rules without much freedom to design a header that truly reflects their brand identity. Elements are not able to be chosen specifically for each site, so publishers are left with a 'one size fits all' approach. My goal is to change that- to create beautiful headers that are built specifically for each publisher, without the extra cruft they don't need.

The Challenge

Design a system that not only gives publishers flexibility in layout, design and branding, but also make the site design process more streamlined for site designers. During the site onboarding process, a site designer spends lots of time working in our custom CMS with the publisher going back and forth to create the perfect design for their site.

Anytime we add configurability, we also add complexity, so we want to be straightforward in building a new, intuitive toolset, making the site onboarding process as painless as possible, especially since it's our goal to add several hundred more publishers to the platform over the next year.

Building out new front-end designs means we have to build an intuitive toolset for site designers to manage this new configuration system.

Site Design

When it came time to start thinking about our sites' needs, I started with a mobile first approach. Our current header only offers one static design on mobile screens for all publishers: a menu button, logo and search icon. Tempest publishers have an ever increasing set of needs, and as we scale the platform, those needs are constantly evolving. We need a system that will evolve with the publisher, that is easy to update without a complete overhaul. 

Enter the new Header Design System. This system is a series of Header Block designs. Those blocks can be configured, stacked, and reordered to create the Header Collection that each site needs. This means that now, each site configure their header on mobile and desktop to suit their exact needs. 

Toolset

We needed a toolset for Site Designers that is as sophisticated as the site itself. We want to create an internal configuration system that has smart defaults, easy to understand controls and simple overrides. Click on the gallery below to walk through the workflow.

The most impressive part of this design system is its flexibility. With this new architecture, it is now easy and lightweight to add new, customizable header components without disrupting the rest of the platform. You can check out some proposed designs in the gallery below, but the sky's the limit with the new Tempest Header Design System.

Using Format