Home
Webalo AI-Driven Data Workspace
Webalo AI-Driven Data Workspace
An AI-driven data workspace empowering frontline teams and factory leaders to turn operational data into insights, actions, and repeatable daily work.
An AI-driven data workspace empowering frontline teams and factory leaders to turn operational data into insights, actions, and repeatable daily work.
Timeline
Oct 2025 - Dec 2025
Role
Product Designer
Tool
Figma, Figma Make, Lovable
Team
Webalo Product Team
Transforming natural language queries into visualized insights and immediate, executable solutions
Transforming natural language queries into visualized insights and immediate, executable solutions
Challenge 1
Getting Users Started Without Feeling Overwhelmed
Challenge 1
Getting Users Started Without Feeling Overwhelmed
The initial experience required users to create an account, connect operational data, and understand how to begin in an unfamiliar workspace. The challenge was to reduce early cognitive load and provide a clear, guided entry into a complex system.
The initial experience required users to create an account, connect operational data, and understand how to begin in an unfamiliar workspace. The challenge was to reduce early cognitive load and provide a clear, guided entry into a complex system.
What I did
What I did
I designed a welcoming onboarding experience to lower the psychological barrier of a complex workspace. By implementing filtering and categorization, I enabled users to quickly locate the right data source and proceed with minimal friction.
I designed a welcoming onboarding experience to lower the psychological barrier of a complex workspace. By implementing filtering and categorization, I enabled users to quickly locate the right data source and proceed with minimal friction.
Greeting Screen
Greeting Screen
Connect Data Source Dialog
Connect Data Source Dialog
The fully initialized workspace
The fully initialized workspace
Design Process
Design Process
I evolved the design from an initial tile-based layout, which had low scanning efficiency. I refined it into a structured list view and introduced category tabs and a search bar. This significantly improved findability, allowing users to quickly narrow down options and locate their data source.
I evolved the design from an initial tile-based layout, which had low scanning efficiency. I refined it into a structured list view and introduced category tabs and a search bar. This significantly improved findability, allowing users to quickly narrow down options and locate their data source.
Design Process for Connect Data Source dialog
Design Process for Connect Data Source dialog
Challenge 2
Integrating AI Without Disrupting Core Workflows
Challenge 2
Integrating AI Without Disrupting Core Workflows
As AI capabilities were introduced into a data-heavy workspace, the challenge was to integrate an AI assistant without distracting users from charts, dashboards, and daily operational tasks, or making the interface feel like a generic chat application.
As AI capabilities were introduced into a data-heavy workspace, the challenge was to integrate an AI assistant without distracting users from charts, dashboards, and daily operational tasks, or making the interface feel like a generic chat application.
What I did
What I did
I focused on integrating the AI assistant as a non-intrusive companion. I designed a collapsible interaction model that gives users control over their screen real estate—allowing them to expand the panel for deep analysis or collapse it for a focused view. I designed the UX to bridge conversation and action, making it intuitive for users to turn AI suggestions into visualized charts or executable tasks without friction.
I focused on integrating the AI assistant as a non-intrusive companion. I designed a collapsible interaction model that gives users control over their screen real estate—allowing them to expand the panel for deep analysis or collapse it for a focused view. I designed the UX to bridge conversation and action, making it intuitive for users to turn AI suggestions into visualized charts or executable tasks without friction.
Pin AI insights to the dashboard for ongoing tracking
Pin AI insights to the dashboard for ongoing tracking
Collapsible AI panel that preserves content context
Collapsible AI panel that preserves content context
Design Process
Design Process
I explored various spatial configurations for the AI assistant, testing left-sidebar integration, floating overlays, and right-docked panels. My goal was to avoid a disjointed 'plugin' feel and instead achieve a seamless, native integration—ensuring the AI acts as a non-intrusive copilot that sits naturally alongside the core product experience.
I explored various spatial configurations for the AI assistant, testing left-sidebar integration, floating overlays, and right-docked panels. My goal was to avoid a disjointed 'plugin' feel and instead achieve a seamless, native integration—ensuring the AI acts as a non-intrusive copilot that sits naturally alongside the core product experience.
Layout Explorations
Layout Explorations
Challenge 3
Designing for Environmental Adaptability & Scale
Challenge 3
Designing for Environmental Adaptability & Scale
Users operate across diverse environments—from dim control rooms to bright back offices—requiring an interface that adapts to different lighting conditions. At the same time, as the roadmap moves toward more complex task execution, the interface needed a scalable foundation to ensure future features would not fragment the overall experience.
Users operate across diverse environments—from dim control rooms to bright back offices—requiring an interface that adapts to different lighting conditions. At the same time, as the roadmap moves toward more complex task execution, the interface needed a scalable foundation to ensure future features would not fragment the overall experience.
What I did
What I did
I designed a multi-theme design system supporting both dark and light modes, defining semantic color tokens and standardized component states to ensure readability across environments. By establishing this flexible theming foundation early, I addressed immediate environmental needs while preparing the interface to support future, task-oriented features without breaking visual consistency.
I designed a multi-theme design system supporting both dark and light modes, defining semantic color tokens and standardized component states to ensure readability across environments. By establishing this flexible theming foundation early, I addressed immediate environmental needs while preparing the interface to support future, task-oriented features without breaking visual consistency.
Consistent interface across light and dark environments
Consistent interface across light and dark environments
Design system foundations supporting theming, states, and scalable AI interactions
Design system foundations supporting theming, states, and scalable AI interactions
Verified Accessibility
Verified Accessibility
Accessibility was considered from the foundation up. I validated color tokens against WCAG AA requirements, specifically tuning Light Mode values to be slightly darker for optimal legibility, ensuring accessibility is a built-in standard.
Accessibility was considered from the foundation up. I validated color tokens against WCAG AA requirements, specifically tuning Light Mode values to be slightly darker for optimal legibility, ensuring accessibility is a built-in standard.
Validated that all colors pass WCAG AA tests in both Dark and Light modes
Validated that all colors pass WCAG AA tests in both Dark and Light modes
Outcome
Outcome
This project built a scalable foundation for integrating AI into a complex workspace. The new onboarding flow and AI navigation allow users to control their data with confidence. For our team, the new design system now helps us design consistently and build features faster.
This project built a scalable foundation for integrating AI into a complex workspace. The new onboarding flow and AI navigation allow users to control their data with confidence. For our team, the new design system now helps us design consistently and build features faster.
Reflection
Reflection
I focused on creating a flexible system that is ready for future features, like advanced task execution. Despite a tight timeline, I collaborated closely with Product and Engineering to balance design quality with technical constraints, ensuring we shipped a solution that is both usable and feasible.
I focused on creating a flexible system that is ready for future features, like advanced task execution. Despite a tight timeline, I collaborated closely with Product and Engineering to balance design quality with technical constraints, ensuring we shipped a solution that is both usable and feasible.
Designed and Built by Dake Cui © 2025