Ihor Dzhemesiuk

Ihor

Dzhemesiuk

Based in Berlin

Contacts

Bitcoin.com Design System from scratch

Creating and supporting design system from scratch to allow the teams to design, realize and develop a product Bitcoin.com Wallet app (iOS and Android).

My role & responsibilities

0 → 1

Competitor Research

App Audit

Fundamental components

Specific components

UI Design

Design Systems

Developer Handoff

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.

Goals

Defined the key goals for designer and developers

Solution

The solution included flexible components, clearly documented guidelines, and centralized design tokens, significantly streamlining workflows for design and engineering teams.

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.

Key outcomes:

Simplified onboarding for new designers, accelerating team integration

Increased consistency across multiple products and user touchpoints.

Reduced development time through reusable, clearly documented components.

Let’s make something great together