Blockchain Experience: A Tour of the Liquality Design System

Studio Little Nice Things is a UX & Design Boutique in the heart of Amsterdam. We research, design and develop meaningful digital products for AI, blockchain, sustainability and healthcare startups.

Liquality — a ConsenSys venture — offers a secure way to swap cryptocurrency (For example: BTC, ETH and DAI) between 2 remote parties directly from users’ wallets, while maintaining control over private keys. Liquality also has a reference implementation of a suite of cutting edge technologies, including a cross-chain atomic swap protocol, the chain abstraction layer, and other enabling chain improvements.

Liquality users not only save on unnecessary fees, but also remove counterparty, settlement and custodial risk. By enabling a 100% disintermediated swap, Liquality is demonstrating the benefits of removing the middleman and creating open liquidity networks and is pursuing eventually a more open and equitable future where anyone can access the global digital economy in a free, secure, and efficient way.

Little Nice Things has been honoured to collaborate with Liquality on developing the design of the Liquality product for its Alpha release. We’ve been a partner in taking the Liquality UX design from wireframe to digital reality. The goal of the collaboration was to unify interaction design and initial brand in a delightful UI design, a style guide and pattern library for primary task flows, and a white label version of the common components.

Blockchain is complicated. We work smart to make it simple. Let’s take a walk through the Liquality design…

To facilitate optimum collaboration in a 100% remote work environment, we decided to use the Figma platform. Doing so allowed us to craft a design system iteratively, change elements rapidly, and add improvements during user testing.

‘Design system’ refers to cards, chromatic scene, typography and all the other design elements used in the Alpha version with a focus on system extendibility. Having such system allows to seamlessly introduce new elements and changes in the future, allowing the team to efficiently produce a consistent brand experience.

Figma allows to create Nested components, and it is one of the primary tools for creating design systems. On Figma, you create hierarchies based on different types of components.

For example, master Components provide a reason to use Figma for efficiency and consistency. All the changes made on the Master component will be carried on to the implemented instances. Yet, if desired, instances can also be changed individually.

Another reason to use components is for the easy swap of elements and states. With a logical naming system any team member can easily find the instance to apply the change.

The design system created in the intuitive Figma application provided great flexibility, which was especially important for the cross-functional collaboration needs of the Liquality team. It allowed the entire team — from PM to Dev to Designer — to keep track and participate in design updates and functional specs. The ability to provide access is particularly interesting in the open source community, allowing for extension to future collaborators.

Different approaches were explored with the Liquality team to see where and how visuals could be used to create a unique user experience. The coin pair a user is trading is highlighted and integrated in the graphical element of the logo that represents liquidity between assets. We used the brand colours to give contrast between the background and the main UI, and also in a functional manner to give prominence to the elements where the user would need to click to move forward. A progress bar on top guided the user in which step they were on it.

  1. Interface exploration

Here is an exploration of the trajectory of the Liquality interface for Trade Set-ups as it was designing iteratively, from the wireframe to the final UI while exploring emphasis on different elements

2. Trade Set-up and Initiation

Simply displaying the trading pair and interaction follows the Shapeshift standard to select coins. The wallet signals connection status. The challenge in this instance was capturing the counterparty addresses needed for the atomic swap to execute. To enhance the understanding of sending and receiving flows visually, we implemented visual cues such as the arrow down from ETH to the counterparty’s ETH wallet address, and the arrow up from the Counterparty’s BTC wallet address to the users BTC wallet.

3. Waiting screens: Making the informative entertaining

A common UX misgiving regarding blockchain-integrated interfaces is that users do not feel in control of their interaction due to a lack of information about what’s going on beneath the surface. Transactions can take time, early iterations of software can go awry, and the result is a creeping sense of distrust when engaging with early blockchain products.

In the animation above, a waiting screen for the transaction signature, the user is guided through the waiting period not just with updates about the progress of the transaction and trade reference information, but also a sleeping feline friend whose perpetual activity is a soothing feature. Standing in the waiting room is a lot easier with progress updates and a friend!

The challenge here was to furnish the progress bar with relevant and accurate information. For example, when waiting for the counterparty to sign the transaction, progress is in the hands of the third party, and human error can be a powerful factor.

4. Claiming Funds

When we have a considerable array of pages and steps to be taken, we may also deal with possible frustration from our users. Interruptions, offer expiration, and waiting time are all surely deterrents to novice users. To reduce frustration and bring a more delightful waiting experience, we decided to use humor and a cute character as a way to keep our users amused while waiting for their transaction.

When conducting user tests with the prototype, one of the interesting findings we had as designers on this collaboration was that customer success depended on details regarding the trading that could create friction and bring distrust to the platform.

As a result, this project showcases us the importance of user testing, highlighting that design is not about questions or answers, it is a path of solutions guided with user-centricism for the whole process and represented visually. Ultimately, in these early stages, design for high technology companies and their early adopters requires a higher level of fidelity in text and possible markups if the service is new and disruptive. Those details were important to the user experience. The challenge inherent is that this intention can sometimes be blurred due to the speed in which we want to deliver a delightful experience with design.

Visit Liquality.io to learn more about how to swap or enable secure crypto-transactions on your site. You can already see how Liquality will shape the future of liquidity and equality. We were grateful to dedicate our time and love to this project!

In collaboration with Thessy Mehrain and respective Liquality team.

If you are interested in delightful experiences and beautifully crafted design for your project get in touch:

studio@littlenicethings.com
www.littlenicethings.com

Studio Little Nice Things

Written by

UX Boutique in the Heart of Amsterdam. We research, design & develop meaningful digital products for AI, Blockchain, Sustainable & Healthcare startups.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade