How AI Empowers Product Managers to Rapi ...

How AI Empowers Product Managers to Rapidly Prototype: A Look at LookAtMe Timer

Nov 02, 2024

Over the past month, I've spent a considerable amount of time exploring Cursor, an AI-driven code collaboration tool designed to help users—from developers to product managers—work more effectively on programming tasks.

Cursor uses AI to assist in generating, refining, and reviewing code, making it easier to prototype ideas quickly, experiment with different solutions, and handle repetitive coding tasks. For more information, you can visit Cursor's official website. It effectively acts as an AI coding partner that can accelerate development while maintaining a high level of precision. For product managers, I find that the learning curve for tools like these is significantly lower compared to other non-technical users. This is largely because many aspects of using AI for programming resemble what we already do in our daily work—coordinating between ideas, prioritizing problems, and finding solutions. Though I firmly believe that a product manager's irreplaceable skill lies in framing the right problems and making sound decisions, I also acknowledge that getting involved in the development details is sometimes inevitable. For me, this involvement aligns very well with how I use Cursor.

In this series, I'll dive deep into my journey working alongside AI, particularly how I developed LookAtMe Timer—a visual timer that evolved iteratively thanks to AI's assistance. Before diving into every technical detail, however, I want to make sure we're all on the same page about what this collaboration is about. And as a product manager, that means defining not just the features, but the problems we are solving.

Introducing LookAtMe Timer

The example here—LookAtMe Timer—is a visual timer designed to assist in workshops and study sessions. It allows users to set the time through a draggable circular interface, with customizable features like dark mode, sound toggles, and quick settings for common time intervals. Initially, I had used Time Timer, which was quite effective, but it lacked some of the features I wanted. This led me to create LookAtMe Timer, aiming for a more flexible and visually intuitive tool for my workshops.

One of the existing features of LookAtMe Timer was the Quick Settings for common time intervals, which allowed users to easily select from preset durations like 5, 10, or 25 minutes. While this was helpful, I wanted to enhance its flexibility by adding the ability for users to customize these quick settings based on their own preferences. In this series, I will use the process of adding this customization feature as an example to illustrate the journey, the thinking, and the various decisions involved.

Establishing the Right Foundation

When telling AI an issue, it will often jump straight into generating a solution. This eagerness to solve can lead to mistakes if the problem isn't fully defined—just like how a human might misinterpret vague requirements. It's crucial to deliberately guide AI by ensuring it fully "understands" the problem before diving into coding. Without this, AI is likely to produce incorrect or unsuitable results. Therefore, taking the time to frame the problem clearly and align it with the product's goals is essential.

Clearly Define Goals and Requirements

Before starting with code, I provide AI with enough background and context. For LookAtMe Timer, it wasn't just about building a timer app—I wanted to solve a problem: making timekeeping during workshops more interactive and clear. This meant explaining the real-life challenges, not just listing features.

This approach is crucial for both human teams and AI. I’ve found that AI performs best when I clearly articulate the "why" behind a feature. Explaining why we need specific functionality helps frame the problem effectively, much like how a well-informed developer would interpret user stories or specs.

When giving AI context, there are numerous approaches to consider. I've tried starting with a comprehensive description, presenting user stories, even sharing competitor references and diagrams. For LookAtMe Timer, the early phases were relatively straightforward, so I fed the entire codebase to AI to iteratively build features and refine interactions.

Provide Additional Clarifications for Potential Ambiguities

It took some experimenting to get the initial prompt right. I revised it three times, trying different fragments of technical details that I thought might help reduce AI misinterpretations. For example, I included specific technical phrases and concepts from my project, such as:

- The existing calculateIconPosition function can be reused. It currently calculates the 'clock position' for placing icons, and we need to modify it to calculate the icon position based on 'minutes'.

- Naturally, related functions like updateIconPositions might also need adjustments.

These detailed instructions were added later in my iterations to help AI effectively re-use existing code rather than generate new solutions from scratch. By providing these specifics, I ensured that the AI could build upon the previous work, minimizing redundancy and avoiding unnecessary re-implementation. This iterative adjustment of the prompt until AI delivered the desired outcome was much like refining user stories or planning sprints, ensuring each iteration brought us closer to the optimal solution.

Ensure Consistency with Existing Features

I also provided supporting documents to help AI reference and re-use previous solutions, avoid conflicts, or refer back to earlier work. My approach involved adding a README file to the project and instructing AI to read it. While this method worked well, users could also use the Notebook feature in Cursor Composer. In my experience, both approaches yield similar results, allowing AI to function effectively, similar to a junior team member—capable but needing clear guidance.

Stay Tuned: The Journey Ahead

In the following articles, we will explore the process of enhancing LookAtMe Timer by adding the ability to customize Quick Settings for common time intervals. This series aims to show how AI can assist product managers in refining and expanding a feature from an initial concept to a tailored solution. My goal is to share how AI can assist non-developers in coding by focusing on the communication and thought process involved. More importantly, I want to show how to iterate effectively, improving features step by step, to achieve a more refined product.

If you’re curious about how to take control of AI to make it work for you—whether you are a product manager or someone simply looking to better understand the process—stay tuned. There’s a lot to learn from this journey, and perhaps, like me, you’ll find that AI has the potential to become an invaluable assistant on your path to building something meaningful.

And, if you enjoy reading along and find this content valuable, consider supporting my work through a donation. Your contributions will help me continue to explore and share these experiences, making this journey richer and accessible to many others. You can also follow along for future updates and related content on my Buy Me a Coffee posts page.

Enjoy this post?

Buy Bob Chao a coffee

More from Bob Chao