A Webby-winning fintech site, with a catch. The film it was built around could not autoplay on the phones of 2016. So much of the work is realising a designer’s vision when the web says no. Here that was almost impossible. Only almost.
Doberman and ManVsMachine made a bold piece of 3D brand film for Wealthsimple. Our job was to put it on the web, on every device, and make it feel instant.
In 2016 the phones people actually carried, Android especially, would not autoplay video. The animation at the heart of the site would not play.
So we stopped using video. We rendered each animation to a sprite sheet, a grid of frames, and drew it onto a canvas one frame at a time. A sprite plays anywhere a browser can draw an image, which in 2016 meant everywhere.
The flipping coin was really a vault dial. It turned frame by frame as you scrolled, like cracking a safe. None of it was the easy path. It was the one that ran on every phone people actually carried.
“We have been really impressed by your abilities and loved working with you.”
Getting it to play was only half the work. The rest was control. We wrote our own scroll engine: it pins each section and starts its animation a moment before it locks, so nothing janks. Every scene runs two states, a main pass and a rest, so the page keeps breathing instead of freezing the moment you stop. It stays static and fast, and steps back to something simpler on a small screen.
The difference lives in details most people never notice.
The site won a Webby Award in 2017 for Best Financial Services and Banking Website, Wealthsimple’s second year running. The not-giving-up is the point. When the obvious path was blocked, we found another and shipped it.
BetaKit credited the build to Doberman, ManVsMachine and us. It is still the kind of work fintechs come to us for, a financial product built with that much care.
“We basically tore up the design even after we won a Webby last year, and built it again.”
The Webby-winning website for Wealthsimple, a Canadian fintech changing the face of finance, built with Doberman. Visit Wealthsimple.
Want to know more about this project or how we work, contact Jon.
Tell us about your product. We will tell you how we would shape, design and build it.
