context
fintech that wanted personality
Adfin hired me on contract because they liked the personality in my portfolio. I had no fintech experience, which honestly surprised me, but that was the point: they wanted to make their web app feel more fun and human.
Adfin is a B2B SaaS web app that businesses use in the browser. As a contractor, I work across product and product-adjacent work.
process
learning a dense product, fast
My first project was a motion video for the new website. They threw me straight into their system, which was very dense.
A lot of my time was sessions understanding the product, with the business side and with engineering. The website was being reworked at the same time, so the file kept changing and I had to keep up.
The product file, zoomed out. The avatars show how many people were working in it at once.
Starting with storyboards
Because this was an animation, not a product screen, I started by storyboarding by hand. There were a lot of versions back and forth with the team, and then I started animating parts of it from the storyboards.
Scrolling through the storyboard file: hand-drawn frames, scripts and many logo animation drafts.
Motion, but still product work
My own working file for the video.
A motion graphic doesn’t mean it wasn’t product work. Most of my time went into understanding the product.
I went through all of the engineers’ files and iterations and made sense of them the way someone who’d been there much longer would. Then I pulled out the pieces of UI that mattered most, or that people could understand visually, and mixed and matched them into my flow. Then I iterated as the team gave feedback.
Using AI to shape the story
At one point we used Claude to prototype. The founder had a story he wanted to tell, so he and I put it into Claude with my storyboards and animations, and it refined the story.
This is what it made. The motion was honestly not good, but the storytelling was. So I kept the story and built the motion myself.
Getting there, draft by draft
First draft.
Second draft.
Third draft.
These are three of the seven drafts. Each one came out of feedback with the founder and the team, and you can see the story and the motion getting tighter.
solution
making a dense product simple
Coming in with no fintech background helped: if I could understand it, so could a first-time visitor. I wanted it to be clear, but also cool enough for younger audiences and businesses that want to feel more current.
Start with the mess: piles of invoices.
Agents sort customers into groups.
Zoom into one customer and one email.
End on the money landing.
The final video
The video.
Previously live in the hero of adfin.com.
Seven iterations in total, lots of feedback, and some late nights and weekends, because the website had to go out within about two weeks. The product screens are the Adfin team’s designs; I chose the moments, and designed and animated the video.