Hey everyone, Vikrant here from Studio Little Nice Things. I'm thrilled to take you through our adventure at this year's ETHDam 2024 hackathon, diving deep into the design challenges and breakthroughs we encountered.
As an Amsterdam-based web3 design studio, it's natural for us to engage with ETHDam. We've been part of this event from the get-go—last year as mentors, and this year, we jumped into the hackathon to shake things up and push the envelope on web3 UX. While I was hacking with my teammates, Tiago from our studio participated in the conference. In this post, I'll mainly discuss the hacking part.
Team Formation
Joining a team wasn't as straightforward as I had anticipated. Many teams had already formed or were not seeking a designer. Thankfully, the hacker speed-dating session led me to Charlie and Jack, the Humpty Dumpty Devs duo, who were pitching a decentralized password manager. Intrigued by their concept—BlockLock, I joined them. There I met Jordan, another quick joiner like me.
Why a Decentralized Password Manager?
Given the serious security flaws in traditional centralized password managers—like the infamous 2022 LastPass breach impacting 30 million users—we wanted to merge the best of both worlds: the user-friendly UX of Web2 and the ironclad security of Web3.
Design Insights and Implementation
As the lead designer, I started by sketching out some initial wireframes, drawing inspiration from dedicated password managers and those found in web browsers—specifically, the inline menu from 1Password and the dashboard interface from Chrome browsers.
We had established the foundation for aesthetics and familiarity. Next, we focused on devising methods for the Web3 implementation. After several iterations, we finalized the following main user flow:
The user is prompted with an inline menu of suggested passwords whenever they encounter a "New Password" field.
Once they click on the "Save on-chain" button, they are prompted with the Metamask window to sign the transaction. As they do that, the CTA turns into a processing status indicator. This is done to ensure the user doesn't experience a change in the inline interface. Along with that, a tiny strip of information appears below the menu, showing the estimated time.
After processing is complete, the password for that domain is saved on-chain, which can be retrieved anytime for free.
We also implemented other flows where a user can update, share, and delete saved passwords. Do check out the video demo for a walkthrough.
Branding and Beyond
On the branding side, I took the reins on the logo design, picking Diamond Grotesk for its keyhole-like ink traps, symbolizing security. We chose a refreshing turquoise for the color scheme, a nice change from the usual techy blue.
On the marketing side, I designed a logo animation using After Effects. I also designed and developed a dedicated landing page for the project using Framer:
Results and Reception
The project was well-received, placing us in the top 10 out of over 60 participating teams. We presented our project on stage, and the feedback was overwhelmingly positive, validating our efforts and the importance of good design in the tech ecosystem.
https://twitter.com/OasisProtocol/status/1779524610913939772
Show your support!
Are you an ETHDam 2024 participant? You still have a chance to show your support! Voting tokens are valid for the next 24 hours. You can cast your vote for BlockLock here. Let’s make it count!
Update: We made it to the Top 5! We received 18,454 votes in the above mentioned Quadratic Funding (QF) round. Thank you for all the support.
Looking Back
This experience was not just about building a project but also about highlighting the critical role of design in technology, especially in new areas like web3. Collaborating with Charlie, Jack, and Jordan was immensely rewarding, and the support from Studio Little Nice Things and Tiago was invaluable.
We’re already buzzing with ideas for next year, ready to dive back in with new insights and the same excitement. Thanks for all the support, and see you at ETHDam next year!
Meanwhile, let’s collaborate: 👉 www.littlenicethings.com