TL; DR
TL; DR
PROBLEM + SOLUTION
Traditional water pipeline management is inefficient and reactive, so I designed a 0-to-1 AI-powered platform leveraging Machine Learning & LLMs to enable real-time monitoring, predictive insights, and seamless execution—bridging the gap between water managers and engineers.
TABLE OF CONTENT
1. Overview: From Challenge to Impact
Before & After
Key Outcomes
Final Results
2. Understanding the Problem
Project Context
Stakeholder Alignment
Initial Audit & Key Findings
Bridging Business, Tech & Design
Strategic Wins
3. Designing for Impact
Deep-Dive Design Audit
User-Centric Approach
Feature Prioritization & Scope
Design Strategy
4. Case Study Spotlight: AI-Powered Filter
Wireframing Iterations
User Testing
Final Solution
PROBLEM + SOLUTION
Traditional water pipeline management is inefficient and reactive, so I designed a 0-to-1 AI-powered platform leveraging Machine Learning & LLMs to enable real-time monitoring, predictive insights, and seamless execution—bridging the gap between water managers and engineers.
TABLE OF CONTENT
1. Overview: From Challenge to Impact
Before & After
Key Outcomes
Final Results
2. Understanding the Problem
Project Context
Stakeholder Alignment
Initial Audit & Key Findings
Bridging Business, Tech & Design
Strategic Wins
3. Designing for Impact
Deep-Dive Design Audit
User-Centric Approach
Feature Prioritization & Scope
Design Strategy
4. Case Study Spotlight: AI-Powered Filter
Wireframing Iterations
User Testing
Final Solution
👩💻 My Role
👩💻 My Role
Product Designer @ Stealth AI Startup
Product Designer @ Stealth AI Startup
User Interview/Stakeholders Interview
Wireframes
Mockups
Prototypes
Executive presentations
Final specs
Asset production
User Interview/Stakeholders Interview
Wireframes
Mockups
Prototypes
Executive presentations
Final specs
Asset production
👥 Team
👥 Team
1 CEO
2 Devlopers
1 Visual Designer
1 Product Designer (Me)
1 CEO
2 Devlopers
1 Visual Designer
1 Product Designer (Me)
🕑 Duration
🕑 Duration
2 Months
2 Months
1
Overview
2
Understanding the Problem
3
Designing for Impact
4
Case Study Spotlight: AI-Powered Filter
Quick Before & After
Quick Before & After
Drag the slider left or right to compare the before/after interface！
Drag the slider left or right to compare the before/after interface！
FINAL RESULTS
FINAL RESULTS
Instant AI-Powered Setup
Instant AI-Powered Setup
Role-Based Access: Personalized experiences for different users.
Effortless Data Upload: Seamlessly integrate meta-data.
Smart AI Simulation: Instantly generate a customized dashboard tailored to your needs.
Role-Based Access: Personalized experiences for different users.
Effortless Data Upload: Seamlessly integrate meta-data.
Smart AI Simulation: Instantly generate a customized dashboard tailored to your needs.
Interactive Map for Real-Time Insights
Interactive Map for Real-Time Insights
Visualized Monitoring: Instantly see pressure and flow speed variations on a dynamic map.
AI-Powered Filtering: Zero in on anomalies with intuitive, real-time filters.
Visualized Monitoring: Instantly see pressure and flow speed variations on a dynamic map.
AI-Powered Filtering: Zero in on anomalies with intuitive, real-time filters.
AI-Driven Dashboard & Data Hub
AI-Driven Dashboard & Data Hub
Instant Visibility: Weekly NRW trends, anomaly reports, and AI-predicted detections.
Intelligent Insights: Machine learning & LLM-powered analysis with actionable recommendations.
Advanced Operations: Powerful filtering, deep-dive analytics, and direct work order creation.
Instant Visibility: Weekly NRW trends, anomaly reports, and AI-predicted detections.
Intelligent Insights: Machine learning & LLM-powered analysis with actionable recommendations.
Advanced Operations: Powerful filtering, deep-dive analytics, and direct work order creation.
Seamless AI-Powered Work Order Generation
Seamless AI-Powered Work Order Generation
Gen-AI Assisted Reporting: Auto-generate detailed work orders, including titles & descriptions.
Real-Time Tracking: Monitor progress and adapt dynamically.
Gen-AI Assisted Reporting: Auto-generate detailed work orders, including titles & descriptions.
Real-Time Tracking: Monitor progress and adapt dynamically.
IMPACT
IMPACT
In the end, the CEO successfully used this MVP to secure investment, marking a major milestone for the project’s success and future growth.
In the end, the CEO successfully used this MVP to secure investment, marking a major milestone for the project’s success and future growth.
"You’re awesome, Serena! Thank you so much for creating such a user-friendly solution. We’re so lucky to have you—your focus on making this a truly usable product instead of just sticking to UI has made all the difference."
"You’re awesome, Serena! Thank you so much for creating such a user-friendly solution. We’re so lucky to have you—your focus on making this a truly usable product instead of just sticking to UI has made all the difference."
—— CEO, Stealth AI Startup
—— CEO, Stealth AI Startup
Overview
2
Understanding the Problem
3
Designing for Impact
4
Case Study Spotlight: AI-Powered Filter
Context: Challenges in Water Pipeline Management
Context: Challenges in Water Pipeline Management
Traditional water pipeline management is plagued by inefficiencies, leading to operational and financial burdens.
Traditional water pipeline management is plagued by inefficiencies, leading to operational and financial burdens.
💰
💰
High Costs
High Costs
Manual inspections and expensive equipment drive up operational costs.
Manual inspections and expensive equipment drive up operational costs.
🦥
🦥
Delayed Issue Detection
Delayed Issue Detection
Leaks and anomalies are often discovered too late, resulting in costly repairs and water loss.
Leaks and anomalies are often discovered too late, resulting in costly repairs and water loss.
Stakeholders Alignment
Stakeholders Alignment
A team of Machine Learning & Generative AI experts set out to revolutionize water pipeline monitoring with AI-driven automation.
A team of Machine Learning & Generative AI experts set out to revolutionize water pipeline monitoring with AI-driven automation.
Their goal was to transition from research prototypes to a fully functional product that could demonstrate real business value to investors.
Their goal was to transition from research prototypes to a fully functional product that could demonstrate real business value to investors.
Initial Audit & Key Findings
Initial Audit & Key Findings
Beyond UI: Uncovering Key UX Challenges
Beyond UI: Uncovering Key UX Challenges
👤
👤
Poor Usability Hinders Adoption
Poor Usability Hinders Adoption
Key workflows were disconnected, making it difficult for users to navigate and complete essential tasks.
Missing logical flow between pages resulted in a fragmented user experience.
Key workflows were disconnected, making it difficult for users to navigate and complete essential tasks.
Missing logical flow between pages resulted in a fragmented user experience.
📈
📈
Lack of Scalability Limits Future Growth
Lack of Scalability Limits Future Growth
The design structure was rigid, leaving no flexibility for additional features or future expansion.
Filtering and data management functionalities were not optimized for handling large datasets.
The design structure was rigid, leaving no flexibility for additional features or future expansion.
Filtering and data management functionalities were not optimized for handling large datasets.
♿
♿
Accessibility Concern Limits Market Reach
Accessibility Concern Limits Market Reach
The provided style guide did not meet accessibility standards, potentially excluding a portion of users.
Color contrast, keyboard navigation, and assistive technology compatibility were not considered.
The provided style guide did not meet accessibility standards, potentially excluding a portion of users.
Color contrast, keyboard navigation, and assistive technology compatibility were not considered.
First Stage Outcome
First Stage Outcome
Aligning Goals: CEO Approved Timeline Extension
Aligning Goals: CEO Approved Timeline Extension
Aligning Business, Technology, and Design Goals: In the end, the CEO agreed to extend timeline from one month to two months.
Aligning Business, Technology, and Design Goals: In the end, the CEO agreed to extend timeline from one month to two months.
Overview
Understanding the Problem
3
Designing for Impact
4
Case Study Spotlight: AI-Powered Filter
Second Round Design Audit
Second Round Design Audit
With alignment in place, I began auditing the current functionality.
With alignment in place, I began auditing the current functionality.
User Persona
User Persona
Managers need efficiency; engineers need portability.
Managers need efficiency; engineers need portability.
To better understand our users, I summarized their needs based on surveys and interviews.
To better understand our users, I summarized their needs based on surveys and interviews.
Redefining User Workflow
Redefining User Workflow
I proposed a new workflow strategy that ensures seamless task handoffs.
I proposed a new workflow strategy that ensures seamless task handoffs.
By brainstorming workflows, aligning with the CEO and team, and committing to a shared vision, we created a user-centered solution that connects tasks seamlessly across roles.
By brainstorming workflows, aligning with the CEO and team, and committing to a shared vision, we created a user-centered solution that connects tasks seamlessly across roles.
Feature Prioritization & Scoping
Feature Prioritization & Scoping
When defining specific features, multiple possibilities emerged. To address this, I conducted workshops and used MoSCoW & Impact-Effort metrics for feature prioritization. Nice-to-have features were scoped as scalable for future iterations.
When defining specific features, multiple possibilities emerged. To address this, I conducted workshops and used MoSCoW & Impact-Effort metrics for feature prioritization. Nice-to-have features were scoped as scalable for future iterations.
Design Strategy
Design Strategy
Combine Current Stage + North Star, ensure scalablity for Startups
Combine Current Stage + North Star, ensure scalablity for Startups
Overview
Understanding the Problem
Designing for Impact
4
Case Study Spotlight: AI-Powered Filter
Challenge
Challenge
Designing a Filter System for Managers' Daily Workflow
Designing a Filter System for Managers' Daily Workflow
Exploration
Exploration
Exploring Design Options: Wireframe Comparisons
Exploring Design Options: Wireframe Comparisons
❌ Option 1: Sidebar Filter
Highly Scalable and Comprehensive
The Sidebar Filter supports nesting a large number of values, making it ideal for future growth. It also provides a clear overview of all filtering options at a glance, aiding navigation and usability.
Space-Intensive and Visually Disruptive
Time-Consuming: Customizing filters each time requires more effort.
Space-Intensive: Takes up significant screen real estate, overwhelming compact interfaces.
Visually Disruptive: Impacts the overall balance and flow of the page layout.
✅ ❌ Option 2: Single Out Filter
Quick and Focused Actions
Designed for easy adjustments, allowing users to make quick changes without disrupting other sections of the interface.
Limited Scalability
Constrained by table header width, making it less effective for handling complex or large-scale filtering tasks.
✅ ❌ Option 3: Advanced Filter
Highly Scalable and Optimized for Advanced Use Cases
Ideal for technical users and scalable for future growth.
Complexity Limits Accessibility
Time-intensive and challenging for non-technical users.
User Testing & Final Selection: The Optimal Solution
User Testing & Final Selection: The Optimal Solution
Chosen Solution: A Hybrid Approach – Single Out + Advanced Filter
Chosen Solution: A Hybrid Approach – Single Out + Advanced Filter
Selected through quick user testing, this approach balances simplicity for fast filtering and flexibility for complex queries, ensuring efficiency across different user needs.
Selected through quick user testing, this approach balances simplicity for fast filtering and flexibility for complex queries, ensuring efficiency across different user needs.
Balances Simplicity and Flexibility
The simple filter provides quick access to predefined options, making it visually clear and intuitive for users. The advanced filter complements this by offering flexibility for more complex and technical filtering needs.
Takes more space, but solvable through design.
Although the simple filter could take up more screen space, I addressed this trade-off by simplifying the visual layout, ensuring a clean and streamlined interface that minimizes clutter.e
High-Fidelity Design
High-Fidelity Design
A Filter System That Adapts to Every Need
A Filter System That Adapts to Every Need
Simple Filter → Fast & Efficient for Daily Monitoring
Simple Filter → Fast & Efficient for Daily Monitoring
Use Case: Enables managers to quickly identify high-severity anomalies.
Use Case: Enables managers to quickly identify high-severity anomalies.
Advanced Filter
Advanced Filter
Use Case: A manager leverages this to find anomalies within pipeline between 100 to 200, while excluding those with low severity or progress as dismissed.
Use Case: A manager leverages this to find anomalies within pipeline between 100 to 200, while excluding those with low severity or progress as dismissed.
What I've Learnt
What I've Learnt
📌 Constraints breed creativity. Tight timelines and budgets forced us to prioritize smartly and leverage scalable solutions instead of over-engineering.
📌 Always look beyond the surface. What started as a UI refresh turned into a product strategy challenge, reinforcing the importance of holistic UX thinking.
📌 B2B UX is about efficiency. This project deepened my understanding of role-based workflows, data visualization, and efficiency-driven design—critical for B2B SaaS products.
📌 Constraints breed creativity. Tight timelines and budgets forced us to prioritize smartly and leverage scalable solutions instead of over-engineering.
📌 Always look beyond the surface. What started as a UI refresh turned into a product strategy challenge, reinforcing the importance of holistic UX thinking.
📌 B2B UX is about efficiency. This project deepened my understanding of role-based workflows, data visualization, and efficiency-driven design—critical for B2B SaaS products.