Blockchain is expanding rapidly, and decentralized applications are emerging across various operating systems, especially in the wallet sector. Keeping up with this trend has become a major challenge for businesses. To stay ahead of competitors and capture market share, we need to integrate and build multiple wallets across promising blockchain networks.
In this fast-paced environment, both product development and design are always in a race against time. To accelerate the design process and meet these growing demands, I researched and created a flexible UI config that adapts to different platforms while keeping consistency.
At the beginning, I was assigned to oversee the entire single-chain wallet segment, which included an ecosystem of multiple independent wallets, each operating on a different blockchain network.
Looking to build a flexible UI config that adapts to different platforms like desktop, browser, and mobile. The goal is to speed up design work across multiple platforms while keeping everything visually consistent.
How can we speed up the design process to keep up with product development effectively? My initial idea and experiment were to create a foundational UI framework that could be reused across multiple crypto wallet projects—I called it Global.
Global color tokens
Global number tokens
Global components
Core framework library
But what about different blockchain networks, each representing a unique brand? That’s when I introduced Brand Library, a set of supplementary design libraries that act like a branding layer over the core framework. Think of it like an apartment complex where every unit has the same structure, but once someone moves in, they can paint, decorate, and customize it to match their personal style.
Brand color tokens
Brand number tokens
Brand styled-components
Brand icon/visual assets
Brand typography
This color system defines the core color values, ensuring consistency across key areas and setting the foundation for product color schemes.
Establishes essential numerical parameters that serve as the building blocks for various design customizations, including sizes, border-radius, spacing, and more.
Defines core color elements predominantly used in the product, providing a base for brand accent colors.
Contains skeletal variables that set basic design parameters such as screen size, container spacing, bottom sheets, lists, rows, and more.
Creates a centralized content management system for the entire product, reducing the need for manual adjustments in multiple places. This allows for seamless customization of brand-specific content blocks.
Acts as a visual layer applied to the structural foundation. Each product has its own unique brand theme, enabling quick customization.
Allows adjustments based on different environments, such as mobile and browser extensions. This includes enabling or disabling specific features, controlling icon visibility, and adapting design elements like screen sizes and spacing.
Enables content customization across different environments. For instance, on mobile, users might see “Setup passcode & biometric,” whereas, in a browser extension, the system would display “Setup password” based on platform support.
Provides fine-tuned control over brand-specific design elements, including border radius, sizes, and overall style adjustments.
A centralized system for managing design components, allowing for quick modifications, visibility toggles, and synchronization across core design elements.
It took me about two weeks to finalize and test the structure and how it functions. As a result, I was able to save over 40% of the total design time for the next five wallets. At the same time, developers building the code library in parallel could efficiently reuse design elements, reducing effort and speeding up the release of similar digital wallets.
