Prompt Friend Design System
Creating a DS for an AI conversational interface from scratch.
Creating a DS for an AI conversational interface from scratch.
Creating a DS for an AI conversational interface from scratch.
Client
Prompt Friend
Services
Design System
Date
March 2024 - continuing
Link
Figma file
mail Extension
I designed an AI-powered mail extension for mail.
I designed an AI-powered mail extension for mail.
Mail Extension
Overview
A future-friendly Design System
A future-friendly Design System
A future-friendly Design System
A future-friendly Design System
During my time at Prompt Friend, I developed a design system for our text-based conversational interface.
Despite the original GUI being quite homogenous, my research revealed the dynamic nature of AI-driven GUIs, with ever-changing experiences, patterns, and use cases. Thus, I aimed to create a design system I wanted to create a design system that was functional and organisational towards our GUI while fostering a living ecosystem that supports innovation, growth and evolution.
.
Given the experimental and iterative nature of the project, I focused on crafting a future-friendly system that facilitated speed during testing, wireframing, and prototyping, fostering a shared vocabulary among the team.
Benchmarking
Analysing what already exists
Once I start a project, I usually like to observe and study what already exists on the market. This helps me get a deeper idea of what sort of functionalities do exist.
The goal is to understand the competition better and to asses how can we differentiate in terms of product and functionalities.
Overview
Designing an AI mail extension
In my tenure with Appcent's AI team, I've contributed to various AI-related projects, including designing Safari extension, designing a text-based interface or introducing new features. One project involved crafting an AI-powered mail tool extension for AppleMail.
My Role
Finding
functionality
As a UX/UI designer for this project, my responsibilities were twofold: understanding the technical constraints and meeting user needs to ensure the extension was both user-friendly and valuable.
I firmly believe that AI tools must serve a genuine purpose for users; otherwise, they risk being perceived as redundant.I’m a firm believer that AI tools can be very powerful, as long as they provide a real purpose to users, if not they are useless.
Timeline
January 2024 - April 2024
Role
UX Designer
Engineering
Questions appeared
-How would a user interact with the mail extension?
-In what situations users can find the extension useful?
-Do users use text-based interfaces platforms to reply mails?
Those and many more questions popped up, when joining the project, which means the project required a deep understanding of users in that matter.
Design Considerations
Key findings helped to articulate design decisions
Key findings from our research underscored the importance of context, simplicity, and integration within the mail app. Each email carries its unique context, demanding tailored responses.
Due to technical constraints, we focused on enabling feasible tasks within the extension, emphasizing simplicity to minimize friction. Integrating seamlessly into the mail app was crucial to maintain user familiarity and efficiency.
Additionally, providing users with the flexibility to adjust the tone of their responses ensured a personalized experience.
Solution
Generating responses with adaptive tone
With these insights in mind, I crafted a streamlined and intuitive mail extension that adds genuine value to users' email workflows. The extension offers simplicity and purpose, empowering users to respond effectively while retaining flexibility and control over their messages.
My role
Creating a DS from scratch
Creating a DS from scratch
Creating a DS from scratch
Creating a DS from scratch
My role consisted on designing and creating the DS from scratch, with the goal of elaborating a system that could grow through time.
Among my capabilities were: Auditing and analysing the components of the current screens, categorising and organising all design elements in our project and experimenting with new components that could open to new possibilities.
Timeline
March 2024 - ongoing
March 2024 - ongoing
Role
Design System designer
Design System designer
Process
Auditing & Screenshooting
Auditing & Screenshooting
My approach involved auditing and screenshotting all components in our current screens to assess their viability.
It was mandatory to keep an open approach of our current interface, considering the vast amount of changes and technical constraints LLM offers. However it was very important to have a great structure for our interface, even though the LLM would provide certain difficulties.
Piggyback old projects
Piggyback old projects
Key findings helped to articulate design decisions
Piggyback old projects
Piggybacking off another project allowed for the seamless integration of a pattern library.
As creating a design system from scratch might seem an arduous task, this approach helps to get inspiration and set a direction from the very beginning.
Categorising elements
Categorising elements
Following atomic design principles, I categorized all existing components, breaking down the UI into its constituent elements.
I initially focused on basic elements like buttons, logos, and text fields but aimed to expand the library over time to accommodate growth.
Regroup Patterns
Regroup Patterns
After sharing my findings with the team, I incorporated feedback to refine the design system further. Continuous iteration was crucial, as it ensured the system accurately captured all UI patterns.
One of the great benefits of pattern inventories is that as soon as you start assembling components and categorizing them you start discovering UI problems (like abundance of dissimilar buttons, inconsistency of some patterns or unnecesary components).
Documentation
Documenting the process
Documenting the process
Documentation played a vital role in communicating the design system across the organization. It encompassed insights from various disciplines and was integrated into the living, breathing system.
A good Design System should provide comprehensive descriptions of UI components, covering aspects such as accessibility, performance, and aesthetics.
Maintenance
Keeping it alive
Keeping it alive
A common misconception surrounding design systems is the belief that once established, they become infallible sources of truth, unchanging and omnipotent. However, adhering to such a rigid mindset is a recipe for failure in design system efforts.
When a pattern library no longer accurately reflects the current state of the products it serves, it becomes obsolete. This can occur due to changes in technology, evolving user needs, or shifting design trends. Particularly when working with AI systems, which undergo systematic evolution, regular updates to the design system are essential to ensure its relevance and effectiveness.
Furthermore, as the conversational interface and the capabilities of the underlying AI continue to advance, the demands placed on our product will grow in tandem. Therefore, the design system must also evolve to meet these increasing demands.
However, as the system is applied to more products, it's inevitable that gaps will emerge where existing patterns do not fully address the unique requirements of a particular application. Care must be taken to avoid the design system becoming bloated with unnecessary components. Instead, new patterns should be introduced thoughtfully and strategically to address these gaps while maintaining the system's cohesion and efficiency.
Exploring
Exploring new patterns
Exploring new patterns
The vast landscape of AI introduces numerous new patterns, challenges, and opportunities for usability. Therefore, it's crucial to continually explore and experiment with new components and patterns that pave the way for innovative Human-AI interaction.
In addition to exploration, I advocate for prototyping and testing new patterns aimed at solving specific problems. This approach enables us to evaluate the effectiveness of these new components firsthand and facilitates the expansion of our Pattern Library in a meaningful way. By embracing experimentation and iteration, we can ensure that our design system remains adaptable and responsive to the evolving needs of our users and the capabilities of AI technology.
✨
Connect to Content
Add layers or components to swipe between.
✨
Connect to Content
Add layers or components to swipe between.
✨
Connect to Content
Add layers or components to swipe between.