TEAM
Designers, Design Lead, Engineering Lead, Founder
TIMELINE
May – Aug 2024
RESPONSIBILITIES
Cross-Functional Collaboration
Prototyping
Design System
Agentic AI
0-to-1
Tempo is an AI-powered dev tool for engineers, designers, and founders
Tempo Labs is a GenAI-powered React IDE that allows users to generate code using natural language prompts. It features both a code script editor and a drag-and-drop visual editor
Users find it difficult to initiate and manage projects with large scopes using AI
I was tasked with an ambiguous problem and scope – which was to create an experience that would empower users to create and manage larger projects and code bases with the help of AI. This problem is important for the following reasons:
There was limited functionality for the user
Solo founders are our target users; they need help organizing their ideas into solid product decisions and next steps. Current users of Tempo are struggling with this.
…leading to low engagement
Currently a large percentage of users not engaging with the app after initial use, where they usually experiment with a few small components. How might we increase long-term engagement?
A project management dashboard with AI-aided workflows that help users generate projects from 0 to 1, create detailed feature specs, and implement version control
I researched and designed for the problem of getting users to more effectively initiate and manage projects by redesigning the current project page into a dashboard with various AI-aided workflows that help create and manage a new code base. Below is an overview of the key features I designed:
KEY FEATURE #1
Onboarding process that automates the generation of the user’s first dev project
Revamped onboarding flow with increased conversion rate
Introduces users to key concepts unique to Tempo and helps users clarify their ideas
Using guided input to optimize the quality of AI-generated code and design
KEY FEATURE #2
Idea-generation with AI and simplified version control
Incorporating version control workflows using git, the dashboard allows non-technical users to easily create new feature branches and use AI to start ideating immediately
KEY FEATURE #3
Seamlessly transition between project management and dev
Through reusable components, I designed a flow that allows users to transition from the project page/dashboard easily to Tempo's editor to design and code their projects.
Users are generating components and single pages, but unable to create or manage large projects, and ideas
Currently, Tempo helps users generate code for basic React components. But solo founders need to create end-to-end products fast to market-proof ideas and secure funding.
CORE PROBLEM STATEMENT
How might we help founders create and manage an entire project with multiple pages and features?
Understanding why users are not creating end-to-end projects
Through user interviews with founders and observing current users create projects on Tempo, here are key pain points I identified:
QUOTES
"I thought the AI would generate an app with about 80% completion, organizing each screen's content itself and checking with me before finalizing it, but I was disappointed by the result."
"I like that [the AI] understood the task and provided the basics. I wished that the AI asked me more questions - do the images come from a database? or where do I put a certain element?"
KEY TAKEAWAYS
1
Simplistic project generation experience
The process to create a project relied on a single prompt box, which provided insufficient guidance for users to think deeper about what they want to create
2
No way to visualize the project’s scope with a “big picture view”
Tempo's current project management screen lack detailed a big picture view that allowed users to all the parts of a project and how they fit together
3
Unable to proceed from broad product ideas to specific decisions
Users often began with very broad ideas, leading to disappointment with AI generated results; a little more context and back and forth would help
Allowing users to break down and refine product ideas 💭 with the help of AI 🤖 will help users create and iterate ⚒️ end-to-end products
Focusing on project organization and onboarding first, then specific AI interactions
Starting off the design process, my strategy was to think more broadly about how projects are organized and how users initiate a project – then proceed to specific interactions that can help users "fill in the blanks."
User journey mapping and product audit to prioritize scope
After auditing the user flows of the current product, I understood the most impactful changes that could happen.
A dashboard for project management to help users organize and see a big picture view of their projects
Taking inspiration from project management (Jira, Trello, etc.) apps, we landed on the idea of a dashboard for project management
An in-built kanban board to help organize timelines and tasks
I hypothesized that creating inherent structures in the dashboard helps automate the project creation and ideation process
📊 COMPETITIVE ANALYSIS
How do other apps break down large projects?
Two categories of apps stood out: project management (Jira, Trello, etc.) and dev tools (Github, Replit, etc.). We wanted to find a balance between the two for our unique use case of managing both projects and code bases.
I tested our initial concept with 3 founders, receiving mixed reactions and feedback
I created a rapid prototype with realistic GenAI responses generated by the existing Tempo platform to see how users would react to our concept. Here are what I found:
KEY FINDINGS
Misalignment with core mental model and use case
Users often confused concepts like "tasks," "subtasks," borrowed directly from other project management apps and didn't find them helpful for breaking down a complex project.
Founders want more GenAI for product strategy
All of users who participated found GenAI features that could, for example, write PRDs and specs really helpful; this insight helped pointed us in the right direction
How might we design a dashboard that fits with product management and dev workflows?
Seeing from concept testing a poor fit between the organization of the dashboard and users' mental models, I initiated conversations with cross-functional teams at Tempo to understand how the dashboard can better fit into existing PM and dev workflows.
Proposal: Introducing version control
I proposed introducing version control functionalities and flows to the dashboard to make these core functionalities discoverable AND offload them from the Tempo Editor.
What if we could combine Jira and Github?
What if there is a way for users to automate the creation of new branches, being able to visualize both their codebase not only as branches but also features and tasks?
Defining the information architecture and messaging for version control for first-time non-technical users
Presenting version control to non-technical users
While Git and Github are familiar concepts to developers, I experimented with representing version control with more familiar patterns
IDEA #1: TABS AND PAGES
IDEA #2: DROP DOWN
Differentiating main vs. feature branches through visual language and clear hierarchy
Because branches now serve as the entry point to the user's project (and its versions), my iterations centered around making clear the distinction and functionality of each
Redesigned "my projects" page to provide big picture view of versions (branches) with new entry points to create and iterate
I worked closely with cross-functional partners and audited similar platforms to figure out how to represent master vs. active branches to novice and more technical users.
Designing tooltips and iterating on visual details
Defined and designed tooltips that help first-time users understand the interface and key concepts
Worked with our engineers to learn about the backend of version control and project setup to more accurately design entry points that help users distinguish different branches
Resolving blank page anxiety and allowing for quick generation
The second goal accomplished by the redesign are improved AI workflows that help resolve blank page with quick suggestions and generation
Returning to our original problem to make initiating projects easier, I designed workflows that help founders go quickly from broad idea to concrete feature
Facilitating smaller-scale iterations and giving users finer control
I focused on giving users more control, especially when it comes to ambiguous and high-stake tasks, through an AI roadmap feature.
The importance of cross-functional collaboration and design hand-off
Given the unique nature of a product based on AI, I relied on the engineering team at Tempo to understand and design for AI. Cross-functional collaboration was a through-line of my work: creating a hand-off spec clarified the most important design decisions and made a single source of truth as the product gets shipped
Empathy means understanding complexity and needs in different contexts
In the process of empathizing with my users, I learned that people go about complex processes in different ways. As a designer, I aimed to solve their needs by providing flexible tools. A strong product has multiple use cases (think Notion!). This process was also rewarding for me because I actually work alongside PMs and engineers - it's invaluable to learn. about their workflow and experience.