Intro
Intro
A web app and mobile app synchronised for secure two-factor authentication of crypto transactions
A web app and mobile app synchronised for secure two-factor authentication of crypto transactions
My Role
My Role
Product Designer
Product Designer
Timeline
Timeline
Nov - Dec 2023
Nov - Dec 2023
Client
Client
Silence Laboratories
Silence Laboratories
What did I do?
What did I do?
Product analysis
Product analysis
Pain point identification
Pain point
identification
Design system
Design system
UI/UX Redesign
UI/UX Redesign
Animation
Animation
Prototyping
Prototyping
Development support
Development
support
Marketing support
Marketing support
Prologue
Prologue
Crypto transactions: Safe but risky without Private Key protection
Crypto transactions: Safe but risky without Private Key protection
💸
💸
Crypto transactions are like banking transactions but use different technology
Crypto transactions are like banking transactions but use different technology
🖥️
🖥️
These transactions happen between wallets via desktop browsers, each with a "private key"
These transactions happen between wallets via desktop browsers, each with a "private key"
🔑
🔑
If someone has your private key, they can access your wallet and make unauthorised transactions
If someone has your private key, they can access your wallet and make unauthorised transactions
To address this issue, Silence Laboratories has developed a version of Silent Shard Snap with the following features:
To address this issue, Silence Laboratories has developed a version of Silent Shard Snap with the following features:
📱
📱
Two-factor authentication that links the user's mobile device as an authenticator for each transaction
Two-factor authentication that links the user's mobile device as an authenticator for each transaction
🔐
🔐
Even if the wallet key is stolen, unauthorized transactions cannot be made without the mobile authenticator
Even if the wallet key is stolen, unauthorized transactions cannot be made without the mobile authenticator
How does it work?
How does it work?
To make this possible, three components are required:
To make this possible, three components are required:
MetaMask crypto wallet
MetaMask crypto wallet
Silent Shard Snap web app
Silent Shard Snap web app
Silent Shard mobile app
Silent Shard mobile app
What was the problem?
What was the problem?
Users of older version of Silent Shard Snap encounter challenges hindering their experience and transaction security
Users of older version of Silent Shard Snap encounter challenges hindering their experience and transaction security
Interface is non-intuitive, leading to frustration
Interface is non-intuitive, leading to frustration
Unclear instructions causing confusion and mistrust
Unclear instructions causing confusion and mistrust
Web and mobile app pairing process is too confusing
Web and mobile app pairing process is too confusing
Emphasising the importance of wallet backup is missing
Emphasising the importance of wallet backup is missing
How can redesigned product come into picture?
How can redesigned product come into picture?
Based on insights gathered from existing users, we have established a set of goals that will guide us in reshaping the product experience
Based on insights gathered from existing users, we have established a set of goals that will guide us in reshaping the product experience
🎯
🎯
Establish a clean, clear, and intuitive visual language
Establish a clean, clear, and intuitive visual language
🎯
🎯
Communicate every action through clear messaging
Communicate every action through clear messaging
🎯
🎯
Educate about the process through guiding animations
Educate about the process through guiding animations
Pairing the three components
Pairing the three components
The first and most important flow is pairing the MetaMask wallet, Snap Web app and Silent Shard mobile app. The pairing process can be initiated through either mobile app or web app.
The first and most important flow is pairing the MetaMask wallet, Snap Web app and Silent Shard mobile app. The pairing process can be initiated through either mobile app or web app.
2 Factor Authentication
2 Factor Authentication
Now that the crypto wallet (MetaMask) is paired with web and mobile app. Whenever there is any transaction that is going to happen, the mobile authenticator app will be notified via web app and the transaction is continued once the user approves it.
Now that the crypto wallet (MetaMask) is paired with web and mobile app. Whenever there is any transaction that is going to happen, the mobile authenticator app will be notified via web app and the transaction is continued once the user approves it.
Challenges that I faced
Challenges that I faced
My main challenge was ensuring the product was accessible to newcomers to crypto, who had limited prior knowledge in the field.
One option to overcome this is by explaining the process in detail through text, but most users are unlikely to read through it.
✅ A better approach is to provide concise text, and use animations to make the process more intuitive.
My main challenge was ensuring the product was accessible to newcomers to crypto, who had limited prior knowledge in the field.
One option to overcome this is by explaining the process in detail through text, but most users are unlikely to read through it.
✅ A better approach is to provide concise text, and use animations to make the process more intuitive.
Visual design iterations
Visual design iterations
Onboarding: The initial plan was to use slide-based onboarding screens, but to make it more engaging and visually appealing, I created an animation that clearly explains the product. It's crucial to introduce the user to the product effectively right from the start.
Onboarding: The initial plan was to use slide-based onboarding screens, but to make it more engaging and visually appealing, I created an animation that clearly explains the product. It's crucial to introduce the user to the product effectively right from the start.
Home Screen: As an authenticator app, the home screen displays details about the connected crypto wallet. Initially, I planned a fancy card design to reduce white space, but instead prioritised showing crucial information and ensuring the design could support multiple wallets in the future.
Home Screen: As an authenticator app, the home screen displays details about the connected crypto wallet. Initially, I planned a fancy card design to reduce white space, but instead prioritised showing crucial information and ensuring the design could support multiple wallets in the future.
Learnings
Learnings
Enhanced project management skills: Successfully managed stakeholder expectations, prioritised tasks, and made critical decisions independently to drive product development.
Developed strong design and marketing collaboration: Effectively collaborated with marketing teams to create engaging visuals and promotional materials that aligned with product goals.
Improved understanding of user-centred design: Utilised user feedback to iterate on product design and enhance user experience.
Enhanced project management skills: Successfully managed stakeholder expectations, prioritised tasks, and made critical decisions independently to drive product development.
Developed strong design and marketing collaboration: Effectively collaborated with marketing teams to create engaging visuals and promotional materials that aligned with product goals.
Improved understanding of user-centred design: Utilised user feedback to iterate on product design and enhance user experience.
Marketing support
Marketing support
Involving myself in marketing is a special experience for me. As an animation graduate, I created a promotional teaser for this product, using my animation skills to capture attention and communicate the product's message clearly. This project showcased my ability to blend visual storytelling with marketing strategies effectively.
Involving myself in marketing is a special experience for me. As an animation graduate, I created a promotional teaser for this product, using my animation skills to capture attention and communicate the product's message clearly. This project showcased my ability to blend visual storytelling with marketing strategies effectively.
Thank you for reviewing to the end!
Thank you for reviewing to the end!