Overview

This case study highlights the creation of a Design System for Virto DAO ERP, a decentralized ERP and AP platform tailored for LatAm companies. The Virtuoso DS empowers the platform with a consistent, user-centered interface while ensuring scalability, efficiency, and adaptability for its innovative financial automation features.

Primary Goals

• Consistency Across Features: Establish a cohesive design language for the platform's varied functionalities, such as invoicing, payments, and accounting records.

• Scalability: Create a system that can evolve as Virto expands its feature set and user base.

• Accessibility: Ensure an inclusive design that caters to diverse user roles and technical proficiency levels across LatAm.

• Efficiency in Development: Provide reusable components for developers to accelerate build time and reduce redundancies.

• Brand Identity: Reinforce Virto's vision of transparency, automation, and innovation through its visual and interactive elements.

Key Components of the Design System

1. Typography:

   • Primary Typeface: Sans-serif font optimized for readability across devices, reflecting Virto’s modern, user-friendly approach.

   • Font Hierarchy: Clear guidelines for headings, subheadings, and body text, ensuring visual clarity in dashboards, reports, and forms.

1. Color Palette:

   • Primary Colors: A combination of greens, symbolizing trust, innovation, and growth.

   • Accent Colors: Purple and Lavanda ensuring clear visual cues.

   • Neutral Tones: Green shades for backgrounds, borders, and text, maintaining a clean and professional appearance.

   • Accessibility Standards: High-contrast color combinations to meet WCAG compliance for text readability.

1. Iconography:

   • A custom icon library representing key functionalities, including:

     • Containers

     • System Icons

     • Payment Icons

     • Logos

   • Icons are designed with a minimalist style to ensure clarity at small sizes.

1. Components:

   • Forms: Modular input fields, dropdowns, toggles, and date pickers, designed for efficient financial data entry.

   • Cards: Information-rich cards for invoices, payments, and transactions with a consistent layout structure.

   • Modals: Flexible modal components for alerts, approvals, and detailed views.

   • Navigation: A responsive sidebar and breadcrumb navigation system for seamless access to features across the platform.

   • Buttons: Primary and secondary button styles with clear hover and active states for intuitive interactivity.

1. Grid System:

   • A 12-column responsive grid adaptable for dashboards, mobile views, and complex data tables.

2. Interaction Patterns:

   • Loading Indicators: Spinners and progress bars for AI-triggered processes like invoice generation or payment validation.

   • Notifications: Toast messages for real-time feedback (e.g., "Invoice Submitted," "Payment Processed").

   • Error States: Clear error messaging with actionable next steps (e.g., "Missing Data: Please upload receipt").

3. Design Tokens:

   • Centralized values for colors, typography, and spacing to maintain consistency across components and support global updates.

Designing Virtuoso

1. User Research:

   • Conducted interviews and usability tests with LatAm finance teams and accountants to understand workflows, challenges, and expectations.

   • Gathered insights into preferences for visual hierarchy, interactivity, and accessibility.

   • Mapped required components

2. Accessibility Testing:

   • Performed WCAG 2.1 compliance checks for color contrast, keyboard navigation, and screen reader compatibility.

3. Collaboration with Developers:

   • Delivered the design system as a Figma library integrated with the development environment.

   • Provided documentation for component usage and interaction behaviors to ensure seamless implementation.

Implementation Example

Dashboard:

1. Before: A cluttered layout with inconsistent font sizes and misaligned cards.

2. After:

   • Applied the 12-column grid for alignment and spacing.

   • Used modular cards with a uniform visual hierarchy.

   • Incorporated accent colors to highlight actionable items.

Invoice Form Component:

1. Before: Overwhelming input fields and unclear error messaging.

2. After:

   • Introduced grouped sections for better cognitive load management (e.g., “Client Details,” “Invoice Details”).

   • Added contextual tooltips for guidance on field requirements.

   • Included inline validation and accessible error states.

Results & Impact

1. Faster Development Cycles: Reusable components projects an acceleration development timelines by ∼49% efficiency gain, allowing the team to focus on feature innovation. ∼30% Reduction in QA time, ∼20% Improvement in designer and developer efficiency ∼15% Accelerated feature speed-to-market.

2. Brand Alignment: The design system reinforced Virto’s vision of modernity, reliability, and transparency.

Next Steps

1. AI-Driven Personalization: Integrate adaptive UI components that evolve based on user behavior and preferences.

2. Community Contribution: Open the design system for contributions from developers and designers within the DAO ecosystem.

3. Scalability Testing: Stress-test the system for future features like multi-company dashboards and compliance automation.

The Virtuoso Design System bridges functionality with aesthetics, ensuring a seamless user experience while enabling scalability for a cutting-edge DAO platform that redefines financial management in LatAm.