AI for Observability

Designed AI-powered experiences for Actian’s Observability Platform, building scalable components to simplify workflows, improve trust, and establish a foundation for future development.

Project

Scalable AI UX patterns, AI components

My role

UX Designer

Timeline

June 2025 - Aug 2025 (12 Weeks)

Collaboration

Design Director, Senior Designer, UI engineering Team, AI Team

New Bike

New Bike

New Bike

New Bike

+0

by Nov, 2025

by Nov, 2025

by Nov, 2025

by Nov, 2025

Analyzed

Analyzed

Analyzed

0+
0+
0+

AI Platform

AI Platform

AI Platform

Up to

Up to

Up to

0%
0%
0%

Faster onboarding time

Faster onboarding time

Faster onboarding time

Built a reusable AI component system

Built a reusable AI component system

Built a reusable AI component system

ensuring consistency and scalability across products

ensuring consistency and scalability across products

ensuring consistency and scalability across products

Project Context

As part of my internship at Actian, I worked on a 12-week project focused on designing AI-powered experiences for the company’s Observability Platform— a tool that helps users monitor incidents, analyze logs and metrics, and resolve issues. I collaborated with a cross-functional team, owning research, concept development, prototyping, and design documentation. This was an exciting opportunity not just to add AI features but to rethink how the platform guides users through complex troubleshooting. The project aimed to create intuitive, consistent, and scalable AI components that streamline workflows and help users resolve issues more efficiently.

As ProArt expanded its product lines, the website needed to scale and support new categories. Through stakeholder interviews, competitive reviews, and usability testing, we identified both user pain points and business challenges.

“InvisibleAI”AIexisted,butusersdidn’tknowwhere,when,orwhytouseit.

“InvisibleAI”AIexisted,butusersdidn’tknowwhere,when,orwhytouseit.

“InvisibleAI”AIexisted,butusersdidn’tknowwhere,when,orwhytouseit.

“InvisibleAI”AIexisted,butusersdidn’tknowwhere,when,orwhytouseit.

Problem

Actian’s Observability platform helps engineering teams diagnose system health, but users struggled to quickly interpret logs, metrics, and events during high-severity incidents. Investigations required jumping between dashboards and manually correlating data, creating cognitive overload and slowing time-to-resolution.

Business Problem

Actian’s enterprise customers rely on the Observability Platform to monitor complex, distributed data systems. As environments scaled, teams increasingly struggled to diagnose issues quickly — slowing incident resolution, reducing reliability, and creating risks for customer satisfaction and renewals.

Pain points

  • Difficulty piecing together logs, metrics, and traces scattered across multiple pages

  • Slow root-cause identification without deep system expertise

  • High cognitive load during incident triage

  • Lack of clear guidance on what to investigate next

As If

As If

As If

Complex, manual process

Complex, manual process

Complex, manual process

Alert Appears

Alert Appears

Alert Appears

Manual monitoring

Manual monitoring

Manual monitoring

Dashboard 1

Dashboard 1

Dashboard 1

Slow detection

Slow detection

Slow detection

Dashboard 2

Dashboard 2

Dashboard 2

Fragmented data

Fragmented data

Fragmented data

Manual Query

Manual Query

Manual Query

Repetitive queries

Repetitive queries

Repetitive queries

Correlation Attempt

Correlation Attempt

Correlation Attempt

Find root cause

Find root cause

Find root cause

Resolution

Resolution

Resolution

Inconsistent outcomes

Inconsistent outcomes

Inconsistent outcomes

To Be

To Be

To Be

Streamlined, AI-powered

Streamlined, AI-powered

Streamlined, AI-powered

Unified AI Platform

Manual monitoring

Unified AI Platform

Manual monitoring

Unified AI Platform

Manual monitoring

AI Detects Issue

AI Detects Issue

AI Detects Issue

AI Suggests Root Cause

AI Suggests Root Cause

AI Suggests Root Cause

Engineer Resolves

Engineer Resolves

Engineer Resolves

As If

Complex, manual process

Alert Appears

Manual monitoring

Dashboard 1

Slow detection

Dashboard 2

Fragmented data

Manual Query

Repetitive queries

Correlation Attempt

Find root cause

Resolution

Inconsistent outcomes

To Be

Streamlined, AI-powered

Unified AI Platform

Manual monitoring

AI Detects Issue

AI Suggests Root Cause

Engineer Resolves

Reframed Problem

HowmightweuseAItoreducecognitiveloadandguideusersthroughcomplextroubleshootingworkflows?

HowmightweuseAItoreducecognitiveloadandguideusersthroughcomplextroubleshootingworkflows?

HowmightweuseAItoreducecognitiveloadandguideusersthroughcomplextroubleshootingworkflows?

HowmightweuseAItoreducecognitiveloadandguideusersthroughcomplextroubleshootingworkflows?

