Client
Bitcoin.com
Platform
iOS, Android
My role
Building from scratch
Support
Date
January 2021-present
Overview
The Bitcoin.com Design System serves as a comprehensive guide encompassing rules, specifications, styles, and components.
It empowers teams to efficiently design, implement, and enhance existing products, as well as create new interfaces.
By minimizing redundancy and fostering a shared language, it ensures visual consistency across various product components and interfaces, facilitating scalability and cohesion.
Problem statement
The main problem is that the Bitcoin.com Wallet app was developed for a long time without guidelines and clear rules. At a certain point, it became clear that this complicates further product development when new products are actively developed and the design team grows.
Approach
Since we initiated the development of the design system when a fully functional application already existed, we devised an implementation strategy allowing us to gradually begin using the Design System, step by step, without waiting for its full completion.
The main stages of Design System development and implementation were as follows:
Audit of the existing Bitcoin.com Wallet app
Structuring components by categories and priority
Development of basic components
Implementation of basic components
Development of additional components
Preparation of all files for delivery
Onboarding for designers, developers, and managers
Audit
Providing a whole product audit to identify all inconsistencies, style variations and missing components
Audit showed that the application uses many variations of the same components, there is no clear structure and layout, scaling rules at different resolutions, and almost all components are created from scratch.
The creation of a design system is a solution that should help to correct the current situation and bring product development to a new level.
Solution
Conducting a group session with engineers to come up with idea to split the project into 2 stages.
We held several sessions with engineers where the decision was made to implement the creation of the design system in two stages.
Stage 1. Creation and implementation of fundamental components (typography, colors, buttons, etc.), which are the foundation of the entire application and are repeated from screen to screen.
Stage 2. Creation and implementation of specific components that may be used in a single instance or have specific forms/styles. This also includes all new application components that do not belong to the fundamental ones.
Fundamental components
Fundamental styles and components were developed, serving as the foundation of the application and providing overall stylistic consistency, navigation, interaction with page elements, and transitions between screens.
Grid, Typography, Colours, Shadows, Buttons, Dropdowns, Spacings, Icons / Illustrations, Toggles, Navigation tabs etc.
Specific components
All specific components present in a single instance or serving purposes distinct from fundamental ones were developed. This category is continually updated and refined.
Dialogs, Сharts, Wallet sections, Menu, Sliders, Assets, Inline messages etc.
Outcome
As the lead designer, I successfully established Bitcoin.com’s design system, defining foundational styles, components, and detailed documentation. This significantly optimized collaboration between design and development teams.
Simplified onboarding for new designers, accelerating team integration
Increased consistency across multiple products and user touchpoints.
Reduced development time through reusable, clearly documented components.
