A convergence of design and marketing has become a necessary means for managing a brand and its offering to consumers. It takes a combined effort to continually provide quality output while also delivering responsiveness at scale at a time when channels, screens, and constant interaction demand more from us as teams. By looking at the convergence through a systematic lens you can expose potential in your efforts, both creatively and organizationally. This presentation explores how a design system can benefit you, and where to get started in building your own design system. Learn more at http://www.centerline.net

1. Design Systems
Maximizing Experience Value and Consistency

2. 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.

3. Experience = Design = Brand
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

4. Experience = Design = Brand
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

5. 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.

6. Defining design systems

7. 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

8. 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/

9. 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!

10. 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

11. Benefits of using a design system

12. 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

13. 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

14. 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

15. 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

16. Your company is going through
a 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

17. 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 Paravel
Also appears in Atomic Design by Brad Frost

18. How to get started

19. 1. Assemble a dedicated team
It 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-END
DEVELOPER
MARKETING
SPECIALIST
CONTENT
STRATEGIST
PROJECT
MANAGER
BACK-END
DEVELOPER
COPYWRITER
BUSINESS
OWNER
QUALITY
ASSURANCE
OTHER
STAKEHOLDERS

20. 2. Perform an audit of your brand
The 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/

21. 3. Build your library
Once 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

22. 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.

23. 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

24. Thank You!
Connect with Centerline: centerline.net | @centerline
Lenae Boykin | @lenaeCb
Kristen Collosso | @kristencollosso
Jen Hubbard | @curiousmustard