Firmbee Invoice App Promo Video

What is Firmbee?

Firmbee is a comprehensive project management and business operations software that helps teams and freelancers streamline various aspects of their work. It provides tools for project and task management, time tracking, team collaboration, invoicing, and CRM (Customer Relationship Management), aiming to centralize and simplify workflows for businesses of all sizes. By bringing project planning, communication, and financial management together, Firmbee supports users in maintaining efficiency and organization, allowing them to handle everything from client communication to financial tracking within a single platform.

Promo Video for Firmbee Invoice App

For this project, I developed a promotional video for Firmbee’s new fintech tool, the Firmbee Invoice App. This app, designed to streamline invoicing for small businesses and freelancers, was set to launch on Google Play marketplace, with the video as the main introduction. The video was also shared on YouTube to expand its reach.

The goal was to show how easy the app is to use and highlight its core features: creating invoices from a service list, tracking payments, managing contacts, and customizing offers—all from a single, organized dashboard. By emphasizing its free access and business-friendly design, I aimed to position it as a go-to invoicing solution.

In my role, I handled both the art direction and UI animation, presenting a clear and intuitive flow to demonstrate the app’s main functionalities. The final video positioned the Firmbee Invoice App as a practical fintech tool for businesses seeking a straightforward, all-in-one invoicing solution.

Research and Development

I began my research by exploring Firmbee’s website, social media, and existing visuals on the Google Play store page. My goal was to understand the brand’s tone of voice and visual style. Key elements that stood out were the frequent use of hexagons, a vibrant yellow color palette, depth of field, and masking techniques to integrate design elements.

With these in mind, I created a moodboard with two distinct concepts. The first was an “elegant” approach, featuring a smartphone model with close-up shots and clean typography. The second was a “playful” concept, incorporating colorful shapes to signify payment statuses, honeycomb patterns, and flat illustrations of a mobile phone, all emphasizing ease of use and a modern, approachable design.

Ultimately, I chose the elegant concept. Given that this was a promo for an invoicing app, the sophisticated visual style aligned better with the brand’s current presentation and conveyed a professional look suited to the app’s purpose.

Working with Beta Builds

A unique challenge in this project was working simultaneously with Figma files and the app’s beta builds. Given the tight deadline, visual elements were sometimes updated in the beta versions before being finalized in the design files. This meant that every day or two, I received a new app build to install on my phone, allowing me to keep up with the latest visual changes. While it required constant updates, this process actually supported the in-app UX animation work, as I could observe the app’s natural behaviors and refine or enhance animations to match the app’s interactive feel.

Storyboard Development

With the app’s core features identified, the next phase involved creating a storyboard to plan out the mobile app marketing video. To make this process seamless, I rendered frames of a 3D phone displaying the app UI, giving the graphic designer a clear reference for each scene. We experimented with a storyboard in three brand-aligned colors: soft gray, yellow, and dark gray. Ultimately, I chose the soft gray for a clean, elegant look that suited the invoicing app’s purpose. After multiple iterations, we finalized the frames, setting a strong foundation for the UI animation phase.

Background Design

Before starting the animations, I refined the look of the frames in After Effects, incorporating a slight perspective by adding blurred hexagon shapes—a visual cue used in Firmbee’s branding. This subtle addition of 3D elements created depth and tied back to the honeycomb-inspired theme, adding modernity and consistency to the motion design for this fintech app. These elements gave the background a sophisticated look that aligned with Firmbee’s brand.

Creating the Right Atmosphere

Invoicing might not be the most thrilling topic (except on payday!), so I aimed to make the video visually engaging and enjoyable to watch. I started the animation phase by creating an animatic, blocking out scenes on the timeline to establish the pacing and flow. This step helped refine transitions, synchronize key moments with the music, and ensure a smooth narrative. Carefully timed motion, paired with a soundtrack that added a subtle sense of adventure, kept the video dynamic and engaging while reinforcing the app’s ease of use.

UI Animation & Motion Design

With the storyboard finalized, I moved on to animating the app’s UI, ensuring smooth, natural interactions that felt intuitive and polished. I recreated the app’s transitions, button presses, and payment status changes while refining micro-interactions to enhance the user experience. Since the video needed to clearly demonstrate the app’s ease of use, I focused on seamless movement, fluid timing, and well-paced animations that aligned with real app behavior. This approach not only made the promo more engaging but also reinforced the app’s modern, user-friendly design.

3D Phone Integration & Workflow Efficiency

To bring the UI animations to life, I combined them with a 3D model of a smartphone, seamlessly integrating the app experience into a realistic setting. I imported the 3D phone from Cinema 4D into After Effects using Element 3D, which allowed for fast iterations and smooth synchronization with the commercial’s pacing. This workflow gave me the flexibility to refine animations quickly while maintaining perfect alignment between UI elements and camera movements.

“The animations are super tasty, especially with the Product, where checkboxes appear, amounts are calculated, and the invoice listing at the end is a nice touch. Very enjoyable video!”

BEATA KRAWIEC UX/UI DESIGNER, FIRMBEE

Technical Challenges

One of the main technical challenges in animation was managing the different currency formats. Various countries use different symbols, commas, and periods, especially in sections like Revenue. To handle this, I used expressions with sliders and dropdowns, making currency adjustments simple and quick.

Additionally, I animated status tags to show invoice states (e.g., paid, partly paid, unpaid, overdue). Since the app’s copy was still evolving, I coded the width of each tag dynamically to adapt to text length, ensuring consistent margins and alignment. By using expressions and dropdowns, I created a flexible setup that made it easy to adjust the UI animation for this mobile app, maintaining brand alignment across changing content.

Outcome

The final video successfully captured the Firmbee Invoice App’s sleek, user-friendly design and showcased its core features with engaging, in-app animations. Launched on Google Play and YouTube, the video received positive feedback for its clarity and visual appeal, helping potential users quickly understand the app’s benefits. The project not only strengthened Firmbee’s brand presence but also highlighted the value of thoughtful, user-centered animation in fintech app marketing.

CREDITS