Defining a New Design System

  • After Migrating to the New Design System
  • Before the New Design System

I joined Blue Shield of California shortly after a new content management system (SDL Tridion) was chosen. My task was to define the requirements for a new set of page and component templates to contain all of our site content. This effort simplified the choices for editors and and made the website presentation more cohesive and consistent. We chose these four criteria to guide our decisions along the way:

  • Clear Orientation. Help people know where they are in the site; provide context and consistent cues.
  • Flexible Navigation. Help people easily find the content they are looking for, and complete intended actions.
  • Compelling Content. Give people tools and information that are useful and engaging.
  • Consistent Presentation and Functionality. Display information in a predictable format, and make workflows simple and consistent, so that people can focus on their intended goals rather than on the interface.

This migration accomplished the goals of significantly reducing the amount of coding (and code releases) required to maintain content, while updating and standardizing the components used to display that content. Along the way, we created over thirty component templates to contain functionality like carousels, feature boxes and other content, and reduced the number of page templates from 122 to 6.

Before the new design system, information was in places that could not be consistently applied across pages. Inelegant left justification made the right column look like wasted space. Mismatched elements were scattered around content area. The header was crowded.

After migrating to the new design system, the information hierarchy made a lot more sense, and pages presented the most useful items above the fold. Creating a new presentation format and location for user information in the upper right column allowed us to show that information in the same place across many pages in the site.

Comments are closed.