Case Study: Quotes Design System

Role: Design Owner

Examples of pull quotes shown on various sites, with highly configured designs.

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.

Building Highly Customizable Quotes With Smart Defaults

Tempest previously had a quote feature that leverages the HTML element <blockquote>. This was configured using the exact same visual treatment on each site, and no option to override. When the original blockquote feature had been designed, Tempest hosted less than 5 sites. When I designed the new quote feature, Tempest had ballooned to over 100 sites. Creating a new static design that satisfies the design and branding requirements of each site while adding a new pull quote feature that does the same would be next to impossible. We needed a design system.

Examples of blockquotes using a more subdued style across various sites.

The solution to our design dilemma was this: create smart default design settings for pull quotes and block quotes, but allow Site Designers to override variables when necessary. This level of detailed customization had not yet been available on Tempest before, so this was an powerful update. 

The gif above shows the process for designing a pull quote. The defaults are clear, and site variables can be used or overridden. 

The gif above shows how an editor would assign text to be a quote. The CMS styles reflect the editor's intention of quote type.

Copyright © All rights reserved.
Using Format