bZx network Fair play

bZx network Fair play

  • Brand


  • Timeframe

    3 months

  • 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


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


Awards & Recognitions

  • CSS Design

    Website Of The Day

  • CSS Design


  • Awwwards

    Honorable Mention

  • CSS Design

    UI Design

  • CSS Design

    UX Design


Have a project for us?

Let's Collaborate
Keep Scrolling