Exploring the role of motion in user experience design
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.
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.
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.
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.
Since Eventbrite already has a well-established design system, the main constraints were focused in:
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
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:
The loading screen while taking a considerable amount of time to load lacks any animations
While having a strong visual style, the main selection for evens & locations fails
to convey the same style
Backing from selected events had room for improvement for user delight
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.
In this case it will consists of sticking to the Eventbrite’s established colours
Creating custom vector illustrations that would relate to the app’s theme of going out
Maintaining Eventbrite’s friendly visual language will help with user delight
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.
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.
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.
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.
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
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.