Visualizing money: how we explained a complex financial product using animation
bZx, a decentralized margin trading startup, asked us to build them a website. Here’s what happened.
At Zajno, we like challenges. We know everyone says that — but we really do. Perhaps you can put it down to our innate curiosity: when you’ve got a tricky problem to solve, you have to try out new ideas, and when you try out new ideas, you learn and move forward. And we like it when that happens.
For just this reason, we got pretty excited when guys at bZx got in touch to ask us to design and build a website for them. You see, bZx is a business that takes some pretty complex financial instruments, and makes them more accessible. And their website was to play a key role in helping to break down the barriers to understanding their product.
So, what exactly does bZx do?
Well, it’s a startup that specializes in decentralized margin trading. Yep — we have to admit that back at the start of this process, many of us here at Zajno were also a little stumped as to just what this really meant. But we weren’t put off: if this project meant completing a full learning cycle, from ‘huh?’ to ‘aha!’, then that was fine by us.
Spoiler alert: margin trading is just like any other kind of trading, except that the funds you’re trading with are borrowed: you take out a loan and then try to make money with it before you have to pay it back.
Traditionally, this loan would come from some big financial entity, a bit like a bank, that is essentially lending you someone else’s money on their behalf. Decentralized margin trading means finding a way to borrow money (or some other tradable thing, such as Bitcoins) directly from its real owner. And that is what bZx is all about.
The key element here is a protocol the guys developed that lets any exchange — that’s the big financial entity we mentioned before — facilitate decentralized trading. This means that instead of them handling the funds being lent out themselves, they simply put lender and borrower securely in touch with each other and let them transact directly.
What are the advantages of this? Well firstly, there’s security: when an exchange holds funds itself, it can become a target for attack. Storing funds in many decentralized locations keeps them safer than putting them all in one big vault.
Then there’s cost: because the exchange has less to do, lending is cheaper. And finally, because decentralized exchanges can put traders in touch with more funding sources, they can equip them with more of the ‘liquidity’ they need to trade with.
Deep breath. Yes: that wasn’t easy for us either. The next part was to translate all this into a simple, beautiful visual metaphor.
Design
But bZx didn’t just want any old storytelling, illustrative website (lots of people already have that). They also wanted a significant dose of wow-factor: this should be a site to match or better those already out there in the industry. And so it was that we decided to create a carefully-composed sequence of highly-detailed animated illustrations, each forming a link in a clear narrative chain.
After working up an appetite with a hefty round of research and prototyping, we got stuck into the design work with real gusto. The key question we needed to answer was which single metaphor we could use to unite all the different elements of the site: and after much rubbing of chins, we came up with the idea of a coin and pipeline. The first represents money (obvs), while the second stands for the processes of trading and lending. Simple, right?
The first version of the site looked nice — but something was missing. The metaphor we’d chosen didn’t quite go the distance: it was too minimalistic to illustrate all the necessary components. And while the visual effect was pleasing, it didn’t quite have the impact we were aiming for. So we went back to our chins, and rubbed them a little more.
It just so happened that this chin-rubbing — and the thinking that went on alongside it — was taking place in the south of Spain, where our team had temporarily relocated. And so it was that as we gazed out one morning at the stunning, rugged views from our rental house, something in the back of our collective mind clicked.
The problem, we realized, was not with the coin and pipeline per se — they just needed to be put into a more meaningful context. We added a background of mountains, and suddenly, the pipes became ropeways: something that not only transport, but which also offer new viewpoints and perspectives — just like bZx, which facilitates a full range of margin trading functionality, including short and leveraged positions.
But here’s the thing about mountain air: it can clear the mind, or sometimes, it can also go to your head a little. And while our new design was beautiful, and did much of what we were looking for, it was also just a touch too Indiana Jones, when what we needed was a little more Blade Runner.
Then, returning to the big city, we made a third and final version of the site (third time’s a charm, right?) This time, we created a new, even larger illustration — large enough that it actually became the site. We kept the core metaphor we’d come up with at the beginning, and retained the insight that this needed to be put into a meaningful context — but now, we made this context more technological.
And so finally we had it: bZx as a monumental, complex mechanism, seamlessly expressed across all elements of the website, which together now told the full story of the company.
Development
But a website is more than just a thoughtfully-conceived idea. Peel away the skin, and the inside parts — the technical stuff — are also rather interesting. In the case of this project, decisions made here included…
Only using Vector Graphics
Using vector graphics means images always retain perfect quality, regardless of their size — essential for us in this project because of its use of responsive layout. This decision also meant we could manage every single illustrative detail using JS, as well as reducing file sizes in comparison to PNGs.
“We set ourselves the goal of completely shutting the door on ‘low-quality content’. That meant no GIFs and no PNGs.”
Sofy, digital artist at Zajno
(Actually, a very few PNGs did sneak into the website in the end, in the form of the team members’ photos. But we applied a cool effect that makes these blend in pretty seamlessly.)
Taking an SVG+JS Only Approach in Animation
Programmed animations just run rings around their GIF/video brethren; they take up less space, which means they run faster and more reliably, and vector graphics mean they never lose quality. In its turn, JS is better than CSS because it enables low-level animation management — essential to us in this project due to a large number of details that needed to be animated. On top of all this, sticking to SVG+JS lets you build in some interactivity. We’ll definitely be returning to the approach in future!
“I didn’t just enjoy this job — it really taught me some new things along the way.”
Andrew, front-end developer at Zajno
Insisting on Super-responsiveness
It’s 2k18, and people are using a dizzying array of devices — all with different resolutions. And you can’t create breakpoints for them all. So, the only way to make a website look good on any device — to make it fluid — is to use an ultimately responsive layout. We did this by using a common breakpoint for all desktop screens, so that the website flows smoothly into whatever space it’s given.
“I’ve got to say that I’m pretty captivated by the result.”
Ivan, CTO at Zajno.
(It’s the first time we’ve implemented this sort of absolute responsiveness, and, truth is, we’ve had it on our minds for a while to give this a go. So we’re beyond delighted to have brought this project to a successful conclusion.)
Challenges
For us at Zajno, this project involved a whole bunch of firsts. This meant facing down a fair few challenges along the way — but, with each one, we became stronger. Some of them included:
Overcoming an SVG IDs Conflict
When exporting SVGs from Sketch, it’s a bit challenging to combine them all in a single HTML file — especially when the website consists of dozens of SVGs. The solution was to manually fix each SVG — time consuming, but essential.
Perfecting SVG Adaptation for JS Animation
This all comes down to layer reorganization. When creating illustrations, it’s hard to foresee how all the layers will need to be organized in order to later create a JS animation of all the necessary elements. Overcoming this is just a matter of time, effort, and practice, as well as creating a close symbiosis between artists and developers so that visuals arrive in a form that allows them to be easily animated in JS.
Creating Single Animation Cycles with up to 66 Tweens
Most of the animations in the website are highly detailed, typically containing over 50 tweens each. Manually putting all those tweens together into a single animation cycle is a pretty painstaking job — but the results are well worth it.
“We spent some very happy hours tweening! Long live TweenMax!”
Artem, front-end developer at Zajno
Using only In-View Section Animations
To increase the efficiency of the whole system we built the website in such a way that the animations would work only when they are scrolled into view.
Moving to a Fluid-Responsive Layout
We used a common breakpoint for all desktop screens to create a scale effect that eliminates all quality loss. But we couldn’t just use percentages or VW/VH — as we might usually — because we needed it to be based on a particular container, but not a parent node or the entire viewport. That’s why we used rem units for almost all website elements.
Handling Layout Rearrangement
Because we used fluid-responsive layouts instead of the usual adaptive ones, we didn’t have to create lots of breakpoints. But we did still have to create at least two more: for tablet and mobile screens. Considering the complexity of the structures illustrated in the website, it was particularly challenging to rearrange the elements so that the logic was clear and the website looked good and consistent in any resolution.
Results
Mission Complete
We accomplished all the tasks set for us by our client: we created a truly storytelling website, united by a single theme, that tells a compelling visual story using animation. The look and feel of the site are all our own, and it wows all who come in contact with it.
Great Performance
The site we built not only looks pretty great — it also works darn well (if we do say so ourselves!) We subjected it to a comprehensive audit using Chrome Developer Tools and Lighthouse and it scored ~95/100.
Skills Honed
This project taught us new things and sharpened skills we already had. It has made us more adept at creating fully responsive layouts and JS animations, and at working with tons of vector graphics.
Just to round things off, we can’t resist sharing our client’s final verdict:
“Great work guys. I’m really blown away! In my estimation we have possibly the best website in the industry now. This was some serious world class work. We’re glad we decided to go with you.”
Kyle Kistner, CVO and Operations Lead at bZx.
Update: bZx has won Website of the Day on CSSDA and an Honorable Mention on Awwwards!
If you liked this, click 👏 so other people will see this here on Medium.
