Crypto.com Exchange Web Design System
Overview
With inconsistencies and accessibility issues that were present in the Crypto.com Exchange, I partnered with the front-end team to create a new version of the internal Web UI Kit.
As the core design contributor, I created a new version of the design library and upgraded core pages of the exchange. My work introduced a systematic way for the team to work with colors, iconography, and components.
Approach
- Design for flexibility - The Crypto.com Exchange is a trading platform that serves very different use cases from Landing pages, dashboards, to trading-related interfaces. Components and patterns has to be customised with different sizes and variations.
- Desktop first & graceful degradation - most of our users access the platform via a large - making our top priority to optimised for large screen usage in-mind.
- Development & Design Synchronisation - I work closely with engineers to build the UI library. Often our discussions will drill down to the CSS and JS behaviour to ensure that we are both in-sync of that the final delivery should look like.
Outcomes
- Significantly reduced inconsistent components, colors, icons, and fonts
- Introduced Dark & Light mode support with variables
- Improved Design System adoption (from 2000 to 5000~ components inserts per week)
- Fixed major Accessibility issues (touch sizes, contrast ratios, aria label etc)
- Dramatic UI performance improvements (Load time improved 2X)
- UI library & documentation made available via an internal site
- Enhanced core flows of the exchange, including Landing, Onboarding, Portfolio, Trading, and more.
Gallery
