Design SystemsMaximizing Experience Value and Consistency

Business Value in Consistent Experience

Design Value Index, Reference

Digital technologies have rapidly increased the touchpoints in which customers, both potential and existing, are interacting with brands.

And while many companies are actively embracing these opportunities, they are struggling with the burden of delivering a unified experience at each moment that also speaks to the organization’s holistic customer experience.

Seamless fusion of a customer’s journey across varying screens, mediums, and context is now the expectation, whether you are B2C or B2B.

Experience = Design = Brand

Corporate

Comm

unications

Products &

Service

s

Design serves as the conduit between the interconnected marketing and branding activities within your organization.

And it directly influences both overall brand and customer experience simultaneously. [

Image credit:http://deniseleeyohn.com/wp-content/uploads/2011/08/DLYohn-Brand-Wheel.jpg

Experience = Design = Brand

Corporate

Comm

unications

Products &

Service

s

But the reality is, much of these initiatives are done in silos, creating innovation paralysis that directly affects customer value.

To help create the necessary alignment of design to experience and brand, teams and companies should adopt design systems. [

Image credit:http://razorfishoutlook.razorfish.com/images/bigdata/figure_03_lg.png

Design Systems articulate a general design direction, philosophy and approach to specific projects or products.

The purpose of a Design System is to keep cross-discipline team members on the same page. Not only should it be targeted to all disciplines, but all should have a hand in its creation.

Defining design systems

What is a design system?

● An organized collection and documentation of core design components, decisions, and design rules which are regularly reused across varying outputs within the brand for consistency and brand cohesion

● It uses Atomic Structure, starting from the smallest piece and progressing to larger and more complex components○ Brand tone / content○ Basic styles: typography, web components, logo treatments, etc.○ How elements perform in the context of various devices

and interactions○ Code snippets for developers

This sounds like a brand guide. Is there a difference?

Digitally-focused while brand guides tend to be print-focused or medium-agnostic

Scalable so that the content contained within evolves to remain relevant and current

Flexible to the needs of your team, allowing for real-time, organic updates when necessary that are adaptable for specific contexts

http://patternlab.io/Image credit: 18F https://18f.gsa.gov/2015/09/28/web-design-standards/

Design Pattern Library (DPL)is a collection of user interface patterns that dictate the look and feel of a website starting at the component level.

EXAMPLES OF THESE PATTERNS INCLUDE:

● Navigation interfaces (Ex: Tabs, Menus, Pagination)

● Form elements (Ex: Input fields, Calendar pickers, Error messages)

● Content vehicles (Ex: Carousels, Data Tables, Video Players)

● And so much more!

are mood board-style documents which demonstrate color, type and texture explorations in a nice, encapsulated one-pager.

● Establish a “design atmosphere” (aka look & feel) for the website

● Focus on the design of specific pieces & components rather than representing a completed layout

○ Buttons

○ Color Palette

○ Fonts

○ Imagery Styles

Style Tiles

Benefits of using a design system

Your company is composed of multiple and/or large teams/business lines, making it difficult for everyone to stay on the same page.

● Project teams encompass many disciplines that don’t always speak the same language (marketers, designers, developers, outside agencies, etc)

● Change and growth are the norm, making clear communication even more important

● Speed to market, siloed objectives, departmental-specific needs trump brand and experience consistency

CONTEXT 1

Design systems create flexibility and a common language amongst large and diverse teams.

● The entire team creates the design system, meaning everyone has ownership; everyone has a say in it’s purpose, organization, and business rules

● Because creation of naming conventions is a group effort, there is a congruent language across disciplines and departments, reducing communication gaps and making projects more efficient

● The team works together to name each component within the system

CONTEXT 1

Print-outs of each component along with sticky notes help this process

Your company has a large number of digital assets, whether for branding, marketing, or lead generation, representing the brand across varying mediums.

● The more digital you are in your marketing strategies, the greater need for consistency across assets

● The more assets your company creates, the more important it is to streamline workflows to get products out faster

● Cohesive omnichannel experiences start with consistent brand and design element implementation

CONTEXT 2

Design systems house repeatable patterns, which ensure consistency and allow for faster workflows by removing redundant work.

● Elements within a design system are reusable building blocks—instead of recreating these foundational elements with every project, teams utilize and reuse these building blocks for efficiency

● Repeated use of the same foundational building blocks across all of your digital assets results in a cohesive digital experience for your customers

● No matter who is working on a project for your brand (internal or external), the output will be consistent with fewer rounds and revisions

CONTEXT 2

Components from Google’s Material Design pattern library

Your company is going througha branding overhaul, or plans to in the near future.

● During a rebranding effort, companies must develop a large number of net new assets to reflect the new brand strategy and positioning

● Timelines provide little wiggle room for extensive exploration, and there is always the concern that a rebrand could “miss the mark” for current customers

CONTEXT 3

Design systems are a great way to improve the results of your company’s rebranding efforts.

● While a company can start their design system at any time, it is most effective when paired with a rebranding effort

● The extra energy spent on organizing new elements into a design system now builds a stronger foundation for your future brand needs

● Applying components-first practices to (re)branding initiatives allows for A/B testing of efforts — iterative feedback and metrics on design efforts assures customer alignment

CONTEXT 3

Image credit: Illustrator Trent Walton of ParavelAlso appears in Atomic Design by Brad Frost

How to get started

1. Assemble a dedicated teamIt takes a village to create a strong design system. Your team should include a varied cast of characters including UX / UI designers, developers, and marketing and content specialists.

This team may be 100% internal or a mixture of internal and external (agency) resources.

UX DESIGNER

VISUAL DESIGNER

FRONT-ENDDEVELOPER

MARKETINGSPECIALIST

CONTENT STRATEGIST

PROJECTMANAGER

BACK-END DEVELOPER

COPYWRITER

BUSINESS OWNER

QUALITY ASSURANCE

OTHER STAKEHOLDERS

2. Perform an audit of your brandThe goal here is to take inventory of your current digital assets through collection and categorization. Through this exercise, you will likely discover inconsistencies and missing or outdated items.

This article by Brad Frost is a great resource for how to perform a brand audit: http://bradfrost.com/blog/post/interface-inventory/ Image credit: 18F https://18f.gsa.gov/2015/09/28/web-design-

standards/

3. Build your libraryOnce you have exposed the problems in your current set of digital assets, it’s time to get to work with your team.

Remember that this process is a full-team effort and no one member should be the sole owner of any idea. Through collaboration, the end result will be a system that anyone, from Marketing Manager to Developer, finds useful.

Image credit: Mailchimp http://ux.mailchimp.com/patterns

4. Iterate, iterate, iterate!The point of a design system is to grow and evolve with your company’s changing business needs.

This is why, during and after the “build” stage, testing your elements with your target audience is important. Through iterations based on user feedback, you can ensure the components in your design system are effective and relevant, allowing for continued success in asset creation.

Here are some great resources to learn more about design systems and the atomic structure:

● Atomic Design Methodology by Brad Frost http://atomicdesign.bradfrost.com/chapter-2/

● The Language of Modular Design http://alistapart.com/article/language-of-modular-design

● Further reading on Atomic Design: http://patternlab.io/about.html

● UI Patterns http://ui-patterns.com/patterns

● Creating pattern libraries using Atomic Design http://patternlab.io/about.html

● Example DPL, Google’s Material Design: https://www.google.com/design/spec/material-design/introduction.html

● Example, Mailchimp: https://ux.mailchimp.com/patterns

● Example, Bootstrap’s component library: http://getbootstrap.com/components/

● Example, Salesforce’s design system: https://www.lightningdesignsystem.com/

● Example, FutureLearn’s pattern library: https://www.futurelearn.com/pattern-library

Thank You!

Connect with Centerline: centerline.net | @centerline

Lenae Boykin | @lenaeCb

Kristen Collosso | @kristencollosso

Jen Hubbard | @curiousmustard