BUIDL for flexibility: Design system that adapts to user needs & increase design efficiency

UI design, design systems, visual
Duration & Timeline
1 month, Q3 2022
Product & Platform
Taebit is a non-custodial decentralized exchange (DEX) that mimics a foreign exchange market utilizing stablecoin engine called Alkemy. Taebit & Alkemy are part of the Konstellation Ecosystem.
Project Type
Product Design
Design System
Much more advanced Figma!
This study case was done before figma had a lot of amazing features for implementing Design Systems such as Components Variables, Component Properties, etc
Project Background

Improving design efficiency and consistency


Upon joining the company as a UI/UX Designer, I was presented with both a challenge and an opportunity. I was tasked with developing the Taebit & Alkemy Web3 Decentralized Exchange App. This marked my first attempt into designing for a decentralized exchange platform.

In the world of Web3, things are always changing, and so are user preferences and needs. To keep up with these ever-evolving demands, we needed a design system that could adapt seamlessly. So, I set out to create a system that would not only adapt to user preferences but also empower both users and developers. I will use Figma as a tool to achieve this

Current problems

When I first joined the company, I found a really barebone design systems (It was more of a style guideline). It was inflexible and lacking in adaptability, making it difficult for the design team to create consistency in design. This called for a major overhaul, one that would place flexibility and customization at the heart of the design system. Here are some of the problems we feel as design team without design systems:

  • Lack of source of base component, causing inconsistency in UI such as spacing and border radius.
  • Inefficiency & time consuming design, designers make a repeatable component from scratch over and over again
  • From developer side, the lack of .eusable components and documentations make them slower when developing the UI
Benefits of using design systems

Why do we need a design system? Some of the benefits of creating a design system include:

  • More efficient collaboration between the team.
  • UI Consistency and increased user trust in our digital product.
  • Reduced time consumption and make collaboration more efficient between the teams.
Thinking Foundation

Using Atomic Design Principles

Taking inspiration from Atomic design principles, I established a cohesive set of reusable components. This modular approach gave the team the flexibility we needed to adapt the design system to various user interfaces and design scenarios. It was like having a set of building blocks that could be easily assembled to create unique and personalized experiences.

Increasing Design Efficiency

Flexible Icon System & Library

Many designers frequently use Icons in their UI design. It takes time to find the right icon. Also many designer detach component when changing icon, which is not a best practice. So I decided to make our own Icon Library & System to increase design efficiency

*As of 2023, figma added support for component properties and making it possible to instantly switch icon instances similiar to the system I create
Atomic Design Implementation

Identify frequently used UI Components and break it into atoms and molecules

Starting this project, I did a lot of research. I read articles online, studied Design Systems such as Google Material Design or Human Interface Guideline, and talked to people on my team. Then, I looked at every part of our app's design. I checked every detail and made sure I got everything right. I started identifying which UI components that can be break down into the Design systems.

I also had to make decisions regarding naming conventions, categorization, organizing the component. I spent a lot of time to renaming the components, and layer on the Figma and trying to make it dynamic when use it at the design project.

Adapting to User Needs

Adding dark mode support and micro interaction

Web3 apps are rapidly evolving and attracting a growing user base. To effectively cater to this user base and foster user satisfaction, it is crucial to understand the key needs and preferences of Web3 users. Here are some of the essential user needs that should be addressed when designing and developing Web3 apps:

  • Dark Mode and Personalization: Web3 users often prefer dark mode interfaces, and they value personalization and customization options to tailor their experience. Clear navigation, consistent design patterns, and helpful onboarding guides also contribute to an intuitive UX.
  • Micro-Interactions: Micro-interactions provide subtle feedback and make interactions more engaging, enhancing the overall user experience.
Micro Interaction Example
*As of 2023, figma added support for component variables which make creating Dark mode easier and faster

Flexible & Interactive Design Systems

And many more, I created hundreds of components varieties, states, and even interactive components, allowing us to quickly design entire flows and features quickly and consistently. These includes:

  • Cards Components
  • Navbars
  • Headers
  • Footers
  • Modals
  • Tables
  • Filters
  • Icon Library
  • And many more...
UI Design Example

Highly interactive prototype

Field & Dropdown Example
Navbar/Footer & Dark Mode Change
Implementation in Hi-Fi UI (Trade Page)
Outcomes & Impact

Improved Collaboration & Efficiency

Project Conclusions

Overall better efficient time consumption when designing, improve design and consistency and make better collaboration between stakeholders. For the design team, it’s much faster when I work on the project and communicate the the design with my colleague.. Also, I asked several feedback from the engineers, the reusable components and documentations make them easier when developing the UI.

The impacts

For Designers:

  • Enhanced Design Efficiency: A design system streamlines the design process by providing a library of reusable components and UI elements. This eliminates the need to recreate components from scratch, saving time and effort, as confirmed by designers.
  • Improved Design Consistency: A design system ensures consistency across all user interfaces, maintaining a cohesive and unified brand experience. This consistency extends to color palettes, typography, and layout arrangements, as designers have consistently pointed out.
  • Facilitated Collaboration: A design system fosters collaboration among designers by providing a shared language and a single source of truth for all design assets. This promotes consistency and alignment across design teams, as designers have observed.

For Developers:

  • Simplified Development: Reusable components and UI elements from the design system accelerate the development process by providing ready-to-use building blocks. This reduces development time and effort, as engineers have reported.
  • Improved Documentation: Comprehensive documentation accompanying the design system provides developers with clear guidelines and specifications for implementing UI components. This reduces the need for guesswork and ensures consistent implementation, as engineers have noted.
  • Enhanced Communication: A design system facilitates communication between designers and developers by providing a shared understanding of UI elements and their usage. This collaboration streamlines development and improves overall project efficiency, as both designers and engineers have observed

Wanna be starting something?

Are you searching for a designer who not only understands the importance of design but also its impact on your business? I'm currently seeking new opportunities and would love to discuss how my multidisciplinary approach can elevate your projects. Reach out to me and explore the possibilities.