Visualizing Money

A firm that offers decentralized margin trading bZx requested us to create a website for them. This is a story of how it was.

We embrace challenges here at Zajno. Although everyone says it, we genuinely believe it. If you have a difficult challenge to tackle, you have to try out new ideas, and as you explore new concepts, you advance. Perhaps you can attribute this to our intrinsic curiosity. And when it occurs, we enjoy it.

For precisely this reason, we were quite pleased when the employees at bZx contacted us and requested that we create their website. bZx is a company that makes some rather complicated financial products more approachable. The secret to removing obstacles to understanding their goods is their website.

What is bZx?

It's a firm that focuses on decentralized margin trading. Yes, we must admit that many of us were first perplexed about what exactly this meant at the beginning of the process. But we weren't discouraged; if working on this project required going through the entire learning process from "what?" to "exactly!" then that was okay with us.

Forewarning: Margin trading is identical to other forms of trading, except that the money you use to trade is borrowed. You borrow the money and use it to try to make money before you have to repay.

Normally, this loan would be provided by a sizable financial institution, somewhat akin to a bank, which gives you money on behalf of someone else. Finding a mechanism to borrow money (or another tradeable asset, such as Bitcoins) straight from its true owner is known as decentralized margin trading. And bZx is centered around just that.

The important component, in this case, is a protocol the developers created that enables any exchange—the significant financial institution we previously mentioned—to permit decentralized trading. This implies that rather than managing the money being given out themselves, they only connect the lender and borrower confidentially and allow them to conduct business directly.

What benefits does this have? Well, security comes first. When an exchange handles funds on its own, it puts itself at risk of cyberattack. It is safer to spread out your money's storage than to store it all in one huge vault.

The loan cost is lower since there is less work for the exchange to complete. Finally, decentralized exchanges can provide traders with more of the "liquidity" they need to trade by connecting them with more financing sources.

Hey, take a deep breath. Yes, we also found that to be difficult. The following step included turning this information into a clear and lovely visual metaphor.

Design

However, bZx wanted a colorful website more than any ordinary narrative (many people already have this). Additionally, they intended this site to be much more impressive than similar ones in the sector. As a result, we decided to produce a meticulously planned series of incredibly complex animated images, each serving as a connection in a distinct story chain.

We jumped right into the design work after substantial research and prototyping to work up an appetite. The crucial question we had to address was which metaphor we might use to tie the site's various components together. After considerable chin-rubbing, we settled on the coin and pipeline metaphor. The first stands for money (obviously), while the second for the trading and lending procedures. Simple, yes?

The website's initial design seemed appealing, yet there was a gap. The metaphor we had picked didn't exactly work out since it was too simple to convey all the essential details. Additionally, even though the aesthetic result was appealing, it fell short of the impact we were going for. We then returned to our chins and gave them a bit more rub.

This chin-rubbing and the thinking accompanying it happened to be occurring in the south of Spain, where our team had temporarily relocated. And so, as we took in the breathtaking, rocky vistas from our rental home one morning, something in the back of our collective minds finally made sense.

We concluded that the issue wasn't with the currency or pipeline; rather, they simply needed to be placed in a more significant context. When we added mountains as a backdrop, the pipes magically transformed into ropeways, offering not just transportation but also fresh perspectives, much like bZx, which supports a complete range of margin trading features.

However, the thing about mountain air is that it can both cleanse the mind and, on occasion, slightly cloud one's judgment. And while our new design accomplished many of our goals, it was also somewhat too Blade Runner when we wanted a bit more Indiana Jones.

Then, after arriving back in the big city, we created the website's third and final iteration (third time's a charm, right?) This time, we made a brand-new, much larger graphic that was so enormous that it ended up being the site. We maintained the central metaphor we had developed at first and realized that it needed to be placed in a meaningful framework, but we now made this context more technical.

Finally, we got it: bZx was a massive, intricate mechanism perfectly articulated across all website components and communicated the entire story of the business.

Development

However, a website is more than simply a well-thought-out concept. Peel back the layers, and the technical aspects are also rather fascinating. The choices taken here for this project are comprised of...

Vector Graphics is the only option

