As RoverX gets ready to roll out the custom price alerts feature, we break down how our design and product teams developed and finalized its UI design from scratch.

At RoverX, the development of UI design is a collaborative effort between our designers, product managers, and sometimes our front-end devs. Once our designers receive a brief from the PM, they come up with an initial UI and source feedback, then improve it over several iterations until the final design is agreed upon.

With the release of RoverX’s price alerts now immanent, we decided to break down the process of how we came up with the UI design for this novel feature. But first, some context.

RoverX custom price alerts: What & Why

Web3 is fairly passive in nature, and the lack of notifications and mobile services forces active NFT traders to spend hours on their computers lest they miss out on a profitable trading opportunity. To make NFT trading a more active affair, we decided to introduce alerts to our RoverX mobile app so that traders can receive important notifications on their phone.

This initially included alerts on NFTs received, NFTs sold, accepted offers, expired listings, and offers received. But we understand that for traders looking to get ahead of the curve, it’s not enough to be active; they must be pro-active. And to fulfill that need, we’re soon rolling out custom price alerts.

This feature will allow our users to set alerts on floor price changes of NFT collections. For instance, a user could set a custom alert to notify them when ‘Collection A’ reaches a floor price of 3 ETH, making it much easier for them to time their investments.

THE UI DESIGN PROCESS

The first functional design for custom price alerts featured a table which displayed collections, their floor price, and the alert price set by the user.

While this format was in keeping with our design system, it lacked visual appeal, didn’t provide enough information, and was slightly confusing. Also, this design was geared towards large screens and was not suitable for our mobile app. So it was time to iterate!

Iteration 1: Breaking the shape

The first thing our designers tried to improve the readability of alerts was to create individual cards for them. Each card contains the collection name, alert floor price, current floor price, and the date the alert was created along with buttons to edit and delete it.

As you can see, the card contains all the pertinent information, but still leaves a lot to be desired when it comes to readability. The design team added labels to indicate the relation between prices and tried out different sizes for the collections’ images.

However, we still weren’t happy with the end result, so we decided to iterate further.

Iteration 2: Visualizing the information

Our designers tried a few things to improve the presentation of the card’s information. They experimented with arrows to indicate how the alert FP relates to the current FP.

But the presence of extra blank space made these cards seem incomplete, and the addition of a label for the current FP made the visual hierarchy unclear.

A brief attempt to use dials resulted in an aesthetically pleasing but unintuitive UI which would also increase engineering complexity.

Iteration 3: Improving visualization

A breakthrough occurred when the design team decided to display the price information horizontally rather than vertically. The addition of a tapering color gradient above the axis indicated the dynamic nature of the price.

They then decided to push the alert price to the extreme right if it is above the current price, and to the extreme left if it is below it.

Iteration 4: Getting closer

To make the information even easier to grasp, the purple color gradient was replaced with green if the alert price was higher than the current FP, and with red if it was lower. The designers then experimented with different styles to indicate the price direction.

The designers then tried with different placements and styles for the edit and delete buttons, and even tried a kebab menu (discarded because it added an extra step for users).

Iteration 5: Final design (for now)

In the end, the date and edit/delete buttons were moved in line with the collection name, allowing the price information to grab immediate attention.

The final problem we encountered here was in maintaining the X-axis scale across cards due to the difference in values between the alert and current floor prices. To solve this, our designers decided to center the current floor price and use a single line with the color fading towards the end.

The final design features a clearly defined visual hierarchy of components to minimize any confusion users may have, with the card now divided into 2 sections:

• The 1st section contains the collection name, the date the alert was created, and the edit+delete buttons.

• The 2nd section contains the price information displayed in an intuitive and visually pleasing manner.

Having been approved by the product manager and facing no objection from the developers, this UI design is finalized for release. This is how the custom price alerts will look on RoverX’s web and phone apps:

But this isn’t the final final design. Our product team has always believed in getting user feedback to improve our app, and this philosophy extends to the UI design as well. So, once custom price alerts go live on the RoverX apps, we will be asking our users and highly involved community members for their opinions on the feature’s design, then use that feedback to make improvements and changes as needed.