The process behind completing CareerFoundry's UI Animation Specialization certificate program; a comprehensive course in After Effects and 2D/3D motion graphics design for digital products.
I produced a number of animated interfaces throughout the program, with my guiding project and final deliverable being Maestro, a smart home app designed to centralize and facilitate control of household devices.
Maestro served as the living canvas for every stage of the course: from early planning and static wireframes in Figma to final animated prototypes in After Effects and Rotato, JSON handoffs, and a polished portfolio presentation.
Deliberately holistic, this project reflected a real-world product workflow. I began with user flows and static wireframes, translated them into a high-fidelity UI in my design tool of choice, Figma, and then proceeded to move into motion design with After Effects.
By layering animation onto a complete and coherent UI, I demonstrated how motion and microinteractions support clarity, storytelling, and brand values within a mobile app ecosystem.
My Role
-User flows, wireframes
-Final UI visual design
-Motion graphics design
-3D modeling and presentation
Tools
UI animation in service of user experience.
Mastering the industry standard toolkit.
Understanding the dev environment & technical considerations.
Prior to the certificate, my UI design work was largely static, and adjacent to my pre-existing skill set with digital video production and editing. The challenge I set for myself was not just to master the industry standard motion tool, Adobe After Effects, but to show how animation could act as a strategic design layer across an entire product journey. I wanted Maestro’s motion language to reflect its brand values of clarity, calm, and control, while remaining technically feasible for developers.
From the outset, I ensured my workflow mirrored a professional environment: starting in Figma, moving through structured exports with Overlord, and producing lightweight, implementation-ready files via Bodymovin and Lottie, aside from high quality ProRes exports.
An earlier animation from an existing layout and imagery
Defining the Foundation
The first step was mapping user flows and wireframes. I defined Maestro’s key interactions—device toggles, screen transitions, and a unified home dashboard—using static, handdrawn and digital diagrams.
These flows evolved into a cohesive UI framework in Figma, where I designed the app’s full set of screens.
To bridge design and motion, I exported my Figma UI into After Effects using Overlord, a plugin that allows seamless transfer of vector layers. This ensured every detail—from typography to iconography—was editable in After Effects and ready for animation.
Storyboarding & Principles
Before animating, I created storyboards that mapped motion to intent. These sketched out microinteractions, logo reveals, and screen transitions, referencing the core principles learned in the course: continuity, guiding attention, and staging, among others. This pre-visualization was critical—it allowed me to test whether animations reinforced usability rather than distracting from it.
Crafting Microinteractions
I began animation with small, foundational details: menu icons, preloaders, and thumb sliders for temperature and hue control. Using the animation principles of anticipation and easing, I designed interactions that felt smooth and human. These assets weren’t just portfolio-ready—they were production-ready.
I really enjoyed the arced slider solution I arrived at to control elements such as temperature and warmth of lighting, which made use of natural range of motion for the thumb - of either hand! Left handed users are no longer penalized by handedness-specific control patterns or locations, thanks to the right and left handed switch icons on all thumb slider screens, which flip the slider’s orientation—via an entertaining animation, of course.
I exported menu icons and preloaders as JSON files using Bodymovin, then tested them on LottieFiles to confirm smooth playback across devices. These deliverables demonstrated the ability to successfully hand off scalable, lightweight animations directly to developers.
3D Depth & Transitions
Next, I scaled up to screen-level animations. Using After Effects’ Advanced 3D rendering engine, I created dimensional card flips and rotating transitions, making navigation intuitive and reinforcing hierarchy. Lights, extrusion, and shadows added subtle depth, while careful timing ensured users maintained orientation during state changes.
Plugins & Workflow Acceleration
To manage complexity, I integrated plugins like Animation Composer 4 (for rapid transitions and easing curves) and TextEvo (for expressive, branded typography in onboarding and preloaders). These tools freed me to focus on polish and intent rather than mechanical keyframing)—although there was plenty of that.
Final Presentation
All work was consolidated into a final showcase video, presented on a 3D device mockup and developed in several stages: the final UI animations in After Effects, additional 3D modeling and animation in Rotato, and then reimporting back into AE with a transparent background for final depth, mise en scene, shadow, and camera treatments. The presentation demonstrated Maestro as a cohesive product in motion—every screen, transition, and microinteraction functioning together as a unified design system, and all with a clearly defined purpose.
THE RESULT
The certificate process yielded both tangible and intangible outcomes:
The UI Animation Specialization certificate itself, legitimizing and affirming my mastery of After Effects, motion principles, and professional workflows.
A holistic prototype of Maestro, a viable smart home app, moving from wireframes through Figma UI to animated presentation.
Implementation-ready exports, including JSON files for preloaders and menu icons, tested in Lottie and optimized for mobile.
A polished portfolio case study, bridging storytelling, static design, and motion design.
Several key lessons emerged from this journey:
Start with structure: A thoughtful foundation in Figma made the animation work stronger and more coherent.
Animation clarifies, not decorates: Motion was always tied back to user orientation, attention, and delight.
Cross-tool workflows add credibility: Using Overlord for asset transfer and Bodymovin/Lottie for handoff showed a complete, production-aware pipeline.
RETROSPECTIVE
Though Maestro itself is conceptual, the project embodied the end-to-end lifecycle of a real digital product: flows, UI, motion, and implementation. More than just teaching me After Effects, the certificate process deepened my understanding of animation as experience design—a way to guide, inform, and delight users while also meeting the needs of developers.
With this certification complete, I emerged with not only new technical fluency, but also a holistic perspective on how and where motion belongs in product design.
