Deliverables
User Interface Design
User Experience
Interaction Design
Animations

Community Experience For Automotive Enthusiasts

Design and motion of interactive experiences of the automotive industry. A project born from my interest and my dad’s mastery.

Animation Flows

Formula 1 – Vehicle Details

This is a driver profile on the second tab to explore the vehicle in details. On CTA tap, the layout content moves out of the way and the vehicle is scaled up to take over the full screen. Feature highlights are indicated by circles all around the vehicle.

View details

3D Vehicle browsing

Pretty simple yet interesting 3D motion exploration of browsing through vehicles. A construction of 3 compositions, one for each of the vehicles, and its content animating in shortly after each transition. Enabled as 3D layers in After Effects and then animated in their Y-axis along with position movement to achieve the result of a cube rotating.

View details

User Profile Transition – Layering and Process

A motion walkthrough and composition structure demonstrated in 3D layers. I shared my process on organizing, easing techniques, and on layering techniques.

View details

User Profile Transition

A transition of going into a user profile view as an owner of the vehicle. I have always loved how elements transform into its next form and this one is really making its justice. On tap of the owner card, the avatar grows and fills up the entire screen with imagery and information transitioned in.

View details

Vehicle Profile – iPhone X Top Bar Transformation

A detail page of a vehicle and demonstration of how to create a contained top bar by transforming already existing elements. This transition is made out of two yellow shapes, one for the CTA moving up and scaling and one that takes over at the moment it locks into place at the top. To maintain the CTA’s purpose, the favorite label makes a subtle fade movement to the right and fades into a favorite icon from the same left direction…

View details

Challenging navigational elements in new ways

A collection of screen compositions including user profiles, destination detail pages, browsing pages, conversation lists and more. All challenging our current standard of top bar interactions for going backward. Instead,  navigational elements are introduced in the very bottom floating above the content…

View details

Content Sections Scrolling

This flow is from a user scrolling through vehicles in one of the content sections. After the flip, it continues with transitions between each of the sections. Presented in a 3D animated composition.

View details

Section Browsing Transitions – Tablet/Desktop

Motion flow of browsing sections of content. All the content to explore is scrollable starting to the left. Tab switching is slightly tilting the current content to the next, all with a smooth but efficient fade. Tapping brings you to a detail view…

View details

Fullscreen Section Browsing

Motion demonstration a flow of browsing through content sections with directional swiping as navigation. Vertical swiping for items in the current category. Horizontal swiping for navigating through different categories…

View details

Featured Destinations

An iteration of browsing destinations, now translated to the desktop experience. Simply swipe up and down through featured destinations which is paginated vertically. Each title is flipped and switched out and the background is subtly transitioning between each other…

View details

Featured Destinations Collection

 

A collection of featured destination compositions presented with another exploration. Easing and dimensionality are two really good ingredients for delightful animations…

View details

Destination Detail browsing

Here’s a motion iteration of browsing destinations on mobile. Added subtle drop shadow on the cards to improve its z-position representation. Here you see how you tap into a detail page of a destination and start scrolling for more information…

View details

Featured Vehicles Browsing

Featured vehicles being browsed followed by a list view. Revealing it all with the red Audi RS4 Coupe peeking from the edge. Another different presentation playing with dimensionality and different elements to make it stand out from ordinary…

View details