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
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:
- 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.
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! ✨
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.
Clarity Conference in NYC on Dec 10 – 12, a conference about Design Systems.
Build a Design System from Scratch in Sketch
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.
About the Author: Andi Galpern
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.
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