✨ Design for AI/ML

GenAI for CPS Design

B2B · GenAI · Machine Learning · Data Driven · LLMs

This platform enhances AI-driven CPS design optimization, addressing end-user trust issues through transparency and intuitive interfaces.

My Role

Team

Design Duration

Budget

Client

Design Lead
Sole Designer

10+ (Principle investigator, Project manager, research scientists, team of engineers)

Jul 2023 - Aug 2023

6 Millions

DARPA

Problem

1 In current AI-assisted CPS design, AI optimizations lack transparency and overwhelm users with thousands of results, eroding trust and causing CPS engineers (end users) to revert to manual processes.

2 The optimized results generated by AI are presented in a complex, non-visualized way, hindering quick understanding and selection, significantly prolonging design cycles.

Solution

1 Developed a transparent scoring system that filters and ranks optimization results based on project-specific needs and user preferences, providing clear justification for AI-generated improvements.

2 Integrated familiar visual diagrams into the AI-assisted system, enabling users to preview optimized changes with clear pro-con analyses, facilitating quick understanding of potential improvements and trade-offs.

My Contribution

Research & Leadership: Led 5 workshops and co-creation sessions during the scoring system development, facilitating mutual understanding between AI and CPS engineers, ensuring alignment of technical capabilities and user needs.

Design: Designed a scalable framework for future feature expansion, and created user flows with low and high-fidelity prototypes to visualize the solution.

Outcome

Increase Efficiency

20x

compared to the orginal
AI-assited CPS design process

Remain same-level Accuracy

~100%

compared to the traditional CPS design process

Increase Trust

92%

of end users feel confident with the outcome of the system

Let's dive into how I led the design process, transformed overwhelming AI optimization into an intuitive, transparent, and trusted platform.

👇

Challenges

Tight Timeframe: Delivered a user-friendly UI solution within a 1-month timeframe for a complex AI-assisted design tool.

Complex Domain Knowledge: Quickly grasped and translated complex engineering and AI concepts into an intuitive and accessible user interface.

Gap between AI models and End Users: Bridged the gap between the engineering team's technical focus and the end users' need for trust and transparency in the AI-generated designs.

Context

Understand the Complex Domain

I first immersed myself in the core technology. In short, SyGEF (later reffered as "AI optimization tool"), is a tool that enhances Cyber Physical System (CPS) design by learning from user-provided assets.

✏️

📋

🎨

👩‍🔬

🔬

2-3 Hrs
per Round

⏰

CPS (Cyber-Physical System) Design
CPS design involves integrating computational and physical components. The current user flow is largely manual without automated optimization.
CPS contains domains like Aerospace, Machinery, UAV, etc.

Designing for Transparency and Readability
Create a UI that clearly communicates the changes made by SyGEF to the CPS design and provides explanations for its optimization decisions, enabling users to understand and trust the AI-driven process.

SyGEF (Systemic Generative Engineering Framework)
SyGEF leverages AI techniques to learn from past designs, generate novel design alternatives, and optimize for multiple performance objectives.

Ensuring UI Scalability and Adaptability
Develop a flexible, modular UI architecture that can accommodate the increasing complexity of future SyGEF models and CPS designs without requiring significant rework or redesign.

Research

Uncover User Pain Points via Interviews & Focus Groups

I conducted 6 user interviews and 2 focus group workshops with CPS engineers (end user) to gather feedback on the proposed SyGEF optimization concept and identify pain points in their current workflow.

⁉️Pain Point 1

Lack of Trustable Criteria: The optimization process lacks transparency, making it difficult for engineers to trust the AI-generated outcomes fully.

🤔Pain Point 2

Difficulty in Visualizing Improvements: Comparing the optimized CPS designs with existing ones is time-consuming, and switching platforms to view system architecture diagrams disrupts the workflow.

Ideation

Define the Project Scope

Project Scope

Design a user-centered, scalable UI for the SyGEF AI-optimized CPS platform, featuring a transparent scoring system.

Design and Develop a Comprehensive Scoring System

Define Design Evaluation Metrics through User Research

Through extensive user interviews and workshops with CPS engineers and AI experts, I identified a comprehensive set of raw parameters that define a design's performance and quality. Using the card sorting method, I collaborated with stakeholders to categorize these parameters into 6 distinct groups, which formed the basis for the sub-scores used in the SyGEF scoring system. This process ensured that the evaluation metrics aligned with both technical requirements and user needs.

Workshop with Domain Experts and End Users

Card Sorting results: 6 distinct criteria groups

Craft a User-Centered Scoring System through AHP & Swing Weighting

