Arcana Pop-Up Wallet: Empowering Developers with UX centric Web3 Solutions
Arcana Pop-Up Wallet: Empowering Developers with UX centric Web3 Solutions
Arcana Pop-Up Wallet: Empowering Developers with UX centric Solutions
Arcana Pop-Up Wallet: Empowering Developers with UX centric Web3 Solutions
Designing a UX-first wallet experience, customizable and powered by Arcana SDKs like Auth, Gasless and Chain Abstraction, to simplify web3 tool integration and enhance usability.
Designing a UX-first wallet experience, customizable and powered by Arcana SDKs like Auth, Gasless and Chain Abstraction, to simplify web3 tool integration and enhance usability.
Designing a UX-first wallet experience, customizable and powered by Arcana SDKs like Auth, Gasless and Chain Abstraction, to simplify web3 tool integration and enhance usability.
Role
Role
Experience Designer
Experience Designer
Industry
Industry
Web3
Web3
Duration
Duration
1 year
1 year
Team
Team
Chief Design Officer, Senior Experience Designer and me
Chief Design Officer, Senior Experience Designer and me
OVERVIEW
OVERVIEW
The Arcana pop-up wallet is designed for developers building decentralized applications (DApps) using Arcana SDKs like Auth, Gasless, and Chain Abstraction. This wallet offers seamless integration and customization, enabling developers to deliver a tailored wallet experience to their users.
The Arcana pop-up wallet is designed for developers building decentralized applications (DApps) using Arcana SDKs like Auth, Gasless, and Chain Abstraction. This wallet offers seamless integration and customization, enabling developers to deliver a tailored wallet experience to their users.
The Arcana pop-up wallet is designed for developers building decentralized applications (DApps) using Arcana SDKs like Auth, Gasless, and Chain Abstraction. This wallet offers seamless integration and customization, enabling developers to deliver a tailored wallet experience to their users.
MY CONTRIBUTION
Interaction Design
Interaction Design
Interaction Design
Designed a non-intrusive wallet experience, that "pop up" only when needed
Designed a non-intrusive wallet experience, that "pop up" only when needed
Designed a non-intrusive wallet experience, that "pop up" only when needed
Wallet Redesign
Wallet Redesign
Wallet Redesign
Redesigned the wallet interface for both dark and light modes
Redesigned the wallet interface for both dark and light modes
Redesigned the wallet interface for both dark and light modes
Design System
Design System
Design System
Developed a cohesive, scalable design system aligned with Arcana’s branding and developer needs.
Developed a cohesive, scalable design system aligned with Arcana’s branding and developer needs.
Developed a cohesive, scalable design system aligned with Arcana’s branding and developer needs.
SETTING THE SCENE
SETTING THE SCENE
What is Arcana?
What is Arcana?
What is Arcana?
Arcana is a platform creating solutions with a UX first approach and providing powerful SDKs for developers, including:
Auth: Simplified authentication for DApps.
Gasless: Enabling gas-free transactions for users.
Chain Abstraction: Supporting seamless multichain interactions.
Arcana is a platform creating solutions with a UX first approach and providing powerful SDKs for developers, including:
Auth: Simplified authentication for DApps.
Gasless: Enabling gas-free transactions for users.
Chain Abstraction: Supporting seamless multichain interactions.
Arcana is a platform creating solutions with a UX first approach and providing powerful SDKs for developers, including:
Auth: Simplified authentication for DApps.
Gasless: Enabling gas-free transactions for users.
Chain Abstraction: Supporting seamless multichain interactions.
UNDERSTANDING THE PROBLEM
UNDERSTANDING THE PROBLEM
Why Redesign?
Why Redesign?
Why Redesign?
PROBLEM #1
WEAK VISUAL HIERARCHY
PROBLEM #1
WEAK VISUAL HIERARCHY
Key actions were buried in the interface, making navigation and interactions inefficient.
Key actions were buried in the interface, making navigation and interactions inefficient.
Key actions were buried in the interface, making navigation and interactions inefficient.
PROBLEM #2
VISIBILITY & COLOR ISSUES
PROBLEM #2
VISIBILITY & COLOR ISSUES
The initial design faced challenges in ensuring proper visibility and contrast across both light and dark modes, leading to readability issues and inconsistent user experience.
Scalability and customization issues prevented it from meeting evolving business needs.
The initial design faced challenges in ensuring proper visibility and contrast across both light and dark modes, leading to readability issues and inconsistent user experience.
PROBLEM #3
INTRUSIVE INTERFACE
PROBLEM #3
INTRUSIVE INTERFACE
The wide interface of the wallet pops up over the browser interface, disrupting ongoing activities and workflows.
The wide interface of the wallet pops up over the browser interface, disrupting ongoing activities and workflows.
The wide interface of the wallet pops up over the browser interface, disrupting ongoing activities and workflows.
PROBLEM #4
INEFFICIENT INFORMATION FLOW
PROBLEM #4
INEFFICIENT INFORMATION FLOW
Cluttered layouts made it challenging for users to find and execute tasks quickly.
Scalability and customization issues prevented it from meeting evolving business needs.
Cluttered layouts made it challenging for users to find and execute tasks quickly.
DEFINE
DEFINE
The redesign aims to achieve the following:
The redesign aims to achieve the following:
The redesign aims to achieve the following:
Clear Hierarchy
Clear Hierarchy
Clear Hierarchy
Clear Hierarchy
Prioritized essential actions and organized information for improved usability and accessibility.
Prioritized essential actions and organized information for improved usability and accessibility.
Prioritized essential actions and organized information for improved usability and accessibility.
Streamlined Navigation
Streamlined Navigation
Streamlined Navigation
Streamlined Navigation
Optimized the flow of information to ensure seamless task execution and intuitive navigation.
Optimized the flow of information to ensure seamless task execution and intuitive navigation.
Optimized the flow of information to ensure seamless task execution and intuitive navigation.
Non-Intrusive Interface
Non-Intrusive Interface
Non-Intrusive Interface
Non-Intrusive Interface
Introduced a less obstructive pop-up interaction, allowing for uninterrupted multitasking.
Introduced a less obstructive pop-up interaction, allowing for uninterrupted multitasking.
Introduced a less obstructive pop-up interaction, allowing for uninterrupted multitasking.
Better visibility
Better visibility
Better visibility
Better visibility
Developed a new design system supporting both light and dark modes for better visibility and accessibility.
Developed a new design system supporting both light and dark modes for better visibility and accessibility.
Developed a new design system supporting both light and dark modes for better visibility and accessibility.
DESIGN
DESIGN
Redevelopment of the Design System
Redevelopment of the Design System
Redevelopment of the Design System
The original design system was built primarily for dark mode and adapted for both light and dark modes, leading to inconsistencies. Additionally, unclear token naming created confusion, making it challenging to identify the appropriate usage. While the system was heavily influenced by Material Design, it lacked consideration for its primary users—developers and designers. The redesign involved research to improve token naming and refine text styles, ensuring the system better serves its users.
The original design system was built primarily for dark mode and adapted for both light and dark modes, leading to inconsistencies. Additionally, unclear token naming created confusion, making it challenging to identify the appropriate usage. While the system was heavily influenced by Material Design, it lacked consideration for its primary users—developers and designers. The redesign involved research to improve token naming and refine text styles, ensuring the system better serves its users.
The original design system was built primarily for dark mode and adapted for both light and dark modes, leading to inconsistencies. Additionally, unclear token naming created confusion, making it challenging to identify the appropriate usage. While the system was heavily influenced by Material Design, it lacked consideration for its primary users—developers and designers. The redesign involved research to improve token naming and refine text styles, ensuring the system better serves its users.
Semantic naming for Text Styles
Semantic naming for Text Styles
Semantic naming for Text Styles
Semantic naming for Text Styles
While we initially used Semantic + Size-based naming for text styles, it proved to be non-scalable, leading us to switch to a combination of Semantic naming and size numbers.
While we initially used Semantic + Size-based naming for text styles, it proved to be non-scalable, leading us to switch to a combination of Semantic naming and size numbers.
While we initially used Semantic + Size-based naming for text styles, it proved to be non-scalable, leading us to switch to a combination of Semantic naming and size numbers.
Created Dark & Light Mode
Created Dark & Light Mode
Created Dark & Light Mode
Created Dark & Light Mode
We had a single design system for both dark and light modes which caused visual inconsistencies. Creating separate systems better accommodate each mode's unique needs.
We had a single design system for both dark and light modes which caused visual inconsistencies. Creating separate systems better accommodate each mode's unique needs.
We had a single design system for both dark and light modes which caused visual inconsistencies. Creating separate systems better accommodate each mode's unique needs.
Easy application of Design Systems
Easy application of Design Systems
Easy application of Design Systems
Easy application of Design Systems
After creating the design system, applying it to the wallet screens became straightforward, as the text and color style names clearly indicated their purpose without needing to reference the style details.
After creating the design system, applying it to the wallet screens became straightforward, as the text and color style names clearly indicated their purpose without needing to reference the style details.
After creating the design system, applying it to the wallet screens became straightforward, as the text and color style names clearly indicated their purpose without needing to reference the style details.
DEVELOP
DEVELOP
Wallet Redesign
Wallet Redesign
Wallet Redesign
Other projects
Optimizing Dashboard Functionality to Address User Feedback
Optimizing Dashboard Functionality to Address User Feedback
Optimizing Dashboard Functionality to Address User Feedback
Redesigning the dashboard for Fintech Primitives (FP), cloud-based platform as a service (PaaS) in the Mutual fund domain
Redesigning the dashboard for Fintech Primitives (FP), cloud-based platform as a service (PaaS) in the Mutual fund domain
See the project
Redesigning the Resolutio Website to Enhance Usability and User Engagement
Redesigning the Resolutio Website to Enhance Usability and User Engagement
Redesigning the Resolutio Website to Enhance Usability and User Engagement
Creating an ecosystem for creators where protection is a default feature.
Creating an ecosystem for creators where protection is a default feature.
See the project
Copyright 2024 by Ann Mary Alex
Copyright 2024 by Ann Mary Alex
Copyright 2024 by Ann Mary Alex
Copyright 2024 by Ann Mary Alex
Copyright 2024 by Ann Mary Alex