TEMPO AI
Uncovering the True Problem: Designing the Pre-Production Planning Workflow for Tempo AI
Overview
I was part of the team that designed Tempolabs' AI-powered app-generation tool, Tempo AI. After joining the team during the beta testing phase, I was initiall tasked with improving the existing Tempo AI. However, through foundational user research and competitive analysis, I uncovered a critical misalignment between the inital product goal and actual user needs. This led me to strategically redefine the core problem and ultimately design a completely new AI agent experience from the ground up to address these validated user pain points and a revised product objective.
What is Tempo AI?
Tempo Labs helps startup teams build products faster with a collaborative, visual platform. Its new AI agent, Tempo AI, turns simple prompts into fully generated, production-ready apps.
Timeline
June 2024 - Sep 2024
Team (15)
Founders, Product Managers, UI/UX Designers, Developer Team, Marketing Team
Role & Responsibilities
Lead Product Designer responsible for User Research, Competitive Analysis, Problem Definition, Prototyping, Usability Testing, UI Design, Development & Stakeholder Collaboration
Problem Statement
Solo tech founders, constrained by limited resources, struggle to translate product ideas into viable products due to a lack of structured planning and clear guidance, leading to wasted effort and stalled development.
Pain Point 1
Lack of Clear Product Vision & Scope
Pain Point 2
Absence of Step-by-Step Product Development Roadmap
Pain Point 3
Inability to Iteratively Refine & Fear of Losing Progress
My Solution
To address these user pain points, I developed targeted solutions that culminate in a Pre-Development AI guidance workflow. This helps users build powerful product ideas and plans.
Impact - after first 3 months
+30%
Onboarding completion
More users successfully completed the early phases in the user flow.
+20%
Day 1 & Day 7 retention
Users are more likely to return once they've experienced early value.
-10 to +30
Increase in NPS
Users expressed that they would recommend the product to others.
High Fidelity Design
Breakdown of Solution
Tackling Pain Point 1: Use AI-Generated PRDs to Define Project Vision & Scope
Tackling Pain Point 2: Converting PRDs into Actionable Workflows as Product Development Roadmap
Tackling Pain Point 3: Adaptive AI: Edit, Undo, and Regenerate Progress with Ease
Reset Product Goal
The Initial Challenge:
Small or solo founders struggle to build and launch products quickly due to limited resources. Tempolabs aimed to solve this by creating an app-generation tool that unifies design and development—enabling rapid prototyping and deployment. This vision defined my role on the team.
However, the existing Tempo AI beta product fails to meet user expectations and has resulted in:
The Real Problem (Discovered Through Research):
My research, combining competitive analysis and user interviews, uncovered a significant flaw: our initial direction missed users' fundamental need for guidance in structuring realistic product ideas. Over half of participants desired pre-development planning support, not just app generation. This showed the issue wasn't the solution's functionality, but its failure to solve users' core problem.
Redefining the Product Goal:
Based on these insights, I proposed a significant strategic pivot. Our goal shifted from simply iterating on app generation to empowering users to better structure and plan their product ideas, setting them up for more successful app creation. This new direction aimed to provide stronger foundations for business concepts and greater control over AI outputs.
Design Process
New User Flow
This new user flow directly bridges the gap between raw ideas and successful development by introducing a Pre-Development Workflow. Acting as an AI-guided process, it helps users form solid, well-planned product outlines through detailed input and customization. This ensures user ideas align perfectly with the AI's interpretation, allowing it to generate precise, actionable tasks. Users can also add collaborators at any point, fostering a flexible and iterative design process. Ultimately, this flow guides users to convert initial concepts into a well-developed project plan with actionable tasks, all within a collaborative environment.
Gaining Control over AI Outputs: Use AI-Generated PRDs to Define Project Scope
This feature introduces a critical intermediary step: after the initial prompt, the AI generates a Product Requirement Document (PRD). This PRD provides a transparent blueprint of the AI's understanding, allowing users to review and refine the project scope before app generation. This ensures the final AI-generated app precisely aligns with their vision, significantly reducing interpretations and rework.
User Flow
Iterations Leading to the Final Design
Iteration A - Idea -> A Single PRD
This iteration features the AI translating user's idea input into a single PRD that outlines the content of the product.
Initial Simplicity: Offers a unified, straightforward view for initial output.
Rapid Editing: Quick for users with a clear vision and strong PRD writing skills.
High Cognitive Load & Overwhelm: Large text fields can be daunting, obscuring AI understanding and hindering effective changes for most users.
Limited Granularity for Control: Hard to isolate/modify specific features without broad impact, limiting precise control.
Iteration B - Idea -> An Overarching PRD -> Feature PRDs
This iteration features the AI first translating user input into an Overarching PRD, outlining the product's content. It then presents Feature PRDs as individual, distinguishable cards.
Enhanced Clarity & Comprehension: Breaks down complex project scopes into digestible units for easier AI interpretation.
Granular Control & Focused Refinement: Enables precise control by editing specific features within individual cards.
Improved AI Alignment & Output Quality: Structured user input leads to more accurate, relevant AI-generated apps aligning with vision.
Slightly Higher Initial Learnign Curve: Users might need a moment to grasp the Overarching PRD-Feature Card relationship.
Increased Screen Real Estate: Multiple cards can require more visual space.
Validating the Approach: Evaluative A/B Test Results
Our evaluative A/B test with 5 partcipants decisively favored Iteration B. Users consistently experienced greater clarity and control with individual Feature PRDs. This granular breakdown enabled precise project scope refinement and built confidence in AI's understanding. Iteration B thus proved superior in addressing insufficient visibility and control over AI execution, aligning user vision with AI output.
Bridging Strategy to Execution: Converting PRDs into Actionable Workflows
Building directly on the user-approved PRD, this solution leverages AI to automatically generate a detailed list of actionable tasks. This gives users unprecedented customization and control over their project's execution. By refining, reordering, or adding tasks, users directly influence project management and how the AI translates their plan into a functional prototype. This ensures a precise, transparent, and fully aligned development process.
User Flow
Iterations Leading to the Final Design
Iteration A - Feature PRD -> Tasks
The AI translates Feature PRDs into actionable tasks. Upon approval, these tasks are organized into a familiar sprint board interface, enabling users to manage, edit, and assign tasks to themselves, collaborators, or the AI. This board also serves as the collaborative hub.
Comprehensive Project Control: Offers a robust, centralized environment for managing the entire project lifecycle.
Optimized Flexibility & Delegation: Users gain granular control over task assignment (self, collaborator, AI), enabling complex hybrid workflows.
Scalability for Real-World Projects: Supports nuanced, collaborative product development, accommodating both AI and human tasks.
Slightly Added Step: Introducing the sprint board adds an intermediate step before direct AI execution.
Potential for Initial Learning Curve: New users might need a brief moment to familiarize themselves with the interface.
Iteration B - Feature PRD -> AI Execution
The AI translates Feature PRDs into a list of actionable tasks. From this list, users can edit, approve, or delete tasks, then directly execute chosen tasks with the AI.
Immediate AI Execution Focus: Provides the quickest path to triggering AI actions for specific tasks.
Simplicity for Solo, AI-Centric Workflows: Offers a clean, linear workflow ideal for users focused solely on AI task completion.
Limited Project Management Capability: Lacks a holistic system for organizing or tracking tasks beyond immediate AI execution, requiring external tools.
Restricted Control Over "Who" Executes: Limits users to only AI execution, removing flexibility to assign tasks to themselves or human collaborators.
Disconnected Workflow: Tasks requiring human intervention become isolated, potentially breaking continuity and project visibility.
Validating the Approach: Evaluative A/B Test Results
Our evaluative A/B test with 5 partcipants decisively favored Iteration A's sprint board. Users consistently found it offered superior granular control over tasks, easily managing and assigning them (to self, collaborators, or AI). This directly enhanced user control over project management and AI execution, proving iteration A's effectiveness in bridging strategy to development.
Adaptive AI: Edit, Undo, and Regenerate Progress with Ease