Because this project uses a responsive style, using vector graphics ensures that pictures maintain flawless quality no matter their size. By making this choice, we could also control every illustration detail using JS and reduce file sizes in contrast to PNGs.

"We made it our mission to eliminate low-quality stuff fully. That entailed no PNGs and no GIFs."

Sofy, a digital artist at Zajno

Animation ThroughSVG+JS Approach Only

Programmable animations outperform their GIF/video counterparts in every way; they consume less memory, making them run quicker and more consistently, and vector graphics ensure that they never lose quality. Because of the ability to control low-level animations, which was crucial to us in this project due to the sheer volume of details needed to be animated, JS is superior to CSS. Additionally, continuing with SVG+JS enables you to include some interaction. The strategy will undoubtedly be used again in the future!

"I learned a lot from this work along the road in addition to simply enjoying it."

Andrew, a front-end developer at Zajno

Requiring extreme responsiveness

In the year 2018, a bewildering variety of gadgets with various resolutions were used. And you can't set breakpoints for every one of them. Therefore, using an ideally responsive layout is the only approach to make a website seem nice on any device – to make it fluid. We achieved this by employing a universal breakpoint for all desktop displays, allowing the website to adapt fluidly to any available area. Since we've been considering trying this kind of absolute responsiveness for a while, this is the first time we've done it. Therefore, we are delighted to have completed this job successfully.

"I must admit that the outcome rather enthralls me."

Ivan, CTO at Zajno

Challenges

This project entailed a lot of firsts for us. This required overcoming quite a few obstacles along the way, but we grew more assertive with each one. A few of them were:

Solving an SVG IDs conflict

It might be challenging to integrate all the SVGs exported from Sketch into a single HTML file, especially if the website has hundreds of SVGs. The time-consuming but necessary fix was to hand fix each SVG.

Bettering SVG Adaptation for JS Animation

It all boils down to reorganizing the layers. It might be challenging to anticipate how all the layers will need to be arranged while generating graphics to eventually produce a JS animation of all the vital parts. It just takes time, dedication, experience, and close collaboration between artists and developers to get around this so that graphics are delivered in a way that makes them simple to animate in JS.

Using up to 66 Tweens to Create Single Animation Cycles

Most of the website's animations are incredibly intricate, with an average of around 50 tweens per animation. It takes a lot of work to manually combine all of those tweens into a single animation cycle, but the outcome is beneficial.

"We had a lot of fun while tweening! Live long, TweenMax!"

Artem, front-end developer at Zajno

Utilizing In-View Section Animations solely

We designed the website so that the animations would only activate when they were scrolled into view to enhance the overall system's efficiency.

Transferring to a Fluid-Responsive Layout

For all desktop displays, we created a scaling effect that prevents quality loss by using a common breakpoint. We required it to be based on a specific container, not a parent node or the entire viewport, so we couldn't just use percentages or VW/VH as we could typically. For this reason, we nearly exclusively used rem units for website components.

Managing the Rearrangement of the Layout

We didn't need to develop many breakpoints because we used fluid-responsive layouts rather than the more common adaptive ones. However, we did need to make at least two more, one each for tablet and mobile devices. It was complicated to rearrange the pieces so that the logic was evident and the website looked beautiful and consistent in any resolution, given the intricacy of the structures presented on the website.

Results

Task accomplished

We completed all the responsibilities assigned to us by building a website that tells a captivating visual tale; we utilized animation and connected everything with a single theme. We created the site's whole design, which amazes everyone who uses it. Haven't used it yet? High time to try!

Stunning Performance

If we do say so ourselves, the website we created not only looks fantastic but it also functions well. It received a 95/100 rating after thoroughly auditing it using Chrome Developer Tools and Lighthouse.

Sharpened Skills

Through this project, we learned new things and honed our existing talents. We are now more skilled in developing completely responsive layouts, JS animations, and handling many vector images.

To wrap up, we feel compelled to provide our client's final assessment:

"Good job, gentlemen. I'm completely astounded! I believe we now have the greatest website in the sector. This job was truly of the highest caliber. We're happy we chose your company."

Kyle Kistner, CVO and Operations Lead at bZx