Simplifying the user experience for the most popular DeFi activity monitoring tool on Solana.

SonarWatch provides a complete overview of a wallet or public address on the Solana Blockchain. They led a series of fundraising back at Oct 2021. Ever since, they have added more helpful tools and features to provide more value to their existing customers and prospective ones alike.

Shortly after, they launched the $SONAR utility token with incentives like fees reduction and access to PRO features on the platform.

I got introduced to the team via Superteam, a Solana community of creators, so that we could collaborate on improving SonarWatch's user engagement by elevating the user experience.

The main goal for this project is to attempt increasing user engagement by elevating the user experience.

However, that wouldn't be easy when:

I couldn't find documented insights on their customers (personas, user behaviour patterns e.t.c).

It was my first time designing a DeFi app with a large user base ($8M transaction volume at Nov 2021). I wasn't sure of how to vizualize the data that these customers care about.

Designing a new Visual Language that would provide an aesthetic lift.

Adopted Competitive Analysis to determine customers mental models by studying alternative products and their design patterns.

Heuristic Evaluation to recommend design decisions that would improve overall usability.

Using Atomic Design, I was able theme the component library and in turn, the face of the platform

Here are the project highlights:

The previous version had some gaps when it came to displaying more data that customers care about.

The product nav links did not have an hierarchy to help users quickly scan and find the relevant pages or tools they need.

The wallet dropdown was quite confusing as to what actions to take.

The Data table could have less visual noise, cleaner expanded state for table rows, and more helpful empty states.

The wallet dropdown reveals all added wallet and an affordance to add a new one.

Simplified the search bar and added a search Icon for quick recognition, for the top Nav.

Overview Statistics: Included NFTs Net worth and maybe Farms Net worth cards in the top part of the Dashboard. One timeline feature can be used to adjust the information displayed on the cards. On the Net Worth card, I added an option to view NFTs.Data tables

The goal of the tool is to see your performance for the liquidity you provide to a token pool.

Personally, this was a difficult problem for me to attempt. Thankfully, this video from WhiteBoardCrypto helped me understand the concept a little better. The video also gave me an Idea to display the tool in two modes: Simple and Advanced.

This gives users, who just want to do a simple calculation, the affordance to do so.

A user gets worked up when there are a great number of inputs required to complete a task. The existing input fields layout takes a while to make sense of, due the number of fields on a row.

Input fields for Token One are revealed at first, as an attempt to reduce the cognitive load. Once done filling in your desired inputs, Token Two automatically reveals (as long as you fill in the Initial and final Price).

This does not mean that the Token One section will close though. This is so that a user can reference all information when interpreting the result.