Before State

When I joined the project, the platform had no cohesive AI experience. Early concepts focused on a single “Ask AI” popover floating near the search bar—useful in theory, but isolated in practice. It didn’t scale across logs, incidents, or charts, and it pulled users away from their natural workflow.

Approach

To design an AI experience that truly supports troubleshooting, I followed a structured, insight-driven approach that moved from understanding the user → exploring possibilities → refining the system. Each step uncovered a new layer of the problem and informed the next design decision.

Data steward 33%

Henry, Data quality owner

I make sure the data just works, because it’s clean, documented, and ready to use.

Goal

Ensure that all data is high-quality, governed, and easy for others to find and understand.

Technical skill: Moderate to high

Low

High

Business user 19%

Christophe, Decision maker

I need a clear, simple path to the data that matters — no SQL, just answers I can trust.

Goal

Access data to inform decisions, and improve communication with business and technical teams.

Technical skill: Low to Moderate

Low

High

Data analyst/Data scientist 48%

Abby, Technical power user

I enable my colleagues. My reports and visualizations are accurate and insightful.

Goal

Produce insights and predictive models for stakeholders using clean, well-documented data.

Technical skill: Moderate

Low

High

Data steward 33%

Henry, Data quality owner

I make sure the data just works, because it’s clean, documented, and ready to use.

Goal

Ensure that all data is high-quality, governed, and easy for others to find and understand.

Technical skill: Moderate to high

Low

High

Business user 19%

Christophe, Decision maker

I need a clear, simple path to the data that matters — no SQL, just answers I can trust.

Goal

Access data to inform decisions, and improve communication with business and technical teams.

Technical skill: Low to Moderate

Low

High

Data analyst/Data scientist 48%

Abby, Technical power user

I enable my colleagues. My reports and visualizations are accurate and insightful.

Goal

Produce insights and predictive models for stakeholders using clean, well-documented data.

Technical skill: Moderate

Low

High

Target Users

Before diving into interfaces, I needed clarity on who we were designing for. Through conversations with content strategist, engineers, and internal users, we synthesized our primary target persona.

Business Users

They want quick, actionable insights with minimal technical effort.

Data Scientists

They value accuracy and transparency when analyzing large datasets.

Data Stewards

They need clarity and consistency to maintain data quality and compliance.

By deeply understanding their goals, needs, and behaviors, we were able to uncover their pain points and translate them into actionable design opportunities.

Data steward 33%

Henry, Data quality owner

I make sure the data just works, because it’s clean, documented, and ready to use.

Goal

Ensure that all data is high-quality, governed, and easy for others to find and understand.

Technical skill: Moderate to high

Low

High

Business user 19%

Christophe, Decision maker

I need a clear, simple path to the data that matters — no SQL, just answers I can trust.

Goal

Access data to inform decisions, and improve communication with business and technical teams.

Technical skill: Low to Moderate

Low

High

Data analyst/Data scientist 48%

Abby, Technical power user

I enable my colleagues. My reports and visualizations are accurate and insightful.

Goal

Produce insights and predictive models for stakeholders using clean, well-documented data.

Technical skill: Moderate

Low

High

Data steward 33%

Henry, Data quality owner

I make sure the data just works, because it’s clean, documented, and ready to use.

Goal

Ensure that all data is high-quality, governed, and easy for others to find and understand.

Technical skill: Moderate to high

Low

High

Business user 19%

Christophe, Decision maker

I need a clear, simple path to the data that matters — no SQL, just answers I can trust.

Goal

Access data to inform decisions, and improve communication with business and technical teams.

Technical skill: Low to Moderate

Low

High

Data analyst/Data scientist 48%

Abby, Technical power user

I enable my colleagues. My reports and visualizations are accurate and insightful.

Goal

Produce insights and predictive models for stakeholders using clean, well-documented data.

Technical skill: Moderate

Low

High

Data steward 33%

Henry, Data quality owner

I make sure the data just works, because it’s clean, documented, and ready to use.

Goal

Ensure that all data is high-quality, governed, and easy for others to find and understand.

Technical skill: Moderate to high

Low

High

Business user 19%

Christophe, Decision maker

I need a clear, simple path to the data that matters — no SQL, just answers I can trust.

Goal

Access data to inform decisions, and improve communication with business and technical teams.

Technical skill: Low to Moderate

Low

High

Data analyst/Data scientist 48%

Abby, Technical power user

I enable my colleagues. My reports and visualizations are accurate and insightful.

Goal

Produce insights and predictive models for stakeholders using clean, well-documented data.

Technical skill: Moderate

Low

High

Research & Insights

To design credible, intuitive AI interactions, I conducted a multi-layered research phase.

Competitive Analysis

