As UI and motion designer for BMW Connected and MINI Connected mobile and wearable apps, I was tasked with defining the look and motion behavior for the Android and iOS mobile experience.
Early at BMW, I had the opportunity to own the look for the BMW Connected and MINI Connected visual design on Android. Throughout my time at BMW, I provided support to iOS design initiatives for BMW Connected and MINI Connected.
In creating the motion language, my goal was to enhance usability; Using visual effects and motion graphics software, I 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.
Using motion to create affordance, my goal was to guide users to any discoverable functionality and to convey gestural feedback.
Transform animation to confirm successful fingerprint scan
Software Update Loader
Motion to demonstrate cloud to phone to vehicle file transfer
Circular pulse animation to confirm user interaction
Motion to direct user's attention to a new (or updated) feature.
Motion to point users to badging/notification. (Stylized motion of navigation icons also shown).
Motion (and follow through motion of text cursor) to point users to focused element.
Motion to reinforce focus state and to guide users to text cursor.
Progressive Disclosure PIN
Correct password entry gives rise to LOG IN button.
Motion to convey focused field and feedback as user fulfills password requirements.
Motion to visualize field focus and password strength.
Waveform animation conveying reaction to user voice input.
Motion of tab selection and animated pulse to guide users attention to notification.
Motion to seamlessly transition user through the different states.
Motion to convey the end of scrollable space.
Motion to inform user of discoverable functionality.
Adding List Item
Motion to convey additional list item after adding destination.
Shaking to convey failed PIN entry.
Motion to connect users action to newly revealed destination details.
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.
Motion to reinforce spatial relations of views under tab.
Motion of icon to connect entry point and expanded state/screen.
Motion to convey that each screen has its own "home" so users can easily summon the information space they need at anytime.
Animation meant to preserve continutity and narrative
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.
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.
Looping animation of varying themes meant to convey activity and to make waiting time more pleasant.
Motion meant to convey immediate success while server communication is still happening. (Experience is only interrupted if request fails)