TEMPORAL
BMW Technology Corporation

Mobile, Wearable, VUI

Temporal was tasked with defining the look and motion behavior for the Android and iOS mobile experience.

Interface Designs

Launched design for BMW Connected
Early concept design for BMW Connected
Launched design for BMW Connected
Launched design for BMW Connected

Early Concept (left) and Launched design. (right.) for BMW Connected Samsung Gear
Early Concept design for BMW Connected wearable

Motion Design

Temporal was tasked with defining the UX motion mobile design library.  

In creating the motion language, the goal was to enhance usability; Using visual effects and motion graphics software, we created motion compositions meant to hide latency, create motion affordance, convey gesture confirmation, and to reinforce spatial awareness. Incorporating user-centered motion design was ultimately to create the perception of a faster, more effortless experience and to give users a sense of control and flow.

Motion Affordance and Gesture Confirmation

Using motion to create affordance, the goal was to guide users to any discoverable functionality and to convey gestural feedback. 

Touch ID

Transform animation to confirm successful fingerprint scan

Software Update Loader

Motion to demonstrate cloud to phone to vehicle file transfer

Tap Feedback

Circular pulse animation to confirm user interaction

Tip Notification

Motion to direct user's attention to a new (or updated) feature.

Badging/Notification

Motion to point users to badging/notification. (Stylized motion of navigation icons also shown).

Focus Transition

Motion (and follow through motion of text cursor) to point users to focused element.

Field Focus

Motion to reinforce focus state and to guide users to text cursor.

Progressive Disclosure PIN 

Correct password entry gives rise to LOG IN button.

Password Entry

Motion to convey focused field and feedback as user fulfills password requirements. 

Password Strength

Motion to visualize field focus and password strength. 

Voice UI

Waveform animation conveying reaction to user voice input.

Tab Notification

Motion of tab selection and animated pulse to guide users attention to notification.

Transforming Button

Motion to seamlessly transition user through the different states.

Rubber Banding

Motion to convey the end of scrollable space.

Hint Animation

Motion to inform user of discoverable functionality.

Adding List Item

Motion to convey additional list item after adding destination.

Shaking Components

Shaking to convey failed PIN entry.

Destination Selection 

Motion to connect users action to newly revealed destination details.

Spatial Orientation

Using motion to connect information spaces, my goal was to demonstrate how all screens/components relate to each other and ultimately to develop a cognitive map for the user.

Tabs Motion 

Motion to reinforce spatial relations of views under tab.

Transition

Motion of icon to connect entry point and expanded state/screen.

Screen Domains

Motion to convey that each screen has its own "home" so users can easily summon the information space they need at anytime.


Card Expansion

Animation meant to preserve continutity and narrative

Hiding Latency

By leveraging frequency variation techniques, instant/optimistic feedback, and engaging visuals, I aimed to make loading times seem faster and more pleasurable.

Frequency Variation Loader

Loader with ribbon animating in the opposite direction of the progress bar to create the perception of faster loading time.

Skeleton Loader

Loader meant to set the expectation of the content soon to appear and to create the sense of a faster loading time.

Logo loader with secondary

Initial logo fades in. If loading time does not complete after 1 second, a secondary indeterminate loader appears until loading completes.

Indeterminate Loaders

Looping animation of varying themes meant to convey activity and to make waiting time more pleasant.

Optimistic Feedback

Motion meant to convey immediate success while server communication is still happening. (Experience is only interrupted if request fails)