UtilityX

UtilityX

Blockchain UI/UX Agile

UtilityX, a crypto marketplace, took us on a transformative journey to streamline and unify their array of crypto-related products into a cohesive platform. Overcoming challenges of fragmentation and complexity, we employed agile methodologies and innovative design strategies to deliver a seamless user experience.

UtilityX is the Automated Market Maker (AMM) built for the UX Network. It is a decentralized marketplace that allows users to trade securely and with minimum friction with quick settlements and no blockchain fees.

Since 2019 the founders of UtilityX have been developing a number of crypto-related products that we had the pleasure to agregate in a cohesive platform, UtilityX. These products included Trade (a tool for swap operations and buying or funding with liquidity), Liquidity Pools (dahboards of standard pools and UFX pairs), Stake, Bridge and several applications that allowed the purchase of crypto resources.

In the past, these product and services were marketed and developed as independent entities with lots of friction between them, complex user flows and difficult language for novice users.

Home-UtilityX

Agregating a multiservice operation in one platform

The first challenge in this project was to understand how all these services were relevant to each other and how could we organise them so that users could navigate them seamlessly. The goal was to fit them all under one application. For that, we started by mapping each feature, then listing the eventual overlaps and common denominators between each product.

Always start by simplifying user flows

Our next challenge was to reduce the number of screens, clicks and overall time spent per transaction in each service. We decomposed every user flow, analsyed the amount of logic, screens and clicks necessary to complete each journey. We then grouped as much of the user paths we could, and were able to reduce every transaction duration by 80%

One design to rule them all

After the organization and trimming processes, we needed to produce a visual solution that could fit each service. We extracted the main components that were being used across all products and standardized them in a Design System (buttons, headers, text, panes, alerts, badges, dropdowns, inputs, etc.) that became a new source of truth for the developer's team. This allowed us to rewrite most of the UI/UX of each service and blend them together in a solution that now feels naturally consistent and frictionless.

Embracing agile, a key for refactoring products

Even if our Design System served as the main blueprint for this almost new application, refactoring that many products into one without the proper agile practices can still be hard. That's why we resorted to 3 additional strategies :

  • Documentation: we documented the purpose of every single component and its code architecture. This allowed every component to be reused throughout the softwares's repository.
  • Sprints: we organized sprints via multiple Kanban boards that included thoroughly scheduled tasks and a backlog of work, accessible by every party involved.
  • Standups: by organizing standups we were able to share code, progress and collected daily insights of the project's health.

The journey with UtilityX has been one of transformation and innovation. From disparate crypto-related products to a cohesive and user-friendly platform, our team was able to simplify and unify UtilityX's offerings. By understanding the relevance of each service to the others and organizing them we were able to help shipping a truly successful product.

Stake-UtilityX

Liquidity-Pools-UtilityX

Company

Resources

Neurotic