Project Overview
For this project, I was given a specific set of guidelines for a personal finance app so that I could focus on the animation of key elements and transitions.
The goal was to portray three core values: Security, Simplicity, and Sincerity.
When our user opens this finch app, they are presented with a sense of security via the authentication process. Once they are into the app, they are greeted by a simple UI that gives them quick access to the tools they need, without confusing them. The app is inviting and sincere by giving the user helpful resources and access to advice if needed.
Lo-Fi Wireframes
(provided by project brief)
App Screens
(designed in Adobe XD)
Storyboard Process
Using a story-boarding template, I first laid out the screen transitions, carefully crafting which elements would fade, move, or appear. From there, I laid out basic plans for micro-interactions within the app, such as the lock icon snapping closed.
Animation Process
Within AfterEffects, I utilized key features such as keyframing, effects, 3D, and various settings to experiment while achieving the goals I laid out in my storyboards. In turn, learning about these tools expanded my ideas.
Logo Animation
To symbolize my app's secure nature, I implemented the animated, locking "O" from the logotype to create a lock that snaps closed. But that wasn't quite enough - I added a bounce/snap motion to the entire logotype upon the lock snap to create a sense of motion that is distributed throughout the letters.
Micro-interactions
To create a cohesive and natural flow through he app, I made sure to think about every element's position, behavior, and timing.
(1) Here, you can see how the stock portfolio page opens in several steps, with the "BUY" button expanding with a slight "bounce" to draw the user's attention to it.
(2) The preloader includes a gaussian blur fade-in and a loading spinner for a natural look. The gradient here is displayed on other elements of the app, such as the graph.
(3) Speaking of the graph, I used 3D space to rotate it around when a new data set is selected. Below, you'll find a quick video that shows my timeline, and working in 3D to achieve this.
Final Animation
For the final animation, I wanted to ensure that I utilized this opportunity to create an "advertisement" video, much like you would see on the App Store, or across the web.
The animation presents the screens in 3D space within a device mockup to further put my 3D skills to use. The app's moving gradient has been incorporated into the background to break through the visual dimension.