I analyzed 12+ AI platforms (ChatGPT, Claude, Gemini, Perplexity, etc.) to identify:

  • How users initiate AI assistance

  • How platforms display context

  • Feedback mechanisms & micro-interactions

  • Transparency signals (e.g., source references, loading states)

Prompt-Based Testing

I sent identical prompts to multiple platforms to observe consistency, accuracy, and output clarity.

Key Insights

From research and testing, three themes emerged:

  1. Gradient motion makes AI feel alive and credible

  2. Micro-interactions provide reassurance and reduce uncertainty

  3. Contextual prompts minimize cognitive load and improve workflow clarity

These insights shaped every design decision that followed.

1
2
3
4
1
2
3
4
1
2
3
4

Concept Development

With a clear understanding of the user and insights from research, I began mapping how AI should surface across the platform.

Wireframes — Interaction Skeleton

Started with low-fi wireframes to pinpoint where AI should surface and how it’s triggered, aligning the team early on scope and the three entry points.
Why: de-risk placement decisions, validate hypotheses fast with minimal cost, and prioritize high-frequency triggers with the highest impact/lowest integration effort.

User Journey Breakdown — Hi-Fi Flow Mapping

Mapped the AI journey in a hi-fi prototype to validate the end-to-end flow at production fidelity, identifying friction, setting the interaction hierarchy, and designing re-engagement paths so users can naturally re-enter AI.
Why: surface real-world failure modes early, streamline steps, and standardize patterns for reuse across the platform.

Design Evolution

After defining the user flow and component hierarchy, I began designing modular AI components that could scale across the platform. We introduced three main entry points for AI interaction:

Primary Ask AI Button

A global access point for general queries

Contextual Triggers

Secondary AI buttons within tables, charts, or incident details, tailored to the user’s current context

Side Panel / Drawer

An expanded interaction space for deeper investigation and follow-up prompts.

Primary Ask AI Button

A global access point for general queries

Contextual Triggers

Secondary AI buttons within tables, charts, or incident details, tailored to the user’s current context

Side Panel / Drawer

An expanded interaction space for deeper investigation and follow-up prompts.

Primary Ask AI Button

A global access point for general queries

Contextual Triggers

Secondary AI buttons within tables, charts, or incident details, tailored to the user’s current context

Side Panel / Drawer

An expanded interaction space for deeper investigation and follow-up prompts.

Primary Ask AI Button

A global access point for general queries

Contextual Triggers

Secondary AI buttons within tables, charts, or incident details, tailored to the user’s current context

Side Panel / Drawer

An expanded interaction space for deeper investigation and follow-up prompts.

Version - 1

The AI Popover

We began with a simple popover triggered by a global “Ask AI” button. This felt lightweight and easy to use, but testing quickly showed its limits: AI felt isolated from the workflow, lacked context, and forced users to copy/paste details. The core insight was that access wasn’t the issue — guidance was.

Version - 2

The Side Panel

Next, we explored a full AI side panel to support deeper answers, history, and structure. While it made AI more visible, it overwhelmed already dense screens and disrupted investigation flow. We learned that more space didn’t create more clarity — AI needed to integrate seamlessly, not dominate the interface.

Version - 3

Context-Aware AI System

The breakthrough came when we combined modular components: a global Ask AI button, contextual triggers, and an expandable panel. This system adapts to where the user is and what they’re doing, offering timely, actionable prompts without interrupting the workflow. It finally delivered what users needed: a contextual, intuitive AI partner that simplifies steps and supports real troubleshooting.

Solution

The final AI experience is built around a simple mental model:

Observe → Assist → Resolve

Observe

Users navigate incidents, logs, metrics, or charts.

Assist

AI surfaces contextual prompts or provides quick popover guidance.

Resolve

When needed, users expand into a full side panel for deeper insights, summaries, or recommended actions.

Observe

Users navigate incidents, logs, metrics, or charts.

Assist

AI surfaces contextual prompts or provides quick popover guidance.

Resolve

When needed, users expand into a full side panel for deeper insights, summaries, or recommended actions.

Observe

Users navigate incidents, logs, metrics, or charts.

Assist

AI surfaces contextual prompts or provides quick popover guidance.

Resolve

When needed, users expand into a full side panel for deeper insights, summaries, or recommended actions.

Iterations

During the iteration process, I refined these components through microinteraction design and visual language alignment.

  • Applied gradient animations and iconography to visually cue AI presence.

  • Ensured consistency with Actian’s existing design system, maintaining harmony with other product components.

  • Simplified transitions between popover and side panel states for a smooth, intuitive experience.

Key Components

As part of building a consistent and scalable AI experience, we developed a set of reusable AI components that could easily integrate into Actian’s existing design system. The goal was to create flexible modules that could adapt to different use cases across the Observability Platform and serve as a foundation for future AI features.

We proposed three layouts, testing each with stakeholders for user experience and technical performance.

