2022
Web 3
Blockchain
Stallet: An all-in-one cross-chain and non-custodial mobile crypto wallet built on Stacks blockchain, secured by Bitcoin.
Team
Akorede J. Ayanbisi
Product Designer
Martins Olaniyan
Product Designer
I worked as the lead product designer on this project, collaborating with Martins, a product designer whom I onboarded to join me in bringing this idea to life.
I want to build an all-in-one cross-chain and non-custodial crypto wallet built on Stacks blockchain, secured by Bitcoin, for day-to-day activities such as DeFi, Cross-Chain Exchange, NFT, GameFi, and Metaverse. Most notably with my main focus on non-crypto savvy users, to easily onboard them and give them easy access to the world of web3.
Overview
Overview
The Stacks ecosystem is growing at a bullish pace. With about 10 protocols & communities, 19 partners & integrations, 12 tools and utilities, and about 27 dApps are currently built on the ecosystem. Stacks ecosystem is becoming a significant player in the decentralized market and web3 as a whole.
In the Stacks ecosystem, you can connect with decentralized applications (dApps) using Hiro Wallet, send and receive Stacks (STX) tokens using Wise, swap tokens using Alex, buy NFTs with Stacks (STX) on Gamma, stack Stacks (STX) to earn Bitcoin (BTC) using Planbetter, and manage your Stacks (STX) assets on Xverse; but imagine an all-in-one cross-chain and non-custodial crypto wallet that can do all these and more. 🤯
The Challenge
Is there really a need to solve this problem?
Before we dive into the nitty-gritty, let’s look at what led to Stallet:
As a product designer, an active web3 user, and also based off my personal experience and researches, here is what I discovered;
Occasionally, web3 and crypto wallet users encounter various problems during the onboarding, communications and general user experience of some products. These problems can be frustrating, discouraging and undoubtedly disappointing.
Also, users encounter multiple problems while swapping and bridging tokens; these problems may increase the risk of losing money, and it is stressful to handle.
So because web3 is relatively new, users are still trying to onboard in the space, as the user experiences of most of the existing web3 products are inexplicit, and require some level of expertise to use and interact with.
During my research phase, I had to go from different decentralized applications (dApps) that already exists on the Stacks ecosystem to buy, store, manage Stacks (STX) and NFTs, then go to another to swap these same assets and finally find another to stack Stacks (STX). This was quite challenging in a way, and I discovered it was the same for users and people who believe in the Stacks ecosystem.
These underlying problems birthed Stallet. Then as I began to work on this new idea, I onboarded Martins Olaniyan (product designer) to come work with me on this idea I was about to build. I called it the next big thing in web3. 😅
We were able to turn this rough idea into a reality with so much back and forth, arguments and premium violence. 😁
Our Solution will enable Stacks users to do much more without having to switch between dApps.
Our Goal is to be the one-stop for every Stacks user in terms of buying, sending and receiving STX, other tokens and NFTs, swapping tokens on Stacks blockchain and other chains, storing, accessing and managing their assets on Stacks, and stacking their Stacks (STX) to earn Bitcoin (BTC), web3 educational platform and much more.
In addition, Our main focus is making whatever solution we arrived at easy to use for any non-savvy crypto user.
The Process
How did we arrive at this solution? 🤔
For every product to be successful, it must solve the user’s needs while aligning with the business goal and keeping the user’s (UX) experience as good as possible.
Looking back at when web3 hit the market, it was more about the technology and its benefits, but never about how easy people could understand and easily use these technologies. Although there have been many improvements to this cause, but users still find it hard to navigate through these products.
In fact, according to 8-bit.io Statista, Only 0.71% of the world’s population (65 million people) use blockchain technology. The blockchain audience is expanding and to be able to onboard users to use blockchain solutions there are things we must get right:
A user test was carried out by Chokablock about the non-savvy users using web3 products which says that the biggest problem for new blockchain users was clarity and poor information architecture.
We created three user personas that categorized different types of users in the blockchain space. These personas are going to guide our decision-making when building this solution for stacks: The personas helped to highlight some core user priorities:
From this information we proceeded to carry out more user research and draw up user personas mainly focused on three user categories;
User Persona
Our user types
Here are the three user personas and types that categorized different types of users in the blockchain space and for the product.
Non-Savvy Users:
This group of people have an interest in the web3 Space, but have Little or Zero Knowledge about how it works and how to go about it. They have no experience using web3 dApps. These users are familiar with web2 mental models.
Mid-Savvy Users:
This group of people have recently been introduced to the web3 space with experience using web3 dApps, but are still not aware of the many possibilities web3 has to offer. These users are fairly familiar with web3 mental models.
Crypto-Savvy Users:
This group of people are experts with web3 space with experience using web3 dApps. These users are super familiar with web3 mental models.
And that leads us to the main and recurring problem throughout this case study is that most web3 products, even though they are solution-based, are not for non-crypto savvy users and the ultimate goal of this project is to make Stallet the gateway to web3 and as easy to use as possible.
From our research, our target audience are generally users with little or no experience with web3.
Competitive Analysis
What are other decentralized apps (dApps) doing right? 🤔
After knowing what type of users we are creating these solutions for, we decided to carry out a Competitive Analysis to be able to figure out patterns, what other dApps are doing best, what they are not doing better and how we can squeeze all these information to make sure we provide a quality comprehensive solution for our potential users.
One of our main focus was the onboarding process of these dApps and how easy it was for new users to understand and set things up. We also focused our research on how users can safely secure their wallets with seed phrases or secret keys.
We looked at the onboarding process of 7 different dAapps and how easy it was for them to onboard users, especially users that are not familiar with web3.
Here is a link to the Competitive Analysis
Right before we jumped into the product design of Stallet, we had a particular observation and arrived at a perfect solution after we drafted out our user personas and conducted our competitive analysis.
We created explainer popups or what we call modal popups around Stallet to help newbie users get acquainted with web3 terminologies they don’t understand.
UX Direction
UX Direction
The idea: A larger percentage of our target audience are users who have no prior web3 experience, to help these users get onboarded on Stallet, we decided to stick with existing patterns from web2 mobile apps.
Our reason behind this is Jakob’s law, a UX law, which emphasises the fact that: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
In other words, we are sticking with existing patterns web2 users already know and are very familiar with.
User Flows
User Flows, Maybe 🤷♀️
The importance of user flows and journeys can not be underestimated in designing a product, but we decided to be unconventional by not sticking with them, not because we don’t want to, but because we wanted to pay attention to every detail and interaction the user has with Stallet.
We concluded from our previous research to stick with five navigation tabs which will easily be able to cover user needs and enable easy navigation:
• The home or dashboard screen
• The stacking screen
• A screen (modal-like) to carry out all transaction actions
• Browser screen to access other dApps in-app
• Settings screen
But before we jumped fully into the designs and the UX experience, we created a foundational design system to help, and as we proceeded in our iterations, we scaled the design systems.
Design System
We are big fans of Design Systems ⚒
Not every product requires a design system, but because of the goal and scale of the vision at Stallet, we created a scalable design system, which we could work with and also for future designers and engineers.
We built our design system using Shipfaster’s Design System by Mizko
Our Design System has 1034 components and 166 Styles, so it is almost impossible to share everything in this case study, this is the link to preview the full design system.
We also tokenized our design systems to be able to communicate the design systems better to future developers:
Interaction Design
Interaction Design
Onboarding Stage
Each web3 product has its own unique onboarding process, the process where users are introduced to the product and perform obligatory actions like creating a password for their wallet or backing up their wallet.
Stallet is not in any way different, the idea is to make this process seamless and easy for users.
How did we do this? As I said earlier, we adopted proven UX web2 patterns and tweaked them for the onboarding process.
The web3 onboarding model is almost full of mandatory decisions that users must carry out. Although these decisions are important, we decided to make them less stressful by providing a few options for them, which makes them feel more in control of the process, rather than the normal web3 process.
Home Screen
The home or dashboard screen is usually the first screen a user is introduced to after the onboarding process, and also the first screen a user sees anytime the user gains access to the app.
We had just a major goal for the home screen. We want our home screen to be simple, clean and also help the users easily navigate to some core parts of our app, Stallet.
Stallet Learn
Stallet Learn is what makes Stallet different from a majority of web3 products out there. You see, we conducted research and noticed that when most users needed help or are stuck with an issue while using a web3 product, they search for solutions on Google, Twitter, Reddit or Quora.
While this is stressful for the user, it might lead to lack of customer retention and high churn rate. So we created this perfect solution called “Stallet Learn”.
Although there are existing educational platforms like Binance Academy, Coinbase Learn and others, our goal is to be the go-to educational platform for existing and new web3 users.
According to this source, 6.64Billion people own a smartphone and that’s 83.40% of the world population. These are the people we have in mind for Stallet. Accessibility and ease of use are our visions for Stallet and that birthed the idea of Stallet Learn.
Stallet Learn is an educational arm of Stallet, that contains numerous information about web3 and helps users learn in a fun and interesting way.
With the help of Stallet Learn, potential users can easily navigate and learn how to also use Stallet effectively.
Send, Receive, Buy, Swap & Bridge Stacks (STX) or Other Tokens
Following our tradition of making things easier to use, we wanted to make the flow and process of sending, receiving, buying, swapping and bridging Stacks (STX) or any other tokens very easy for our users.
We imbibed smooth communication as a vital tool in this process in other to make it seamless and easy to use.
Send 👇🏾
Receive 👇🏾
Swap 👇🏾
Bridge 👇🏾
The Buy Stacks will be an integrated feature for users to easily buy Stacks (STX) or any other crypto tokens of their choice without having to leave the Stallet app.
Stacking
Stacking is a unique feature of the Stacks ecosystem which is similar to the Staking feature in other blockchains. It’s basically a feature where users stake (stack) Stacks (STX)to earn Bitcoin (BTC) for a particular period of time or cycle.
Browser to access other dApps
We want users to be able to get almost anything related to web3 in Stallet and to make Stallet more accessible to users, we accommodate other dApps in Stallet. This helps users perform functions in other dApps without having to leave the Stallet app.
Conclusions
Conclusions and Key takeaways
Overall, we learnt a lot of things from working on this product and that was majorly making complex part of web3 simple and easy for users.
As we all know, the web3 space is still relatively new and most internet users do not understand what it is about or its full potentials, this is why we are building Stallet.
We also saw the use of effective competitive analysis, at each process, we were actively studying similar dApps to know what they did best and what they need to do better.
Thank you for reading this case study and for your time. 😊
Other Projects
Here are some other best projects you can check out.
