Friendli Playground
Designing a Scalable Playground for Ever-Evolving Generative AI
Friendli Playground is an interactive playground that allows AI developers to experiment with, test, and deploy prompts for Large Language Models (LLMs) in real-time.
TIMELINE
Jul 2024 - Present
ROLE
Sole Designer
(User Flows, UI Design, Prototyping, Usability Testing, Visual Design and Design System)
FOR
WITH
4 Frontend engineers,
Product manager
ABOUT COMPANY
FriendliAI is a B2B company specializing in generative AI infrastructure solutions. Its mission is to empower organizations to harness the power of generative AI with ease and cost-efficiency.
ABOUT PRODUCT
FriendliAI offers the Friendli Suite platform, which automates the building and operation of generative AI models in both cloud and on-premises environments.
PROJECT OVERVIEW
Designing a Scalable Platform for Generative AI
The Friendli Playground is an evolving platform designed to empower users to fully leverage the capabilities of generative AI models. With a growing suite of features, the platform continuously expands to meet diverse business needs.
As the sole designer on this project over the past year, I have worked to seamlessly integrate new features into the platform’s initial launch UI, ensuring alignment with business goals. At the same time, I focused on addressing and improving the platform’s existing challenges to enhance the user experience and help both new and existing users easily adapt to its growth.
01
Background: What is Friendli Playground?
LLM PLAYGROUND
Friendli Playground: An LLM Playground
The Friendli Playground serves as an LLM Playground for Friendli Serverless Endpoints, enabling users to experiment with large language models (LLMs) in real time.
It provides user-friendly interfaces where users can input prompts, adjust parameters, and observe how different models respond, facilitating a deeper understanding of LLM capabilities.
TIMELINE
Friendli Playground Milestone Timeline
Since January 2024, Friendli Playground has been continuously evolving by adding new features to keep pace with the rapidly changing trends in generative AI technology.
JAN 2024
SEP 2024
DEC 2024
Initial Launch
Features
Model List
Explore and select from various AI models.
Chat UI Playground
Test models in an interactive chat environment.
Parameter Settings
Adjust settings to fine-tune model responses.
Second Launch:
Introduce Built-in Tools
Features
Built-in Tools
Introduced tools for math, web, code, and file-related tasks to enhance functionality.
Chat History
Enabled users to access and review past conversations.
File upload
Third Launch:
Knowledge Integration
Features
RAG-Based Knowledge Integration
Connect with external knowledge sources like Notion to reduce hallucinations.
Retrieval Testing Playground
Experiment with retrieval-based tasks to optimize knowledge usage and evaluate system performance.
02
Define Business Goals and Target Users' Needs
BUSINESS GOALS
With the expansion of features, the company aimed to highlight the following goals within the playground.
Fast and Affordable Performance
Providing reliable, high-speed performance at a cost-effective rate.
Rapid Introduction of Latest Features
Quickly introducing features like RAG and built-in tools to stay ahead of industry trends.
Minimized User Flow
Minimizing steps to enhance engagement and increase usage.
TARGET USERS
AI Engineers:
Developing AI-Powered Apps
Our target users are AI engineers developing generative AI applications, seeking efficient, user-friendly tools to streamline their work.
AI Engineer
Goals
Core Feature Development: Focus on building app features without worrying about infrastructure.
Cost Efficiency: Find affordable API solutions for early-stage projects.
High Performance: Ensure APIs deliver reliable and fast results for prototyping.
Scalability: Need solutions that can grow with increasing app demands.
Challenges
Infrastructure Overhead: Managing AI infrastructure is resource-intensive.
Cost Awareness: Hard to track usage and evaluate cost-effectiveness.
Learning Curve: Navigating complex tools and customizations without clear guidance can slow down progress.
While technology can address some of these goals and challenges, a UX-driven approach is essential to ensure usability and seamless interaction.
03
Research for Identifying UX Issues
COMPARATIVE ANALYSIS
Research on Other LLM Playgrounds
Since it was my first time designing an LLM playground, I began the project by researching similar services.
DEFINING PROBLEMS
UX Issues in Existing LLM Playgrounds
Before setting up design goals, I conducted research on existing LLM playgrounds to identify key UX issues from a user perspective.
Limited Guidance for Exploration
Playgrounds often lack built-in tutorials, tooltips, or sample prompts that guide users in crafting effective queries and understanding model behavior.
Poor Feedback Mechanisms
LLM playgrounds often lack clear feedback, leaving users confused about poor outputs and relying on inefficient trial-and-error methods.
Cluttered Interface
The interface is often cluttered with dense information and advanced settings.
Cost Transparency
Some Playgrounds lack clear pricing models or usage tracking, leaving users uncertain about how much they are spending or when limits are reached.
04
Design Process
DESIGN GOAL
Applying Usability Heuristics for Design
While addressing the business goals and existing issues of the LLM playground, I focused on designing interfaces that balance these priorities without compromising usability. I achieved this by selectively applying relevant principles from the 10 Usability Heuristics for User Interface Design.
Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Recognition Rather than Recall
Offer help in context, instead of giving users a long tutorial to memorize.
Flexibility and Efficiency of Use
Allow for customization, so users can make selections about how they want the product to work.
Aesthetic and Minimalist Design
Interfaces should not contain information that is irrelevant or rarely needed.
Help and Documentation
Whenever possible, present the documentation in context right at the moment that the user requires it.
DESIGN CRITERIA
Design Criteria for the Friendli Playground
Based on the business goals, user challenges with existing playgrounds, and design objectives, I have established a set of guidelines to adhere to throughout the design of the Friendli Playground
USER TESTING PROCESS
Post-Launch Testing for Rapid Feature Delivery
To achieve milestones and enable rapid feature deployment, testing was conducted post-launch. This strategy allowed our team to release features quickly and gather real-world user feedback for iterative post-launch improvements.
INTERNAL USER TESTING
Iterative User Testing
After each launch of the Friendli Playground, usability testing sessions were conducted with in-house AI engineers. The objective was to evaluate how effectively the design aligned with the established design criteria and to gather insights for iterative improvements.
05
First Launch: Setting the Foundation
Second Launch
Release Date: Sep 2024
Key Features
Model list
Chat UI playground
Parameter settings
Main Goals
Ensure users immediately understand what they can do in the playground upon visiting.
Emphasize the competitive pricing compared to other platforms.
HIGHLIGHT
Model List Page: Making a Great First Impression
I created a visually engaging Model List Page to show off the models we host, making it easy for first-time user to explore and quickly grasp our offerings.
HIGHLIGHT
Highlighting Cost-Effectiveness
After iterating on the model card designs, the final design was chosen to highlight cost-effectiveness by displaying the price on the card.
HIGHLIGHT
Customizability as a Core Feature
A side-by-side layout was implemented for the main playground, dedicating significant screen space to customization tools to clearly present the available options to users.
HIGHLIGHT
Reducing the Learning Curve with Prompt Examples
By presenting a variety of prompt examples instead of a blank screen, users are guided to quickly test and experiment within the playground, reducing the learning curve and encouraging immediate engagement.
LIMITATIONS
After the launch, we compiled UX issues to address in the first launch by analyzing feedback from internal user testing and insights gathered through Canny.
01
Unnecessary User Steps
Users had to navigate back to the model list page to select a model, leading to unnecessary steps and a disrupted workflow.
02
Limited Perception of Value
Although pricing was displayed, users struggled to fully grasp how cost-effective the models were. Similarly, the speed of the models was not easily perceivable.
03
Accessibility Issues
The “Docs” button was nested under the “More Info” menu, making it less accessible and harder for users to find.
04
Second Launch: Enhanced Outcomes with More Features
Second Launch
Release Date: Sep 2024
Key Features
Built-in tools
Chat history
File upload
Main Goals
Integrate new features while maintaining the existing layout to ensure continuity.
Address and resolve the challenges identified in the first launch to improve usability.
HIGHLIGHT
Streamlined User Flow
To reduce unnecessary steps, I eliminated the model list page and introduced a dropdown menu within the playground, enabling users to switch models directly without leaving the interface.
HIGHLIGHT
Tool Integration with Visual Clarity
Maintaining the side-by-side layout, I incorporated built-in tools to enhance functionality. To improve visibility, I implemented intuitive toggles and on/off tags, ensuring users can easily identify active tools.
HIGHLIGHT
Enhancing Transparency
To emphasize Friendli’s fast performance and cost-effectiveness, I displayed response speed indicators directly below generated answers and remaining credits in the header.
HIGHLIGHT
Improved Navigation Structure
I added a sidebar to streamline navigation, providing quick access to essential functions like New Chat, Chat History, Files, and Docs.
05
Thrid Launch:
Third Launch
Release Date: Dec 2024
Key Features
Knowledge (RAG)
External knowledge integrations
Main Goals
Add Top Navigation to ensure consistency with other products in the Friendli Suite.
Enabled users to directly test the uploaded Knowledge from the Model Playground.
CHALLENGES
While the second launch successfully met most of the design criteria, the addition of the high-priority Knowledge feature in the third launch presented a unique challenge. The main focus was to seamlessly integrate Knowledge into the platform while maintaining the significance and functionality of the existing model playground.
HIGHLIGHT
Top Navigation and Feature Separation for Clarity
I integrated a consistent top navigation bar to align the playground with other Friendli Suite products, ensuring usability and brand coherence. Additionally, I reorganized the menu structure by splitting the Model Playground into Model and Knowledge sections, making it easier for users to locate and engage with specific features.
HIGHLIGHT
Immediate Knowledge Testing
I implemented a workflow enabling users to upload knowledge and test it directly, providing a clearer experience of RAG technology that reduces hallucination and improves model performance.
07
Next Steps
Make Error Alerts More Helpful
Most LLM playgrounds have the same problem—when errors happen during response generation, users are stuck with no clear options. I want to tackle this by giving users more control, like suggesting fixes or offering alternative workflows to keep things moving.
Expand to More Model Types
Currently, the Friendli Playground only supports language model, but our team is planning to design for vision models, image-to-image models, and more. Each type of model will need a unique playground experience tailored to its purpose. I’m also excited to work on a model comparison UI so users can easily see the strengths of each model and make informed choices.
👈 Previous sketches of multi-modal playgrounds!
08
Final Takeaways
Keeping Up with Rapid Tech Trends 🤯
Generative AI moves fast—new models claiming to be the best are released constantly, and groundbreaking technologies can feel outdated in just a few months. As a designer delivering these cutting-edge tools to users, I’ve learned the importance of staying on top of trends and paying attention to how users react. This experience has helped me grow as a designer working on AI products, teaching me how to balance innovation with usability in such a fast-paced space.
Communication Is Everything
In tech-heavy products, clear communication with developers and PMs is key. Aligning technical possibilities with user needs takes teamwork, and this experience has sharpened my ability to collaborate across teams to deliver both robust and user-focused solutions.
