Wilfried Rouquet | DeFi Product Designer

Xdefi

Creating a web app from scratch

Xdefi a is crosschain wallet based on a web extension. My work here was to create a web app in order to manage portfolio, NFTs and do swaps

First, framing the problematic

First step is to clarify what we are trying to achieve, and get on the same line with the client requirement. Do we have the same product in mind ? Do we see the same problematic to solve ?

Benchmark

I benchmarked the competition. The goal is to see the features the competition decided to use, how they solved the main problems, the architecture and navigation

Design decision tree

Here is a tool that is not mandatory at all but that can be useful when there is a lot of possibilities and imbrication between the different design solution. The goal is to really lay down what are the choices we have, and decide what could be the best architecture

Wireframe proposals

From all the possibilities we found out, we can define the best ones and compare them more concretly by doing quick wireframing

Wireframe selection

Once we selected the best proposal with the team, we can dig a bit more into it. Also we can quickly test if the solution also make sense for our mobile version or if there are some obvious roadblocks

Sitemap

A sitemap is a simplified representation of the navigation on the application and the main data required. It’s very similar to creating a wireframe, but we’re more focused on if the « logical » connexion are OK. Do I have all the data I need for this page ? Where can I go from here ? What is the flow ?

Designing

Time to design ! Here are some example of screens for navigation, portfolio, and swap. The designs here have been built with the graphic designer from the project

Users tests

Once we are happy with a first version of the design, we can create an interactive prototype and do a simple user testing. On this test we had a 5 seconds tests, navigational and understanding tasks, and finally an usability scale test

Key takeaway

Insights I learned on this project

Inherent complexity from web3

Web 3 has some inherent constraints and complexity and it’s a bit difficult to organize correctly the data, the architecture and have easy to use features

Lay down the architecture and take conscious decisions

It can be useful to lay down all this information in order to be able to take explicit decision rather than only intuitive ones

Test our core product and features

We often believe people will understand things as us but it's important to check what is the understanding of users and how easy the onboarding is

Drop me a message

wilfried@rouquet.io

I look forward to hear about your project !

Substack