Overview

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.

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.

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

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.

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.

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...

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