$30 off During Our Annual Pro Sale. View Details »

Designing Design Systems for Drupal: DrupalCampl Asheville 2019

Designing Design Systems for Drupal: DrupalCampl Asheville 2019

Design systems are all the rage these days, but what exactly is a design system? How do you know when you need one? In this session we'll cover the following:

- What is a design system?
- How do you know when you need a design system?
- How do you thoughtfully plan and model a design system for a CMS like Drupal?
- How do you create and maintain a design system as a team (or teams)?

I'll share real-world examples from projects of varied scale and complexity that our team of Lullabot strategists, designers and developers have worked on.

Who is this session for?

- Designers looking to learn more about what design systems are and how to model them for a CMS like Drupal.
- Content editors and product owners looking for practices and approaches to creating great design systems that empower editors of a Drupal site.
Content strategists looking for ways to relate the content model to the patterns, components and presentation of the site.
- Front-end and back-end developers wanting better process and strategies for planning out design systems collaboratively.
- Project managers looking for practices to facilitate communication and collaboration by multiple disciplines creating a design system.

Jared Ponchot

July 13, 2019
Tweet

More Decks by Jared Ponchot

Other Decks in Design

Transcript

  1. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN SYSTEMS
    designing
    !1

    View Slide

  2. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    WELCOME!
    hello there, and
    !2

    View Slide

  3. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !3

    View Slide

  4. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGNER
    I’m a …
    !4

    View Slide

  5. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DEVELOPER
    I’m a …
    !5

    View Slide

  6. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    UNICORN
    I’m a …
    !6

    View Slide

  7. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    OTHER
    I’m an …
    !7

    View Slide

  8. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    OR
    !8

    View Slide

  9. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    M
    MEDIUM
    M
    !9

    View Slide

  10. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    M
    MEDIUM
    M
    XXM
    EXTRA EXTRA MEDIUM
    XXM
    !10

    View Slide

  11. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    M
    MEDIUM
    M
    S
    SMALL
    S
    !11

    View Slide

  12. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    L
    LARGE
    L
    XL
    EXTRA LARGE
    XL
    !12

    View Slide

  13. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !13
    ST RAT E GY D ESI GN DEV ELO P M E NT
    / / / /

    View Slide

  14. View Slide

  15. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN
    SYSTEM?
    wait …
    !15

    View Slide

  16. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    WELCOME
    1
    AUDIENCE DEFINITION
    2
    ME DEFINITION
    3
    DEFINING
    4
    PRESCRIBING
    5
    DESIGNING
    6
    YOU ARE HERE
    !16

    View Slide

  17. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN SYSTEMS
    defining
    !17

    View Slide

  18. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !18
    what is a
    ?
    DESIGN
    SYSTEM

    View Slide

  19. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !19
    Style Guide
    what is a
    DESIGN
    SYSTEM

    View Slide

  20. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !20
    Atomic Design
    Style Guide
    what is a
    DESIGN
    SYSTEM

    View Slide

  21. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !21
    Pattern Library
    Atomic Design
    Style Guide
    what is a
    DESIGN
    SYSTEM

    View Slide

  22. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !22
    Expensive
    Pattern Library
    Atomic Design
    Style Guide
    what is a
    DESIGN
    SYSTEM

    View Slide


  23. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    — ALLA KHOL M A TO V A, “DE S I G N S Y S TE M S ”
    There isn’t a standard definition of ‘design
    system’ within the web community, and
    people use the term in different ways —
    sometimes interchangeably with ‘style
    guides’ and ‘pattern libraries’.
    !23

    View Slide

  24. PH OTO BY L EW IS H I NE O F E MP IR E STAT E B U I L D IN G U N D ER CO NST RU CT IO N
    !24

    View Slide

  25. !25

    View Slide


  26. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    — ME
    a set of principles, constraints, patterns,
    and documentation that empower disparate
    teams to create, maintain, and extend a
    design efficiently and consistently.
    !26
    A DESI GN SYSTEM IS …

    View Slide

  27. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN SYSTEM
    prescribing a
    !27

    View Slide

  28. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    VILLAINS
    naming your
    !28

    View Slide

  29. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INEFFICIENCY
    problems of …
    !29

    View Slide

  30. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INCONSISTENCY
    problems of …
    !30
    INEFFICIENCY

    View Slide

  31. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !31
    INCONSISTENCY
    problems of …
    INEFFICIENCY
    SCALE

    View Slide

  32. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INEFFICIENCY
    INCONSISTENCY
    SCALE
    !32

    View Slide

  33. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INEFFICIENCY
    INCONSISTENCY
    SCALE
    !33

    View Slide

  34. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INEFFICIENCY
    INCONSISTENCY
    SCALE
    !34

    View Slide

  35. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CHALLENGE
    designing to the
    !35

    View Slide

  36. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !36

    View Slide


  37. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    Complex systems that work evolve from
    simpler systems that work.
    !37
    GALL’S LAW …

    View Slide

  38. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !38

    View Slide

  39. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !39
    Principles
    Constraints
    Patterns
    Documentation
    WHAT DO WE NEED?

    View Slide

  40. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !40
    Principles
    Constraints
    Patterns
    Documentation
    WHAT DO WE NEED?

    View Slide

  41. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN SYSTEMS
    designing
    !41

    View Slide

  42. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN DEV PRODUCT BIZ CONTENT SALES
    !42

    View Slide

  43. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN DEV PRODUCT BIZ CONTENT SALES
    !43

    View Slide

  44. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INTERVIEWS
    30 minute
    !44

    View Slide

  45. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    WORKING WELL?
    what’s
    !45
    not

    View Slide

  46. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    WORKING WELL?
    !46
    what’s is

    View Slide

  47. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INDIVIDUALS
    the value of
    !47

    View Slide

  48. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INVENTORY
    design
    !48

    View Slide

  49. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    INVENTORY
    design
    !49

    View Slide

  50. IMAGE BY BRAD FROST HTTPS://BRADFROST.COM/BLOG/POST/INTERFACE-INVENTORY/
    !50

    View Slide

  51. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DESIGN SYSTEM
    planning your
    !51

    View Slide

  52. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !52
    Principles
    Constraints
    Patterns
    Documentation
    WHAT DO WE NEED?

    View Slide

  53. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !53

    View Slide

  54. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !54

    View Slide

  55. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PRINCIPLES
    design
    !55

    View Slide


  56. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    Organize for outsiders.
    !56

    View Slide


  57. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    Celebrate the common.
    !57

    View Slide

  58. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONSTRAINTS
    design
    !58

    View Slide

  59. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    ‣ Audience
    ‣ Voice & Tone
    ‣ Typography
    ‣ Spacing & Rhythm
    CONSTRAINTS
    !59
    ‣ Color
    ‣ Imagery
    ‣ Behaviors & Motion

    View Slide

  60. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CUSTOMERS?
    who are your
    !60

    View Slide

  61. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CUSTOMERS?
    who are your
    !61

    View Slide

  62. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODELS
    creating
    !62

    View Slide

  63. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PHOTO FROM HTTPS://BIT.LY/2VJADIU
    PHOTO FROM HTTPS://BIT.LY/2HD7YAD
    PHOTO FROM HTTPS://BIT.LY/2XEHVBD
    !63

    View Slide

  64. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    Cards / Grid List
    Calls to Action (Marketing Promo)
    Advertisements
    Calls to Action (Marketing Promo)
    Newsletter Signup
    !64
    Hero

    View Slide

  65. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PROBLEMS
    repeat
    !65

    View Slide

  66. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PROBLEMS
    repeat
    !66

    View Slide

  67. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    COMPLEXITY
    greater
    !67

    View Slide

  68. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    COMPLEXITY
    greater
    !68
    greater
    INCONSISTENCY
    =

    View Slide

  69. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !69

    View Slide

  70. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !70

    View Slide

  71. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONTENT,
    OUTWARD
    modeling from
    !71

    View Slide

  72. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PUBLISHING?
    what are you
    !72

    View Slide

  73. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PUBLISHING?
    what are you
    !73
    HOW OFTEN?

    View Slide

  74. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PUBLISHING?
    what are you
    !74
    HOW OFTEN?
    PROCESS?

    View Slide

  75. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONTENT MODEL?
    what is a
    !75

    View Slide

  76. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    ‣ Types of Content
    ‣ Attributes
    ‣ Relationships
    CONTENT MODEL
    !76

    View Slide

  77. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !77

    View Slide

  78. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONTENT MODEL?
    why a
    !78

    View Slide

  79. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONTENT
    MODEL
    every project has a
    !79

    View Slide

  80. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONTENT
    MODEL
    every project has a
    !80

    View Slide

  81. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !81
    CONTENT MODEL?
    dude, where’s my

    View Slide

  82. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    SHAPES
    WORKFLOWS
    A content model
    !82

    View Slide

  83. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    SHAPES
    WORKFLOWS
    A content model
    !83

    View Slide

  84. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    RELY ON IT!
    redesigns
    !84

    View Slide

  85. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODEL CONTENT
    how to
    !85

    View Slide

  86. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    ‣ Asset
    ‣ Structural
    ‣ Micro-content
    ‣ Presentational
    THE TYPES OF TYPES
    !86

    View Slide

  87. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    Event Category Article
    Asset Structural Asset
    Promo
    Presentational
    Quote
    Micro-content
    !87

    View Slide

  88. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    Content Type Description Examples Known Data Notes Current Type Treatments MVP
    Display
    Wireframe
    Edit Form
    Wireframe
    Ready for
    ticketing? GA Only MVP Backlog
    Index for
    Search
    Agency Info
    Facts about agencies, their
    services, their staff, etc. Highly
    structured, aggregated on
    Georgia.gov for centralized
    presentation.
    Organization
    Your agency and its divisions or
    departments.
    https://georgia.gov/agencies/georgia-state-
    board-accountancy https://epd.georgia.gov/air-
    protection-branch https://dhs.georgia.gov/office-
    enterprise-development
    Body field ==
    "mission/respon
    sibilities",
    optional
    reference to
    Parent
    Organization to
    create org
    charts.
    Includes any
    Agency,
    Division,
    Department,
    Office, etc. that
    has a distinct
    site.
    Organizations
    can have
    Parent
    organizations. Agency List, Full TRUE
    https://www.
    dropbox.
    com/s/v2hbsc38
    4xjfh71/organiz
    ation-display.
    jpg?dl=0 TRUE Currently Yes y
    Program or
    Service
    Programs and services you provide to
    the public, or to other agencies.
    https://childsupport.georgia.gov/paternity-
    establishment
    Covers lots of
    ground, needs
    editorial
    guidelines. For
    MVP: "Is this
    something we
    want in the
    global services
    directory on
    georgia.gov?" Site Page List, Full TRUE
    https://www.
    dropbox.
    com/s/lbmox60
    5ko00c9z/Adopt
    ion.pdf?dl=0 TRUE Yes y
    Contact
    Names, numbers, and addresses the
    public should use to contact you. https://dhs.georgia.gov/who-call-directory
    Role, short
    description,
    phone number
    (s), address,
    email(s), URL Profile List, Full TRUE
    https://www.
    dropbox.
    com/s/bsm9zv6
    qjbjeumy/contac
    t-multiple-
    displays.jpg?
    dl=0 TRUE Yes y
    Location
    Physical locations where the public can
    interact with your agency, receive
    services, or participate in public events.
    https://dds.georgia.gov/location/albany https:
    //dor.georgia.gov/location/department-revenue-
    headquarters https://dol.georgia.
    gov/location/savannah https://epd.georgia.
    gov/location/epd-coastal-district-office Location List, Full TRUE
    https://www.
    dropbox.
    com/s/nke8cgsu
    e406t8r/contact-
    location-
    previews.jpg?
    dl=0 TRUE y
    Bio
    Profiles of staff, elected officials, web
    contributors, and other people
    associated with your agency.
    https://dhs.georgia.gov/commissioner-robyn-
    crittenden
    Headshot
    image, profile
    type, contact
    info
    Profiles can be
    Staff,
    Leadership,
    Elected Official,
    Volunteer, or
    Contributor Profile List, Card, Full TRUE
    https://www.
    dropbox.
    com/s/h5bgr7uf
    yprr1wx/bio-
    display-w-posts.
    jpg?dl=0
    https://www.
    dropbox.
    com/s/i4di1ov5q
    mhft2z/bio-
    listing-display.
    jpg?dl=0
    https://www.
    dropbox.
    com/s/gwv7d0y
    xfab8zyo/bio-
    edit.jpg?dl=0 TRUE Yes y
    Job A job opening at a government agency
    Currently
    handled by
    another system. Yes n
    Agency
    Communicati
    ons
    News, announcements, and
    records made available to the
    public
    News
    Blog posts, site news, and less official
    updates.
    https://georgia.gov/blog/2018-06-26/hands-free-
    law-and-others-taking-effect-july-1
    Multi-use, need
    better name for
    this that covers
    News/Announc
    ement/Blog
    Post/Recipes/Et
    c. Blog List, Full TRUE
    https://www.dropbox.com/s/7nnkcsfm6esj0g0/news-display.jpg?dl=0
    https://www.dropbox.com/s/6chwtmvqgqgqdmr/news-listing-display-example.jpg?dl=0
    TRUE Yes y
    Event
    Events open to the public, or official
    meetings they should be informed
    about.
    https://dhs.georgia.gov/events/2018-07-
    02/community-conversation-2018-public-hearing
    Should be able
    to link to an
    offsite page with
    other event
    systems Event List, Card, Full TRUE
    card only: https:
    //www.dropbox.
    com/s/ohr99z5q
    mqrbl5f/events-
    featured-sketch.
    jpg?dl=0 TRUE Yes y
    Official Record
    State documents covering changes in
    laws, public policies, or other official
    announcements. Increasingly seen as
    deprecated in favor of site-specific
    content types that do the same thing,
    more or less.
    Includes Legislation, Executive Orders, Reports,
    Letter Rulings, Policy Bulletins, Proclomations,
    Atty. General Opinions, Regulations, Rules
    Document, Site
    Page, Blog,
    Case List, Full TRUE
    https://www.
    dropbox.
    com/s/wz9cuwd
    nx7yn7ay/public
    -record-display.
    jpg?dl=0 TRUE Yes n
    Opinion
    Legal opinions published by the Atty
    General. y
    Agency Info
    Facts about agencies, their services, their staff, etc. Highly
    structured, aggregated on Georgia.gov for centralized
    presentation.
    Organization
    Your agency and its
    divisions or departments.
    Programs and services
    you provide to the public,
    or to other agencies.
    Program or Service
    Names, numbers, and
    addresses the public uses
    to contact you.
    Contact
    Agency Communications
    News, announcements, and records made available
    the public.
    Blog posts, site news,
    and less official updates.
    News
    Events open to the
    public, or official
    meetings they should
    informed about.
    Event
    State documents
    covering changes in laws,
    public policies, or other
    official announcements.
    Official Record
    Media and Microcontent
    These items may be embedded in “article” style content or listed on “collection” style content. Most should be accessib
    via the Document Management tools.
    A single YouTube video,
    with optional description
    and settings
    Video
    An image with optional
    title, caption, and rights
    information
    Picture
    An embeddable resource
    from a third party web
    site
    Embed
    Educational materials,
    downlodable forms, and
    more — almost always in
    PDF format
    Document
    Visitor Aids
    Used to direct new or confused visitors to the right
    location. These resources are probably organic search and
    social sharing hot spots.
    Organizational Tools
    Core building blocks for the site, including topic pages,
    special-purpose landing pages, and collections used to
    organize related items.
    Guide visitors through a
    specific task with a
    checklist or step-by-step
    instructions.
    How Do I…?
    Important deadlines,
    Important Date
    Answer common or
    related questions about a
    particular topic or service.
    FAQ List
    Explain a specific topic or
    provide details about
    another topic or service.
    Topic Page Landing Page
    Organize topics,
    resources, documents
    and more into a "hub"
    for visitors.
    Combine related content
    into a list for easier
    browsing and reference.
    Listing Page
    Gather information from
    the public with a survey
    or application form.
    Web Form
    A piece of promotiona
    content with no URL o
    own that can be place
    on other pages
    Call to Action
    Location
    Physical locations where
    the public can interact
    with your agency.
    Items in group a may include/
    embed items in group b
    Items in group a explicitly
    relate to items in group b
    A list of links with
    optional rich text
    descriptions.
    Link Collection
    Book
    Organize collections of
    pages with an index and
    page-to-page navigation.
    Official press releases
    published by an agen
    or state official.
    Press Release
    Bio
    Profiles of staff, elected
    officials, web writers, and
    other individuals.
    High-priority messages
    Alert
    Platform-wide alert with
    Emergency
    Letterhead for Official
    Records released in a
    particular timeframe
    Record Header
    !88

    View Slide

  89. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    DISPLAY
    modeling
    !89

    View Slide

  90. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    CONTENT MODEL
    start from your
    !90

    View Slide

  91. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    ‣ Bespoke Pages
    ‣ Templates
    ‣ Bespoke Components
    ‣ Patterns
    ‣ Flows
    DISPLAY MODEL
    !91

    View Slide

  92. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    ATOMIC
    DESIGN
    !92
    only simpler

    View Slide

  93. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    ATOMIC
    DESIGN
    !93
    only simpler

    View Slide

  94. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !94

    View Slide

  95. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !95

    View Slide

  96. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !96

    View Slide

  97. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !97

    View Slide

  98. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    WORKSHOP!
    time to
    !98

    View Slide

  99. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PURPOSE
    !99

    View Slide

  100. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PURPOSE
    !100
    PRIORITIES

    View Slide

  101. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PURPOSE
    !101
    PRIORITIES
    PROCESS

    View Slide

  102. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    EXERCISE
    A collaborative
    !102

    View Slide

  103. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    AIRING OF
    GRIEVANCES
    part 1
    !103

    View Slide

  104. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    AIRING OF
    GRIEVANCES
    part 1
    !104

    View Slide

  105. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !105

    View Slide

  106. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    GROUP & GOALIFY
    part 2
    !106

    View Slide

  107. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !107

    View Slide

  108. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PRIORITIZE!
    part 3
    !108

    View Slide

  109. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !109

    View Slide

  110. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !110

    View Slide

  111. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PRIMARY
    group all the things
    !111
    SECONDARY
    TERTIARY

    View Slide

  112. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    !112

    View Slide

  113. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    SUCCESS
    plan for
    !113

    View Slide

  114. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    SUCCESS
    plan for
    !114

    View Slide

  115. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    PROCESS
    don’t forget
    !115

    View Slide

  116. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODELS IA DIAGRAMS FLOWS WIREFRAMES PROTOTYPES MOCKS
    !116

    View Slide

  117. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    END PRODUCT
    discuss
    !117

    View Slide

  118. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODELING
    governance
    !118

    View Slide

  119. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODELING
    governance
    !119
    OVER LORD

    View Slide

  120. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODELING
    governance
    !120
    CE NTRA LIZED

    View Slide

  121. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    MODELING
    governance
    !121
    FED ERATED

    View Slide

  122. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    THAT WAS
    A LOT!
    thanks
    !122

    View Slide

  123. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    THAT WAS
    A LOT!
    thanks
    !123

    View Slide

  124. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    @jponch
    !124

    View Slide

  125. DE SI G NI NG DES IG N S YS T E MS DC AS HEV IL L E 20 1 9
    +
    FOR MORE
    https://bit.ly/designing-design-systems
    !125

    View Slide