Through a collaborative workshop with end users, I developed a comprehensive scoring system that aggregates weighted raw parameters into sub-scores, which are then combined into an overall score via AHP (Analytic Hierarchy Process) and Swing Weighting. This iterative process, involving testing, feedback, and refinement, resulted in a transparent and user-centered evaluation metric for the SyGEF-optimized designs.

Display the score appropriately for the end user

After creating the scoring system, I developed the following strategies to present the score clearly to the end user.

Step 1: Display an overall score
Display an overall score alongside 6 detailed sub-scores, offering users both quick insights and in-depth understanding of design solutions.

Step 2: Optimizations ranked by urgency
Display all AI-identified pending optimizations, categorized into 3 urgency levels, to help users address the most critical issues first.

Design for scalability

Universal SyGEF User Flow

The conventional AI-driven design enhancement flow can be mapped to the given framework: Import Model for collecting and preprocessing design data; AI Optimization for selecting, training, and using AI models to explore and optimize the design space; Review Results for validating AI-generated designs; and Synthesize Design for integrating the optimized design into the overall system.

Scalable framework for Universal flow

I designed a 4-section UI framework aligned with universal AI optimization flow, ensuring scalability for future complex models by mapping new parameters into existing sections (Section 2 & 4).

1

Header
(Project management)

2 Left Nav
(Task management)

3 Drafting Area
(Project visualization)

4 Toolbox Panel
(AI toolkit for enhancement)

Create readable visual representation

Based on end-user engineer feedback, we conducted a competitive analysis to determine the most intuitive project visualization method that clearly displays AI-suggested changes.

We chose the architecture system diagram as our entry point, as it has the possibilities to transform all project type into a parameter logic mapping. This unification strikes a perfect balance between simplicity and comprehensiveness. Additionally, we redesigned the diagram components to be straightforward yet comprehensive, ensuring an optimal user experience.

Improve

Integrate

All formats of models:
CAD, Simulations, graphs

All models translated into one type of visualization:
Architecture system diagram

Optimized design:
Component diagram

Component Diagram

Title section
Display component name, type and icon

1

Parameter
Display input & output parameters

2

3

Connection
Display logic between different components

Apart from that, we offer a straightforward method to isolate these components, enabling end users to quickly identify areas and reasons for improvement.

Solutions

Setup Environment for AI-Driven Optimization

Users open the existing model, which generates the component diagram automatically. Then the users specify the project type, enabling the system to apply appropriate scoring weights. Finally, the users select or upload relevant assets for the AI to learn from before running optimization process.

Review AI-Generated Optimization Results

This screen presents AI-generated optimizations through scores, plots, and summaries. Ranked by urgency, it allows users to quickly assess design improvements and make informed decisions on implementing changes.

Validate optimization with detailed comparision

This screen offers a side-by-side "before & after" comparison of individual optimizations. Users can clearly visualize and quantify improvements, facilitating informed decisions on implementing AI-suggested optimizations.

Design System

I created a comprehensive design system, streamlining the UI development process. This system ensured consistency across the platform, accelerated design iterations, and facilitated seamless collaboration with developers.

🌟Improvement and Success

Increase Efficiency

20x

compared to the original
CPS design process

Remain same-level Accuracy

~100%

compared to the original
CPS design process

Increase Trust

✨ Design for AI/ML

GenAI for CPS Design

B2B · GenAI · Machine Learning · Data Driven · LLMs

Design Lead Sole Designer

10+ (Principle investigator, Project manager, research scientists, team of engineers)

Jul 2023 - Aug 2023

6 Millions

DARPA

Problem

Solution

My Contribution

Research & Leadership: Led 5 workshops and co-creation sessions during the scoring system development, facilitating mutual understanding between AI and CPS engineers, ensuring alignment of technical capabilities and user needs.

​

Design: Designed a scalable framework for future feature expansion, and created user flows with low and high-fidelity prototypes to visualize the solution.

Outcome

20x

compared to the orginal AI-assited CPS design process

~100%

compared to the traditional CPS design process

92%

of end users feel confident with the outcome of the system

Let's dive into how I led the design process, transformed overwhelming AI optimization into an intuitive, transparent, and trusted platform.

👇

Challenges

Tight Timeframe: Delivered a user-friendly UI solution within a 1-month timeframe for a complex AI-assisted design tool.

Complex Domain Knowledge: Quickly grasped and translated complex engineering and AI concepts into an intuitive and accessible user interface.

Gap between AI models and End Users: Bridged the gap between the engineering team's technical focus and the end users' need for trust and transparency in the AI-generated designs.

Context

Understand the Complex Domain

