Eventbrite Design system

The lay of the land

When I joined the Eventbrite, the design system already had buy-in from the company and was in the early stages of building out our web components. However, once I started working full time on the EDS team, it was clear that there was an overabundance of ideas and variants of the same thing. After some departures and new hires, we re-teamed with a laser focus on trimming the fat and having consistency be our guiding principle.

Components

Component work is never done. They are always evolving or new ones are coming down the pipe. For the latter, we would often have designers coming to us with problems that would typically be framed “We need to show the users a message inline but EDS only had notifications that are at the top of the page”. From here we would set up some time to brainstorm and cobble together a new component that would satisfy both designers as well as each platform ( while also being the day and night mode friendly ). Other times we would recognize opportunities ourselves due to the nature of being so zoomed into our work on a day to day basis. My goal with making components was to always do something familiar to the user while at the same time pushing our design style forward.

Avatar component

Patterns

While we always had a healthy backlog of components in our design system, we soon had to start thinking about existing and emerging patterns which would typically consist of components combined together to make up a solution for a common use case such as empty states. This is one of the things that sets a design system apart from a styleguide as it requires clear thought backed up by principals and advice for those using these patterns.

documentation

It’s great to have a healthy list of components, patterns, and principals but it’s not going to have true impact unless we communicate and explain our why. This meant using our own internal website which hosts useful pages about how designers and engineers can use EDS. We had inherited a pretty basic working site, but with our own system, we were able to greatly expand upon what we had.

When I worked on the motion section of the website I knew it was very important for this page to be especially unique given that animations have to be seen and manipulated rather than being written about exclusively. Whenever possible throughout the page I wanted to at the very least visually represent what I was saying or providing and at the very most have it be interactive.

Rebrand

Not too long before Eventbrite was about to go public, we were tasked with refreshing the brand so we could move in a direction that conveyed Eventbrite as more of a media company than purely a tech company. This work was done by our Brand team and an outside agency. It was also an opportunity to re-examine how we design across platforms which resulted in us focusing much more on native so that it didn't feel so alienated from EDS. This was a huge undertaking with a very short deadline. We achieved much better clarity through a new typeface and considered type scales and weights as well as tighter rules around color use. However, this project didn't come without its issues and pains.

Motion

Motion design is something I feel passionate about and really enjoy doing. When it’s applied thoughtfully and used sparingly, I think it can make any interface come alive and add a certain warmth. These days, an experience without motion design stands out as it tends to lack a particular sense of depth and maybe worst of all, it feels dated.