Scaling Design Patterns at Eventbrite

Andi Galpern
Angela Don, Product Designer for Eventbrite
Angela Don
Product Designer
Eventbrite

Featuring Angela Don
Product Designer at Eventbrite

On October 25, 2018, we hosted Angela Don, a Product Designer at Eventbrite for an “Ask a Designer.”  Ask a Designer is a monthly audience Q&A series we host at CloudApp featuring talented designers and makers in technology.

Angela shared how she works with her team to scale design patterns, UI components, colors, and accessibility. They ensure brand unification across desktop, Android, iOS, iPad, and all Eventbrite platform experiences. 

Watch the video interview or read a summary of our discussion below.  

Angela and I both dressed in costume for this very special Halloween-themed "Ask a Designer".

Why are Design Systems Important? 

Design systems are imperative for brand consistency.  In the past we might have called them pattern libraries, design languages, or user interface libraries.  Designers create a consistent and familiar interface, so users know where to click, and what to expect across Android, iPhone, Desktop, Windows, tablets, and mobile platforms.

Like most companies, Eventbrite uses a design system.  Millions of users access their software and everyone should have the same Eventbrite experience.  A design system creates alignment around visual styles, design patterns, components, user interface interactions, voice and tone, and process.

A design system creates alignment around visual styles, design patterns, components, user interface interactions, voice and tone, and process.

The benefits of using a design system include: 

  • Engineers and designers get on the same page
  • Speeds up the design process
  • Reuse multiple patterns and components across the site
  • Expedites development
  • Remove inconsistent design patterns
  • Unify the brand across multiple platforms

Company Alignment

When product designers add a feature, it must belong with the other components.  That’s where Angela and her team come into the picture.  They govern and manage the system to make sure that components and the user interfaces makes sense to the rest of the system.

However, managing a design system comes with its challenges. How do you give people autonomy to create new components and still maintain the obviousness of the brand? According to Angela Don,  “Managing a system effectively requires teamwork, excellent communication, and a single vision.  Everyone must work toward the same goal to achieve unity.”

To manage a design system, you need teamwork, excellent communication, and a single vision.  Everyone must work toward the same goal to achieve unity.  


Cross-Platform Design and Consistency

With over 20 designers at Eventbrite, Angela and her team ensure that components, interactions, modules, and user interfaces are unified, up to date, and shared across the whole company.  Eventbrite’s platforms span across web, mobile, iOS, Android, Internet Explorer, Windows 10, iPad, dark mode and light mode.  Each platform needs to cater to different experiences.  Designers can choose to make everything consistent or customize individual components.

The Platform Team sets up guardrails to ensure a unified brand system.  These include but are not limited to:

  • Color
  • Typography
  • Spacing
  • Components
  • Guidelines
  • Contrast ratios and accessibility guidelines

How Do Team Members Add Features or Components? 

Under the Platform Team’s guidance, designers can create new components or improvements to solve their experiences.  They schedule a time to pitch through Slack or email.  The team also hosts open office hours every week.  There is also a survey form for those who have larger changes with dependencies.

Eventbrite Manages their Design System with Sketch

Eventbrite manages their design system with Sketch. They use plugins, color palettes, symbol libraries, and type styles.  

“Our symbol library at Eventbrite is HUGE and robust.  There is a lot to manage at times, but the challenge is fun.”
– Angela Don, Product Designer at Eventbrite

Keep Designers, Engineers, and Product on the Same Page

Education is one of biggest challenges for design systems teams.  Angela and the Platform Team have to keep everyone informed and up to date.  They use Slack, email, workshops, and communicate regularly to make sure that all 20+ designers are on the same page.  

To make everything uniform, Angela and her team use a mix of pattern libraries with templates.  They show designers how the spacing should look, margins, paddings, and hierarchy in typography. They also have detailed documentation of everything across platforms.

To make everything uniform, Angela and her team use a mix of pattern libraries with templates.  They show designers how the spacing should look, margins, paddings, and hierarchy in typography. They also document in detail across platforms.


