Wallet Recovery
Wallet Recovery
ABOUT
Okto is an international decentralized finance (DeFi) app, providing users with the ability to manage their digital assets seamlessly. Wallet Recovery is aimed at enhancing user security by enabling them to create backups of their wallet in their Google Drive.
Okto is an international decentralized finance (DeFi) app, providing users with the ability to manage their digital assets seamlessly. Wallet Recovery is aimed at enhancing user security by enabling them to create backups of their wallet in their Google Drive.
okto
ios & android
Download app
Download app
WEBSITE
ROLE
Product Designer
Product Designer
DURATION
1 month, 8 days
10 Jul 23’ - 18 Aug 23’
1 month, 8 days
10 Jul 23’ - 18 Aug 23’
TEAM
Lochan Patil : Motion Designer
Badal Agrawal : Product Manager
Lochan Patil : Motion Designer
Badal Agrawal : Product Manager
Lochan Patil : Motion Designer
Badal Agrawal : Product Manager
Problem
The problem we identified is that many users do not understand that in the event of losing access to their wallet, such as a lost phone or forgotten private keys, users risk losing their digital assets permanently.
The problem we identified is that many users do not understand that in the event of losing access to their wallet, such as a lost phone or forgotten private keys, users risk losing their digital assets permanently.
Goal & objectives
The challenge is to educate users about the significance of wallet recovery and guide them through the setup process.
Educational Clarity: Create clear and engaging educational content on wallet recovery's significance.
Efficient Onboarding: Reduce user onboarding time by streamlining the setup process.
User Feedback Integration: Gather user feedback to iteratively improve the feature's usability and effectiveness.
The challenge is to educate users about the significance of wallet recovery and guide them through the setup process.
Educational Clarity: Create clear and engaging educational content on wallet recovery's significance.
Efficient Onboarding: Reduce user onboarding time by streamlining the setup process.
User Feedback Integration: Gather user feedback to iteratively improve the feature's usability and effectiveness.
We brainstormed creative solutions, and it became evident that we needed a visual and interactive approach to educate users. The idea of using a metaphor emerged as an effective way to convey the concept.
We brainstormed creative solutions, and it became evident that we needed a visual and interactive approach to educate users. The idea of using a metaphor emerged as an effective way to convey the concept.
Low fidelity Wireframes
We tried two conceptual approaches, comparing the simplicity of the metaphors :
We tried two conceptual approaches, comparing the simplicity of the metaphors :
Approach 1
Splitting the key
As we moved from research to defining a solution, we initially considered an approach where the key split into three parts being stored in different locations.
As we moved from research to defining a solution, we initially considered an approach where the key split into three parts being stored in different locations.
This direction had too many parts which made it complex.
However, this approach proved challenging, It added grades of complexity and raised more questions than answers, making it less user friendly.
However, this approach proved challenging, It added grades of complexity and raised more questions than answers, making it less user friendly.
Approach 2
Two Keys
To simplify, we shifted to a two-key metaphor, akin to a bank locker.
To simplify, we shifted to a two-key metaphor, akin to a bank locker.
Two-keys being a more universal metaphor was quick to understand.
This pivot ensures a simplified understanding of wallet recovery by drawing an analogy to a familiar real-world scenario, making the process more intuitive and user-friendly.
This pivot ensures a simplified understanding of wallet recovery by drawing an analogy to a familiar real-world scenario, making the process more intuitive and user-friendly.
RESEARCH
Usability testing
After creating the initial wallet recovery flow, our team recognized the critical importance of validating the design with real users to ensure that it met their needs and expectations. To achieve this, we conducted usability testing with a diverse group of 14 participants. These participants were split into two distinct user groups: 8 from the non-DeFi space and 6 from the DeFi space whom had prior experience using the Okto app.
After creating the initial wallet recovery flow, our team recognized the critical importance of validating the design with real users to ensure that it met their needs and expectations. To achieve this, we conducted usability testing with a diverse group of 14 participants. These participants were split into two distinct user groups: 8 from the non-DeFi space and 6 from the DeFi space whom had prior experience using the Okto app.
User Group 1: Non-DeFi Space
(8 Participants)
These users were individuals who were already familiar with the broader cryptocurrency landscape but had not ventured into DeFi. Their prior experience included using cryptocurrencies like Bitcoin and Ethereum.
These users were individuals who were already familiar with the broader cryptocurrency landscape but had not ventured into DeFi. Their prior experience included using cryptocurrencies like Bitcoin and Ethereum.
User Group 2: DeFi Space
(6 Participants)
In contrast, the participants in this group were actively involved in the DeFi space. They were experienced users of the Okto app and engaged in DeFi activities such as trading, lending, and staking cryptocurrencies.
In contrast, the participants in this group were actively involved in the DeFi space. They were experienced users of the Okto app and engaged in DeFi activities such as trading, lending, and staking cryptocurrencies.
During the usability testing sessions, participants were asked to go through the flow. They were encouraged to share their thoughts, feedback, and concerns as they navigated through the process. I observed and documented their interactions to gain insights into user behaviour and reactions.
Below are some key insights :
During the usability testing sessions, participants were asked to go through the flow. They were encouraged to share their thoughts, feedback, and concerns as they navigated through the process. I observed and documented their interactions to gain insights into user behaviour and reactions.
Below are some key insights :
😄
“What’s MPC?”
“Animations helped!”
“Can’t concentrate on copy and visuals!”
“Lack of information”
“Clean & easy”
“Too fast”
“Where is it being stored?”
“Couldn’t differentiate the keys.”
“Like the Bank locker concept especially for new users.”
🤔
🤔
😄
“What’s MPC?”
“Animations helped!”
“Can’t concentrate on copy and visuals!”
“Lack of information”
“Clean & easy”
“Too fast”
“Where is it being stored?”
“Couldn’t differentiate the keys.”
“Like the Bank locker concept especially for new users.”
🤔
😄
“What’s MPC?”
“Animations helped!”
“Can’t concentrate on copy and visuals!”
“Lack of information”
“Clean & easy”
“Too fast”
“Where is it being stored?”
“Couldn’t differentiate the keys.”
“Like the Bank locker concept especially for new users.”
Outcome
The feedback and insights gathered from these usability testing sessions were invaluable. It allowed our team to identify areas where the flow performed well and areas where improvements were needed. It had become clear we needed to rework the visuals and hierarchy
The feedback and insights gathered from these usability testing sessions were invaluable. It allowed our team to identify areas where the flow performed well and areas where improvements were needed. It had become clear we needed to rework the visuals and hierarchy
design implications
design implications
Improving interaction and reducing wait time
Improving interaction and reducing wait time
Before
Users repeatedly tapped the disabled CTA.
Users were impatient until the animation was complete.
After
CTA appears 1 second after the animation starts.
Reduced the duration of animation with removing the wallet.
Fixing hierarchy and information
Fixing hierarchy and information
Before
Divided attention between copy and visual.
MPC was ignored without any clarity of information.
After
Reduced size of visual to focus on copy & segregated heading in two parts
Focus card to bring more attention to MPC
Adding personalisation
Before
Users were unable to differentiate between the two keys.
After
Added a keychain to make it more distinct and personalised.
Clarity in details
Clarity in details
Before
Crucial details weren’t highlighted efficiently.
After
Direct with a more functional UI.
Accessibility
We updated our grey text values to comply with the WCAG color contrast guidelines. This prompted a wider color audit and later, a dramatic change to our design system altogether.
We updated our grey text values to comply with the WCAG color contrast guidelines. This prompted a wider color audit and later, a dramatic change to our design system altogether.
T
3.4:1
Contrast ratio
Large Text
AA
AAA
Normal Text
AA
AAA
T
4.95:1
Contrast ratio
Large Text
AA
AAA
Normal Text
AA
AAA
exploration
Variations
I started explorations by critically thinking about the types of
information that are important to our users, such as trying out
loading bars, different card components, illustration concepts and more.
Here’s a look at some of the versions along the way:
I started explorations by critically thinking about the types of
information that are important to our users, such as trying out
loading bars, different card components, illustration concepts and more.
Here’s a look at some of the versions along the way:
9:41
Your wallet is like a bank locker, it requires two keys to unlock
Next
A realistic approach looked odd and confusing.
Engraving the key for personalising went unnoticed.
9:41
Your wallet is like a bank locker, it requires two keys to unlock
Next
9:41
Your wallet is like a bank locker, it requires two keys to unlock
Next
Loading bars, created more impatience.
Adding a time duration helped anticipate.
9:41
Your wallet is like a bank locker, it requires two keys to unlock
Next
Adding a time duration helped anticipate.
9:41
Let’s secure your key,
setup a recovery!
WHERE?
Stored in your Google Drive
WHy?
Wallet recovery if your phone is lost
Setup Recovery Now
9:41
Let’s secure your key,
& take a backup
Why?
Incase you lose your phone
Where?
Stored only on your Google Drive
Backup My Key
Subtle approach to adding details.
This approach disturbed hierarchy.
9:41
Let’s secure your key,
& take a backup
Why?
Incase you lose your phone
Where?
Stored only on your Google Drive
Backup My Key
This approach disturbed hierarchy.
Finalising
Implementation
The implementation of the wallet recovery feature posed several challenges, exposing gaps in our existing user flows. As we integrated this new feature, we discovered issues within other aspects of the user journey that led users to this content. These challenges necessitated a thorough examination and refinement of our overall user experience, emphasising the interconnected nature of the design and development process.
The implementation of the wallet recovery feature posed several challenges, exposing gaps in our existing user flows. As we integrated this new feature, we discovered issues within other aspects of the user journey that led users to this content. These challenges necessitated a thorough examination and refinement of our overall user experience, emphasising the interconnected nature of the design and development process.
High fidelity mockup
results
84.2% Total Conversion
Last 7 Days (October 2023)
Last 7 Days (October 2023)
Total users from signing up to creating a backup of their wallet.
Total users from signing up to creating a backup of their wallet.
100%
75%
50%
25%
0%
627
users
593
users
528
users
Signed Up
Wallet created
Backup created
The implementation of the wallet recovery feature yielded significant and positive outcomes:
Improved User Adoption + Security: 84.2% More users are now taking the initiative to set up wallet recovery, reducing the risk of asset loss.
Positive User Feedback: Users have responded favorably to the changes, highlighting the user-friendly approach and the clarity of the new educational content.
Overall, the results reflect not only the success of the wallet recovery feature but also its positive ripple effects on the broader user experience within the Okto app. This user-centric approach has strengthened user security, engagement, and satisfaction.
The implementation of the wallet recovery feature yielded significant and positive outcomes:
Improved User Adoption + Security: 84.2% More users are now taking the initiative to set up wallet recovery, reducing the risk of asset loss.
Positive User Feedback: Users have responded favorably to the changes, highlighting the user-friendly approach and the clarity of the new educational content.
Overall, the results reflect not only the success of the wallet recovery feature but also its positive ripple effects on the broader user experience within the Okto app. This user-centric approach has strengthened user security, engagement, and satisfaction.
100%
75%
50%
25%
0%
627
593
528
Signed Up
Wallet created
Backup created
100%
75%
50%
25%
0%
627
593
528
Signed
Up
Wallet created
Backup created