IFIRMA – Product Tour Animation

Project Overview

IFIRMA is a FinTech company offering a dedicated accountant specializing in your industry to handle your company’s finances. Ideal for small businesses and freelancers, it combines expert guidance with tools for bookkeeping and tax compliance. The company also provides SaaS software for those who prefer to manage accounting independently, including features for invoicing and finance tracking.

Client Goals & Objectives

The first step was understanding IFIRMA’s goals for this product tour animation. Through in-depth discussions with stakeholders, I gained clarity on their business objectives and marketing strategy. This video wasn’t just about showcasing UI features like CRM, e-commerce integrations, and detailed reporting; it also needed to emphasize the platform’s standout offering—expert accountants who make managing finances simple and stress-free.

Visual Ideation & Concept Development

Once I understood the project’s goals, I started brainstorming visual concepts. While I frequently use Figma, I began with an old-school notecard system. Writing down ideas on paper and arranging them physically allowed for quick experimentation. This method let creativity flow naturally without digital distractions.

With initial concepts in place, I transitioned to Figma to develop a mood board, defining the design language and style guidelines. I gathered references and inspirations to ensure the visual style aligned with the brand’s identity and the animation’s purpose.

Storytelling & Scriptwriting

I took a hands-on approach to understanding IFIRMA’s features, exploring demo versions and digging through the website’s content. This gave me a solid understanding of how everything worked and what needed to stand out. From there, I started drafting the script, focusing on clear and engaging ways to showcase the features. After a few iterations, I refined it into a narrative that seamlessly combined UX animation with storytelling.

Storyboarding & Art Direction

To bring the animation to life, I developed a storyboard using screenshots of the invoicing app and curated reference visuals. My goal was to simplify the UI, highlighting only the elements essential to the story. Collaborating closely with the graphic designer, I provided direction on maintaining consistent design scales across sections, ensuring smooth transitions and visual cohesion.

Initially, I wanted to mix shots of the app interface with scenes of accountants at work. However, during the animatic phase, this approach didn’t convey the focus and clarity I was aiming for. It just didn’t click emotionally. Instead, I pivoted to a cleaner solution: bold typography boards that complemented the voiceover. This shift gave the video a more polished and focused feel, and it felt deeply satisfying to see everything align with the narrative.

Creating Visual Flow & Engagement

Since much of the animation takes place within a similar-looking interface, I needed a way to keep the viewer engaged and focused. I chose to emphasize key moments with larger zooms, making the interface feel clearer and more impactful. Adding a lens blur effect gave the animation a polished, cinematic feel that helped smooth transitions. It was exciting to see how these small touches brought the animation to life, making everything feel seamless while staying true to IFIRMA’s simple, user-friendly brand.

Animatic Development

I began the animation process by creating a stillomatic, which evolved into an animatic. This allowed me to block scenes, establish pacing, and synchronize the visuals with the voiceover efficiently. As the project progressed, individual shots merged into sequences with seamless camera movements, enhancing the flow of the animation.

Microinteractions & Motion Guidelines

A big part of the project was creating smooth, intuitive microinteractions that made the UI feel unified and seamless. I wanted every little transition to feel natural, like the app was alive and responsive. Defining motion guidelines, from easings to keyframe distances, was key to keeping the animation consistent. I even wrote an After Effects script to automate some of the process, which was incredibly satisfying. There was something really rewarding about seeing the animation come together with such precision and fluidity. Every micro interaction, no matter how small, helped to make the user experience feel polished and effortless.

Dynamic Graph

For revenue and expense graph I used clever technique to create a vector path from an array based on named layers. It allows for easy adjustments to the number of points in the graph, making the design super flexible.

Efficient Bar Chart Visualization

For the monthly expenses chart, I wanted a creative and efficient solution. I simplified the design by using just three vertical rectangles, with their height linked via Essential Properties. This setup allowed me to create multiple versions of the chart with just one source element. The result was fewer layers, clearer visuals, and a more ergonomic workflow. It felt great to streamline the process while maintaining flexibility, knowing I was making the animation both efficient and easy to adjust as needed.

Showcasing E-commerce Integrations

To showcase e-commerce integrations, I created a unique system that makes it easy to manage and rearrange logos effortlessly. Whether I need to update, reorder, or swap them out, everything stays responsive and adaptable. This approach not only speeds up revisions but also keeps the workflow smooth and efficient.

Final Outcome & Results

The final animation became the hero video on IFIRMA’s homepage, enhancing the platform’s first impression and improving user understanding of its core features. Additionally, the video served as a retargeting ad, increasing user engagement and highlighting the app’s benefits to potential customers. The project successfully showcased IFIRMA’s robust SaaS capabilities, aligning seamlessly with their brand identity and marketing goals.

CREDITS