How Employees Access the Eventbrite Design System

Eventbrite’s Platform Team publicizes the system across the company.  They maintain clear documentation with InVision, Google Docs, and Confluence.  Engineers can comment and access changes.  New components are built by engineers and constantly iterated, so immediate documentation is crucial.

Colors, Accessibility, and Inclusivity

Colors, colors, colors!  Angela’s focused on colors lately.  Eventbrite has their well-known orange.  But now Angela gets to play and explore accent colors.  

Accessibility is important.  To check for inclusivity, Angela runs the Stark plugin inside of Sketch.  She tests for contrast and colorblind modes.

Stark is an accessibility plugin for Sketch and Adobe XD. It allows you to test for colorblindness and contrast. https://getstark.co




Angela’s Design Systems Tips

  • A team needs to be well-versed on the same software and tools, and an organizational structure to support it. 
  • Communicate the value of having a design system within your company.  Show how it keeps everyone on the same page, and how it will improve visual consistency.
  • It’s easier to put things in than to take them out, do proper research before adding a component to a system and see if it scales across platforms and on mobile sizes.   
An Excellent Tip: 
Angela believes that designers should create colors and typography at the same time.  
It’s important to have a solid base to avoid changes later on. These core elements span across anything a designer works on.


She also suggests to map out real examples.  Show how components work with each other, and how they appear with real data. If you have a night mode or theming, you should also test a component with those. They can’t predict every use case, but they test and tweak the design so it works.  Every team member should be a design system ambassador. The Eventbrite Design System is an opportunity for the company to join together and shine as one.  

Each team member should be a design system ambassador. The Eventbrite Design System is an opportunity for the company to join together and shine as one.

"Each team member should be a design system ambassador. The Eventbrite Design System is an opportunity for the company to join together and shine as one."
– Angela Don, Product Designer at Eventbrite

✨ Thank you Angela for sharing your wisdom! ✨


More Resources

Design Systems Repo

The Design Systems Repo by Jad Limcaco

For examples of corporate design systems, visit Jad Limcaco's Design System Repo. Jad includes references from Salesforce Lightning Design System, Material Design, Quickbooks Design System, articles, talks, and books.

Upcoming Conferences

Clarity Conference in NYC on Dec 10 – 12, a conference about Design Systems.

For more knowledge about Design Systems, Checkout Jina Anne's Style Guide Podcast. Jina is the Founder and host of Clarity Conference, a conference about Design Systems in NYC on December 10 - 12.


Build a Design System from Scratch in Sketch

For information on how to create a design system from scratch in Sketch read Alexandre Trimoulet's blog post.

Design Systems Handbook by Invision

Invision offers a wealth of information on any topic relating to experience design. But in particular, you should check out their Design Systems Handbook. This handy guide covers everything from setting up your system, expanding it, and sharing it across the company.

Checkout Designbetter.co's Design Systems Handbook from InVision. They provide ebooks to educate designers on how to build exceptional user experiences.

About the Author:  Andi Galpern

andi galpern, head of content at cloudapp
Andi Galpern
Head of Content and Design Education
CloudApp

Andi Galpern is the Head of Content and Design Education at CloudApp. She is also the founder and producer of Cascade SF, an experience design organization in the Bay Area. Her events provide a go-to space for product designers to learn new skills, connect with industry leaders, mentor, and stay ahead of the job market. Everyone works together toward a more fulfilling career.

Since 2011, Andi has organized hundreds of design and technology events to bring communities together. She regularly works with designers around the world to help them create presentations and become leaders. Follow her on Twitter @andigalpern.

cloudapp

Designers use CloudApp to improve productivity

  • Explain your prototypes with video and audio walkthroughs
  • Record your screen with or without audio and share a quick link
  • Create quick GIFs or video tutorials
  • Annotate feedback
Learn about CloudApp for designers
Read more from the CloudApp blog — Inside The Workflow

Join the Discussion