Why Layout C?

  • Showcased a wider range of collaborations, offering diverse content.

  • Used a carousel gallery for a dynamic, user-friendly experience.

  • Delivered smoother animations and faster load times across devices.

Final Design

The final design brings together a set of AI-driven components that work seamlessly across the Observability Platform to make workflows faster, clearer, and more intuitive. Each feature was carefully designed to feel human, contextual, and responsive, while staying consistent with Actian’s design system.

Key Features - 1

Microinteractions

Subtle animations and gradient color transitions bring the AI to life. The flowing gradient — shifting between purple and blue — signals system activity and provides real-time feedback when AI is processing or loading. These microinteractions draw attention without distraction, making the experience more engaging, responsive, and trustworthy.

Key Features - 2

Contextual-Driven Prompts

Each prompt is generated based on the user’s current context — whether viewing a chart, exploring an incident, or selecting a data field. Instead of forcing users to start from scratch, the system suggests relevant follow-up questions or actions tied to what they are already looking at. This approach helps users stay in flow and reduces effort, making AI feel like a natural extension of the workflow.

Key Features - 3

Follow-Up Interaction

When a user selects specific content, a Follow-Up Button appears inline to encourage deeper exploration. Once clicked, the system highlights the related context with a small inline indicator, clearly showing what the follow-up refers to. This transparent linking between context and response helps users understand the relationship between their actions, the AI input, and the generated outcome.

Delivery

Delivery

Delivery

Delivery

To ensure consistency and scalability, we developed a modular design system:

  • Core Styles: Defined typography, color palettes, and grid system aligned with ProArt’s brand identity.

  • Reusable Components: Built a flexible library of cards, buttons, carousels, and testimonial modules.

  • Scalability: Enabled rapid iteration and seamless integration across multiple pages.

In the delivery phase, I focused on turning our design work into clear, actionable assets that could be easily implemented and scaled by the engineering team. This process included three key parts — Component Library, Design Specs & Documentation, and Design Handoff & Collaboration

01
Component Library
I built a Figma component library containing reusable AI components aligned with Actian’s design system. Each component was built using shared tokens and defined variants for different interaction states and contexts, ensuring visual consistency and scalability across the platform.
02
Design Specs & Documentation
03
Handoff & Collaboration
01
Component Library
I built a Figma component library containing reusable AI components aligned with Actian’s design system. Each component was built using shared tokens and defined variants for different interaction states and contexts, ensuring visual consistency and scalability across the platform.
02
Design Specs & Documentation
03
Handoff & Collaboration
01
Component Library
I built a Figma component library containing reusable AI components aligned with Actian’s design system. Each component was built using shared tokens and defined variants for different interaction states and contexts, ensuring visual consistency and scalability across the platform.
02
Design Specs & Documentation
03
Handoff & Collaboration
01
Component Library
I built a Figma component library containing reusable AI components aligned with Actian’s design system. Each component was built using shared tokens and defined variants for different interaction states and contexts, ensuring visual consistency and scalability across the platform.
02
Design Specs & Documentation
03
Handoff & Collaboration

Impact & Results

To ensure consistency and scalability, we developed a modular design system:

  • Core Styles: Defined typography, color palettes, and grid system aligned with ProArt’s brand identity.

  • Reusable Components: Built a flexible library of cards, buttons, carousels, and testimonial modules.

  • Scalability: Enabled rapid iteration and seamless integration across multiple pages.

Quantitative

  • ~20% faster onboarding

  • Measurable improvement in user confidence

  • Reduced manual steps in incident investigation

Qualitative

  • Teams praised the clarity and consistency

  • AI experience feels trustworthy and intuitive

  •  Engineers found the design system easy to implement and extend

Strategic Impact

The final system established Actian’s AI UX foundation — a reusable architecture that future AI features can rely on.

Reflection

This project changed the way I think about AI and systems design. It taught me that:

  • Good AI design is invisible, it works because it feels natural.

  • You must design with engineering constraints, not around them.

  • Research isn’t just about data, it’s about discovering how people think.

  • Clarity is the most powerful tool a designer has.

Looking back, this internship was an incredible learning journey that helped me grow both as a designer and collaborator. I learned how to balance detail-oriented design work with big-picture thinking, adapt design trends into complex product environments, and communicate effectively acrosså teams. Working on AI experiences taught me the importance of designing for clarity and trust, especially in fast-evolving technologies. Most importantly, I gained confidence in turning research into practical, scalable design systems that make a real impact.

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Onsite onboarding week at Actian’s headquarters

Let's get in touch

© 2025 Christy Yao

Submit

Let's get in touch

Submit

© 2025 Christy Yao

Let's get in touch

© 2025 Christy Yao

Submit

Let's get in touch

© 2025 Christy Yao

Submit

Enter Password

This page is protected. Please enter the password provided with my résumé.