• UX/ UI Design • UX Research • Project Planning • AI Dev Tools Design

Firebase Studio

2024 - Present

The process of bringing Firebase Studio from idea to production is not just another UX design life cycle, but a journey that I jumped into the exploration of how humans and AI can truly team up.

My role: UX design lead - deployment and integration. One of the founder design member of the product. Build the product from scratch to launch in 4 months.  

Media post: Cloud Next, Google I/O ,Google I/O connect , Firebase Blog

Firebase Studio, a cloud-based, agentic development environment designed to accelerate how you build, test, deploy and run production-quality AI applications, all in one place

App ideation from prompt to app publish

Set up vision with study

Back in Fall 2024, our Firebase design team started a discussion: we want to figure out how to use Large Language Models (LLMs) to make developer tools way cooler: code that practically writes itself, super smooth workflows, and every developer feeling like they've got an AI buddy helping them out.    

From then,  we're aiming to forge a long-term, inspiring vision. But we need to answer a big question: what should we build? An extension? Several tools? Agents? I partnered with UXR, presenting our initial concepts to developers, absorbing their feedback, and refining our vision. User research revealed that developers are eager for AI to assist them in one unified place through the SDLC(Software Development Life Cycle):  

  1. Speed of iteration: moving quickly from ideation to prototype, sharing early, getting feedback and metrics 

  2. XFN collaboration: shared workspace to ensure alifbment with the team  

  3. Firebase integration: automatic identification and connection to Firebase services 

  4. Transition to code : start with AI and easy to move to code 

  5. Fully integrated assistance: AI assistance throughout  

However, some concerns across regarding navigating a complex, full-stack development experience, ensuring consistent quality in AI model responses, and the potential for high costs without a clear return on investment (ROI).  

We set our vision: make a unified, self-service platform that simplifies the development, testing, deployment, and management for app developers - Firebase Studio   

This end to end novel AI driven app creation concept that helped influence and inspire Firebase Studio product 2025 strategy and deliverable on Google big event: Cloud Next,  Google I/O and  Google I/O connect 

Introducing Firebase Studio on Cloud Next 

A long journey can be covered only by taking one step at a time.  As one of Firebase Studio's UX design leads, I teamed up with another UX designer and a visual designer to successfully launch the initial phase of Firebase Studio that allows professional developers to build/edit/deploy agentive apps using multi-modal prompts in Firebase Studio.   

Onboarding user with App Blueprint

“Pptx reacted positively to the concept of reviewing the app template before generating the app or seeing code.”  This one of the key findings from the concept study.  So we decide to onboarding user with App Blueprint: Developer can get started with the App Prototyping agent. It assists to design app — such as the UI, API schema, and AI flows — all using natural language, images, drawing tools, and screenshots.  The App Blueprint not only helping the users to better  understand the theme style, features and structure but also give the App Prototyping agent a great context for app generation.  

Design highlight: App Blueprint

Publish quickly with Firebase App Hosting

User wants to get feedback and metrics early. To meet user needs we decide to leverages Firebase App Hosting for a seamless deployment experience by automatically managing the build process, CDN, and server-side rendering.  

App publish flow

Backend integrations with one click 

After the launching of the first step at Cloud Next, I throw back to the study to look for new product opportunities based on developers needs. Developers love Firebase backend products as tools to help them build feature-rich apps and they want the assistant to be able to auto identify the services and connect to them.    

“Pptx reacted positively to seeing a checklist of tasks the AI assistant would perform to build the app”  
 "As a developer, you like to see check marks. It's more helpful than throwing me in the deep end." 

It's not enough for the agent to just configure the backend services by calling Firebase  integration tool. Users often ask general questions like, "I need user authentication." So, for full functionality, both the front-end and back-end need to be set up. After the configuration files and services provisioned, the App Prototyper agent will also start building the user interface. 

Firebase backend integration by Gemini

Something I would keep in mind

When design a AI agent tool for use to interact with an Agent, the goal is to maximize efficiency, provide clear feedback, and handle complexity without overwhelming users.

  1. Design for efficiency, not exploration. Your users are internal experts who need to complete tasks quickly and efficiently. The design should prioritize common workflows and reduce clicks to completion.

  2. Provide clear and immediate feedback. Users must know the status of their actions. Use loading indicators, success messages, or error notifications to confirm that a command was received and is being processed.

  3. Maintain human-in-the-loop oversight. Because MCP tools can perform powerful actions through AI, the UI should provide clear visual indicators whenever a tool is invoked. Always present a confirmation prompt for destructive or sensitive operations.

  4. Prioritize a clean information architecture (IA). Organize content and features logically to help users quickly find what they need and understand their location within the application. Avoid clutter and present only the most relevant information at any given time.

  5. Leverage progressive disclosure. To avoid overwhelming users with information, present only the most important details upfront. Additional, more advanced options can be revealed as they become necessary