UX/UI Motion
I began my UX motion design journey with Amazon Music. I was brought on to lead the design of a brand-new UX motion system for Amazon’s live social radio app called Amp. This product allowed anyone to become a radio DJ and share their love of music, take callers, chat, and engage with other like minded individuals.
Amp
Amazon Music’s live radio social experience.
App Navigation
Amp’s navigational experience was designed around the usage of depth, parallax, and delay. Elevating certain UI elements off the screen on the Z-axis allowed for a way to naturally and intuitively guide the user. An example of this can be seen in the show card carousel above. When a user swipes horizontally, the center card comes into focus while exiting cards defocus and darken. Additionally, when a user scrolls vertically, there is a parallax shift between the center card and the background/header to help reinforce a sense of UI depth on the Z-axis.
Music Visualization
Incorporating Amp’s core brand graphic elements into music visualization helped create a fun and engaging listener experience. 4 of the main brand patterns were animated at 1-second looping intervals to create a pleasing connection between sight and sound. All visualizers were implemented as Lottie animations optimized to run at 60fps on react native.
Custom Transitions
To intuitively guide the user and maintain the smooth “wave” inspired theme of the motion system, a series of custom screen transitions were designed. These smooth transitions were intended to take the user fluidly from one layout to the next. Instead of utilizing standard off-the-shelf transitions, screen layouts and their components were designed to ebb, flow, and morph from one view to the next and back.
Micro-interactions, Splash Screen, & Loaders
Micro-interactions were designed to be fun and functional. The overarching goal was to provide the user with delightful feedback when interacting with the UI and introduce personality to the product. A series of Amp-branded “wave” loaders were used to help minimize perceived latency while providing the user a unique visual loading experience.
Fun & Social
In addition to doing some super fun logo animation, I had the opportunity to motion design some interesting creator self-promotion features. “Creator Trailers” offered a way for individuals to self-promote their upcoming Amp shows. Users were given the option of recording an audio promo of up to 30 seconds, which would then be auto-transcribed and baked into a sharable video file. A demo snippet of this user flow can be seen in the clip above.