Brief: Design for an ETH2 staking solution on top of Argent, that is fast and simple to use so that users with less time, knowledge or skills can join from the beginning.

Note: This project is an unsolicited design. I was in no way paid, supported or supervised by the Argent team.

Problem

Staking is coming to Ethereum soon but it’s only for technical users and requires a large amount of ether. Argent is one of the go-to wallets for “beginner” users and could bridge the gap.

Goals

  • A prototype that shows how an ETH2 staking interface flows like on Argent.
  • Design should be on-brand both style and UX-wise.
  • Users should be able to stake in just a few clicks.

Research

To get a more thorough understanding of the space and to gather a sufficient amount of data, I start the project by using secondary research developed by some of the most trustworthy agents on the industry. One of the most insightful reports is Consensys’ Ethereum 2.0 Staking Ecosystem Report which will prove invaluable when combined with my own research.

Another useful way to understand the scope of the problem is to analyse competition and their proposals. Rocket Pool has been working in the space for over 2 years and have done great progress in simplifying user onboarding and have even run a successful beta. Other good examples to inspect are Attestant, for their novel approach and depth of information, or NodeFactory for their dashboard visuals.

Online Survey

User survey findings

A user survey is the chosen method to better understand users problems because in this industry privacy is paramount and very few users want to expose their identities online. While interviewing potential users in-depth could have provided a good insight, managing to pinpoint the needs of a larger (30+) user base gives me a broader scope.

97% of respondents with a wide range of technical know-how are interested in staking be it with managed validators or through a staking pool and their biggest barriers are split between security, retrievability and simplicity. All potential users are interested in a hands-off experience but with a dashboard to see different network information.

User needs

“Simple and secure.”
“Would enjoy a 3-click gateway.”
“Easily withdraw my staked eth.”
“Ease of use for a non-technical individual.”
“Just a clean dashboard would be awesome.”

Research findings through User Personas

User Personas

Analysing the user survey I conducted and combining it with the secondary research I previously did, this helps me in defining 3 different user personas with their own fears and hopes, that will provide with the foundation for the main features design of this project.

Ideation

User Flows

To create a seamless user flow while adding the design into the existing app I trying following the Argent app’s screen and CTA flow so that the Staking design feels real and integrated, almost as if I was using a stencil.

One of the trickier parts of design however, is making sure that all possible states of staking (staking, waiting, syncing, not staking…) are taken into account and added to the design. The user flow is also the place where the information that should be present in a simple staking dashboard starts taking form.

User flow showing all potential actions users might take.

Sketch

Sketch of the main screens composition

Once the new screens structure and content is clear, the next step I take is to start sketching. Because this design is not trying to break away from Argent’s style, which I consider one of the best in the industry for its clarity and simplicity, the sketching and wire-framing process are constrained in terms of elements shapes, sizes, fonts and colours. For this, the process of sketching ends up being almost limited to a modular stacking of elements that follow the structure determined previously during the user flow design.

Hi-Fi Wireframes

In this project, designing hi-fi wireframes consists of combining the aforementioned sketches and user flow with the Argent app’s style while also taking into account the changes that can take place when actions happen on some of the different screens.

Wireframe design including all possible state changes

To perfectly recreate the original Argent app’s designs, and not having access to real design documents, my approach is to take as many screenshots as necessary and to replicate pixel-perfect elements on top of that matching it with the font and colours inspected from the Argent’s website.

For my design, and where it makes sense, I transform and adapt the design elements to match the needs of the staking pages. So, while the style for the security page and the staking dashboard follow the guidelines, the content and disposition is completely new.

Usability Testing

Interactive prototype paths

Once, a preliminary version of the wireframe is completed, the next step I take is to the design a prototype that I will put in front of the same userbase that took the survey at the beginning of the project to verify that design matches the original problems and needs. This prototype is a semi-open path that is intended to be followed by the user while completing 4 different missions, each with a different feature use in mind. I use Maze for the design and the monitoring of the test.

The most troubling mission

And, while the usability test is mostly successful, with an average “simplicity” score of 7.7/10 given by the 40+ test subjects, one of the four missions outcrops a flaw in one of the features of the user flow design.

When I ask the testers to “manage their staking alerts”, there is a very high amount of misclicks and many users even get lost on their way. The design assumption was to add staking alerts/security inside the general security page of the app. With the test I learn however, that most users expect alerts to be easily accessible right from the staking dashboard, and that is a necessary fix that the design needs to incorporate.

Interactive Prototype

Finally, after fixing the wireframe, my end visual goal, is designing an interactive prototype that showcases the most important use-case of this project, staking ether in the simplest way possible. The GIF below is the streamlined path, populated with animations and transitions, from Argent’s home screen all the way to staking while also showing some of the other features that users are looking for, such as compounding or alerts.

Staking process in just a few clicks

Findings

The Ethereum community is very interested in what’s coming next and many users are really eager to have easy-to-use software available. It’s interesting to see that most users both during research and testing had similar needs (simplicity, retrievability, security…) and also found the same design bottlenecks.

By using Argent’s UI and building on top of it, for this design I’ve been able to fully concentrate on UX elements such as research and testing, getting a better understanding of the whole process.

designer