left ArrowHome

Uber Product UI in film

Representing Uber’s product applications as part of the action in a video is a vital part of brand storytelling. There was a lack of consistency across the organization on how product UI was visualized and animated. I created a brand guideline on how to display on-screen product elements consistently, which illustrated user interactions and product scenarios as a secondary element to on-screen narratives.

Using these product surfaces in isolation with subtle animations helps build a visual connection between the narrative of action in a film and the UI displayed on screen. UI can convey status, provide feedback and help visualize a character’s actions.

Responsibilities

Art Direction, UX and Copywriting

Client

Uber

Developing a framework

Approach

I started by analyzing existing footage of commercials and ad placements to identify recurring UI elements, while also meticulously reviewing the Uber apps to pinpoint commonly used design patterns. This comprehensive audit allowed me to create an MVP list, which became the foundation for building a robust and versatile toolkit.

Placement guidelines

Establishing clear guardrails for placement and UI visual weight was crucial to maintaining visual consistency across the composition. This foundation ensured a cohesive on-screen experience, reinforcing brand identity and enhancing overall design clarity.

Safe area

On screen positioning of UI follows standard film safe areas of Action Safe and Title Safe margins. To aid comprehension of UI elements they are typically docked to the Title Safe area but can flex to the Action Safe area as space is required.

Safe Area
Grid

The story of the film should play the prominent role in the scene. So the content area is larger than the UI grid area. The UI is used to help support the overall story.

Grid

A toolkit of common UI transitions

Providing a flexible set of transitions for animating UI elements offers designers a comprehensive toolkit to begin their work. They can select the transition pattern that best fits the scene and effectively communicate their intention. Designers can utilize the toolkit files as a starting point to maintain consistency with easing and transition standards. This ensures the Uber UI is displayed as expected.

Slide in

One of the primary ways UI moves in the system is using the slit slide in transition, where content moves up behind a mask. This upward movement should feel fast and fluid.

Lists

The list selection animation is used to cycle through a short list of menu items. Items cycle into view rotating from either bottom-to-top or top-to-bottom. The active item increases in scale and opacity as it moves to the foreground. In the list, items always move vertically.

Fade in

UI elements can transition by fading in as the item slides into its final on-screen position. The opacity of the element UI can fade in from about 50% opacity to 90%, while sliding up and coming to rest. This transition may be useful for more complex UI elements where a single Slit transition is difficult to complete quickly.

Carousel

The carousel animation is used to cycle through a list of menu items. Items cycle into view from either the left or right side of the screen. With the active item increasing in scale and opacity as it moves to the foreground. In the carousel, items always move horizontally.

Alert iconFinal deliverable

I created a detailed webpage on Uber’s internal brand system website, that provided even more detail and specs about how to utilize the toolkit. This toolkit and starter files are used by internal teams as well as agency partners to ensure consistent animations. Those details were omitted here due to the company privacy policy.

Key learnings

Binoculars icon
Provided consistency

Created uniformity across all film channels.

Chart icon
Established a design language

Set up a framework which was built upon in future campaigns.

Newspaper icon
Started a dialogue

Kicked-off conversations about how we could consistently simplify UI across communications.