Safari
File
Edit
View
History
Window
Help
Mon Jun 22
9:41 AM
OpenID3
Product Demo
Team
Role
Duration
Tools
1 Designer
1 Developer
1 Product Manager
User Research
MVP Design
App Design
1/16/2024-Present
Figma
Overview
A product demo redesign demonstrating our Zero-Knowledge account protocol to stakeholders.
Why Redesign?
Branding
Maintain a consistent visual identity for the website, including color palette and typography. The product demo is accessed through the website, so visual elements should be cohesive.
Usability
Ensure that the design is usable and intuitive even for those who aren’t Web3 native. Improving usability can also lead to increase in user retention.
Website Design
🖥️
Understanding Context
Users access the product demo by clicking "Start Building" on the website's homepage.
Previous Design
⏮️
Pain points
Steps does not align with proof
The steps highlighted in green does not align with the proof, so it’s easy for the users to be confused at what step the proof correlates to.
Visual identity mismatch with the website
The website's primary colors are purple and black, making the current design seem mismatched. Since the product demo is accessed through the website, the visual discrepancy can be confusing.
Design Solutions
Highlighting the Iterations
Solution 1
Creating a dedicated screen for sign-in
In the previous design, the sign-in buttons are attached to the proof screen. This can simplify the flow, but can cause confusion when the proof is not operating and users have to see the different steps before they even sign-in.
Demo
Your JWT Proof//Client Proof
The Aggregated Batch & Proofs
{
"proof_with_public_inputs":
"0x39e3b7d2e00dbab6574d6c5ef358f0e1d046d1f6555c68d5..."
"verifier":
"0x04000000000000004c6399e34deaeeba2f3453a30645f292..."
}
01
02
03
04
05
06
{
"aggregation_index": 8
"aggregated_proof":{
"proof_with_public_inputs":
"0x7b2270726f6f66223a7b2277697265735f636170223a5b22..."
"0x7b22636f6e7374616e74735f7369676d61735f636170223a..."
}
}
01
02
03
04
05
06
07
08
09
10
11
Converted Proof
Help
{
"converted_proof":{
"input_hash":
"0x1f19956ed507d0f7d2974bbe05fd68dd049e982882dc7f1
4..."
"verifier_digest":
"0x2874851f7a094dc67dc4cc50e175d74f1a7289e56c98a3e
1..."
"proof":
"0x2c72897c478105d6d1c695a06e154edcb45cc408f461a7b
a..."
}
01
02
03
04
05
06
07
08
09
10
11
12
Refresh
This may take a few seconds to load.
1
2
3
3-Step
Zero-Knowledge Prover
Generate a Client Proof
Aggregate a Batch of Client Proof
Snarkify (convert) the Aggregated Proof
Provider Selected: Google
Solution 2
Assign each proof to the number of steps
In the redesign, I categorized each proof by its corresponding number of steps. To allow users to revisit these steps, I listed them on the left. Additionally, I redesigned the proof input box to indicate that the proofs are lines of code.
Solution 3
Account details screen to view additional information
In addition to displaying the ZK-proof, I have added an account dropdown under the profile, allowing users to access their Account Abstraction (AA) and token details.
Design System
Maintaining Visual Consistency
Creating components and variants to avoid any visual discrepancies.
Sign in with Google
Sign in with Google
X (Twitter)
X (Twitter)
Reflection
LESSONS
Importance of Visual Consistency
Maintaining a consistent visual identity was crucial. The redesign had to align with the existing color palette and typography while introducing new elements like the ZK-proof display and account dropdown. This consistency created a cohesive, professional look essential for user confidence and brand recognition.
OpenID3
Product Demo
Team
Role
Duration
Tools
3 Designers
2 Developers
1 Product Manager
User Research
MVP Design
App Design
1/16/2024-Present
Figma
Overview
A product demo redesign demonstrating our Zero-Knowledge account protocol to stakeholders.
Why Redesign?
Branding
In Web3 users value decentralization, having directly ownership over assets, without relying on centralized intermediaries (credit cards/banks).
Usability
Ensure that the design is usable and intuitive even for those who aren’t Web3 native. Improving usability can also lead to increase in user retention.
Website Design
Understanding Context
A product demo redesign demonstrating our Zero-Knowledge account protocol to stakeholders.
Previous Design
Pain points
Steps does not align with proof
The steps highlighted in green does not align with the proof, so it’s easy for the users to be confused at what step the proof correlates to.
Visual identity mismatch with the website
The website's primary colors are purple and black, making the current design seem mismatched. Since the product demo is accessed through the website, the visual discrepancy can be confusing.
Design Solutions
Highlighting the Iterations
Changes
Creating a dedicated screen for sign-in
The website's primary colors are purple and black, making the current design seem mismatched. Since the product demo is accessed through the website, the visual discrepancy can be confusing.
Demo
Your JWT Proof//Client Proof
The Aggregated Batch & Proofs
{
"proof_with_public_inputs":
"0x39e3b7d2e00dbab6574d6c5ef358f0e1d046d1f6555c68d5..."
"verifier":
"0x04000000000000004c6399e34deaeeba2f3453a30645f292..."
}
01
02
03
04
05
06
{
"aggregation_index": 8
"aggregated_proof":{
"proof_with_public_inputs":
"0x7b2270726f6f66223a7b2277697265735f636170223a5b22..."
"0x7b22636f6e7374616e74735f7369676d61735f636170223a..."
}
}
01
02
03
04
05
06
07
08
09
10
11
Converted Proof
Help
{
"converted_proof":{
"input_hash":
"0x1f19956ed507d0f7d2974bbe05fd68dd049e982882dc7f1
4..."
"verifier_digest":
"0x2874851f7a094dc67dc4cc50e175d74f1a7289e56c98a3e
1..."
"proof":
"0x2c72897c478105d6d1c695a06e154edcb45cc408f461a7b
a..."
}
01
02
03
04
05
06
07
08
09
10
11
12
Refresh
This may take a few seconds to load.
1
2
3
3-Step
Zero-Knowledge Prover
Generate a Client Proof
Aggregate a Batch of Client Proof
Snarkify (convert) the Aggregated Proof
Provider Selected: Google
Changes
Assign each proof to the number of steps
In the redesign, I categorized each proof by its corresponding number of steps. To allow users to revisit these steps, I listed them on the left. Additionally, I redesigned the proof input box to indicate that the proofs are lines of code.
Changes
Account details screen to view additional information
In addition to displaying the ZK-proof, I have added an account dropdown under the profile, allowing users to access their Account Abstraction (AA) and token details.
Design System
Maintaining Visual Consistency
Creating components and variants to avoid any visual discrepancies.
Sign in with Google
Sign in with Google
X (Twitter)
X (Twitter)
Changes
LESSONS
Importance of Visual Consistency
Maintaining a consistent visual identity was crucial. The redesign had to align with the existing color palette and typography while introducing new elements like the ZK-proof display and account dropdown. This consistency created a cohesive, professional look essential for user confidence and brand recognition.
OpenID3
Product Demo
Team
1 Designer
1 Developer
1 Product Manager
Role
Interaction Design
Website Redesign
Duration
1/16/2024-Present
Tools
Figma
Overview
A product demo redesign demonstrating our Zero-Knowledge account protocol to stakeholders.
Why Redesign?
Branding
Maintain a consistent visual identity for the website, including color palette and typography. The product demo is accessed through the website, so visual elements should be cohesive.
Usability
Ensure that the design is usable and intuitive even for those who aren’t Web3 native. Improving usability can also lead to increase in user retention.
Understanding Context
Website Design
Users access the product demo by clicking “Start Building” on the website’s home page.
Previous Design
Pain points
Steps does not align with proof
The steps highlighted in green does not align with the proof, so it’s easy for the users to be confused at what step the proof correlates to.
Visual identity mismatch with the website
The website's primary colors are purple and black, making the current design seem mismatched. Since the product demo is accessed through the website, the visual discrepancy can be confusing.
Design Solutions
Highlighting the Iterations
Demo
See how we use our innovative ZK technology to perform decentralized log-ins and recovery by signing into your social accounts.
Protocol for Privacy Preserving Authentication
Welcome
Select your social account provider to see OpenID3 in action
We do not store any data related to your social logins.
Sign in with Google
Github
X (Twitter)
Changes
Creating a dedicated screen for sign-in
In the previous design, the sign-in buttons are attached to the proof screen. This can simplify the flow, but can cause confusion when the proof is not operating and users have to see the different steps before they even sign-in.
Demo
Your JWT Proof//Client Proof
The Aggregated Batch & Proofs
{
"proof_with_public_inputs":
"0x39e3b7d2e00dbab6574d6c5ef358f0e1d046d1f6555c68d5..."
"verifier":
"0x04000000000000004c6399e34deaeeba2f3453a30645f292..."
}
01
02
03
04
05
06
{
"aggregation_index": 8
"aggregated_proof":{
"proof_with_public_inputs":
"0x7b2270726f6f66223a7b2277697265735f636170223a5b22..."
"0x7b22636f6e7374616e74735f7369676d61735f636170223a..."
}
}
01
02
03
04
05
06
07
08
09
10
11
Converted Proof
Help
{
"converted_proof":{
"input_hash":
"0x1f19956ed507d0f7d2974bbe05fd68dd049e982882dc7f1
4..."
"verifier_digest":
"0x2874851f7a094dc67dc4cc50e175d74f1a7289e56c98a3e
1..."
"proof":
"0x2c72897c478105d6d1c695a06e154edcb45cc408f461a7b
a..."
}
01
02
03
04
05
06
07
08
09
10
11
12
Refresh
This may take a few seconds to load.
1
2
3
3-Step
Zero-Knowledge Prover
Generate a Client Proof
Aggregate a Batch of Client Proof
Snarkify (convert) the Aggregated Proof
Provider Selected: Google
Changes
Assign each proof to the number of steps
In the redesign, I categorized each proof by its corresponding number of steps. To allow users to revisit these steps, I listed them on the left. Additionally, I redesigned the proof input box to indicate that the proofs are lines of code.
Changes
Account details screen to view additional information
In addition to displaying the ZK-proof, I have added an account dropdown under the profile, allowing users to access their Account Abstraction (AA) and token details.
Design System
Maintaining Visual Consistency
Creating components and variants to avoid any visual discrepancies.
Sign in with Google
Sign in with Google
X (Twitter)
X (Twitter)
Reflection
LESSONS
Importance of Visual Consistency
Maintaining a consistent visual identity was crucial. The redesign had to align with the existing color palette and typography while introducing new elements like the ZK-proof display and account dropdown. This consistency created a cohesive, professional look essential for user confidence and brand recognition.
Thanks for stopping by!
I'm always open to collaborating or chatting about anything design. Let's connect :)
Thanks for stopping by!
I'm always open to collaborating or chatting about anything design. Let's connect :)