MARIS DEBRUHL DESIGN
Digital Commons Style Guide
A unified design system that ensures a high-quality and consistent user experience across North Carolina's web presence.
OVERVIEW
The Digital Commons style guide is the design system for the NC Department of Information Technology (NCDIT). It exists to unify North Carolina's web presence and ensure a consistent user experience across all NC.gov websites.
Digital Commons delivers a more consistent and intuitive experience for citizens who interact with the state government on the web and mobile devices. Digital Commons includes the redesign and re-architecture of nearly 60 state agency websites and other key web entities.
ROLE & DURATION
Lead UX Designer | Atlantic BT
Mood Board, Concept Boards, Desktop and Mobile Mockups, Style Guide Creation and Documentation
Nov 2019 - Apr 2020
The Challenge
Too much complexity in the original style guide and a lack of uniformity in its application led to an inconsistent user experience and decreased use of Digital Commons by government agencies. Agencies felt that Digital Commons did not adequately meet their unique needs. In order to encourage agencies to upgrade to Drupal 8, DIT came to us for help. The project goal was a simplified design system for Digital Commons, consisting of an overall design refresh as well as several new design schemes that provide the feeling of more visual autonomy while streamlining the experience of updating a site.
The Users
WHO ARE THEY?
Our users include agencies served by DIT, as well as the end-users of the agency’s sites. End users should always be a significant focus, however, for this initiative, we focused on the needs of the agencies. Agency types include human services, education, nature or conservation, utilities, cultural and arts, public safety, financial, agriculture, and cabinet agencies.
WHAT DO THEY NEED?
Currently, agencies are using all the design options simply because they are available. There is significant inconsistency in design application because the current style guide is too complex and confusing for agency members to use. The agencies need easy to use default options to ease this pain-point.
Gathering Inspiration
COMPETITIVE RESEARCH & MOODBOARD
In order for team members and stakeholders to get a sense of the design direction before the design phase began in full, we created a mood board. This helps ensure we are all in alignment with the intended vision for the project. Using sites specifically stated by the stakeholders as a starting point, we researched other government websites to identify best practices and opportunity areas.
Fig: NC DIT Moodboard
Ideation
INITIAL CONCEPT BOARDS
We created two concept boards to help establish branding, typography, iconography, art direction, and general styling techniques. By delivering this document early in the process, we were able to validate ideas and allow stakeholders to provide objective feedback. High fidelity concepts take significant resources and these concept boards afforded us more time to produce additional visual assets in support of the overall experience.
Fig: Concept A is conservative and refined with a few playful elements.
Fig: Concept B is approachable and features geometric graphical elements.
Creating a Design System to Serve NC
AUDITING EXISTING COMPONENTS
In order to get a complete view of all the use cases we needed to cater to, we audited the existing components in Digital Commons 1.0 style guide. Using these components as a starting point, we began mapping out what needed redesigning and how the new style guide would be organized.
Fig: Screenshots from the original Digital Commons 1.0 Style Guide
DESIGNING COMPONENTS
Next, we started building our styleguide. We created text and layer style libraries and symbolized each component in Sketch including its states and variations. For each component, we reviewed its use cases on the website and researched best practices, how similar websites are using that component, etc.
Fig: Component library in Sketch
COLOR PALETTES
In order to give the system maximum flexibility, we developed six color palettes for Digital Commons. "First in Flight," the default color palette, is inspired by the colors of NC's famous first in flight license plates. In cases when the default palette is not suitable, state agencies can choose from 5 alternate palettes, each influenced by a different city or region of the state.
Fig: Color Palettes. Left: First in Flight. Top row: Asheville, Wilmington, Charlotte. Bottom row: RTP, Durham
PAGE MOCKUPS
We designed mockups for key pages -- including color variations for the home page -- once its components were symbolized. It soon became clear that designing mockups for every possible page layout was unrealistic and time-consuming. It was crucial to find a tool that would help reduce the workload so resources could be better allocated toward documentation of the design system.
Putting It All Together
Using Zeroheight as a documentation tool, we created pages and sections within each page for different components and their variations. The Digital Commons style guide is broken down into the following areas:
GETTING STARTED
In this section, you can find an overview of the goals of Digital Commons and its design principles. You can also find design resources to download in this section.
ELEMENTS
This section defines the project’s smallest reusable parts: Elements. A few well-known examples of elements are things like: buttons, links, inputs, drop-downs, etc. Each of them is defined, along with all their states; such as hover, focus, and disabled buttons.
FOUNDATION
This section refers to the core patterns, the visual language that underpins Digital Commons. This includes color styles, typography, and other visual elements.
COMPONENTS
This section includes the components we use. Components can be anything that uses at least a few Elements. Things like cards, heros and navigation menus are traditional examples of Components. These components form the core building blocks of the interface.
Project Learnings
1. FLEXIBILITY NOT COMPLEXITY
When working with a user base who is not technologically well-versed, it is of the utmost importance to keep things simple. In the case of DIT, state agencies were essentially being asked to make design decisions with virtually no guidelines.
And you can probably imagine the results. In creating Digital Commons 2.0, I learned how to create flexible designs and strategic default options, that provide the feeling of customization while operating inside a well-defined framework.
2. STOP, DROP, AND PIVOT
When faced with time and budget constraints it is important to stop and evaluate if what you're doing is really working towards the end goal. Does this deliverable serve a purpose? Or are we just going through the motions? Depending on the answers to those questions, as designers, we must be ready to pivot at a moment's notice to keep the project objectives on target.