Firefly Wallet

Firefly Wallet

A sleek and elegant crypto wallet experience

Firefly is a user-friendly digital wallet and user interface for IOTA cryptocurrency that's designed to make managing digital assets easy and accessible to both experienced and novice users.

image

Executive Summary

The digital wallet space is plagued by complex interfaces that make managing digital assets a challenge for users, particularly newcomers to the world of cryptocurrencies. I oversaw support of the Firefly wallet team to produce a powerful and user-friendly experience that surpassed existing offerings.

By focusing on creating an intuitive and user-friendly product, Firefly Wallet could cater to both experienced users and newcomers to the crypto space, making managing digital assets more accessible for everyone.

Goals

💡

1

Seamless and secure onboarding for users

💡

2

Ease of use without new heuristics

💡

3

Deliver aesthetic and minimalist design

💡

4

Consistent design patterns and interactions

💡

5

Intuitive freedom that simply works

💡

6

Abstract complexity where possible

image

My role

The team comprised of 3 UX designers, 1 UI designer and a motion designer, each of whom brought their unique skill sets to the table. I oversaw and led the product design team, providing oversight and direction to the ongoing design definition. I was responsible for providing ideation, leading UI solutions, ensuring consistency and overseeing and finalising all major UI and UX decisions.

image
image

Design system

The foundation to any consistent design product is the ability to draw on design patterns minimising overhead and ambiguity for the development. Once the initial conceptualisation was agreed, the design team set about defining a suite of components to solve this challenge.

The initial principles have proven highly robust. It is still in use today and this is now being upgraded to an auto layout system. We released this v1.0 kit to the community to use for their own projects which can be viewed below.

image

Onboarding

The early stages of app experience are crucial to convert new users to an “aha!” moment. Web3 brings additional challenges; it is a fine balance between decentralisation, security and usability.

A new user will quickly abandon due to friction. We overcame this through an ongoing user testing process with 50 participants, defining pain points and areas of improvement.

We carefully outlined every possible sequence and created a suite of characters and animations with a crafted UI experience to make this first engagement joyful. Feedback has been consistently positive.

image
image
image

Onboarding paths were outlined with extensive variations and paths utilising unique assets

image

Onboarding videos

Due to several technical upgrades, I saw a challenge with onboarding new users into the upgraded wallet and protocol. To smooth this process, I spearheaded several videos to help users get a better sense of context.

Guiding the motion designer on my team, I ideated, storyboarded, and produced the videos to help educate and inform ahead of the changes. Feedback was highly positive.

Example storyboard

image

Sending and managing assets

We wanted to make holding a multitude of high value digital assets simple and secure. To lower risk of users making poor choices we abstracted decision-making as much as possible. Firefly Wallet features a powerful, but simple interface for sending and receiving IOTA tokens, with clear instructions and visual cues to guide users through the process. The dashboard provides upfront information on balances and transactions, making sending and receiving digital assets a doddle.

image
image

Animated example of wallet switching

Shimmer NFTs

Firefly Shimmer Wallet supports NFTs with a seamless user experience for viewing, exchanging, and securely managing these assets. The wallet has a dedicated home with clear and concise information about the provenance and rarity for each NFT and easy-to-use tools for viewing and storing.

To validate our solutions, we spearheaded a quantitative community engagement to QA test these new features and received a 92% approval rating.

image
image
image

Governance

Firefly Wallet lowers the barrier to participation in governance decisions by providing an intuitive and user-friendly interface for voting and decision-making. Users can make voting decisions in an anonymous and decentralised way. This helps to empower the IOTA community overall to take charge of decision-making.

image
image
image

Impact

Firefly has been exceptionally well-received by the IOTA community, with positive feedback about its user-friendly design and intuitive interface. As of November 2022, iOS Mobile has received over 4.5 stars. Reviewers have highlighted our security features and ease of use, and we're constantly iterating and improving the product based on user feedback. By creating a product that's easy to use and surpasses existing offerings in the crypto wallet space, we're helping to make managing digital assets more accessible and user-friendly for everyone.

image

Outcomes

💡

1

Seamless interface for managing digital assets, including NFTs and staking

💡

2

Increased accessibility to cryptocurrency and digital asset management

💡

3

Empowerment of the IOTA community through easy-to-use governance tools

💡

4

Positive reception and continued growth of the Firefly Wallet user base

💡

5

Ongoing improvements to the wallet based on user feedback

💡

6

Evolving to the needs of the community and the Web3 space

Recent Projects

Reach me through LinkedIn or Twitter

Notes
  • Both quote blocks for the navbar & footer are global blocks. Edit the content of the ones on the main page, and that will update the rest of them throughout your site.
  • The font used is Inter. Select it from your Super Options page. Other fonts that can work well with this template are Epilogue, Public Sans, and Space Grotesk.
  • Notion toggles are hidden by default. To unhide them, paste the CSS below to the bottom of your snippet injection box in your Super site settings:
  • <style>
      .notion-toggle {
        display: block !important;
      }
    </style>
  • To change the text or background color, use this:
  • <style>
    	:root {
    	  --color-text-default: #fff !important;
    		--color-bg-default: #000 !important;
    	}
    </style>
    Change #fff or #000 to any colors you'd like
  • Questions? Post up in our community.