What is AI Studio?

Ushur offers AI solutions to automate document processing and customer interactions. AI Studio is a centralized platform for building, training, and managing AI skills with tools for testing, retraining, and data validation.

AI Studio

A centralized platform

Train & Manage AI Skills

Building a new AI activities eco-system from 0 to 1.

Classification

Knowledge

Language AI

Custom Extraction

Pre-defined Extraction

As is Analysis

There were only two screens in Figma with limited resources.

It was initially designed to accommodate a single AI skill with basic training capabilities. AI Studio needed a visual redesign that reflects Ushur’s commitment to innovation and its business strategy.

What did I do?

When I first began working on AI Studio, The first iteration was designed to only support a high-level flow for training classification skills. Recognizing its potential improvements, I analyzed the broader context and identified opportunities to make AI Studio more robust and extensible for future skill development and other features.

Initial version of AI Studio

Train classification skill

In this project, I’m showcasing my skills with a focus on...

  • System level design

  • Creating extensive design patterns

  • UX consistency across multiple projects

  • Being a decision maker

0

1

AI Studio creation journey

0.2

AI Studio

Classification

Skill

AI Skill Module

Document Extraction

Skill

Human in the loop (HITL)

Data validation

Custom Extraction

Skill

Knowledge(RAG)

Skill

My roles

  • Project lead

  • UI/UX Design

  • Design System

My team

  • Product Managers (3)

  • Engineers (7)

  • UX Designer (me)

Timeline

Feb 2023 ~ Dec 2024

Still ongoing

Roadmap

To create a central hub for AI skills,

I developed a roadmap with UX agenda.

While assessing the first version of AI Studio, I saw the opportunity to transform it into a centralized hub for all AI activities, including skill training, testing, and management.

AI Studio

  • One place for AI activities

  • A repository for skills

  • An extensive structure

  • Support large scale data

Classification

Skill

  • Create skills (auto/manual)

  • Train multiple versions of the skill

  • Test the skills and create test versions

  • Revise training flow

AI Skill module

  • New module to consume skills in Workflows

  • Support multiple types of skill

  • Create an extraction tool

  • Preview documents and extraction regions

  • Save extracted data

  • System level design

Document Extraction

Skill

Human in the loop (HITL)

Data Validation

  • Repurpose the existing data validation viewer

  • Reuse components for product consistency

  • Enable modifying extracted data

  • Reclassify documents

Knowledge(RAG)

Skill

  • Create skills and manage versions

  • Intuitive and simple test

  • Manage test versions

  • Modify responses and retrain the skill

Custom Extraction

Skill

  • Train skills with document types

  • Train skills based on prompts

  • Create extraction conditions

  • Reuse components for product consistency

Transformation

Skill

TBD

AI Studio

I consistently follow up on product scopes and future plans to maintain a broad perspective.

I initiated weekly sync ups with PM to stay updated on product roadmaps. This enabled me to think strategically and plan ahead comprehensive, system-level designs.

The page tab enables adding features at the page level without creating separate pages.

The table supports training, testing and managing skills on a large scale.

Different skills can be added as toggle buttons over time.

Current AI Studio landing page

Constructed the page to support multiple features and handle large-scale data efficiently

Key process

My main goal was to create a robust foundation for AI Studio, ensuring flexibility for future features while maintaining a consistent user experience. To support potential feature additions while minimizing major design changes, I updated existing components through multiple iterations, collaborating closely with the front-end engineering team to better support a wide range of use cases.

Classification Skill

Through several meetings with the PM and Eng teams, I compiled a list of technical and design requirements.

I found it confusing to train, test, and manage multiple skill versions in one place. I redesigned the process by separating user flows and simplifying tasks to improve usability.

Skill versions / Test versions

Training new skill version

Having distinct entry points for each task gives users a clear sense of direction.

A form layout within the modal allows users to complete tasks quickly in a focused interface.

Streamlined user flows by separating the training and testing processes

Key process

To fully understand Classification Skill and its behaviors, I reviewed the initial design in detail with the previous design owner. The original design was conceptual and lacked consideration for corner cases in user flows. Additionally, product requirements were unclear at the time. To address this, I developed design criteria with input from the PM and engineering teams to drive the project forward.

AI Skill Module

In the AI Skill module, users should be able to select and deploy skills, with support for all skill types.

At first, the PM was unsure how trained skills could be utilized within Ushur Workflows. After several discussions, I proposed creating a module to support the deployment of all skill types in one centralized location.

Designed with flexibility to support the MVP and seamlessly integrate future features.

Leveraged the existing toggle component to support different skill types and ensure a consistent design.

AI Skill module - MVP version

AI Skill module - Support all types of skills as of 12/31/2024

Designed a flexible modal layout, prioritizing seamless navigation and clear visual confirmations.

Add Document Extraction Skill - Pre-trained

Add Classification Skill

Adapted the modal layout by replacing the preview with descriptions, ensuring the user flow remained consistent.

Add Knowledge Skill

Add LLM Prompt Skill

Repurposed the classification skill layout for knowledge/LLM prompt skills, as they share a similar information structure and don’t require a preview.

Evolving the AI Skill Module to accommodate diverse skill addition flows.

Key process

