Spare The Air Website Redesign

An enhanced user experience with contemporary
design and highly engaging content.

Project Description

Spare the Air is an iconic San Francisco Bay Area program, providing the public with resources to reduce pollution and publishing Spare the Air Alerts and Air Quality Advisories when air quality is unhealthy. In some cases the alerts require adherence to the ‘no wood burning rule’; meaning the Air District’s role transitions from educator to regulation enforcer.

Cylogy partnered with lowercase productions and Civic Edge Consulting to take on the challenge of balancing these two roles into a consistent voice.

Design Research

The team maneuvered through complex air quality alert and advisory requirements by deeply understanding the Air District’s internal process. User surveys aided in anticipating the user journey of new and returning visitors. With all this information in hand, was there a single unifying concept that would best reflect the information needs of any typical site visitor? Based on established best-practice industry recommendations (i.e. 8th-grade reading level, 100-750 words per page, etc.), and our decision to use straightforward, informative and textbook-style textual and graphic content, we created our “Spare the Air Science Teacher” voice who ignites interest by leading to answers, inspiring confidence by promoting understanding and discovery.

Fresh and Engaging Design

From an information design perspective, it was agreed that the legacy site was “flat” and difficult to parse. The initial visual impression was one of dense content overload with no apparent hierarchy of information to help visitors easily find what they were looking for. There was broad internal consensus that we needed to vastly simplify the visual experience through the integration of white space, emotive imagery, easy navigation and the creation of a functional distinction between primary and secondary content.

The new website’s most prominent feature is a universal panel that visitors can use as a tool. From providing the forecast and alert status that some visitors need on demand, to encouraging action and further engagement, the question of responding to the needs of all audience members was addressed in a novel, graphically interesting manner.

homepage panel collapsed

Interesting Facts

  • We consolidated total page count by 3/4!
  • Content was completely rewritten to reflect the refreshed brand messaging
  • Implemented on Sitecore

Project Partners

Slider image

Before: the cluttered homepage lacked focus

Slider image

After: The air quality panel provides alert status, forecasts and tools in one destination

Technology Partners

Working alongside Cylogy on the recently launched Spare the Air site has been a pleasure. Cylogy’s practice director, Lindsay Sullivan, demonstrated a facility for strong project management while at the same time allowing our team the space to create graphic solutions that were visually impactful and persuasive. Her insight into the client’s needs were regularly shared with our team, assuring that our design moves were always focused on addressing (and often pushing beyond) client expectations. I know it’s a bit of a tired phrase, but in my mind, this project stands out as an example of how excellent collaboration leads to an excellent product.
Daniel Reider, lowercase productions

About Spare the Air

Spare the Air was created in 1991 by the Bay Area Air Quality Management District to alert residents when air quality is forecast to be unhealthy and to share information on ways to reduce air pollution.

From easy, everyday tools—such as commute tips—and air quality resources, such as explanations of major air pollutant sources and their health effects, Spare the Air focuses on educating and helping residents choose actions that will improve air quality and make the Bay Area a healthier, more enjoyable place to live.

How can we help?