top of page
GALLO
UI Animation
During my time with Career Foundry, I dipped my toes into animation. The tasks below are projects and tasks that I used both Figma, Adobe After Effects and Adobe Rush to accomplish.
WHAT
Animation Examples
ROLE
April 2023
WHEN
UI Designer
Product Design
Animation-AE
Twilight App
This was a project assigned to me during my time with Career Foundry. The objective was to design and animate the user interfaces of a meditation app.
Asks
Design 3 to 5 main screens and then integrate motion into them.
Develop motion concepts using storyboards and include examples of
transitions and micro intentions between the screens.
Design
This design features simple, flat images of people, animals, and concepts related to the type of meditation activity the user chooses. For example, the sleep music/story feature on the app includes nighttime scenes using celestial objects and fun whimsical owls. A triad color scheme is located on initial screens and helps produce a sense of contrast and excitement. Once in a calming activity, the color scheme changes. For example, within the sleep story meditative portion, the user will experience a monochromatic purple/blue scheme which produces harmony and calming emotional responses. Fun simple vector imagery helps keep this design relevant to current design trends.
Story Boards
This was something that had to be done quickly so I timed myself and drew out sketches of the planned animations to indicate transitions and micro intentions. Here are some examples:
Goals
From my experience and some user feedback during some interviews, I narrowed down that I would feature my sleep/music designs within the app and add motion to those screens. I identified that users wanted interactive features that would provide feedback visually. It was unanimously agreed that the color scheme, illustrations, and overall layout seemed pleasing, calming, and user-friendly.
High Fidelity
My focus here was to keep the imagery fun and whimsical in order to appeal to both children and the young at heart. I chose to use simple typography and easy-to-follow UI patterns. This design can be adjusted for Android devices but was designed with iOS in mind.
Featured Screens:
Additional screens:
Key Takeaways and Outcomes
I feel the animations enhance the calming whimsical feeling of the Twilight App by providing the user with an experience rather than just 'using an app'. Final user testing results revealed this feeling was universal to 95% of the participants. I feel the idea of an experience rather than a regimented activity keeps users engaged and coming back. One of the things I feel like I could have improved on was spending more time animating other aspects of the app like the additional screens (creating a movement with the sun rays, adding motion when music is playing to produce soothing visuals, and the addition of sound feedback when scrolling, pressing, or clicking. Overall, I feel like this is a great start and I'd love to have another chance to push this concept.
Swoosh App
This was a project assigned to me during my time with Career Foundry for a mock photo editor app. This task was
the first time I created an animation with Adobe After Effects. The screen designs were provided and my task was to animate the existing interface to coordinate the preloader screen to the last screen.
bottom of page