Explaining Complex Features Through Story and Motion
Explaining Complex Features Through Story and Motion
6 min read
6 min read
About
Cal.com brought me in to produce a short feature video that could explain one of their most powerful tools — they didn’t want to focus on specs and screen recordings, but on telling a clear, user-centred story that shows how the feature solves a real scheduling problem.
Cal.com brought me in to produce a short feature video that could explain one of their most powerful tools — they didn’t want to focus on specs and screen recordings, but on telling a clear, user-centred story that shows how the feature solves a real scheduling problem.
Role:
End-to-end: scripting, storyboarding, casting, direction, animation, sound
Team:
Solo production, with async feedback from Cal’s marketing team
Timeline:
8 days
Tools:
After Effects, Premiere Pro, Ableton, Figma, Miro
Deliverables:
Storyboard (lo-fi to hi-fi), reanimated UI, final video
How It Started
I was introduced to the Cal.com team through a colleague who said our styles would align. We both liked to inject a bit of humour into our work and focus on a tone of voice that isn’t too corporate.
From the first call, it clicked. The cal team wanted help visualising one of their most popular but under-explained features: Dynamic Meetings.
I was introduced to the Cal.com team through a colleague who said our styles would align. We both liked to inject a bit of humour into our work and focus on a tone of voice that isn’t too corporate.
From the first call, it clicked. The cal team wanted help visualising one of their most popular but under-explained features: Dynamic Meetings.
I was introduced to the Cal.com team through a colleague who said our styles would align. We both liked to inject a bit of humour into our work and focus on a tone of voice that isn’t too corporate.
From the first call, it clicked. The cal team wanted help visualising one of their most popular but under-explained features: Dynamic Meetings.
Max from Cal explaining the problem
Max from Cal explaining the problem
Some early drafts of the storyboard slides, introducing Mario
Some early drafts of the storyboard slides, introducing Mario
Understanding the User Problem
In our first call, Max, head of marketing at Cal, described the core pain point behind Dynamic Meetings: trying to get multiple people in different time zones onto one call, without endless back-and-forth. It’s a feature founders love, but it’s tricky to visualise.
To ground the story, we used the character of Mario — to represent the Cal user. He’s busy, juggling work, home life (and a dog), and trying to stay on top of things. His day’s already packed before the scheduling even starts.
In our first call, Max, head of marketing at Cal, described the core pain point behind Dynamic Meetings: trying to get multiple people in different time zones onto one call, without endless back-and-forth. It’s a feature founders love, but it’s tricky to visualise.
To ground the story, we used the character of Mario — to represent the Cal user. He’s busy, juggling work, home life (and a dog), and trying to stay on top of things. His day’s already packed before the scheduling even starts.
Collaboration & Storyboarding
I built the lo-fi storyboard wireframes in Miro, with frames and script copy laid out in parallel so we could review it as a flow. Feedback was async — jumping between Berlin, Hawaii and Hong Kong. We iterated on key sections together, changing anything that didn’t land in the first edit. It was fast and collaborative, with a light tone that carried through the work itself.
I built the lo-fi storyboard wireframes in Miro, with frames and script copy laid out in parallel so we could review it as a flow. Feedback was async — jumping between Berlin, Hawaii and Hong Kong. We iterated on key sections together, changing anything that didn’t land in the first edit. It was fast and collaborative, with a light tone that carried through the work itself.
A peak at the mid-fi storyboard, between the shooting and the edit
A peak at the mid-fi storyboard, between the shooting and the edit
A frame from the storyboard showing UI elements used for storytelling
A frame from the storyboard showing UI elements used for storytelling
Visual Storytelling, Evolving Design
I wanted to use familiar UI design elements as the foundation of the storytelling. Each of Mario’s activities is visualised through an animated push notification, emphasising how his physical schedule mirrors his digital experience — and grounding the story in a language users already understand.
I based the initial visual design on Cal’s existing style at the time, using heavy 2pt strokes to outline UI elements. Midway through production, Cal launched a new, more subtle brand update — so I adapted the visuals, swapping the heavy outlines for a softer drop shadow, and adapting the design of the UI elements to match the updated look.
I wanted to use familiar UI design elements as the foundation of the storytelling. Each of Mario’s activities is visualised through an animated push notification, emphasising how his physical schedule mirrors his digital experience — and grounding the story in a language users already understand.
I based the initial visual design on Cal’s existing style at the time, using heavy 2pt strokes to outline UI elements. Midway through production, Cal launched a new, more subtle brand update — so I adapted the visuals, swapping the heavy outlines for a softer drop shadow, and adapting the design of the UI elements to match the updated look.
Casting the Team
The brief was specific: “Hipster, not homeless.” (Not my turn of phrase)
We weren’t after polished startup types — just real, engaging characters that felt believable. I cast Mario, Jasmine and Effy to reflect Cal’s user base: international, slightly quirky, and not overly stylised. The aim was to feel relatable — to convey a modern tool that solves for the problems of modern working life
The brief was specific: “Hipster, not homeless.” (Not my turn of phrase)
We weren’t after polished startup types — just real, engaging characters that felt believable. I cast Mario, Jasmine and Effy to reflect Cal’s user base: international, slightly quirky, and not overly stylised. The aim was to feel relatable — to convey a modern tool that solves for the problems of modern working life
Meet Mario, Jasmine & Effy
Meet Mario, Jasmine & Effy
The protagonists in front of their coloured backgrounds
The protagonists in front of their coloured backgrounds
Art Direction & Setup
I shot everything in my 40m2 apartment, which was a logistical challenge, to say the least. Three cast members, lights everywhere, a confused, excitable dog on set, and a fast turnaround. Thanks to the well-defined storyboard, it was a smooth, efficient process.
As the cal UI and brand colour is predominantly black and white, we wanted to bring colour in subtly. Cal suggested pastel shades to reflect the accent colours used in the UI, and I assigned the colours to express the character personalities.
I shot everything in my 40m2 apartment, which was a logistical challenge, to say the least. Three cast members, lights everywhere, a confused, excitable dog on set, and a fast turnaround. Thanks to the well-defined storyboard, it was a smooth, efficient process.
As the cal UI and brand colour is predominantly black and white, we wanted to bring colour in subtly. Cal suggested pastel shades to reflect the accent colours used in the UI, and I assigned the colours to express the character personalities.
Motion Design & Interaction Thinking
Motion was at the heart of the piece. I rebuilt the UI in After Effects so I could control how it moved — timing, rhythm, interaction. The motion followed the actors’ physicality, which helped tie it all together.
I used an incoming velocity of 60% and outgoing velocity of 80%, with strong anticipation and follow-through to keep the energy up. I wanted every interaction had a little snap or friction, to give a bit of life & personality to the digital product.
Motion was at the heart of the piece. I rebuilt the UI in After Effects so I could control how it moved — timing, rhythm, interaction. The motion followed the actors’ physicality, which helped tie it all together.
I used an incoming velocity of 60% and outgoing velocity of 80%, with strong anticipation and follow-through to keep the energy up. I wanted every interaction had a little snap or friction, to give a bit of life & personality to the digital product.
Setting the velocity influence on After Effects
Setting the velocity influence on After Effects
Setting the velocity influence on After Effects
Animating 'the magic' of multiple calendars merging
Animating 'the magic' of multiple calendars merging
Showing the magic
This was the key moment the Cal team wanted to land — the “magic” of multiple calendars merging into one perfect time slot. It needed to be quick, satisfying, and readable at a glance.
We landed on a simple animation that shows Mario, Jasmine and Effy’s calendars condensing into one shared opening. It lasts a few seconds, but carries the narrative payoff of the whole story.
This was the key moment the Cal team wanted to land — the “magic” of multiple calendars merging into one perfect time slot. It needed to be quick, satisfying, and readable at a glance.
We landed on a simple animation that shows Mario, Jasmine and Effy’s calendars condensing into one shared opening. It lasts a few seconds, but carries the narrative payoff of the whole story.
Bringing the noise
As we went through production, I voiced the voiceover - so that we could build the action around a specific rhythm and intonation - whilst iterating easily on the script where necessary. We later brought in a North American female voiceover artist, Khrystine, for the final cut - to echo that the Cal user demographic is largely based in the U.S.
I wanted to create a piece that matched the tone we were going for - lighthearted and upbeat - with just enough bounce to hold the scenes together and keep the transitions feeling fun.
As we went through production, I voiced the voiceover - so that we could build the action around a specific rhythm and intonation - whilst iterating easily on the script where necessary. We later brought in a North American female voiceover artist, Khrystine, for the final cut - to echo that the Cal user demographic is largely based in the U.S.
I wanted to create a piece that matched the tone we were going for - lighthearted and upbeat - with just enough bounce to hold the scenes together and keep the transitions feeling fun.
Unmute to play! - Composing the Cal theme in Ableton
Unmute to play! - Composing the Cal theme in Ableton
Testing and iterations
After delivering the first draft, both I and the Cal team ran a few rounds of user testing on the video. Feedback showed that the section explaining where each character was based — and what time zone they were in — wasn’t landing clearly enough.
To fix it, I reworked the visuals, placing each character on an animated map in their respective locations. It made the user problem much more obvious, and helped the feature’s value come across faster.
After delivering the first draft, both I and the Cal team ran a few rounds of user testing on the video. Feedback showed that the section explaining where each character was based — and what time zone they were in — wasn’t landing clearly enough.
To fix it, I reworked the visuals, placing each character on an animated map in their respective locations. It made the user problem much more obvious, and helped the feature’s value come across faster.
Scaling up
The first video became the foundation for a full product feature series.
Each followed the same process: define the user pain point, tell the story around it, and translate the feature in a way that makes sense before explaining it.
The first video became the foundation for a full product feature series.
Each followed the same process: define the user pain point, tell the story around it, and translate the feature in a way that makes sense before explaining it.
A clip from the second round of feature videos
A clip from the second round of feature videos
Reanimating the Cal UI to emphasise the phone-based feature
Reanimating the Cal UI to emphasise the phone-based feature
Tricky features
One of the trickier features was Phone-Based Booking - aimed at companies with older or less tech-savvy users, with the USP is that you can book a meeting via phone number rather than email.
The challenge? Most people watching the video do use email, so it’s a hard problem to try and make people relate to. We ran through several iterations to try and get it right — eventually landing on this UI animation (to the right) which shows the email field disappearing and making way for a shiny new phone number field.
One of the trickier features was Phone-Based Booking - aimed at companies with older or less tech-savvy users, with the USP is that you can book a meeting via phone number rather than email.
The challenge? Most people watching the video do use email, so it’s a hard problem to try and make people relate to. We ran through several iterations to try and get it right — eventually landing on this UI animation (to the right) which shows the email field disappearing and making way for a shiny new phone number field.
Wrapping up
What started small ended up setting the tone for a whole video series. With more budget, we could’ve expanded ‘the world’ a bit— added new protagonists, played with scenarios — but working on my own on these projects often means keeping things tight - a bit of creative thinking and a lot of multitasking.
The client was happy! It even got a nice little review on X (I didn't know people still said anything upbeat on X). And it led to more project enquiries on my end.
This was one of my favourite projects I’ve done. Working with Cal was smooth, collaborative and fun - they had a clear vision but gave me the creative freedom to play around. It was this project that made me want to move from video production into product and UX - to be able to shape how the user interacts directly with the product, rather than just selling it to them!
What started small ended up setting the tone for a whole video series. With more budget, we could’ve expanded ‘the world’ a bit— added new protagonists, played with scenarios — but working on my own on these projects often means keeping things tight - a bit of creative thinking and a lot of multitasking.
The client was happy! It even got a nice little review on X (I didn't know people still said anything upbeat on X). And it led to more project enquiries on my end.
This was one of my favourite projects I’ve done. Working with Cal was smooth, collaborative and fun - they had a clear vision but gave me the creative freedom to play around. It was this project that made me want to move from video production into product and UX - to be able to shape how the user interacts directly with the product, rather than just selling it to them!
At least somebody liked it! - Review from a user on X
At least somebody liked it! - Review from a user on X
Sitemap
Follow
Let’s make something great
Whether you’re hiring or just curious, I’d love to hear from you.
© James McBreen 2025
Sitemap
Follow
Let’s make something great
Whether you’re hiring or just curious, I’d love to hear from you.
© James McBreen 2025
Follow
Sitemap
Let’s make something great
Whether you’re hiring or just curious, I’d love to hear from you.
© James McBreen 2025