What is the Kaleidoscope Design System?
The Kaleidoscope Design System is a comprehensive set of guidelines, rules, and components that ensure consistency in the design of all products across the platform. As the UX/UI Designer at Kaleidoscope, I recognized the need for a robust design system to streamline our design process and maintain brand consistency. The design system was built using Ant Design System as the base component library and was customized to meet our branding needs.
Category
Kaleidoscope - In House
Role
User Research
User Testing
UI Design
Project Definition
The primary objective of the project was to design a user-friendly interface for the Review Board feature at Kaleidoscope. Before the project, the only way to set up a Review Board was through Salesforce, which required technical expertise and was not accessible to all users. Thus, the key challenge was to create an intuitive and easy-to-use interface that could enable users to manage the Review Board process themselves. The design solution needed to be seamless and user-friendly, while also providing a robust set of features to support the complex process of review management.
To accomplish this, the project involved conducting extensive research into user needs and requirements, analyzing user feedback and pain points, and collaborating with stakeholders to ensure that the design solution met business objectives. The team also conducted several rounds of user testing and iteration to refine the design and ensure it met user needs.
Overall, the project aimed to create a solution that would improve the user experience and streamline the Review Board process, while also reducing the need for technical expertise and making it more accessible to all users. The resulting interface was designed to be intuitive and easy-to-use, with a streamlined process for creating and managing review boards that allowed users to focus on their core tasks without being burdened by technical details.
Understanding the Problem
A design system was essential to ensure a consistent and efficient design process at Kaleidoscope. As the only designer on the team, I quickly realized the need for a design system to streamline the design process and improve collaboration between the design and engineering teams, which were located in different parts of the world. Prior to the implementation of a design system, engineers were using screenshots of the product with pasted updates for handoffs, which led to inconsistencies and inefficiencies. By establishing a design system, we were able to provide a shared language and visual framework for the entire team, ensuring that all features were designed and developed with consistency and efficiency. The design system not only saved time and effort, but it also helped to elevate the quality of the product and ensure a more seamless user experience.
Research
To start with, we set out the specific goals and requirements we needed for our design system. We wanted a system that could be flexible and compatible with our tech stack, which would allow us to create a consistent user experience across all our products. Additionally, we needed a system that could provide a solid component library, which would serve as a good starting point for our designs and prototyping.
To identify potential design systems, we conducted thorough research using various methods. We consulted with industry experts, reviewed online forums and blog posts, and compiled a list of the most popular design systems. We also evaluated design systems based on various criteria, such as ease of use, level of customization, and compatibility with our tech stack.
After carefully considering the pros and cons of each design system, we selected Ant Design System as our preferred option. This system was chosen because it provided the flexibility we required and offered a wide range of components that could be used to create a consistent user experience. Additionally, Ant Design System was well-suited to our tech stack, making it an ideal choice for our design needs.
In summary, we conducted thorough research to identify the best design system for our needs. By evaluating and testing various design systems, we were able to identify the most suitable option that met our requirements.
Adopting to the Ant Design System
The Ant Design System provided us with a robust set of components that we could use right away. However, to ensure that the design system aligned with the Kaleidoscope brand, the first step we took was to customize the component library. This was an essential step that allowed us to quickly get up to speed with our designs and prototyping. As we progressed with our design work, we iterated and customized the design system to better fit our needs. Over time, we expanded the design system to include more and more components, and it eventually evolved into a fully customized Kaleidoscope design system that served as the foundation for our design work. This allowed us to create a cohesive and consistent user experience across all our products.
.png)
Outcome
The Kaleidoscope Design System enabled us to develop a deep component library that provided quick design mockups and prototyping capabilities. This allowed for faster designs for engineer handoffs and development builds. The engineers were able to view the Figma files and use the inspect tool to view the specifics of the designs, which helped them build a consistent design. Our design system has been instrumental in achieving consistency and speed throughout our development process.
The Kaleidoscope Design System includes a color palette, typography, iconography, and other design elements that are used throughout the platform. This system ensures that all design work is consistent, and that our products have a cohesive look and feel. With this system in place, the design team was able to work quickly and efficiently on new product features and enhancements, without compromising on quality or consistency. Ultimately, the Kaleidoscope Design System has helped us to develop a stronger, more consistent brand identity, and has been a critical factor in our success as a platform.
