From Chaos to Cohesion: Crafting the Cashbook Design System

Navigating the Challenges of Creating a Scalable Design System for Cashbook

Industry: Fintech

Company: Cashbook App

Model: B2B

Responsibilities: UI Audit, User Testing, Making new components and Refining Old ones, Documentation

UX Audit

Wireframes

Style guide and tokenization

Component Library and refinement

Design System Documentation

Cashbook is a UPI-based expense management app designed for businesses, offering unique UPI handles for each employee, a faster reconciliation process, and zero leakages with 100% access control. It's a comprehensive tool for tracking income, expenses, and managing cash flow, allowing businesses to add staff, set up multiple businesses, and download financial reports in PDF and Excel formats, all aimed at promoting business growth.

Small and Medium Enterprises (SMEs): Business owners who need a streamlined way to manage expenses and track income for their operations.

Startups: Emerging businesses looking for a scalable solution to handle financial transactions and monitor cash flow as they grow.

Businesses with Multiple Employees: Companies that need to assign unique UPI handles to each employee for transparent and controlled expense management.

As Cashbook expands its UPI-based expense management app to cater to a diverse range of businesses, it faces challenges in maintaining a consistent and intuitive user interface across various features and platforms. The lack of a unified design language leads to inconsistencies in UI elements, a time-consuming design process, and difficulties in scaling the app's design as new features are added. This hampers the user experience and efficiency of the app, which is critical for financial management tools. To address these issues, there was a need for a comprehensive design system that ensures visual consistency, streamlines the design process, and supports the scalable growth of the app.

Increasing Efficiency: By streamlining the design process with reusable components and guidelines, the design system reduces the time and effort required to create and update app features.

Ensuring Scalability: A well-defined design system supports the scalable growth of the app, allowing for the easy integration of new features and functionalities as the business expands.

Reducing Costs: By minimizing design inconsistencies and rework, the design system can lead to cost savings in the long run, both in terms of design and development resources.

Improving Collaboration: A shared design system fosters better collaboration between designers, developers, and stakeholders, ensuring a more cohesive approach to product development.

To start with, I understood the goals to be achieved and the current problems that the design process Cashbook is facing. Following this, I followed the Atomic Design Principles to build a Design System that is scalable and reduces cost.

Laying foundations (or atoms) can help me fix the inconsistencies in UI across the product to ensure the work flow of other designers and developers is made faster.

Atomic design's breakdown of components into smaller elements can impact a design system by promoting modularity, and reusability across the entire user interface.

Variables are used to define and maintain consistent values for properties ensuring uniformity and efficiency across the design system.

Investing in a design system prioritizes sustainable growth and quality, enabling teams to ship features faster and more reliably in the long run, while maintaining a cohesive user experience and reducing technical debt.

Auditing with Heuristic Evaluation: Conducted a thorough review of existing designs using heuristic evaluation methods to identify usability issues and areas for improvement. This process involved assessing the designs against established usability principles to ensure they meet user needs and provide a positive user experience.

Researching Components: Investigated components from similar applications and other design systems to gather insights and best practices.

Creating Foundations (Atoms): Established a set of foundational atoms, including colors, typography, and spacing, to ensure consistency across the design system.

Refining and Making New Components (Molecules): Enhanced existing components and developed new molecules to address specific user needs and functionalities.

Documenting: Compiled detailed documentation of the design system, including guidelines for usage and implementation of components.

Testing: Conducted rigorous testing of the design system to ensure usability, accessibility, and seamless integration across different platforms.

Majorly the component library that I worked on included Buttons, FAB, Header, Search Bar, Toast, Smaller Banner and so on.

1. Increased Development Speed: Implementing a design system can reduce the time needed for UI development by up to 50%. By reusing predefined components, developers can focus more on implementing functionality rather than designing from scratch, speeding up the development cycle and enabling faster feature releases.

2. Enhanced User Consistency: A design system ensures up to 95% consistency in user interfaces across different products and platforms. This uniformity can significantly improve user experience, making it easier for users to learn and navigate new features, thus reducing user error rates and increasing satisfaction.

3. Cost Efficiency: Organizations that adopt a design system can see a reduction in design and development costs by approximately 30%. This is achieved by decreasing the amount of time spent on designing individual components and reducing the need for extensive QA to fix UI inconsistencies, thus optimizing resource allocation.

1. Preparation Pays Off: Establishing a comprehensive design system requires upfront investment in time and resources, but this preparation significantly streamlines future product development. The effort put into creating a robust set of design principles and reusable components pays dividends in the form of faster development cycles and reduced costs.

2. Consistency is Crucial: A consistent user interface is not just aesthetically pleasing—it's functional. It reduces the learning curve for users when they interact with different parts of a product or suite of products. This consistency directly contributes to improved user satisfaction and retention, demonstrating how vital uniform design standards are.

3. Collaboration Enhances Outcomes: The development of a design system encourages a collaborative environment that bridges the gap between designers, developers, and other stakeholders. This collaboration is essential for ensuring that the design system meets the diverse needs of the organization and is adaptable to various projects and contexts. Enhanced communication and alignment lead to better-designed products and more efficient processes.