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.

Final take

A fluid and consistent design system

A fluid and consistent design system

A fluid and consistent design system

The design system we've developed serves as the initial foundation, but it's far from a finished product. In reality, a design system is a living entity, constantly evolving to meet the ever-changing demands of technology and user expectations.

The beauty of a design system lies in its fluidity. The more adaptable and versatile our UI components are, the better equipped we are to address the diverse needs of our clients and organizations.

Ultimately, our goal is to deliver exceptional work that enhances the user experience and achieves our objectives. Design systems serve as a powerful tool in achieving this goal, providing us with the framework and flexibility needed to innovate and excel in the ever-evolving landscape of interface design.

Work

UX + AI

About

Contact

Work

UX + AI

About

Contact

Work

UX + AI

About

Contact

Work

UX + AI

About

Contact