The product team was initially hesitant to add a new module, aiming to keep the module structure simple and lightweight in the platform. I presented a compelling case for a scalable and flexible design approach that simplifies user flows. By leveraging existing components and reusing layouts, I ensured design consistency, improved familiarity for users, and minimized implementation time.

Document Extraction Skill

Visual confirmation was essential for data extraction, and I needed to think about a system level design strategy.

During project discussions, I realized the importance of visual confirmation for data extraction. I developed a data preview tool, which I found could also be adapted for future features.

Users can easily locate a skill from the list of pre-trained extraction skills.

Users can verify their selection through the preview.

The interface provides users with a visual preview of extraction regions, allowing for modifications.

Step 1 - Select a pre-trained document extraction skill

Step 2 - Review extraction regions and modify them if necessary

The two-step wizard provides visual confirmations to help users complete tasks seamlessly.

Key process

I designed the two-step modal for the AI Skill module, enabling skill consumption and deployment. My approach prioritized simplifying task flows and enhancing visual confirmations to ensure users can complete tasks confidently and effortlessly. Additionally, I developed reusable components and layouts to ensure design consistency across other skills and the data review process.

Human in the loop (HITL) - Data validation

Repurposed the data extraction tool to streamline human data validation and ensure design consistency.

The existing HITL, originally designed as a viewer fell short of customer expectations for enabling data modifications. Anticipating this need, I repurposed the data extraction tool to deliver a more consistent user experience.

Old viewer for data validation

New data validation(HITL) with full data editing capabilities

Repurposed the component to improve navigation and reclassification features.

Created a custom table optimized for seamless inline data editing and scalable data.

Enhanced document navigation and inline data editing by adapting and reusing components.

Key process

After synthesizing customer feedback, I identified their priority as efficiently sorting and reviewing data from multiple sources. I began by redesigning the entry point and user flows for data validation, introducing a repository where users can manage incoming data sources. The new design, while similar to the old one in some aspects, introduces full editing capabilities and supports large-scale datasets.

Custom Extraction Skill

Adapted the design pattern to maintain consistency in user flows throughout skill training processes.

Through project discussions, I identified the potential to leverage the existing design pattern from the Document Extraction Skill and HITL. This approach ensured a consistent training experience while enabling users to upload sample documents and define data extraction rules.

Step 1 - Select document types and upload sample files

Step 2 - Review extracting regions and set extraction rules

Retained the same layout and pattern to help users complete tasks effortlessly.

Shared most of design features with HITL while focusing on setting extraction rules.

Adapted LLM to populate additional fields for extraction.

Step 1 - Define fields to extract and upload sample files

Step 2 - Populate additional fields using the LLM based search

Added a prompt-based option for users to easily define specific data extraction fields.

Generated results based on the prompt and enabled quick additions.

Ensured a consistent and familiar UI by applying the design pattern throughout training extraction skills.

Key process

To extend document extraction capabilities, we introduced the ability for users to upload sample documents and train new skills for extracting data across sources. When PM suggested adding an LLM feature, I proposed a lightweight alternative: an advanced search with integrated LLM functionality, offering a faster and more efficient way to define additional extraction fields.

Knowledge(RAG) Skill

Streamlined training and testing skill flows, enabling users to repeat and manage skill and test versions effectively.

This project required extensive collaboration with a PM and engineers to define product and design requirements, as the technical capabilities were initially unclear. I started by mocking up a high-level user flow and establishing a UX approach, then worked with the team to develop the PRD and design requirements.

Train Knowledge skill - Empty state

Train Knowledge skill - A version is trained and tested

Multiple test versions in a trained version

Multiple train versions are trained in a skill

Streamlined the training flow without altering the design pattern or style.

Integrated training and testing functions, enabling users to efficiently test trained versions without navigating away.

Reused an accordion table to house test versions and support extensive data sets.

Componentized the accordion table and card to ensure reusability across the platform.

Ensured a consistent and familiar UI by applying the design pattern throughout training extraction skills.

Key process

Developing the design flow while adhering to design patterns and resolving technical restrictions was a complex process, requiring constant iteration over three months. By simplifying the user flows, we integrated training, editing, and testing into one modal, significantly enhancing efficiency for citizen developers.
During this project, I also created new components and design patterns for the chat experience as well as for training and testing versions, ensuring their reusability across the platform.

What I learned with my journey with AI Studio

Design consistency

Learning AI capabilities

Wearing multiple hats

Intensive collaborations

System level design from 0 to 1

My ongoing, two-year journey with AI Studio has been a remarkable experience, allowing me to immerse myself in building and managing a design system, expanding my understanding of platform-wide design consistency and scalability. It helped me make optimal UX decisions, even when research resources were limited. Across multiple AI Studio projects, I collaborated with 3 PMs and 7 engineers across 3 different timezones and I wore multiple hats as we worked together to refine project details. This incredible journey not only strengthened my skills but also deepened my understanding of AI technologies and their potential.

© 2025 by Hanmaro Kim | Hanmarodesign.com

Version 1

Test 1

Test 2

Test 3

Test 10

Version 2

Version 3

Version 10

Create a skill

Train versions

Test versions

Publish the skill

Defined standard skill creation and testing flows

Results

  • Created a centralized platform, module, data validation tool, and 3 AI skills as of Dec 2024.