Project:

Website Development

scroll icon
Providence Health and Services - Style guide Our Signature website scrolling animation

Providence Health & Services needed to communicate brand guidelines to people across their expansive organization. Data Driven Design built a website that centralized their company-approved assets in order to improve access and discourage rogue usage of their brand capital.

Technology:

Craft CMS

Customized Bootstrap 3

Twig / HTML5 / SCSS

Javascript

Roles:

Frontend Development

Backend Development

DevOps

After working on several internal and external applications for Providence Health and Services, Data Driven Design built an updatable style guide to help showcase company styles defined throughout these projects. Due to the size of Providence’s health system, consistency among their assets and messaging was a concern across their communications and collateral. The central repository we developed allows Providence’s marketing and internal development teams to have a single point of reference for their styling, website design, and brand assets.

Providence Health and Services - Style guide website pages

The 16-page style guide is broken down into two major sections - Brand Guidelines and Components. The Brand Guidelines are developed for the benefit of marketing and communications teams - as well as developers - to understand how to create consistency within their brand assets through their logo, color palette, tone, typographic applications, imagery and a library of common iconography. The Components were specifically developed for their web development and engineering teams to use when creating or updating Providence's many websites and applications. It provides explicit measurements and notes about items that will arise during development - such as the customized bootstrap grid that is used for the company's applications. The focus of this section is to take deign guesswork out of the mix for developers. The common elements detailed include buttons, form elements, modal applications, footer design and even guidelines for 404 pages.

Providence Health and Services - Style guide custom bootstrap grid

A different approach

The style guide website was very different from many of the other web development projects Data Driven Design has completed. While we had worked on many projects with the company that designed the site, they didn't often include a fixed left menu since this can present problems for users across devices. However, it was determined that the entire website for this project did not need to be responsive, so the site was designed and built primarily for use on laptops and desktop computers. Although the content flows well on tablets, removing an entire breakpoint from development consideration allowed this site to follow a different pattern.

Providence Health and Services - Style guide Iconography page website scrolling animation
Providence Health and Services - Style guide Masthead page custom content entry

Some of the more interesting parts of the website to develop were:

  • Figuring out how to accommodate such custom content entry options for explainer graphics
  • Creating working page loader demo
  • Standardizing logic to ensure maximum page consistency even when each page layout was unique
Providence Health and Services - Style guide Animated Loader page website scrolling animation

Customizing content display and creation

Within the pages, we tucked content in "toggles" across the top of the page. While some pages don't include these toggles, others have up to four separate sections. To support this vision, we created custom content entry for each of the pages and even added custom font styles to the redactors, inspiring this article on how we implemented this flexibility within Craft. For Providence's style guide website, this included allowing editors to change text to some of Providence's brand colors as well as to add fine print for notes.

The development of the site was done on Craft CMS and allows additions over time so that it is not a static and dated source of truth. It can continue to evolve to meet the organization’s needs as they continue to grow and change.

Need help with your unique website?
Contact Us