Product Design: Abell Vo
Motion Design & UX: David Hall
Prototyping: David Hall
Motion System
I aimed to create a cohesive motion system that drives the communication and application goals forward. Using both Protopie, After Effects, and Lottie I made handoff-ready Ui and Character animations.
Hi-fi Prototype
I brought Abell's original Figma frames into Protopie in order to incorporate genuine interactivity and refine certain functionalities, particularly messaging, navigation, and some organizational tools. Since Abell's initial design was only a proof of concept, I created additional frames to further develop the prototype, including the log-in, note task, and school events sections. The UI motion was created directly in Protopie.
Log-in: Abell.vo@pratt.edu Password: uxdesign
Log-in: David.hall@pratt.edu Password: uimotion
Note: Hit enter after login and password
Title Animation
The login animation was created in After Effects and imported to Lottie. The aim was to demonstrate the app's connectivity and how it seamlessly integrates with the user's academic journey. The letter "O" was used as an avatar and passing strokes were added to display the connectivity between the app and the user. The connective strokes landing underneath the "O" reveal the user as an essential part of the application. In the real world, I believe this could assist in establishing a sense of brand identity and reducing perceived latency.
Character Animations
For these animations, I followed a "less is more" approach, focusing on subtlety and cohesion with the overall design. Each character is designed to be easily handed off with Lottie, and they are placed throughout the app to bring joy to our users. Academic life can be stressful, and these character animations are meant to create a calming atmosphere.
For these animations, I followed a "less is more" approach, focusing on subtlety and cohesion with the overall design. Each character is designed to be easily handed off with Lottie, and they are placed throughout the app to bring joy to our users. Academic life can be stressful, and these character animations are meant to create a calming atmosphere.
