Take full control of your AI Roleplay
with advanced flows and agents

astrsk / Product Design / 2025

astrsk
Product Design
2025

What is astrsk?

Astrsk is an AI powered role play platform that lets users engage with AI characters in immersive, interactive scenarios. Beyond simply participating, users can create custom characters and plots, building personalized role-play experiences. Our goal is to attract more casual users with an intuitive, user-friendly design while keeping power users engaged with advanced features that offer full flexibility for their creativity.

MY ROLE

Reviewing current product
Analyzing user feedback
Ideation on OKRs and product IA
Wireframing on UX flows
UI design
Building design system
Onboarding & managing Junior Designer

COLLABORATION

Junior Product Designer

Lead Engineer + 2 Engineers
Business Lead

TIMELINE

Jun 2025 - Present

PROBLEM

Mixed feedback was received from the launch of astrsk 1.0

Advanced users felt restricted by the product's simplicity

astrsk 1.0 received both positive and negative feedback from our users

After releasing astrsk 1.0, we gathered user feedback and discovered that the update was only a partial success. Casual users appreciated the simple, easy-to-learn experience. However, in our efforts to streamline the product, we unintentionally removed too much functionality. As a result, our advanced users felt the new version was overly restrictive and didn’t meet their needs.

SOLUTION

Identify the target user group for each section of our product and design an experience tailored to their needs

To achieve this, I divided the product into two categories:

Shared sections used by both casual and advanced users
Advanced sections primarily designed for advanced users

This approach allowed me to create simple, intuitive experiences in the shared sections so casual users could navigate them with ease, while reserving more complex, feature-rich tools for the sections dedicated to advanced users.

For example, Sessions is the core area where users engage in role-playing with AI characters. This is a feature enjoyed by both casual and advanced users. Because casual users often lack a coding background, I prioritized GUI-based interactions over technical, code-heavy features, aiming to make the entire experience feel more like a game than a complex tool.

User interface for Sessions and Session create

Enlarge Slideshow

On the other hand, Flow & Agents is an advanced tool that lets users build AI workflows by creating and connecting multiple agents. This process is inherently complex, requiring time, effort, and solid coding knowledge. To support this, I designed the interface as a professional grade builder tool rather than a simplified, beginner-friendly experience.

User interface for Flow & Agents 2.0

Through this process, we completed astrsk 2.0, a role-playing platform that is both accessible to casual users and powerful enough for advanced users who want to deeply immerse themselves and build their own custom role-playing worlds.

Design Process of Flow & Agents

During the redesign of astrsk 2.0, I worked on multiple features and tools. However, to keep the storytelling clear and focused, I will highlight the design process behind Flow & Agents. This section was particularly important because it represented one of the most critical areas where advanced users voiced the strongest dissatisfaction.

1. How to interact with multi-agents

One of our key advantages over competing services was the ability to leverage multiple agents. Instead of placing all prompts into a single agent, this approach allowed the most relevant agent to be activated at the right moment, leading to greater efficiency and higher quality outputs from the LLM.

The main challenge was how to clearly visualize the relationships between agents. Users needed to easily understand how agents were connected, in what sequence they operated, and intuitively know how to create and edit them.

The breakthrough came by adopting the familiar structure of flowcharts as the foundation for building our AI workflows. Because this pattern was already widely understood, it made it easier for users to grasp how Agents operated within a Flow. During my research, I also benchmarked other agent-based services, identifying and adapting interaction patterns that could further enhance our product experience.

Initial ideation of the multi-agent flow

2. How to design a builder's tool

Until this project, much of my design experience had been centered around general administrative services. In contrast, Flow & Agents needed to function as a professional builder’s tool, tailored for a highly specific user group with developer-like tendencies.

This presented a new challenge for me. To prepare, I studied established builder tools across design and coding domains to understand proven interaction patterns and identify what could be adapted. My initial drafts drew inspiration from interfaces I was most familiar with, such as Figma and the Adobe suite, applying their approach of placing high-level menu options at the top and detailed edit panels on the right side of the screen.

Adapting workspace layout from other proven tools (Figma/Photohop)

I also drew inspiration from VS Code, a tool widely used by developers. I added a left-hand navigation bar for quick switching between sections, and designed editing panels that docked on the far right by default but could be resized and repositioned at anytime through drag and drop. This flexibility catered directly to advanced users who value customizing their own workspace.

The interaction of edit panels being resized and repositioned

Through this process, we developed the first draft of the redesigned Flow & Agents and built a test prototype. This allowed us to evaluate the experience internally and gather early feedback from a small, closed group of test users.

Frist draft design of Flow & Agents 2.0

3. Need more workspace

During internal testing of the redesigned Flow & Agents, one issue quickly surfaced. Screen space was too limited. To maximize capabilities for advanced users, we had introduced multiple features, but this left the interface feeling crowded. Working with two or three panels was manageable. However, most developers preferred keeping several panels open at the same time, which made it difficult to see the overall flow at a glance.

Too many panels making it difficult to view the flow

To solve this, we designed the New Window feature. Many developers already use multiple monitors, so this functionality let them open additional synchronized windows of the same workspace. For example, one monitor could show the flow while another displayed multiple editing panels, creating the feeling of one large, unified workspace.

Using New Window to expand the workspace across multiple screens

For users on laptops or with only one monitor, we also introduced the option to expand the coding area within a panel. While not as powerful as New Window, it relieved some of the frustration developers feel when working with limited screen space.

Field expansion within a panel feature

4. Casual users are the future advanced users

Although Flow & Agents was primarily designed for advanced users, I wanted to ensure casual users were not left out. As casual users became more engaged in role playing, some would naturally want to set up their own agents and experiment with custom flows. After all, these casual users often grow into advanced users over time.

The challenge was making a code heavy tool approachable for people without a coding background. After exploring different options, we introduced the idea of a vibe coding panel. With this feature, users could simply describe what they wanted in everyday language, and the AI assistant would generate the code and apply it in the right place.

Initially, I saw this as a way to lower barriers for casual users. But by the end of the design process, it became clear that advanced users would also value the feature, since it allowed them to move faster and focus on higher level problem solving.

VIDEO