Website Development

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.

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.

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.

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.