Eventbrite

Exploring the role of motion in user experience design

Overview

This project focuses on the impact that motion design can have on the user experience of a product as a whole. This is a redesign of the macro and micro-interactions in the Eventbrite app to show how motion design can create better experiences.

Challenge

An initial exploration of the app and Eventbrite’s design system helped determine the key opportunities for improvement, the visual design, users, and already existing animations.

How might we increase user delight with motion design using the existing Eventbrite design system while enhancing the current interactions

This goal would serve as an anchor for design decisions, ensuring the right solutions using the assigned constraints.

Users

Based on previous case studies on Eventbrite the target audience was already well defined for this project. Since the service allows anyone to plan an event, the users range vastly between use cases for the service, but there is a major focus on music, arts, and small community events. This can open up interesting opportunities to use their visual language and add a narrative to interactions.

Challenges

With this being an individual project, it was my responsibility to research, conceptualize and design the final product. While I was designing, I had to keep in mind the already established design system in order to produce designs that would fit in with the rest of the app and to limit myself to only working in motion design to improve the user experience.

Constraints

Since Eventbrite already has a well-established design system, the main constraints were focused in:

Constraint
Rationale

Using the existing design system to guide the visual style and characteristics of the animations

This would allow me to focus on improving the UX using only the animation, not changing any other aspect of the design system

Improve user delight only using motion design in micro & macro interaction

This would serve as a way to improve the user experience without having to redesign major sections of the app

The Process:

Discovery

This process began by defining the core interactions that could be improved on with the skill and time resources available to this project. Following this, a case study was conducted in the visual and system design of Eventbrite to guide the solutions. The following interactions became a priority:

Loading animation

The loading screen while taking a considerable amount of time to load lacks any animations

Location search

While having a strong visual style, the main selection for evens & locations fails
to convey the same style

Selected events

Backing from selected events had room for improvement for user delight

Insights

Based on the existing visual style of Eventbrite, the designs would consist of vector graphics & illustrations, bright colours, and maintaining a friendly and engaging feeling. This consisted of custom illustrations that would create a narrative based on the events offered by the service and UI animations that would facilitate the UX.

Bright colours

In this case it will consists of sticking to the Eventbrite’s established colours

Custom illustrations

Creating custom vector illustrations that would relate to the app’s theme of going out

Friendly &
engaging

Maintaining Eventbrite’s friendly visual language will help with user delight

Motion

After identifying key areas of improvement, the motion design would be carried out keeping in mind the key pillars of Narrative, Continuity, Expectation, and Relationship.

Narrative

Continuity

Expectation

Relationship

From storyboards to animated, all the animations were carried out using Adobe After Effects, from micro-interactions like pressing the back button, to fully custom illustrated loading animations.

Main features:

Loading Screen

From having no loading animations at all to having a visual representation of the different opportunities that Eventbrite offers.

This animation offers a playful take on informing the user that the app is loading while also giving them a tease if the type of experiences that they can expect from the app. Using the principles of easing, parenting and transformation it offers a smooth and enjoyable loading screen culminating in the landing screen.

Principles used:

Easing
Parenting
Transformation

Location Selection

Focusing on maintaining eye continuity from the current location to selecting a new one.

This screen animation uses a change in the hierarchy to shift the focus on selecting a location while also providing continuity for backtracking. Using easing and parenting it creates expectations in how the location search will behave while still maintaining a friendly feeling.

Principles used:

Easing
Parenting
Transformation
Continuity

Selection Action

From an overlay back to the landing page, this focuses on setting up expectations for quick views of the events.

Using parenting it tells the user what attributes belong to each event and maintains a quick interaction

Principles used:

Scale
Parenting
Transformation

Outcome

This project served as an example of the impact that motion design can have on the user experience. With the inclusion of motion, one not only creates narratives with interesting and fun loading screens but also enhances the navigation by creating relationships, setting expectations on how elements will behave and establishing continuity making the product easier to navigate for the user.