Design System and New AI features

Augoor is an artificial intelligence platform designed to facilitate the navigation and understanding of complex codebases. It aims to reduce the time developers and architects need to familiarise themselves with a codebase by providing a detailed view of its state, structure and operation in a simple and intuitive way.

The implementation of the design system and new functionalities in Augoor presented several challenges:

• Lack of an Established Design System: The platform used components from different libraries, which made visual consistency and interface maintenance difficult.
• Need for Clear Communication between Design and Development: The lack of a structured handoff flow created friction and delays. -** Innovation in Dev Experience Functionalities with AI**: A creative and structured design process was required to develop original functionalities that responded to the specific needs of the platform and offered added value to its users.

To address these challenges, a comprehensive strategy was developed based on the Double Diamond model and an iterative process. Each phase allowed the design to be refined and the solution adapted to meet the project's objectives. The strategy focused on:

• Creation of a Scalable Design System: A design system was developed based on atomic design principles and design tokens, synchronised in Storybook, which established a coherent basis for the interface.
• Information Architecture as a Central Axis: As this is a highly complex application, the information architecture was structured in an optimised way to facilitate navigation and avoid redundancies.
• Design Ops implementation: Design Ops protocols were established to improve communication and workflow between design and development, facilitating an accurate handoff process without information loss.

The project's execution was structured as a spiral process, following the Double Diamond methodology. Each cycle refined and extended functionalities, ensuring that each iteration enhanced the cohesion of the design system and the quality of the interface.
 

Discovery Phase

• UI Audit: A thorough audit of existing components and design patterns was conducted, identifying areas for improvement and defining the foundational values for design tokens.

Definition Phase

• Establishment of Design Tokens: Insights from the audit informed the creation of a token system in Token Studio, aligned with key elements like color, typography, and spacing. This system was synchronized with Storybook to ensure consistency throughout the project.
• Information Architecture Planning: A detailed information architecture was developed to optimize the platform's organization, eliminating redundancies and improving navigation in a highly complex interface.

Development Phase

• UI Kit Construction: Leveraging the design tokens and atomic design principles, a modular and scalable component library was built. Each component included variants, states, and detailed documentation to improve reusability and customization.
• Development of Advanced Features:

1. Codemap: A visualization interface using Circle Packing, where directories and files are represented as circles and hexagons, respectively. Visualization layers allow for gradient-based analysis of health, complexity, and update frequency, with search and filter options.
2. Assistant: A chat-like interface that facilitates guided navigation and command execution within the platform, displaying metadata and linked code snippets, along with dynamic CTAs for quick actions.
3. Explorer: A codebase explorer presenting documentation alongside search results, enabling filtered navigation that reveals only relevant code fragments.

Delivery Phase

• Standardized Handoff System: A detailed handoff system was developed in Figma, with templates describing each component's functionality, use cases, and exceptions, ensuring accurate implementation by the development team.
• Ongoing Alignment with Development via Design Ops: Each design delivery was reviewed collaboratively with the development team to ensure alignment and fidelity during implementation.

The implementation of the design system and new functionalities yielded several tangible benefits:

• Improved Development Efficiency: The standardized design system and handoff process enabled faster and more precise implementation of components.
• Enhanced Cross-Team Communication: Design Ops protocols streamlined collaboration between design and development, reducing review cycles and fostering clarity in every delivery.
• Cohesive User Experience: The information architecture and integrated functionalities significantly improved usability and navigation in a complex environment.

The project delivered significant outputs and improvements, including:

• Tokenized Design System and Modular UI Kit: A robust and scalable design system with documented components synchronized in Storybook.
• Standardized Handoff Process: Figma templates and guides that ensured a seamless workflow between design and development.

Advanced New Features:

• Codemap: A visual tool interpreting the health and complexity of the codebase through interactive Circle Packing graphics.
• Assistant: A chat-based assistant interface optimized for navigation and command execution within the platform.
• Explorer: A codebase explorer enabling quick consultation of documentation tied to specific code fragments.