Re Designing a new experience.
Crypto Wallet.
Randlabs has invited to be part of their team in 2020.
Once the Algo Explore was released with a 100% successful launch, Randlabs invited me to be a full-time member of the team. The next task after the release of the main explorer is to create the most robust crypto wallet in the Algorand ecosystem.
¨I am the only designer at the company and am responsible for handling all design needs.¨
This is what the first version of the MyAlgo wallet looks like. It allows people to send and receive assets, create multiple wallets, and import. However, the current wallet is not accessible on mobile devices.
Users pain point
wiht opt-int process
MVP Menu
MVP Dashboard
MVP Log In
MVP New Wallet (Seed Phrase)
The new MyAlgo 2.0 will provide everything that the Algorand ecosystem needs to allow people to interact with dApps on the blockchain. This new experience addresses pain points reported by users while sending assets and opting in for new tokens. Based on quantitative research, people will love the dark mode, and the wallet will have its dedicated mobile version.
New Dashboard
Multi Signature Wallet
Governace
Wrap Algos
Mint Assets
Address Book
Enjoy the creative process that led me to redesign and build one of the most robust wallets in the web3 field.
get inspiration from
what is working
Before starting to design any line, I decided to explore different wallets in different ecosystems, finding strong references such as Exodus, MyEnergiWallet, Trust Wallet, and Atomic Wallet.
I cannot change everything. Users already understand how to manage the wallet using a left-side menu.
Before starting and after learning from the explorer about defining the first grid system, the team told me to keep the left-side menu because the multi-wallet is already functional, and making changes could consume a lot of time. Furthermore, as the wallet will have different modules, we need to ensure the wallet is accessible globally across all of them and place the wallet in the nav bar. After this product session, it's time to start creating my first cryptocurrency wallet across multiple platforms.
“Im ready to create the best wallet in the world.”
This industry and challenge excite me a lot, and I really want to create a product that people recommend to others, raising the UX bar and honing my design skills. When I'm motivated to create interfaces, I could really let my imagination fly. I propose that, during the creation of the My Algo wallet, we provide a unique user experience in one of the main features, "Create a New Wallet." I understand the process perfectly and all possible scenarios.
When the user arrived at the seed phrase, all cards were closed. The interface provides the option to reveal all at the same time as well.
The proposed interaction for the devs was that when the mouse hovers over the card, it animates 360 to reveal the words.
This creates an awesome effect when users pass the mouse over the cards faster and provides uniqueness to the product.
New Wallet Process
“I decide to work each feature in one week . starting planing from monday to deliver late friday”
The wallet needs personality. That's why I provided this special set of icons for the wallet to make it stand out. We provided all common interactions found in a wallet.
My Algo 2.0 Look & Feel
Custom Iconset
A creative experience where, at that moment, we prioritized showing all transactions present in the wallet. Later, we will be updating the wallet to give priority to the assets the user is holding and allow people to navigate between assets and transactions using tabs.
"I proposed a poll on Slack to include dark mode - I think you could clearly see the result."
While I was creating this modal, I thought to provide everything the user needs to make a transaction faster. This goal started making our components very robust, and at that moment, we were trying to reuse them as much as we can.
Send Transaction Modal - Address Book [Shortcut]
Sign Transaction
Input Amount - We are not working properly on the creation of the components. The company is looking to release soon, and I'm the only designer.
"Input amount and address started becoming a robust component," with problems on mobiles.
The wallet is 100% Responsive Design
One of the most challenging modules due to the high amount of information and actions that all participants need to agree on.
“One of the most complicated modules - a lot of information to show - i.e modals transaction details“
Double Wallet
The left panel is starting to become a mess. Normally, the wallet allows people to create multiple wallets, but when multisig arrived, we need to provide feedback about this wallet having a child (multisig). This teaches us the importance of planning, but unfortunately, sometimes we do not have time to follow a strict line process.
The wallet provides the first synthetic Algo version to allow users to wrap Algos to move to another blockchain. This was my first time creating this kind of interaction.
First Version and Second $WALGO Module
Wrapping $ALGO with Ledger Wallet
Governance was one of the nice modules to create because it will provide a lot of users to the product. At that moment, staking rewards and participating in governance were giving users good $ALGOS as prizes every 3 months."
This governance dashboard allows users to vote and follow period results.
The AlgoExplorer taught me not to forget about empty states. I created exclusive illustrations for all empty scenarios in both dark and light themes.
The whole wallet was created in a dedicated mobile version.
design system
Documentation
My Algo now has different products, and we are not building them with components. After releasing the My Algo extension wallet, I decided to prioritize the design system and asked the team to hire a junior UX designer because I was in charge of more than 3 products and 2 design system libraries, plus any other design needs.
"I started the first design system in Randlabs - Blue Lagoon, inspired by the coral life of the Red Sea."
Pixel Perfect components
"More than 100 components - Blue Lagoon is a library with dedicated mobile and desktop components."
Icon Font | Design System | Pixel Perfect
Final Input Asset
Here is the final component. After different iterations, I built a strong component that lets users easily navigate between assets and see how much is in their balance.
My Algo connect
Wallet Extension
Now the company is looking to create the first extension wallet in algorand to let people interact easily with dapps. Randlabs team start growing a lot.
One of my favorite tools for creating products. This helps us find the longest and most complicated features or interactions within the product. Additionally, it provides me with a comprehensive view of the functionality and helps me avoid gaps in the process.
"I validate the flow with the team and use various wallet extensions to ensure the flow is 100% complete."
Guess what? we do no have time and we need to release the product ASAP
"Normally, Michel used to send photos to me with the information."
"We released the product, and while I was working at Blue Lagoon DS, I proposed creating Wallet Extension v.2.0.0."
"Card exploration requires a robust card design process."
Guidelines
My algo connect
Conclusion
My algo wallet
Randlabs has become the top innovation lab within the Algorand ecosystem, featuring the main block explorer and the first extension wallet.
An awesome experience working with a top-tier team where all our design ideas become reality. The front-end team precisely follows each detail.
I led and learned how to redesign an entire crypto wallet with one of the most robust modules, such as a multi-signature wallet. After this experience, I feel very confident about blockchain technology.
Clear design processes were applied even when the company did not support them much. My background in Human-Computer Interaction allowed me to leverage the process to successfully address all the user needs of the company.
I worked closely with the founder and different team members to define requirements and needs. In terms of design, I created the entire product, providing the startup with a huge advantage because I could handle all the design needs alone.
Extra
Motion Graphics
After the hard work creating the new wallet, as the release date approached, Randlabs wasn’t preparing something so big for the launch. I learned that big announcements need to be accompanied by a use scenario and a strong video. I created this simple but honest motion graphic video to support the MyAlgo 2.0 Launch.