Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Maximizing Value and Consistency of Experiences with Design Systems - Centerline Digital

973 views

Published on

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

Published in: Design
  • Be the first to comment

Maximizing Value and Consistency of Experiences with Design Systems - Centerline Digital

  1. 1. Design Systems Maximizing Experience Value and Consistency
  2. 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. 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. 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. 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. 6. Defining design systems
  7. 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. 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. 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. 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. 11. Benefits of using a design system
  12. 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. 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. 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. 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. 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. 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. 18. How to get started
  19. 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. 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. 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. 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. 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. 24. Thank You! Connect with Centerline: centerline.net | @centerline Lenae Boykin | @lenaeCb Kristen Collosso | @kristencollosso Jen Hubbard | @curiousmustard

×