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.

The 1st version of design

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.

The 2nd version of design

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.

The final version of design

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.)