An AI SQL optimization tool for the enterprise product that leverages LLMs to rewrite queries for better performance, empowers database analysts and developers to work more efficiently, reduce errors, and confidently integrate AI into their workflows.
TIMELINE
Sep 2024 - Dec 2024
ROLE
Product Designer
Frontend Developer
FOCUS
Business AI
Concept to Creation(0-to-1)
TOOLS
Figma
React/ Javascript/ Git
Jira
PROBLEM STATEMENT
"Rewrite SQL queries using LLMs to achieve better query performance"
PROLECT OVERVIEW
Agile Methodology
Daily Stand-up
We adopted an Agile workflow with 1-week sprints, using JIRA for task management and tracking progress
1-Week Sprints
We shared updates via Slack, addressing blockers in real-time
Retrospective with Mentor
We reflected on our work, gathered feedback, and refined our approach based on expert insights
TIMELINE
IMPACT
In 4 months
designed, developed, and launched from 0 to 1
86%
reduction in query time
(TPC-H: 255.77s → 35.92s,
SSB: 22.7s → 2s)
98%
user satisfaction, validated through 5+ in-depth user interviews
EMPATHIZE
Why traditional SQL queries create friction?
Stage 1 - Understanding Client Struggles
To identify key challenges, we interviewed 10+ engineers from Google's Database team, here are some Key Findings, and then to bridge the gap between AI-powered optimization and user trust, I defined key user personas based on our findings
1) The Struggle of Writing Efficient Queries
"Writing optimized SQL feels like black magic—I never know if my query is efficient." – Software Engineer
2) Time-Consuming Debugging Process
"I waste so much time debugging performance issues. If AI could help, I’d use it daily." – Database Administrator
3) Trust & Transparency in AI Suggestions
"AI-generated queries sound useful, but I need to trust what’s happening under the hood." – Data Analyst
Stage 2 - From Fragmented Pain Points to a Persona
To bridge the gap between AI-powered optimization and user trust, I defined key user personas based on our findings:
IDEATE
Bridging the Gap, Turning Ideas into Action
With user needs defined, I quickly explored solutions through low-fidelity sketches, mapping out layouts and interactions for early validation. This rapid iteration helped align stakeholders before refining the design in Figma, where I built the first high-fidelity prototype, ensuring usability and AI-driven functionality were seamlessly integrated
Exploring Ideas(Sketch) on the Left, Refining in Figma(Prototype) on the Right
PROTOTYPE & TEST
Phase 1 → Exploration & Initial Refinement
From Concept to Usability
During our Agile Retro Meeting, I gathered feedback from our Google mentor and team members, identifying key areas for improvement
🥰 LIKES
1. AI-powered query optimization intrigued users
2. Side-by-side query comparison made it easier to evaluate improvements
3. Visual runtime difference indicators helped users grasp performance gains
🎋 WANTS
1. Clearer button naming for better action clarity
2. More transparency in AI-generated outputs
3. Improved execution control to prevent redundant query submissions
Iterating tpwards an intutive experience
Side-by-Side Query
1. Users now see their input on the left and AI suggestions on the right, making comparisons effortless
2. Added performance metrics to show AI-improved efficiency at a glance
BEFORE
AFTER
Clearer CTA Naming
Renamed "Optimize with AI" to "AI Rewritten" for better clarity
BEFORE
AFTER
Phase 2→ Validation & Enhancement
Validating with Google Employees
To further refine our approach, I conducted 5+ usability interviews with Google employees who frequently work with SQL queries
🥰 LIKES
1. Real-time AI suggestions felt helpful and time-saving
2. Predefined query options reduced the effort of manual input
3. Highlighted AI modifications made changes more noticeable.
🎋 WANTS
1. Sticky input fields for better context retention
2. More interface visibility for AI logic explanations
3. Syntax error detection to prevent invalid queries
User Interview Updates
Highlighting AI-Rewritten Areas
Clearly marking AI-generated modifications to improve trust and comprehension
BEFORE
AFTER
Syntax Error Detection
Introducing real-time feedback for invalid SQL inputs to reduce frustration
BEFORE
AFTER
Predefined Query Boxes
Users can select from common query patterns, reducing the need to start from scratch
NEW FEATURE
TEAM CHALLENGES
A Rapid Problem-Solving
Midway through the project, our frontend developer Zhiqian had a severe accident, leaving key components incomplete, after our frontend engineer Zhiqian had an accident, our team needed to quickly redistribute his unfinished tasks:
How I turned challenges into solutions
My experience as a frontend engineer enabled me to step in seamlessly during team challenges, ensuring continuity and delivering a smooth user experience even in the absence of dedicated frontend resources
FINAL DESIGN & DEVELOPMENT
Database X User Experience X AI
With continuous iteration, the final design achieved:
✨ Intuitive AI-powered SQL optimization with transparent query comparisons
⚡ Faster performance with real-time syntax validation & AI-suggested improvements
✅ A scalable frontend framework, built with React.js for future extensibility
UI Demo
Video Demo
BRIEF LOOK-BACK
What I learned
• Beyond UI/UX, effective product design means understanding user pain points, business goals, and technical feasibility to create impactful, scalable solutions
• Building AI-driven features requires balancing automation and user control. Users trust AI when given clear explanations and the ability to refine results
• Working closely with engineers, researchers, and mentors reinforced the importance of iterative feedback and agile workflows for refining solutions
