Visual Rhythm - Everyone Counts - Product Style Guide

A Time for Change

Everyone Counts had a suite of existing software which looked dated. Their products in the marketplace were not clearly distinguishable and otherwise did not look as though they came from the same company.

A traditionally “developer driven” approach to updates/releases had eventually hindered production. One-off/piecemeal solutions were making the product evolution difficult to manage and nearly impossible to scale.

Legacy Software

Legacy Online Voting, Pollbook and Elections Administration

The Approach

To ease the transformation from old to new, an audit of existing software was conducted to identify recurring patterns and inconsistencies. For example, determining a standard placement for CTA (Call to Action) buttons in relation to “cancel” buttons.

Once approval had been granted to update the product design suite, all new design efforts began with “Future Planning” in mind. Design assets were immediately organized and reused whenever possible.

Stadardizing CTA Button Placement

Google Materials was leveraged as a base library for icons and type. The product team decided this approach was best because of the group familiarity with the Google Material Design system and ease-of-use for new team members.

Accessible by Design

Since voting software is public facing, meeting accessibility standards is critical from both web (WCAG 2.0) and elections (Elections Assistance Commission - EAC) guidelines.

Documentation from these resources provided a base line for design decision making in our Style Guides to ensure accessibility was baked into the foundation of every design and continued to be revisited throughout the design process.

The Solution

A online Style Guide was quickly built using a lightly modified Bootstrap WordPress Theme. Design info/assets were broken into the following categories: Type, Icons, Colors, Layouts, Components and Grids.

Using WordPress as a CMS allowed the Design team to easily manage and expand on the evolving content of the Style Guide.

Many components were paired with reusable code (CSS) for Developers to quickly copy/paste and implement into their builds.

Clean URL’s were established for the design team to support Development by providing direct references to specific items resulting in accelerated development and lean/fluid communication between Design and Development teams.

Icons - Actions, Alerts, Navigation and Notifications

Everyone Counts - Style Guide - Typography Overview

Typography Overview - Resources and Code

Colors - Primary Color Palates for Clients

Components > Buttons - Diagrams and Code

Everyone Counts - Style Guide - Components > Drop Down Menu

Components > Drop Down Menu - Diagrams and Code

Sharing the Knowledge

Group presentations were held with the umbrella of Developers, Product Managers and QA To generate excitement and spread knowledge for the new Style Guides. Quarterly reviews of the Style Guide content often lead to active discussions which were helpful to pinpoint key changes/updates to the guidelines and keep the evolving content up-to-date. This was also useful for onboarding new team members.

Style Guide Review Slide Deck Example - Product Icon Updates

Implementation

Through strategically timed rollouts, updated styles were distributed throughout the product suite to align with new releases, trade shows, and other product road map markers which supported key business decisions.

Online Voting - Mobile and Desktop

Poll Book

Elections Administration

Community

Chatting with a panel on Design Systems at SDXD

In May 2019, Andrew joined a panel of colleagues at SDXD’s (San Diego Experience Design) Event “Design Systems Show and Tell” to discuss our experiences creating Design Systems. It was an inspiring conversation of knowledge sharing and was followed by a lively Q&A session with the audience.

A few notable quotes from the discussion were captured on Twitter:

Consistency is the #1 benefit of a design system… Give your product a team look - Andrew Bergeron @xdsandiego - May 15, 2019

A border can cost you $20,000! If you can't see the input field, you will probably get stuck. The power of design reviews and #DesignSystems @TjensenDesign - May 15, 2019

Who are you designing the #designsystem for? The primary user is YOU, the design team. Your other audience is the developers. @xdsandiego - May 15, 2019