bZx network Fair play

Brand
bZx
Timeframe
3 months
Zajno role
Concept, art direction, product design, UI, UX, animation, engineering
Full-cycle website development
Awards
Awwwards x 1
CSS x 4

Visualizing money: how we explained a complex financial product using animation

bZx is a fintech startup whose protocol powers decentralized margin trading, allowing safer lending, cheaper trading and more liquidity. Our task was to create a storytelling website that explained the technology with a significant dose of wow-factor . We did it with the help of visual metaphors and dozens of illustrations that smoothly came to life owing to SVG animations , HTML/CSS and GSAP.

View Website

Turning illustrations into the underlying structure of the story told through the website

In order to create ultimate storytelling, we challenged ourselves to discover a metaphor that could be flexible enough to illustrate all necessary website components, uniting them into a single story. Our goal was to make a set of animated illustrations that would explain margin trading and the benefits of decentralization. Together these illustrations formed a monumental, complex mechanism, seamlessly expressed across all elements of the website.

Not just good looks, but also great performance and super responsiveness

In this project graphics was the core. The use of visual metaphors allowed us to make the illustrated processes easy to understand, integrating them all in a clear narrative chain that smoothly came to life owing to programmed animations. Since the animations were highly detailed each containing over 50 tweens, we focused on increasing efficiency. We used in-view sections animations that work only when they are scrolled into view and got a great performance score ~95/100 in Chrome Developer Tools and Lighthouse.

“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

Result

What is the result?

Website Of The Day on CSS on September 26, 2018
Brilliant performance with the score ~95/100 in Chrome Developer Tools and Lighthouse
Increased efficiency owing to in-view section animations
Maximized responsiveness using fluid-responsive layout
Got more adept at creating highly-detailed JS animations with up to 66 Tweens in each single animation cycle
Won 1 trophy on Awwwards and 4 on CSS Design Awards