I first immersed myself in the core technology. In short, SyGEF (later reffered as "AI optimization tool"), is a tool that enhances Cyber Physical System (CPS) design by learning from user-provided assets.

✏️

📋

🎨

👩‍🔬

🔬

2-3 Hrs per Round

⏰

CPS (Cyber-Physical System) Design CPS design involves integrating computational and physical components. The current user flow is largely manual without automated optimization. CPS contains domains like Aerospace, Machinery, UAV, etc.

Designing for Transparency and Readability Create a UI that clearly communicates the changes made by SyGEF to the CPS design and provides explanations for its optimization decisions, enabling users to understand and trust the AI-driven process.

SyGEF (Systemic Generative Engineering Framework) SyGEF leverages AI techniques to learn from past designs, generate novel design alternatives, and optimize for multiple performance objectives.

Ensuring UI Scalability and Adaptability Develop a flexible, modular UI architecture that can accommodate the increasing complexity of future SyGEF models and CPS designs without requiring significant rework or redesign.

Research

Uncover User Pain Points via Interviews & Focus Groups

I conducted 6 user interviews and 2 focus group workshops with CPS engineers (end user) to gather feedback on the proposed SyGEF optimization concept and identify pain points in their current workflow.

⁉️Pain Point 1

Lack of Trustable Criteria: The optimization process lacks transparency, making it difficult for engineers to trust the AI-generated outcomes fully.

🤔Pain Point 2

Difficulty in Visualizing Improvements: Comparing the optimized CPS designs with existing ones is time-consuming, and switching platforms to view system architecture diagrams disrupts the workflow.

Ideation

Define the Project Scope

Project Scope

Design a user-centered, scalable UI for the SyGEF AI-optimized CPS platform, featuring a transparent scoring system.

Design and Develop a Comprehensive Scoring System

Define Design Evaluation Metrics through User Research

Workshop with Domain Experts and End Users

Card Sorting results: 6 distinct criteria groups

Craft a User-Centered Scoring System through AHP & Swing Weighting

Display the score appropriately for the end user

After creating the scoring system, I developed the following strategies to present the score clearly to the end user.

Step 1: Display an overall score Display an overall score alongside 6 detailed sub-scores, offering users both quick insights and in-depth understanding of design solutions.

Step 2: Optimizations ranked by urgency Display all AI-identified pending optimizations, categorized into 3 urgency levels, to help users address the most critical issues first.

Design for scalability

Universal SyGEF User Flow

Scalable framework for Universal flow

I designed a 4-section UI framework aligned with universal AI optimization flow, ensuring scalability for future complex models by mapping new parameters into existing sections (Section 2 & 4).

1

Header (Project management)

2

Left Nav (Task management)

3

Drafting Area (Project visualization)

4

Toolbox Panel (AI toolkit for enhancement)

Create readable visual representation

Improve

Integrate

All formats of models: CAD, Simulations, graphs

All models translated into one type of visualization: Architecture system diagram

Optimized design: Component diagram

Component Diagram

Design Lead
Sole Designer

compared to the orginal
AI-assited CPS design process

2-3 Hrs
per Round

CPS (Cyber-Physical System) Design
CPS design involves integrating computational and physical components. The current user flow is largely manual without automated optimization.
CPS contains domains like Aerospace, Machinery, UAV, etc.

Designing for Transparency and Readability
Create a UI that clearly communicates the changes made by SyGEF to the CPS design and provides explanations for its optimization decisions, enabling users to understand and trust the AI-driven process.

SyGEF (Systemic Generative Engineering Framework)
SyGEF leverages AI techniques to learn from past designs, generate novel design alternatives, and optimize for multiple performance objectives.

Ensuring UI Scalability and Adaptability
Develop a flexible, modular UI architecture that can accommodate the increasing complexity of future SyGEF models and CPS designs without requiring significant rework or redesign.

Step 1: Display an overall score
Display an overall score alongside 6 detailed sub-scores, offering users both quick insights and in-depth understanding of design solutions.

Step 2: Optimizations ranked by urgency
Display all AI-identified pending optimizations, categorized into 3 urgency levels, to help users address the most critical issues first.

Header
(Project management)

Left Nav
(Task management)

Drafting Area
(Project visualization)

Toolbox Panel
(AI toolkit for enhancement)

All formats of models:
CAD, Simulations, graphs

All models translated into one type of visualization:
Architecture system diagram

Optimized design:
Component diagram

Title section
Display component name, type and icon

Parameter
Display input & output parameters

Connection
Display logic between different components

compared to the original
CPS design process

compared to the original
CPS design process