After storyboarding the preliminary animation for my interactions, micro-interactions, and transitions, I used After Effects to transform my static UI Designs into a first draft of an animated prototype.
Next, I utilized a number of expressions to create a digital timer that is responsive and actually able to keep the time once a meditation has been started.
In my next iteration, I added preliminary animation of the Ripple logo to the splash screen, to remind users to take a breath and create a sense of calm while the app is loading. I also created 3D animation for the transition from the homepage to the meditation player to increase users’ focus on the core purpose of the app and animated micro-interactions when users click the icons in the bottom navigation, emulating a heartbeat when the “Favorites” icon is clicked.
Next, I further iterated upon the logo animation, adding a water droplet to start the ripple effect, animating the title itself, and smoothing out the ripple motion so it felt more complete and soothing to the users and emphasized the app’s branding.
