An External Design System in Practice

AN EXTERNAL DESIGN SYSTEM IN PRACTICE Brian Perry April 10, 2019 DrupalCon Seattle Slides: http://bit.ly/externalds-seattle

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 2

3

A REBRANDING STORY or: How I Fell Into Using an External Design System

REBRANDING • Brand launch targeted for November 5, 2018 • Website is only one part in a larger coordinated effort Proprietary & Confidential 6

MIGRATION Nate Dev Proprietary & Confidential 7

MEANWHILE… Leon Brian XD FE Dev Proprietary & Confidential 8

PROTOTYPING Joleen Brian UX FE Dev Proprietary & Confidential 9

DRUPAL INTEGRATION or: Deciding Where To Put The Mustard

VS Past projects: Pattern Lab embedded in theme Current state: Independent Projects • Easier for Drupal to access components • Drupal Repository • Simplified build process • Design System Repository • Easier for developers to understand Promotes use beyond a single Drupal project. • Prone to Drupalisms leaking into components Where should we put the mustard? 11

LET’S KEEP THE MUSTARD SEPARATE • Keeps components Drupal agnostic • Continues to encourage prototyping • Already has been living as a separate project • Some gut feelings: • Conceptually feels like the right thing • Advocated by many in the community who I trust • May be able to re-use on other web projects related to our brand. • Feels right for a company with diverse skills Proprietary & Confidential 12

FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 13

REQUIRING THE DESIGN SYSTEM composer.json – in design system Proprietary & Confidential 14

REQUIRING THE DESIGN SYSTEM composer.json – in Drupal project Add Design system repository Proprietary & Confidential 15

REQUIRING THE DESIGN SYSTEM composer.json – in Drupal project Define how to handle design-system installer types Proprietary & Confidential 16

REQUIRING THE DESIGN SYSTEM composer require hs2studio/hs2solutionsdesignsystem • Required dev for pre-launch cycle Updating composer update hs2studio/hs2solutionsdesignsystem • Releases are tagged in design system • Can require design system at a specific release Proprietary & Confidential 17

INCORPORATING INTO THEME hsnew.libraries.yml Global library with compiled assets Proprietary & Confidential 18

INCORPORATING INTO THEME hsnew.info.yml Twig namespaces for ‘atomic’ component categories Proprietary & Confidential 19

COMPONENT WORKFLOW Sean Wade Design System Drupal Design System Components Drupal Component Integration • Created the bulk of design system • Wired design system components to components, primarily outside of Drupal. • Only 2 commits in Drupal repo Proprietary & Confidential Drupal content and layouts. • Majority of effort in Drupal repository • Minor design system refactoring when necessary 20

WE’RE GOING TO NEED MORE MUSTARD or: How an External Design System Helped Us Handle Changes in Scope

LUNAMETRICS TRAINING SITE SCOPE Training registration rebuild descoped • Existing WordPress site lives on at training.bounteous.com subdomain. • Needs to match look and feel of D8 site This design system thing seems pretty handy now. Proprietary & Confidential 22

WORDPRESS INTEGRATION Worked with Wahila Creative to re-theme the site. • Introduced us to Timber plugin which makes it possible to use Twig in WordPress. • Initial prototype used Timber and design system. Proprietary & Confidential 23

TIMBER COMPONENT – TRAINING ITEMS Proprietary & Confidential 24

TIMBER COMPONENT – TRAINING ITEMS training-module.php Proprietary & Confidential 25

TIMBER COMPONENT – TRAINING ITEMS training-element.php Proprietary & Confidential 26

Proprietary & Confidential 27

DEMAC MEDIA Demac Media joins the family… very close to launch. • Rebranded as bounteous.ca • Smaller scale site, will differ from bounteous.com look and feel. • More manual / selective use of design system assets. Proprietary & Confidential 28

POST LAUNCH

ONBOARDING Lessons Learned • Documentation is important • Kyle Developer Steve Developer Not just how, but why. • Must have an efficient workflow for design system experimentation in CMS. • Post launch, team members rotate. • External approach can add overhead. • Majority of tickets are Drupal specific fixes. Faced with the design system they may wonder: Why can’t I just Drupal? Proprietary & Confidential 30

LINES BETWEEN CMSES BLUR People will expect front-end changes to apply everywhere. Kristen Jon QA ‘Marketing’ Proprietary & Confidential 31

TO EXTERNAL OR NOT EXTERNAL or: Where should YOU put the mustard?

YOUR NEEDS MAY BE DIFFERENT Proprietary & Confidential 33

THINGS TO CONSIDER • Would there be value in re-using these components? • Sometimes hard to know for sure. • What role do prototypes play in project? • Is prototyping in code important? • Will design system be published independently? • How will this align with your team’s workflow? • How compatible is this with your team’s makeup? • Will it allow more people to contribute? Proprietary & Confidential 34

FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 35

WHAT ABOUT DECOUPLED SITES? Proprietary & Confidential 36

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com