Press tab to cycle pages
  • Static Image

    Home

  • Static Image

    About

  • Static Image

    Accessible drag and drop

  • Static Image

    Mailchimp Core Experience

  • Static Image

    Mailchimp Experience Vision

  • Static Image

    Atlas

  • Static Image

    Mailchimp Design Architecture

  • Static Image

    Archives Gallery

  • Mailchimp Design Architecture

    Crafting exceptional experiences – together

    • Contributions: Design systems, Service design
    • Timeline: 2020

    Design systems can be great—they're useful for both new and seasoned designers. They help refocus design efforts from mundane things like styling inputs and buttons, to more exciting challenges like interaction and prototyping. However, knowing how to use the system is probably just as important as the system itself. While working on the design architecture team, I helped plan and facilitate workshops for all of product design and (some of) engineering to learn how to use Mailchimp’s design system.

    Workshop cover slide
    ❶ Workshop cover slide

    ↬ Where did we start?

    ① As with most projects, a good first step is to define the problem. Being one of five on the design architecture team, we noticed designers had problems finding resources around the design system (Wink), how to use it, and how to contribute to it. As a group, we thought workshops would be a good way to mitigate some of these issues.

    We began planning and documenting how the workshops might be conducted, how we should split the presentations / activities up, and how we could create a living document in the system around education.

    Planning doc
    ❷ Planning doc

    ↬ What did we do?

    ② It seems obvious, but hammering home fundamentals was a big deal for week 1 of the workshop. Mailchimp's designers typically lean super heavy into design thinking and methodology, so sometimes visual design doesn't get as much attention as it deserves. Coaching designers on how to utilize grids, spacing and layout was my personal goal.

    We decided early on that having the workshop live completely in Figma made a lot of sense. We conducted the lectures as well as the workshop activities all in Figma. Figma is where the design system lives – so meet the user where they already are.

    Figma doc
    ❸ Figma doc
    ❹ Screenshots from the education demo
    Figma doc
    ❺ Figma doc

    Having a technical background, I thought it might be useful to try and articulate how the layout components engineers use map to some of the auto-layout options we as designers have in Figma. The closer we work in terms of terminology and understanding with engineering, the better.

    Switcher component layout
    ❻ Switcher component layout
    Grid component layout
    ❼ Grid component layout
    Figma exercise
    ❼ Figma exercise

    ↬ What difference did we make?

    ③ While the majority of my focus was for the first week of the workshop, we ran two more sessions facilitated by other members of the design architecture team. All the sessions were recorded and are available for future members of the product design team during onboarding. We set up the workshops so that designers and engineers could easily understand and use the system, all the while communicating how to upstream component requests and changes.

    Workshop feedback
    ❽ Survey feedback
    Grid component layout
    ❾ Slack banter and feedback
    dark rainbow gradient

    Your travel guide

    Experience the website travel guide, brought to life in rich high-definition video, narrated by me: Matt.