Manali Bapat - Senior Product Designer

Email me

How I used AI-prototyping to move fast on a hard deadline

From problem to stakeholder alignment in 2 days - without touching Figma

Context

Solution needed to be delivered in a few weeks for a contractual customer commitment

Tool

Claude Design

Time saved

2 days per iteration/prototype

Stakeholders

TPO, Director of Product, Engineers, Design Manager, PM

Key customer

Context

Hard deadline, complex feature and multiple stakeholders to align

We had a hard deadline and a complex feature to release - because it touched multiple flows and had dependencies.

When a marketing admin updates a parent asset, sellers who have customised copies of that asset, need to know exactly what changed. Fits in a sentence but tricky to solve.

It touched three different customisation paths: Mix & Match(in-platform editing), Edit in Microsoft Powerpoint and Edit in Google Slides, each with different linking behaviour, different display logic and different constraints.

We employed a version-diff service to detect what actually changed at the slide level. And now we envisioned

A notification system that aimed to be specific enough to be useful but not so noisy that sellers would ignore them.
And then there were edge cases too: archived assets, access-revoked assets, multi-parent remixes where changes came from more than one source.

And every stakeholder had their own parts to play:

Engineering needed to assess feasiblity w.r.t time in hand
Director of Product needed to see the full picture before development began
TPO needed to see what components and infrastructure needed to be built

We had a hard deadline and a complex feature to release - because it touched multiple flows and had dependencies.

When a marketing admin updates a parent asset, sellers who have customised copies of that asset, need to know exactly what changed. Fits in a sentence but tricky to solve.

We employed a version-diff service to detect what actually changed at the slide level. And now we envisioned:

A notification system that aimed to be specific enough to be useful but not so noisy that sellers would ignore them.
And then there were edge cases too: archived assets, access-revoked assets, multi-parent remixes where changes came from more than one source.

And every stakeholder had their own parts to play:

Engineering needed to assess feasiblity w.r.t time in hand
Director of Product needed to see the full picture before development began
TPO needed to see what components and infrastructure needed to be built

Why an AI-assisted prototype

Faster to build and faster to change!

For the discussions to be productive and for the alignment to arrive faster, we needed something that everyone can see, interact with and something that can be built fast and updated fast. Traditionally, to make a prototype of this fidelity will take at least 3-4 days to make and more days will get added to it for every iteration: for example, the Director flagged an edge case or an engineer said "we can't build that in this timeline" - we would be throwing away days of work.

So this is when I deliberately choose Claude Design, armed with Mindtickle's design system - to create an end-to-end, high fidelity clickable prototype.

Getting the most out of AI

Using it as a 'smart collaborator'

Most users would instinctively prompt like "Add this", "Remove that", "Reduce this padding". I had done that too in early days. You do get the output and it's fast, but it doesn't really unlock what it can do for you.

I have learnt from my experience that sharing context with AI gets you better output. So, here, my first step was to share the PRD with Claude Design. Claude read the document and came back with follow-up questions. When AI understands why something is being built - users, constraints, edge cases - the quality of both the conversation and the output is elevated. The suggestions are grounded in context and the follow-up questions actually take you somewhere.

Building for new use-cases becomes easier when AI knows the context already. e.g. Midway through a session, I realised that I missed including an edge-case. Since, I had shared problem and solution vision to initially, this was very easy to add in.

One more example - at a certain point the notification banner was working well but it was taking up too much vertical space and it wouldn't have scaled properly for more data. I flagged it with a prompt "The banner is taking up a lot of vertical space. Let's put things in-line and have a max height, and a 'see more' CTA to expand" and Claude built an alternative right away.

💡

Every prompt I wrote in this session had reasoning behind it - an explanation of what I needed and why. In my experience, that's what separates a frustrating AI session from a genuinely useful one. The quality of what you get back is a direct reflection of the context you put in.

🧠

I had to know what good felt like and recognise that this wasn't it yet. Taste and judgement was mine and AI helped me fix it.

Stakeholder discussions

When prototype became the drawing board!

We convened with the full group - TPO, Director of Product, Engineers, Design Manager, PM and me - and what happened in the session proved that my call was right!

Visuals convey meaning much faster than words and I experienced that first hand.

The engineers and TPO could immediately see what needs to be built and started the much needed conversation: can we achieve the same experience with less engineering effort? What does the backend structure actually need to look like?
The Product Director could see the full solution - which meant he could flag edge cases and see how the flow fit into the bigger product picture.

🥳

And this reaction said it best:

Center of the conversation

After the internal walkthrough, I incorporated the feedback and built a final version for the customer call. In the customer walkthrough, we were able to 'show' our vision and we concluded with concrete alignment on the feature.

🥳

The day after the internal walkthrough, PM posted this in our team Slack:

We achieved this in 2 days - each iteration in traditional Figma prototype would have cost roughly the same. I built multiple iterations in the time it would have taken to do one in Figma.

What I took away

All of us know that there isn't one design process. There's a right process for this project - with this timeline, constraints, scope and stakeholders. That shifts every time. What worked here won't automatically be the right call on the next project.

What this project reinforced for me is that tools don't define the process. They serve it. Claude Design didn't tell me to prototype first. I made that call based on what the project needed. Claude Design just made it possible to execute that call fast enough to matter. A tool accelerates and catalyses parts of a process. It helps you create artefacts faster, cheaper and more iteratively.

The process didn't involve any one magic prompt that would give the final output. It involved multiple short, specific instructions and fast back-and forth. A lot of 'Yes, now do this' and 'Actually, change that'.

I started by giving it a strong visual foundation by uploading screenshots of both Mindtickle's content center and Trupeer's existing product, followed by explaining the flow in plain language. This saved me a lot of typing for describing the UI layout.

This is something I would recommend to anyone using Claude Design: the more visual context you give it upfront, the less correction you do later.

💡

But the process itself - what to make, when, at what fidelity, for whom, that judgment belongs to the designer.