Digital Design System | Jeremyculpdesign

Our Daily Bread Ministries' Digital design system

PROJECT TYPE

Digital design system and brand guidelines

MY ROLES

Product Owner, Strategist, Art Director, Project Manager

TEAM ROLES

Aubree Berg: Researcher and Lead Designer
Annie Schoonmaker: Designer
McKenna Bice: Researcher

Tools

Sketch
Abstract
InVision Design System Manager
Google Docs
Fontello

BACKGROUND

In 2016, the digital landscape for Our Daily Bread Ministries was extremely fractured. The organization had just undergone a global rebranding that launched in 2015. Being traditionally print focused, there was still a need to include all digital channels into that rebranding strategy.

Early in my role as Digital Art Director, I began taking a closer look at our digital channels, both individually and comprehensively. It was immediately clear that there was a strong need to do some work to unify the digital experience across channels and bring it into alignment with the organization's recent rebranding.

I took the initiative on myself to begin this work, realizing that it was going to be a large task that had not been accounted for in the organization's strategies and goals. Without supporting resources this work was handled by myself and my team.

GOALS

Unify the visual user experience for Our Daily Bread Ministries digital properties.
Add digital design to the new brand guidelines recently published.
Create efficiencies for design and development.
Reduce development bugs and QA testing time.
Easily onboard other offices, coworkers, and outside partners to scale work globally.

RESEARCH

We began with a comprehensive digital UX and UI audit. We documented all UI elements across all properties and channels. This was a painstaking process but helped us identify many inconsistencies that would need a solution. During this process we looked at all channels for visual consistency, UI uniformity, and UX copy. (While this work was happening we were running a parallel Accessibility Audit to identify visual accessibility issues across all digital channels to bring the user experience in line with WCAG 2.1 standards.)

An example of one page from our UI audit documenting 32 unique uses of our Facebook link across all digital properties and channels.

A digital design system needs to take a lot into account. It is much more than ensuring color and typographic alignment and consistency across all channels. It is the guidelines that are put in place to reinforce all aspects of the brand globally. It is also the governance around the experience the organization desires for its visitors. We worked with marketing to identify a digital brand personality that was in alignment with how the organization wanted to portray itself. This led to research and strategic answers for aspects of the design that could help convey that personality. This included things like type size, line spacing, color, graphic element shapes, UX copy, and interactive UI feedback.

This initial research provided us with a starting point of what the design system would need to account for. What we would need next is a clear method of designing and developing the system to be understandable.With further research we determined that structuring the system according to Brad Frost's Atomic Design framework would give us the best result. This framework breaks the components into different tiers of atoms, molecules, and organisms. These components can then be utilized in the creation of templates and pages. This way if an update is made to the system at the atom level, that change cascades throughout the rest of the system automatically reducing the toil of maintaining the system.

DESIGN

Out of all of this research we were able to begin designing a standard visual style and language. This included a new digital color palette, a custom designed web font for all icon elements, typography standards, interactivity and feedback guidelines, and UX copy definitions. Below are some excerpts of the design system prototype.

Custom webfont for consistent and fast loading icons.

Accessible digital brand colors.

Buttons and usage guidelines

Consistent headline and body typography

To prevent this work from sidelining the development teams, we began introducing the new design standards gradually as other organizational projects came on line and allowed us the opportunity to update the front end.

TESTING

We tested the new components with users to find weak points in the designs. Based on click maps and user feedback we identified a few items that needed to be adjusted. We implemented edits to resolve those issues and the testing and review work will be an ongoing and iterative process to ensure the system is performing well and delivering an increasingly better user experience.

Click tests and heatmap reports were generated to validate user interactions.

DEVELOPMENT

After modeling our library structure after the Atomic Design framework, we shared the assets with the development team via Abstract. This has been a good start to get us working toward common components and code but it doesn't provide the true digital design system functionality that we desired.

One of the challenges of an iterative evolution is a burden placed on development teams to rebuild existing components for each new project. The QA testing can also be frustrating, slow, and inconsistent.

To solve this we are currently in the process of moving our Sketch library of digital components into a fully functional design system that will be easy to maintain from the design side as well as implement from the development side. We have determined the best way forward is to implement our system via InVision's new Design System Manager. This way we can have true roundtrip oversight and control from prototype through production. This is also where we currently are in our progress on this project.

WHAT'S AHEAD

What began as a digitally focused project that was identified, scoped, and initiated entirely within the digital design team has become one of the major initiatives championed by the executive team for early 2020. The expected outcomes of this work will be major improvements to the way Our Daily Bread Ministries works internally both locally and globally as well as across digital and print channels. Here are some of the many benefits we anticipate will be realized out of this work:

Decrease in development time.
Decrease in design time.
Decrease in bugs and QA issues.
Increase in consistency for visitors.
Increase in code consistency and practices globally.
Simplified digital property maintenance.
The ability to house all brand guidelines and create regionally localized editions for digital and print channels.
The ability to more easily spin up temporary or contract development and outside partners while maintaining brand standards and code consistency.