DriveWealth Design System

DEC 2023 - JUL 2024 | Product Designer

My role

Component library creation

Visual theme development

Technical collaboration

Infuse inspiration and creativity

Background

Drivewealth is transitioning from a developer-focused API company to a platform catering to worldwide tier-1 clients. Previously, the focus was on providing robust APIs for developers, with less emphasis on user experience (UX). However, as the company onboarded more clients, the need for a user-friendly system for managing accounts, assets, and trading activity became paramount.

The challenge, as it started

Challenges:

  • Fragmented design language:

    • Semantic website: While offering some structure, it lacked the functionality needed for managing complex financial data.

    • Outdated MUI components: These components were likely chosen for developer familiarity but were visually inconsistent and potentially inefficient.

    • Custom designs: These one-off solutions may have addressed specific needs but didn't contribute to a cohesive user experience.

  • Inconsistent visual identity: Color schemes, typography, and component styles varied throughout the system, resulting in an unprofessional and visually unappealing look. This inconsistency also hindered brand recognition.

  • Limited accessibility: The current system was restricted to dark mode only, failing to accommodate users who prefer light mode interfaces or have visual impairments. This limited accessibility for a broader user base.

Opportunity:

  • These challenges presented a significant opportunity to create a unified, user-friendly, and scalable design system.

    • Design systems ensure brand consistency, streamline design language, and improve development speed. The goal was to establish scalable systems for core platforms.

My approach

  • Utilized the Material-UI (MUI) framework as a foundational reference point. This provided a solid base of pre-built components and established design patterns, reducing development time and ensuring some level of familiarity for our engineers already accustomed to MUI.

  • Conducted in-depth research on current UX/UI trends and best practices.

    Integrated these trends strategically within the design system, considering Vision Hub's high data-density requirements. This ensured a balance between a modern, user-friendly interface and seamless implementation within the MUI framework.

  • • Ensured seamless design-to-dev handoff: Fostered close collaboration with the engineering team throughout the design system process. This ongoing communication:
    • Guaranteed technical feasibility: All design system components aligned with development capabilities.
    • Promoted smooth implementation: Regular check-ins ensured a smooth transition from design to development.

  • Built for scalability: Recognized design systems are ever-evolving. Focused on creating a: Well-Organized Library: Easy for future designers and developers to understand.

    Comprehensive documentation on customized components: Facilitates future contributions and maintenance.

Project goal

To establish a centralized design system for the Drivewealth core products, promoting design consistency, streamlining workflows, and accelerating development cycles.

Milestones

60+ components

12 Atom Components
25+ Module Components
20+ Organism Components

Atom

This system streamlined development workflows, ensured brand consistency across the platform, and empowered designers and developers to deliver a user-friendly experience for DWealth's targeted clients.

Molecule

Organism

Impact

Streamlined design workflows

While ongoing, the design systems already simplify and expedite design workflows. The standardized approach promotes improved aesthetics, usability, and design velocity.

Enhanced user experience (UX) & brand consistency

The standardized design language ensures a consistent user experience across all DW products, including Visionhub and the mobile investment platform. This consistency fosters user trust and familiarity, while the improved aesthetics and adherence to industry best practices contribute to a more user-friendly and visually appealing experience.

Empowered development & faster time-to-Market

My focus on technical feasibility during design system development has resulted in a smoother and more efficient engineering implementation process. This translates to faster development cycles and quicker product launches, allowing the DW company to capitalize on market opportunities more effectively.

Challenges & learnings

Customization requirements

Data rich dashboard platform's unique design requirements necessitated a high degree of customization for the UI components. While MUI offered a solid foundation, it couldn't fully meet the specific needs of the platform. This meant extending and modifying MUI components to ensure they aligned perfectly with the design vision.

Concurrent development and exploration

The design system development process ran concurrently with ongoing design concept exploration. This posed a logistical challenge, as we had to balance the creation of a comprehensive design system with the continuous evolution of design ideas. To effectively manage this challenge, we implemented a collaborative and iterative approach, ensuring constant alignment between the design system and the evolving design concepts.