Overview
As the lead UX Designer on this project, I guided the development of a Figma design system tailored to generative AI use cases. The aim was to create a flexible system capable of accommodating various media types including image, text, video, and audio, while adhering to emerging UI/UX patterns in the generative AI space.
Challenges
The primary challenge was to design a system that could seamlessly integrate with AI-generated content, which often involves unpredictable outcomes. Additionally, we needed to incorporate emerging UI/UX patterns specific to the generative space, including iconography, color schemes, animations, and language.
Faktum typeface
Faktum is an exploration into the geometric sans genre, inspired by Mid-century modern architecture and interior design. This font lends itself well to a bold, developer-first product.
Buttons
Buttons are the touch point for user action, eliciting excitement and innovation.
Dynamic color
Gradients were employed to enhance visual appeal and convey a sense of dynamism.
Background first?
This subtle gradient background became the foundation of the design system. Recognizing the overwhelming association of purple with AI, we incorporated purple hues into our design system, symbolizing innovation and magic in AI-driven technology.
Approach
Iconography: Leveraging familiar metaphors such as magic wands, sparkles, crystal balls/orbs, and friendly robots, we developed a set of icons that resonated with users' perceptions of AI magic and innovation.
Color Scheme: Recognizing the overwhelming association of purple with AI, we incorporated purple hues into our design system. Purple symbolizes creativity and imagination, both of which are pillars of our product ethos. Gradients were employed to enhance visual appeal and convey a sense of dynamism.
Animation: To emulate human behavior and engagement, we implemented animations for the "generating..." process. Results were unveiled gradually, mimicking the anticipation and excitement of uncovering insights and creations.
Messaging and Notifications: Like many companies rushing to launch new AI features, we introduced "Beta" badges, "Coming Soon" banners, and disclaimers to manage user expectations and communicate the experimental nature of certain functionalities.
Long-term AI Integration: Considering the evolving landscape of AI integration, we envisioned a shift towards ultra-minimalism, potentially leading to the extinction of traditional user interface actions. This would entail a streamlined and intuitive user experience, where AI seamlessly anticipates and fulfills user needs with minimal input. We look towards using our text generation offerings to evaluate AI models themselves, taking the guess-work out of selecting a model for your specific use case.
Impact
The developed Figma design system provided a cohesive framework for designing AI-driven interfaces across various media formats. By embracing emerging UI/UX patterns specific to the generative space, we enhanced user engagement, and fostered trust in AI technologies.
Conclusion
Through meticulous research and iterative design processes, we successfully crafted a Figma design system tailored to the unique requirements of generative AI use cases. By incorporating iconic elements, vibrant purple hues, captivating animations, and thoughtful messaging, we not only met user expectations but delighted them an. All while implementing a robust design system ready to be formed by future of AI.
