Pioneering the cross-chain loan design
How we evolved Balanced’s core feature to be accessible to a wider audience.
Balanced is a decentralised finance (DeFi) app designed for ease of use. Home to the Balanced Dollar stablecoin and an exchange, you can use it to borrow bnUSD against your crypto and trade on a diverse range of blockchains.
A trading interface is old hat. But when we created Balanced in 2020, design inspiration for a crypto loan was lacking. Our only reference points were apps like MakerDAO’s Oasis, which, frankly, were no help at all. Less than 1% of crypto investors used DeFi, and we didn’t blame them. DeFi apps were intimidating to use and forced people to think too hard about actions that put their money at risk.
Our final loan design used a simple slider and progressive onboarding approach. The sliders act like a calculator, so people can see the effect of their actions in advance. Read our case study to learn how we got there.
In the beginning, bnUSD only supported one collateral type on a single blockchain. In 2024, it was time to make the bnUSD loan cross-chain — without increasing the complexity.
If we could pull it off, we’d have a world-first design powered by an innovative technology stack.
Few apps offer cross-chain loans, and none have done them well.
We intended to make Balanced the first.
The challenge: design the simplest cross-chain loan experience
Balanced began its cross-chain journey at the end of 2023. Think of it like a small-town bank that starts opening branches in new countries. Each branch attracts local customers, introduces a new currency, and improves the bank’s cash flow. The more branches the bank opens, the more its customers benefit.
Every connection brings new cryptocurrencies to Balanced and makes it easier to meet people where they already are. And with bnUSD available on all connected chains, it’s more attractive for people to adopt as their stablecoin of choice.
You could already trade bnUSD cross-chain, but we had to make it easier for people to borrow.
The new interface would need to allow you to:
- Deposit collateral on any supported blockchain
- Borrow bnUSD, ideally with the option to receive it on any connected chain
The goal: keep it as simple as possible. We didn’t want to mess up the progressive onboarding flow or increase complexity. Both would remove focus from the actions you need to take – and the consequences those actions have.
Charting our course: competitor insights and design direction
Like when we first began in 2020, there were few competitors we could look to for inspiration. Most “cross-chain” apps only connect blockchains within their own ecosystem, or they only allow you to transact on one blockchain at a time, like Uniswap and PancakeSwap for Ethereum-based blockchains.
As for cross-chain loans, the options were few and the interfaces lacking. ThorSwap treats every interaction like a swap, regardless of whether it’s the right design pattern for the job. Kujira lacks focus and instead shows you every detail – whether you need it or not – so the content overwhelms rather than informs.
Others thought MakerDAO was the gold standard and copied without question. Its complex design and jargon repelled us over four years ago, but they were all too happy to make it their own.
It was clear that no one had even attempted to solve the cross-chain design. So, like before, it was up to us to pioneer the solution.
We revisited the Balanced loan design from scratch, but decided to keep the fundamentals intact. Rather than a redesign, we refined the foundations for cross-chain use.
To spare you a lengthy and complex read, what follows are a few core decisions we made during the design process.
Rethinking the relationship between assets and blockchains
The first thing we had to figure out was the relationship between the blockchains and the tokens. Which was the parent, and which the child?
We couldn’t set the blockchain at the top level of the app, as that would mean you could only use it on one chain at a time. Unlike most apps, you can use Balanced on every supported chain at once.
If we led with the chain for the loan feature, it would limit the range of collateral types presented. People shouldn’t have to click through every blockchain to assess their options.
But if you want to deposit collateral, what are you likely to think about first? The asset you want to deposit, or the chain it’s on? You can use an asset like ETH on many chains, so wouldn’t it be better to focus on the assets and then choose the chain?
On centralised exchanges, you don’t even see which blockchain a token uses until it’s time to send it. We wanted to provide a similar experience. What matters are the assets you want to use, not their technology stack, so we decided to put them front and centre.
We’d already handled the cross-chain trading experience the same way:
The main reason: to avoid the exhaustive list of token variations that plague 99% of crypto apps.
After we defined the asset as the parent and the blockchain as the child, it was time to work out how to present them.
The Collateral section already had an asset selector, so it only needed minor tweaks. As for the blockchain, space is a constant constraint, so we added the blockchain selector to a tray underneath each section.
The human eye can process images much faster than text, so after a few more iterations, we also added the logo for each asset and chain to make it easier to see and understand at a glance.
Managing multi-chain assets without the complexity
You can use Balanced on a single blockchain, or on many chains at once. Most collateral types are available on at least two. Collateral is isolated, which means each asset has its own risk profile – on every chain you use. We needed a way to handle this that didn’t make it more complex for single-chain users.
Our solution handles both states, and we were able to leverage the same design style for the wallet UI.
If you sign in on a single chain, or hold multi-chain assets on one chain, the collateral selector is simple. A single line entry shows the dollar value of your collateral versus the loan against it. To clarify which chain an asset is on, a mini version of the blockchain logo overlaps the token logo. This also helps to re-emphasise the token=parent, blockchain=child relationship.
When you hold the same asset across chains, you’ll see a multi-line breakdown instead. Multi-chain assets have a separate risk profile on each chain, so we couldn’t combine them. This is also why the wallet includes the total value of each asset, but the collateral selector does not.
Managing risk is important, so we also tried to make it clear when a position needs your attention. We explored a few options but found them difficult to scale in the code.
Risk variations for the collateral and blockchain selectors.
We like to view each piece of the UI as a module/feature in itself, so we’ll continue to iterate on this over time. For now, we present all values in red once the risk moves beyond the All collateral locked threshold.
Making a flexible experience for borrowers
After we finalised the Collateral section design, it was time to move on to the Loan section.
bnUSD is the only asset you can interact with, so the loan design was more straightforward. All it needed was the ability to support all connected blockchains.
Our initial goal was to keep things simple. If you deposited AVAX on Avalanche, you’d borrow bnUSD on Avalanche. But it wouldn’t be a true cross-chain experience if we restricted you to a single blockchain. To provide the best experience, we decided to make it as flexible as possible.
By default, you’ll still receive bnUSD on the same blockchain as your collateral. But you can also use the blockchain selector to borrow bnUSD on any chain you’re connected to.
But the Blockchain label used for the selector complicated matters. The collateral blockchain selector dictates which chain/wallet owns your position, while the loan blockchain selector only affects where you’ll receive or repay bnUSD. Using the same label for both could be confusing.
Variations are essential to get to the right outcome, and the microcontent is no different. Here are a few of the variations we tried:
For maximum clarity, we updated the label in the Loan section to Receive / repay on:. The selector also includes your bnUSD balance for each chain, so it’s easy to choose which one to use.
Onboarding without the overwhelm
Balanced’s loan experience is light on text and absent of tutorials. It uses a progressive onboarding flow to give you the information you need, as you need it.
We didn’t want to mess with that, and luckily, we didn’t need to change much.
If you’re not connected to the active blockchain in the Collateral section, you’ll see a prompt to sign in.
After you do, the collateral selector will reveal any assets available to deposit, so it’s easy to take action.
If you don’t hold any supported assets, you’ll see the full list of collateral types. Click on one, and if you’re connected to that chain, it’ll prompt you to add the asset to your wallet.
Let’s step back to that collateral list.
Before cross-chain loans, you had to sign in to see which collateral types Balanced supported – a remnant of when ICX was the only option.
But the product has changed, and if you can’t see the growing list of collateral types, there’s no incentive to take action.
So we added the ability to view all collateral types in the signed-out state. It includes the total collateral and loan for each asset, so it’s much easier for people to assess what’s on offer.
Multi-chain assets like ETH have a separate risk profile on each chain, so our design included the breakdown on each blockchain. The breakdown required back-end support which was not complete at the time of publishing, so we kept it simple in the interim:
Bringing the design to life with an interactive prototype
Interactive prototypes are a powerful way to market a product and onboard new users. Finance apps are high-friction, so they need to make people feel as comfortable as possible. Most don’t bother.
Crypto apps often hide core features behind a Connect Wallet button. And you’ll pay for your experimentation in transaction fees. But what if you could try a new app with zero money on the line? After you click around a Balanced prototype, you’ll be able to use the live app with confidence.
Our initial design work takes place at the conceptual level, but most of the time we design in code. It’s faster, more collaborative, and helps us feel things out on different devices. It allows us to use data that responds in real time, so we can refine the interactions in a dynamic setting. And because we use plain old HTML, CSS, and JavaScript, we know our designs are realistic before we work with developers on the final build.
The old Balanced prototype still focused on a single blockchain, so it was no longer an effective onboarding tool. As cross-chain loans would not be our last update, we decided to rewrite the code and refine the interface. It took several months, and had we known what we were signing ourselves up for, we probably wouldn’t have done it.
The modern styles are not yet available in the app, but they will be coming soon. Try out the prototype for yourself:
Before vs. after: from single-chain to cross-chain loans
Our goal was to evolve the loan UI – without making it more complex or ruining the progressive onboarding flow. The final design added cross-chain functionality, without being invasive about it.
To avoid overwhelm, it also needed to remain simple if you only use a single wallet or collateral type. Like the rest of the app, the new design helps you maintain focus by prioritising what’s most relevant to you.
The final design makes it easy to deposit collateral and receive/repay bnUSD via any supported chain. As far as we know, it’s the most flexible cross-chain stablecoin loan available.
If you find anything that tops it, we’d love to hear about it.
Get started with Balanced
Cross-chain loans are live, with support for collateral on a growing list of chains. If you’re DeFi-inclined, visit the Balanced app or learn more about cross-chain loans.
To learn more about the process behind the original Balanced design, read our case study:
PARROT9
And learn more about Balanced on the website:
