The First UX Hackathon In Web3: Building Is Not Just Coding
MetaMask and HOPR teamed up to host the first ever UX hackathon in web3. Here's how it went and what I learned.
It's no secret that the world of crypto is full of complexity and technical jargon. For the average person, trying to wrap your head around how blockchain technology works, what is gas, or how to bridge assets can be a daunting task. Unfamiliar technical words, new patterns, and lack of education are some major user experience (UX) issues in web3 slowing down mass adoption.
When I decided to focus my career on designing web3 products, my main motivation was the huge UX challenge to democratize the use of crypto, especially to make self-custodial wallets secure and easy to use. But like any big task, this challenge requires collective effort—it needs the ideas and perspectives of more designers, and above all, it needs the web3 space to give UX the importance that it deserves.
But it's not enough to just talk about it, you have to lead by example, and that's exactly what we did: We teamed up with HOPR to organize the first UX hackathon in the history of web3. Here’s how it went.
The ETH Zurich Hackathon
We gathered more than thirty designers onsite and remotely at ETH Zurich to tackle two of the most important challenges in web3: privacy and security.
Before making the designers' heads crawl with solving complex problems, we kicked off the hackathon with a workshop on privacy and UX in web3 diving into the evolution of the internet and the fundamental pillars of making the experience of using a crypto wallet accessible to everyone.
The main topics focused on:
- Contextualization and education: Knowing how to use these powerful tools helps break down the barrier of crypto jargon that is so intimidating to new users
- Embracing transparent design: Keeping users well informed and safe is important, even if that means adding a little more friction to their experience
- Familiarity: We are still in the early stage of web3, so now more than ever, UX design has to use mental models and existing patterns from web2, whenever possible, so we can make the experience of buying crypto from a wallet not too different from ordering a burger from a delivery app.
After the designers warmed up, it was time to introduce the brief of the two challenges they could choose from.
The first one focused on MetaMask Snaps. Snaps is a new way to create web3 end-user experiences, this new tool is to web3 what the iPhone is to cell phones: a before and after in how we build and interact with wallets.
This is not just a new feature made by MetaMask, it’s a system that allows anyone to build on top of our wallet to expand its capabilities and customize the wallet experience without asking for permission from anyone except the end user. So, with Snaps, users will be able to:
- Go beyond Ethereum and access other blockchains like Bitcoin.
- Make it possible to integrate any scaling solution and make exploring Layer 2s accessible to everyone.
- Enable authentication, privacy, and consent in ways that keep users in control while empowering them with more ways to protect their data.
And privacy was precisely the main protagonist of this UX hackathon and a prevailing pillar in our ecosystem. Web3 technology is still in its early stages and there aren’t widely adopted standards for storing or accessing data yet.
HOPR is a Swiss project that aims to improve the privacy and security of web3 transactions by obscuring all metadata, including IP addresses, making it impossible to tell anything about who is sending data or what data they’re sending. And how can they bring this to regular users without making them run their own nodes? By creating a HOPR Snap to bring an extra layer of privacy and security to user’s transactions. This challenge’s brief focused on designing the integration of Snaps into the Metamask Extension’s UI, the installation of the HOPR Snap and a send flow using the Snap.
The winners of this challenge have weighed in on different solutions.
Nayat Cheikh: Lead Product Designer at Vesper, designed a scenario in line with how Snaps would work today by downloading the HOPR Snap from their website and a more idealistic user experience scenario—the Snap could be downloaded directly from the MM extension, onboarding users on Snaps as well as thinking about the user flow of how to send a transaction once the Snap is installed in both cases when the user has funds to pay the transaction fee and when they don’t.
Frederic Berghman: Digital customer experience lead at Bitcoin Suisse, stepped out of his comfort zone as a designer to remind us that UX is not just about designing interfaces but also about thinking about how to bring real value to users. His solution goes beyond the installation of the Snap in the extension, and evolved into a business model of the product that includes insurance for users of the HOPR snap.
The second challenge was focused on introducing Social Recovery to MetaMask to help reduce the blockage of funds on the blockchain when users forget their Secret Recovery Phrase (SRP). This feature would make newcomers feel more secure in a decentralized environment where not everyone wants to have the responsibility of their wallet’s safety. Unlike a traditional self custodial wallet where only you can recover access to your funds via your Secret Recovery Phrase, Social Recovery would allow users to still be the only ones to access to their funds while letting them choose a trusted group of people who can help them recover their wallet if access is lost. This solution to key management would help us onboard more users to DeFi while adding an extra layer of security to their experience, which makes it an exciting UX challenge to explore.
The winners of this challenge have introduced this feature consciously during the onboarding flow without adding cognitive load or making the experience too long for users, allowing them to rely on the people they already trust to start their crypto journey with confidence.
Maria Sanmartin: UX researcher and designer at Akasha Foundation, went further by thinking not only of creating a flow to allow adding guardians during the onboarding to help recover the user's account, but thought of introducing the feature even when the user has already made the onboarding, allowing users to request their contacts to be their guardians or request to be guardian of other accounts.
Sinlin Yeo: Head of Product Design at web3Auth, thought of a flow straight forward and well contextualized both guard creation and recovery request using patterns that users new to web3 may find familiar from web2 products. Her approach is a good reminder that, in the vast majority of cases, we do not have to reinvent the wheel.
The Future of Crypto Is All About UX
Web2 products have raised the bar of user experience design, our users are expecting to have intuitive and easy-to-use products, but web3 still has 99 problems and UX is one of them. Our products are still complex and intimidating to use. The good news is that this is starting to shift—we are making great strides in improving the safety and accessibility of our products—but there is still a long way to go.
In the midst of a turbulent market and the recent insolvency of big CeFi players:, the need to focus on building decentralized finance is an obvious fact that no one will deny. But when we say “buidl” we are not just referring to the amazing developers in our ecosystem, we are also stressing the need of putting user experience and accessible design at the center of our attention to onboard the new wave of users in DeFi.
We made history! The first ever UX Hackathon in web3 🎉— HOPR 🟡 (@hoprnet) September 20, 2022
So many talented UX Designers worked on a solution to integrate a HOPR snap into @MetaMask and a function for routing all API requests through HOPR 🤩
Let’s make UX in web3 great again! 💛#UX #hackathon #ethereumzurich pic.twitter.com/bXIUuDAr0I
Organizing more UX Hackathons where designers from all backgrounds can contribute to making UX standards in our space as usable and even more transparent and secure than web2 products, is a step in the right direction.
Keep reading our latest stories
releases, security news, and more