Mobile, Wearable, VUI
Temporal was tasked with defining the look and motion behavior for the Android and iOS mobile experience.
Interface Designs
.png)
Motion Design
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)
