Defining the AI App-Building Experience
The early design phase focused on defining the dashboard architecture, ensuring users could seamlessly move from prompting AI to previewing and customizing their app.
Left Panel
Create
Center Panel
Preview
Right Panel
Refine
Prompt box
App Properties
Page 1
You
You
AI-agent
AI-agent
Real-time app preview
Code <>
Design
EDIT
Preview
Save
Property 1
Property 2
Property 3
High Fidelity Designs
Refining interactions, layouts, and visuals into a cohesive experience
Final Experience
Combined prompt-based generation with visual editing, allowing users to quickly generate apps while retaining full control over refinements
Initial Ideations
The early design phase focused on defining the dashboard architecture, ensuring users could seamlessly move from prompting AI to previewing and customizing their app.
Layout Exploration
First Concepts for Prompt-to-App Creation Workflow
Sectioning the dashboard -
what does each panel do?
Early ideas on how to make the on-boarding gradual and intuitive
Ideating how the chat interaction would look like
Example of building a weather app to understand the creation flow
Before designing the experience, a few key questions needed to be answered.
?
?
?
🎯
What should AI generate?
AI created the app structure, screens, content, and flows so users could start with an idea instead of a blank canvas.
🎛️
How much control should users retain?
Users could review, edit, and customize everything AI generated.
⚖️
Prompt vs Visual Editing
Prompts enabled fast creation, while visual editing provided greater control. The experience supported both.
🪭
Reducing Overwhelm
The process was broken into simple, guided steps to make app creation easier.
🎉
Making App Creation Feel Achievable
Quick wins, live previews, and clear progress helped users build with confidence.
The challenge was designing a workflow that felt automated without making users feel they had lost control.
🧐
Refining the experience
Refining Tile through thoughtful interaction patterns, system feedback, and supporting interface states that users encounter throughout their workflow.
🧩
Breakdown of the Primary Navigations
Each section serves a function that supports users in their app-building process
Design
Integrations
Profile
Analytics
Notifications
Build/Publish
Agent Chat Interaction
Report Issue/Help
Tile Discord
Entry point for the user
(via website)
Preview Mode -
(Entire focus on the app UI)
Chatting Experience (Collapsible)
The right-panel is AI-generated
Needed to guide the Agent on a visual structure
Website
Capture Form
Capturing User Data for customers who might want an Enterprise Plan
Part II
Building the ecosystem around the product
Beyond the core product, I designed the touchpoints that helped users discover, understand, and adopt Tile
Hi! I’m Esti
AI App Cost Estimator
Question Flow Screen
Guided users through a structured conversation to understand requirements, features, and project scope before generating an estimate.
Your Estimate
$6490
Cost Break-up
-
MoEngage Integration
$1240
Live-Selling Charges
$1299
Custom Development Cost
$2000
Push Notification Charges
$1560
This is an estimate. Final pricing may vary based on specific requirements.
App type
Social/Community
Core Features
Social Login, Live Selling, AI Videos, and 4 more
Description
Make an app that intelligently organizes my work calls, meetings, and follow-ups....
Book a Demo
Send me my Estimate
Calculate Again
Estimate App Cost Breakdown
Converted user requirements into a transparent cost breakdown, helping users evaluate feasibility and confidently book a demo.
Final Estimate Screen
App Stories
What are App Stories?
App Stories showcased real apps built on Tile, helping users discover possibilities, build trust, and understand the platform's impact through customer success stories.
All App Stories
Browse real apps built on Tile for inspiration and validation.
Agencies - Listing and Detail
What are Agencies?
To support users who needed hands-on help, Tile introduced a partner ecosystem where certified agencies could showcase their expertise, attract leads, and build apps for customers using the platform.
Agency Listing Page
Browse and connect with certified Tile Experts for app development support.
Agency Detail Page (Solo/Team)
Evaluate agency expertise, past work, and credibility before hiring.
Selection Progress Panel
Social Media + Promotional Content
Created promotional assets and social content to build awareness, communicate product value, and support Tile's launch
Instagram/X
App Story
Dive into a customer story, their app, and the results achieved.
Prompt used to make the app
(remix / reuse it)
Designing an
AI-Powered Mobile App Builder from 0→1
Role
Sole Product Designer
Timeline
8-9 Months
Team
Founders, Product Managers, Engineers
Outcome
40,000+ users onboarded, 90% onboarding completion, 100+ enterprise leads generated
Live Now
visit tile.dev
Product Hunt
#4 Product of the Day
4
Why Tile?
Building and launching mobile apps remained slow, expensive, and inaccessible for many.
Tile was born from a simple question:
“Could AI make app creation as easy as writing a prompt?”
That became the foundation for Tile.
My Role
As the sole designer on the project, I led:
Product Ideation
Platform UX
AI-Interaction Patterns
Visual Design
Design System Creation
Website & onboarding experiences
Supporting ecosystem pages
Collaborators
Founders & PMs
Engineers
Marketing Team
The challenge wasn’t just generating apps with AI,
it was making users trust and understand the generation process.
Designing the Core Product
Three-Pane Workspace
The workspace was divided into three focused areas to mirror the app-building journey:
Create - Use AI to describe, generate, and iterate on the app
Preview - View changes in real time and understand the output instantly.
Refine- Fine-tune styles, content, and behavior without code.
90%
Onboarding Completion Rate.
Helping users quickly reach value.
3 hours
The least amount of time in which an app was made ready-to-publish
40k +
Users Onboarded through Tile's launch and growth phase.
15+
Certified Agency Partners onboarded to expand implementation
30%
Increase in user signup-to-activation conversion through the Estimator Agent - by reducing uncertainty around project scope and pricing
45%
Website-to-signup conversion rate through optimized onboarding and acquisition experiences.
The next phase of Tile (V2), will be focused on creating a developer mode within the platform that allows devs to make code-level modular changes, add custom features and more.
(The beta version can still be accessed for current users but might be taken down until the final version is ready)
This was a project done in great detail and countless iterations,
This project showcases ~40% of the entire work.
Please connect with me if you’re interested in knowing the entire
thought process behind this project :)
Designing an
AI-Powered Mobile App Builder from 0→1
Role
Sole Product Designer
Team
Founders, PMs, Engineers
Outcome
40,000+ users onboarded, 90% onboarding completion, 100+ enterprise leads generated
Product Hunt
#4 Product of the Day
4
Live Now
visit tile.dev
Why Tile?
Building and launching mobile apps remained slow, expensive, and inaccessible for many.
Tile was born from a simple question:
“Could AI make app creation as easy as writing a prompt?”
Before designing the experience,
a few key questions needed to be answered.
🎯
What should AI generate?
AI created the app structure, screens, content, and flows so users could start with an idea instead of a blank canvas.
🎛️
How much control should users retain?
Users could review, edit, and customize everything AI generated.
⚖️
Prompt vs Visual Editing
Prompts enabled fast creation, while visual editing provided greater control. The experience supported both.
🪭
Reducing Overwhelm
The process was broken into simple, guided steps to make app creation easier.
🎉
Making App Creation Feel Achievable
Quick wins, live previews, and clear progress helped users build with confidence.
Part I
Designing the Core Product
The challenge wasn’t just generating apps with AI,
it was making users trust and understand the generation process.
Three-pane Workspace
Prompt box
App Properties
Page 1
You
You
AI-agent
AI-agent
Real-time app preview
Code <>
Design
EDIT
Preview
Save
Property 1
Property 2
Property 3
Left Panel
Center Panel
Right Panel
Create
Preview
Refine
The workspace was divided into three focused areas to mirror the app-building journey:
Create - Use AI to describe, generate, and iterate on the app
Preview - View changes in real time and understand the output instantly.
Refine- Fine-tune styles, content, and behavior without code.
Core Design Focus
AI Builder
Tile -
AI-Powered App Builder
Better Accessibility
Play Store
App Store
Build
Publish
Visual Editing
AI Generation
Prompt
Create
Creators
Agencies
Businesses
Founders
Users
More Published Apps
Faster App Creation
Success
Agency Partners
Enterprise
Showcase Apps
Inspiration Gallery
Growth
Analytics
Notifications
Integrations
Design System
Platform
Initial Ideations
The early design phase focused on defining the dashboard architecture, ensuring users could seamlessly move from prompting AI to previewing and customizing their app.
Layout Exploration
First Concepts for Prompt-to-App Creation Workflow
Sectioning the dashboard -
what does each panel do?
Early ideas on how to make the on-boarding gradual and intuitive
Example of building a weather app to understand the creation flow
High Fidelity Designs
Refining interactions, layouts, and visuals into a cohesive experience
Entry point for the user
(via website)
Chatting Experience (Collapsible)
Preview Mode -
(Entire focus on the app UI)
The right-panel is AI-generated
Needed to guide the Agent on a visual structure
🧐
The challenge was designing a workflow that felt automated without making users feel they had lost control.
Final Experience
The challenge was designing a workflow that felt automated without making users feel they had lost control.
Integrations
Profile
Analytics
Notifications
Build/Publish
Agent Chat Interaction
Report Issue/Help
Tile Discord
Breakdown of the Primary Navigations
Part II
Building the ecosystem around the product
Beyond the core product, I designed the touchpoints that helped users discover, understand, and adopt Tile.
Website
The website not only serves as an entry point for new customers but also a release and updates source for existing customers
Capturing User Data for customers who want to upgrade to an Enterprise Plan
Cost Estimator Agent - Calculates estimate app creation cost
Your Estimate
$6490
Cost Break-up
-
MoEngage Integration
$1240
Live-Selling Charges
$1299
Custom Development Cost
$2000
Push Notification Charges
$1560
This is an estimate. Final pricing may vary based on specific requirements.
App type
Social/Community
Core Features
Social Login, Live Selling, AI Videos, and 4 more
Description
Make an app that intelligently organizes my work calls, meetings, and follow-ups....
Book a Demo
Send me my Estimate
Calculate Again
Agencies - A listing of verified Tile experts that can be hired to work with and create extensive apps on the Tile platform
App Stories - successful customer stories of apps built on the Tile platform for users to get inspired or remix the app (if available)
App Stories - successful customer stories of apps built on the Tile platform for users to get inspired or remix the app (if available)
1
Featured
st
Product Hunt
#4 Product of the Day
4
x
Product Hunt
#4 Product of the Day
4
x
Agency Partnership
We have a new partner
🎉
tile.ai
4
👑
We are
Product Hunt
#4 Product of the Day
4
Product Hunt
#4 Product of the Day
4
x
Featured
3
Featured
rd
Product Hunt
#4 Product of the Day
4
Product Hunt
#4 Product of the Day
4
The Impact ⚡️
40k +
Users Onboarded through Tile's launch and growth phase.
90%
Onboarding Completion Rate.
Helping users quickly reach value.
3 hours
The least amount of time in which an app was made ready-to-publish
15+
Certified Agency Partners onboarded to expand implementation
30%
Increase in user signup-to-activation conversion through the Estimator Agent - by reducing uncertainty around project scope and pricing
45%
Website-to-signup conversion rate through optimized onboarding and acquisition experiences.
Next steps :
The next phase of Tile (V2), will be focused on creating a developer mode within the platform that allows devs to make code-level modular changes, add custom features and more. The beta version can still be accessed for current users but might be taken down until the final version is ready
Thank you for your time
🤝🏻
Estimate App Cost Breakdown