Introduction

The Codat Design System, named Orchard, was developed with the goal of managing and upholding the company's design standards. The project's main objective was to create and design new components that could be used across all of Codat's products, while also ensuring accessibility for all users.

Challenges

One of the key challenges faced during the development of Orchard was the need to simplify complex data into a digestible format. Codat's main goal is to empower technical users such as engineers, developers, and support staff, by simplifying complex data into a digestible format. This means that the design system needed a range of data visualization components and also needed an array of filtering solutions.

Solution

To address this challenge, the team focused on creating a range of data visualization components and an array of filtering solutions. The design system includes a visual language, UI tokens, UI components, interaction patterns, page templates, visualizations, and documentation. To ensure that the design system met the needs of its target users, the team made sure to understand the many ways users wanted to interact with the data and made it possible through the design system.

Achievements

• The team crafted a code block that can be live-edited on the page, and it affects the next API request, it can also be copied or downloaded for further inspection.

• The design system also places a strong emphasis on communication, particularly when something is broken. To address this, the team created a zero-state component which adds extra functionality to the page, allowing the user to reload a specific section, clear their search, among other actions.

• In addition to data visualization, the design system also includes data tables. These tables have been highly curated to allow Codat designers to include relevant information on the same page while reducing complexity. The expandable table rows allow for nesting items within categories, and also show visualization on a row-by-row basis.

• A situational control bar has also been added, which allows the user to edit the table inside the page, recognizing the data and creating new metrics or data to visualize.

  
  

Conclusion

Overall, Orchard design system is carefully crafted to meet the needs of its target users while providing a clean and user-friendly experience. It has a range of data visualization components and filtering solutions to empower technical users such as engineers, developers, and support staff by simplifying complex data into a digestible format. The design system also places a strong emphasis on communication and allows users to interact with the data in various ways. The data tables are highly curated and designed to reduce complexity while allowing users to nest items within categories and visualize data on a row-by-row basis.