create. Caste Study
Role: UX Designer
Timeline: 2 months, 1 week sprint cycles
Team: Brace Sproul (Software Engineering), Dhruv Amin & Marcus Low (Co-founders), Gaby Corrales and myself (UX Design)
About create. (create.xyz)
Create is an AI-powered agency that helps founders build software products faster than ever by providing reusable implementations, LLM-based autobuilders, and on-demand vetted developers, resulting in rapid deployment and shortened development cycles.
Problem
Create's developed an AI agent platform for automatically building software features based on user-generated prompts. While the platform could successfully build new features using AI, the end products suffered from inconsistent design and aesthetics due to the use of components from different sources with varying design systems, brand guidelines, and color palettes, resulting in a mismatched and sloppy appearance.
Solution
The UX team, comprised of Gaby and myself, addressed the issue by designing a comprehensive component library that encompassed over 300 components pulling inspiration from popular design systems like Material Design and Human Interface Guidelines. This library enabled the AI agent to utilize consistent components, resulting in successful feature builds that maintained a cohesive design and aesthetic.
Kicking off the process
To begin the process, I conducted an extensive exploration of established design systems and generic component libraries to gain insights into consistent themes and elements across various systems. The key design systems I examined were Google Material Design, Apple Human Interface Guidelines, and the Untitled UI component library. This research aimed to identify common patterns, best practices, and fundamental components that could serve as a foundation for our own comprehensive component library
Essential Components
After conducting a comprehensive exploration of established design systems and identifying consistent themes, our team focused on curating a set of essential components commonly found in web applications. These components were carefully chosen to cover a wide range of design elements while aligning with user expectations. Among the most frequently encountered components that emerged from our research are:
check box
Data table
Sidebar navigation
Autocomplete
Dropdown
Date picker/calendar
Popover
More menu
Search
Selector
Tooltip
Text field
Button
Modal
Badge
Switch
Avatar
By carefully selecting these widely used components, we covered a wide range of design elements building a solid foundation for our components library. These components not only ensure consistent user experiences across the AI agent platform but also offer flexibility for designers and developers to customizer to fit their needs.
Color palette
In order to establish a cohesive and user-friendly design system, we made a deliberate decision to use a standardized template ranging from 50 to 900 to define our color palette. This template provided consistency and clarity for developers when implementing the design system's colors.
Our color palette was carefully crafted to include distinct color ranges, such as Blue, Yellow, Red, Pink, Purple, Gray, White, and Black. By incorporating these diverse hues, we aimed to create a versatile and comprehensive set of colors that catered to various UI elements.
One of our key objectives was to maintain a neutral color palette that allowed the AI agent to generate UIs with a generic yet polished appearance. This intentional neutrality ensured that the end user experienced a high-fidelity representation of their own designs, while also providing them with the flexibility to envision their own brand guidelines within the platform.
Creating components
When our team was finally ready to start creating components we adopted a progressive approach that began with crafting fundamental elements such as buttons, checkboxes, switches, and text fields. These foundational components served as building blocks for designing more intricate elements, including date pickers, data tables, modals, and beyond.
By prioritizing the development of basic components, we ensured a solid foundation for our design system. These fundamental elements established consistent visual patterns and interactions that would be seamlessly integrated into the more complex components. This step-by-step progression allowed for a systematic and efficient creation process, ensuring the overall cohesiveness of the component library.
Iteration
While our team drew inspiration from established design systems and component libraries, we recognized the importance of crafting a unique and distinctive library that aligned with our specific objectives. Therefore, we underwent an iterative design process, refining our components through four dedicated passes.
With each iteration, we gradually distanced ourselves from the design systems that initially inspired us. This allowed us to infuse our component library with a sense of originality and innovation while ensuring that the overall look and feel remained versatile and generic. By striking this balance, we aimed to create a library that could adapt to various design requirements and provide a high-quality user experience.
The final product
Our final product is a remarkable collaboration between the design and engineering teams, resulting in an AI platform where users can input their ideas, enabling the agent to autonomously generate visually appealing and functional UIs. While this achievement is impressive, it's important to note that the AI agent's output may not always perfectly align with user expectations, as the AI-driven process has inherent limitations. Nonetheless, this platform represents a significant milestone in leveraging AI technology to enhance user experiences.
By merging the design team's attention to detail and user-centric approach with the engineering team's technical prowess, we created a platform that surpasses expectations. Users can now witness their ideas come to life through the AI agent's capabilities, swiftly transforming concepts into immersive UIs.
What I learned
Throughout this process, I gained some valuable insights into the challenges of creating something that is truly generic. It turned out to be more difficult than I initially thought, as my natural inclination as a designer is to create unique and branded experiences.
One of the main challenges I faced was finding the right balance between adhering to existing design patterns from established design systems and infusing our own unique touch. It required careful thought and intentionality to ensure that our design details, like drop shadows, corner radii, and other visual elements, had a distinctiveness that set them apart while still maintaining an overall sense of coherence and familiarity.
Despite the challenges, the journey of creating a generic component library was a rewarding one. It gave me a deeper appreciation for the importance of paying attention to even the smallest design details and making purposeful decisions. It was exciting to see how each iteration brought us closer to finding the right balance between generic and unique elements.
Overall, this experience taught me the value of thoughtful decision-making and intentional design choices. By navigating the complexities of creating a generic design that offers flexibility and adaptability, we were able to develop a component library that serves as a solid foundation for designing intuitive and visually appealing user interfaces within our AI agent platform.