AI Studio
4-5 Months
1 PM, 1 Designer, 1 Prompt Engineer, 3 Software Engineers
Figma, Figjam, Adobe Suite
Product Designer, UX/UI
Decision tree’s are the basis of AI systems. However, complex variables and branching paths make the engineering process incredibly confusing.
Our team sought to build a studio of AI based tools, our goal being to help prompt engineers quickly construct complex chains which can be edited, compared, and analyzed all within one “playground-esque” environment.
Limited on screen real estate makes viewing large-scale prompt chains difficult
Chains get increasingly more time consuming to build and iterate on the longer they get. Prompt engineers are experiencing difficulty creating chains with multiple layers and versions.
Lack of version control makes the prompt chains difficult to manage
Existing systems are static and unable to be iterated on in real-time. Engineers are struggling to reasonably visualize chains vs. their counterparts and the relationship to their prompts.
Monotonous UI style makes the complex prompt chains difficult to read and unscannable
There is a need for a way to visualize the overall nested hierarchy of the prompt chains. Structures are currently too confusing to be understood without significant effort and time investment.
Within this case study we’ll delve into the challenges and complexities of designing for AI, as well as go over my general process & designs in a new and ever-evolving environment.
What is our goal with this design?
The Logic Builder is to design a space where prompt engineers have the freedom and resources to construct large-scale prompt chains. We must create a “playground-like” environment that facilitates creation, organization, and manipulation of complex prompt structures.
What necessary capabilities must the design cover?
What are some rules we must abide by?
Due to engineering restraints the logic builder must have a static “block like” structure and cannot support moving pieces within its canvas.
Priority for this tool is HIGH and has a two week deadline for both ideation and iteration. Engineers are currently unable to work on large prompts until the tool is complete.
Simplified drop down menus with precise commands allow prompt engineers to quickly add variables and create multiple branching to construct complex, large-scale prompt chains in a “playground-like” environment.
The construct, organize and revise features allow the engineers to swap or iterate on their prompts with their other versions in real-time.
What is our goal with this design?
In the previous design we created an environment for engineers to build chains of prompts. Our next challenge will be to create a space where engineers can compare different chains they’ve built and assess the overarching relationship between them.
What necessary capabilities must the design cover?
What are some rules we must abide by?
Prompt chains can be up to 10 items long and there might be up to 6 chains being compared at the same time. The design must be able to support up to 60-70 items which can be evaluated & searched for in a timely manner.
Priority for this tool is MID-HIGH and has a 12 day deadline. Engineers are currently unable to work on large prompt chains until the tool is complete.
The Prompt Bay facilitates the comparison and analysis of different chains constructed in the Logic Builder. The platform provides a centralized space for engineers to visually assess the relationships between all the prompt variations.
The Prompt Bay allows the engineer to calibrate, manage and evaluate in a panel-style menu system. The customizable grid view allows the engineers to tweak the displays base on their preferences.
How can we visualize the nested hierarchy more efficiently?
Our goal is to redesign the chain structure into a visually scannable format, providing a clear and intuitive way to visualize the nested hierarchy of prompt chains. We aim to utilize the reimagined structure primarily as a navigational tool when in the program.
What necessary capabilities must the design cover?
If any, what are some rules we must abide by?
The prompt tree can have up to 60 nested items at a time. The design must still be scannable and function under high numbers of prompts.
There are a multitude of variables which must be shown in the tree. Something we mustn’t overlook is the color coding. Green and red were used to indicate true or false statements in other parts of the platform; however, if used in the tree it would be impossible for a person with green-red color blindness to read the prompts state. We must find a way to convey states of prompts as efficiently as possible while also complying with ADA standards.
The Prompt Tree is a navigational tool designed to visualize prompt chains in a clear and scannable format. The tool allows the engineers to efficiently assess and navigate between a massive amount of prompt chains at one time.
The Prompt Tree allows the engineers to navigate, visualize and browse the appearance of the tree base on preference.
The goal is to identify ways to optimize the existing workflow and minimize time spent on tasks and maximize creative freedom. This could involve adding search functionality, integrating better ways to import or export out of the system, and ultimately aiming to enhance productivity for users.
What necessary capabilities must the design cover?
We will set the KPI: the speed of completing a task flow as our primary requirement which must be improved upon with this design.
In order to test this we must create a figma prototype of the new version and compare the speed of completing a certain task against the original iteration.
If any, what are some rules we must abide by?
The main constraint with this design challenge is time. Infinite revisions can occur but do to our time constraint of 2-3 weeks total we must identify the highest priority changes first to solve.
Developing a design system of components in Figma was the main contributor to the speed of the AI studio. Standardizing the elements into reusable components, allowed us to create Figma prototypes extremely quickly for immediate testing with engineers.
Dynamic scaling Prototype enabling the flexibility to stretch any panel to accommodate varying content sizes. This feature would allow users to adjust panel sizes according to their preferences and workflow requirements.
Due to an NDA, images within this case study have been scrubbed of most of their text. Any text remaining has either been altered or replaced with similar words for contextual reasons.
Feel free to request a live demo via my email or LinkedIn
In hindsight, I wish we had more time to conduct additional user testing to validate design decisions and further refine the platform. Additionally, I would have focused more on integrating user feedback earlier in the design process to ensure a more defined approach from the outset.
Optimized by Seraphinite Accelerator
