Keystone GTM
Keystone GTM
From Lead Magnets to AI-Powered Experiences
From Lead Magnets to AI-Powered Experiences
From Lead Magnets to AI-Powered Experiences
Role
Product Designer
Product Designer
Timeline
3 Month
3 Month
Deliverables
Research, Information Architecture, Wireframing,
UI Design, Usability Testing
Research, Information Architecture, Wireframing,
UI Design, Usability Testing
The Bet
The Bet
A simple one line piitch for this product would be “A no-code platform that helps marketers create AI powered interactive experiences that generate higher quality leads than traditional lead magnets.”
A simple one line piitch for this product would be “A no-code platform that helps marketers create AI powered interactive experiences that generate higher quality leads than traditional lead magnets.”
THE PROBLEM
THE PROBLEM
Traditional lead magnets are broken.
Traditional lead magnets are broken.
Most marketing funnels still rely on static PDFs, ebooks, or generic forms. Visitors exchange their email for content that often provides little immediate value, leading to low engagement and poor lead quality.
Most marketing funnels still rely on static PDFs, ebooks, or generic forms. Visitors exchange their email for content that often provides little immediate value, leading to low engagement and poor lead quality.
THE OPPORTUNITY
THE OPPORTUNITY
People don't want another ebook they want answers.
People don't want another ebook they want answers.
The insight behind the product was that visitors are willing to share information if they receive immediate, personalized value in return. And AI allow us to deliver that value at scale
The insight behind the product was that visitors are willing to share information if they receive immediate, personalized value in return. And AI allow us to deliver that value at scale
THE SOLUTION
THE SOLUTION
A platform for building AI powered marketing experiences.
A platform for building AI powered marketing experiences.
Instead of coding custom tools marketers can create, configure and publish AI micro apps tailored to their target audience and goals.
Instead of coding custom tools marketers can create, configure and publish AI micro apps tailored to their target audience and goals.
Shaping the experience
Shaping the experience
Two experiences. One Goal.
Two experiences. One Goal.
Two experiences. One Goal.
We designed for both sides of the platform. The marketers who create and the visitor who engages
We designed for both sides of the platform. The marketers who create and the visitor who engages
We designed for both sides of the platform. The marketers who create and the visitor who engages
Creator Experience
Marketers can build, customise, and publish AI-powered micro apps without writing code here.
Marketers can build, customise, and publish AI-powered micro apps without writing code here.
Visitor Experience
Visitors can interact with the micro app to get personalised insights, recommendations, or outcomes in real time.
Visitors can interact with the micro app to get personalised insights, recommendations, or outcomes in real time.
Challenge 1
Challenge 1
Designing for marketers, not developers!
Designing for marketers, not developers!
AI workflows can be complex, and most of the people don't know what to do next in an open chatbot. So we wanted to simplify these constraints into an intuitive step-by-step creation flow.
AI workflows can be complex, and most of the people don't know what to do next in an open chatbot. So we wanted to simplify these constraints into an intuitive step-by-step creation flow.
iteration 1
iteration 1
The Configuration Method
Our first approach treated the micro app almost like a large configuration form.
Creators could define their questions, AI instructions, outputs, and settings from a single interface.
Our first approach treated the micro app almost like a large configuration form.
Creators could define their questions, AI instructions, outputs, and settings from a single interface.
Why we started here
It was straightforward to build and gave creators visibility into all the available controls.
What we learned
Too many options for the user make’s them overwhelmed
Finding it difficult to build apps having their brand identity
Getting more friction in just finishing the landing page
iteration 2
iteration 2
The Workflow Builder
We then explored a workflow-based approach.
Instead of presenting configuration as one long form, we broke the experience into individual steps that represented how the micro app worked.
We then explored a workflow-based approach.
Instead of presenting configuration as one long form, we broke the experience into individual steps that represented how the micro app worked.
What improved
Creators could now understand the flow of their experience rather than simply filling in configuration fields.
What still didn't work
The workflow itself introduced another layer of complexity where users have to know every backend detail to get this working.
For marketers who simply wanted to create something like a website audit or ROI calculator, thinking in terms of nodes, steps, and logic was still too technical.
iteration 3
iteration 3
The Modular Builder (Final Build)
Designed around what marketers want to accomplish, not just an AI chat box.
Designed around what marketers want to accomplish, not just an AI chat box.
The final direction moved away from exposing the underlying workflow.
Instead, we organized the builder around the three things a creator actually needs to manage:
The final direction moved away from exposing the underlying workflow.
Instead, we organized the builder around the three things a creator actually needs to manage:
What the visitor is asked → What the AI does → What the visitor receives
What the visitor is asked → What the AI does → What the visitor receives
The interface became modular, allowing creators to configure each part independently while keeping the overall experience visible through a live preview.
Creators could focus on the outcome they wanted to create rather than understanding the technical machinery behind it.
The interface became modular, allowing creators to configure each part independently while keeping the overall experience visible through a live preview.
Creators could focus on the outcome they wanted to create rather than understanding the technical machinery behind it.
Trade Off
Less low-level control → Significantly lower cognitive load
Challenge 2
Challenge 2
Making AI feel trustworthy
Making AI feel trustworthy
The micro app asks users to share valuable information about their business. Once they submit it, they need to understand that the system is actually doing something meaningful with that information.
Our challenge was simple:
How do we make AI feel transparent without exposing unnecessary technical complexity?
The micro app asks users to share valuable information about their business. Once they submit it, they need to understand that the system is actually doing something meaningful with that information.
Our challenge was simple:
How do we make AI feel transparent without exposing unnecessary technical complexity?
iteration 1
iteration 1
The Waiting Screen
Keeping the experience simple.
Keeping the experience simple.
Here we started out by showing a loading state while the AI generated the final report.
It was clean and easy to understand, but it created a frustrating gap between giving information and receiving value.
Here we started out by showing a loading state while the AI generated the final report.
It was clean and easy to understand, but it created a frustrating gap between giving information and receiving value.
What users felt?
What was being analyzed?
How long it would take?
Whether their information was being processed or not?
What they would receive at the end?
The experience essentially said:
“Wait for your result.”
iteration 2
iteration 2
Show the Work, Not the Complexity
Turn waiting into part of the experience.
Turn waiting into part of the experience.
Instead of hiding the AI's work behind a loader, we introduced visible progress and progressively revealed insights as the analysis happened.
For example:
Instead of hiding the AI's work behind a loader, we introduced visible progress and progressively revealed insights as the analysis happened.
For example:
We created multiple variations for this waiting stage depending on how long the wait is.
If it only requires simple computation if shows the loading as stages or else we recommend the user to continue with their work as we will send it to their inbox.
This gave users two things simultaneously:
We created multiple variations for this waiting stage depending on how long the wait is.
If it only requires simple computation if shows the loading as stages or else we recommend the user to continue with their work as we will send it to their inbox.
This gave users two things simultaneously:
Confidence - I can see that the system is actually working.
Value - I'm already learning something before the report is finished.
We didn't try to expose the AI's internal reasoning. We simply made its progress and output visible.
We didn't try to expose the AI's internal reasoning. We simply made its progress and output visible.
Trade Off
Real time value → Significantly greater transparency and perceived value
THE PRODUCT
THE PRODUCT
Everything you need to build, launch, and grow
Everything you need to build, launch, and grow
Everything you need to build, launch, and grow
From building to publishing, here's how the product turns marketing ideas into interactive experiences.
From building to publishing, here's how the product turns marketing ideas into interactive experiences.
From building to publishing, here's how the product turns marketing ideas into interactive experiences.
Create a Micro App
You can choose to create a marketing app by three options.
Generate with AI, create from existing local assets like PDF or workflow files, and then import the necessary data from a blog on Google Docs.
You can choose to create a marketing app by three options.
Generate with AI, create from existing local assets like PDF or workflow files, and then import the necessary data from a blog on Google Docs.
AI-Powered Reports
Each report generated will be personalised for that specific user according to his or her requirements.
The user can get the report emailed or view it right there itself.
Each report generated will be personalised for that specific user according to his or her requirements.
The user can get the report emailed or view it right there itself.
Publishing & Sharing
We provide multiple options for sharing these apps across social media as a hyperlink, or you have it right on your website as a pop-up component or embedded right into your pages.
You can control all these options right in the distribute panel after publishing the app.
We provide multiple options for sharing these apps across social media as a hyperlink, or you have it right on your website as a pop-up component or embedded right into your pages.
You can control all these options right in the distribute panel after publishing the app.
Analytics
We also provide a simple analytics panel where you can keep track of how well the apps are doing.
We have also provided a question-by-question answer and drop-off rate in this panel.
We also provide a simple analytics panel where you can keep track of how well the apps are doing.
We have also provided a question-by-question answer and drop-off rate in this panel.
REFLECTION
REFLECTION
What I learned from this?
What I learned from this?
