top of page

Imagica: A no-code web
app development tool

INTRODUCTION
In early 2024, we shipped a brand new experience for Imagica on both desktop and mobile web, now used by over 3000 people every day. This revamp included the creation, publication, and mobile responsive experiences, leveraging AI with user-centric design decisions.
MY ROLE
Solo product designer: research, user journey, responsive design, usability testing, video prototype 
THE TEAM
1 Product Manager, 1 Data Scientist, 10+ Front-end Engineers, 3 Back-end Engineers
TIMELINE
Dec 2023 - March 2024
Frame 2117130511.png
Old Imagica project creation flow
WHAT WAS THE PROBLEM
When I joined Imagica, it had fewer than 30 active users and only 8 paying customers, despite significant investment. The product’s engineering-heavy design hindered user adoption. Recognizing the need for a complete redesign, we aimed to make Imagica profitable within three months.
Imagica Funcationalities.png
Previously, Imagica had many powerful features, but users didn’t know how to use them.
The ultimate goal is to make the user experience on Imagica smooth and intuitive. Collaborating with the XFN team, we defined the new product scope and long-term goals, then broke these goals into smaller, achievable tasks. In this case study, I showcase how we addressed key issues in creation, publishing, and mobile responsive design.
Easy and intuitive web app creation experience 
WHAT WAS THE PROBLEM
The old creation process required users to build their application architecture using nodes and edges, which was complex and hard to learn. How might we make creation easier and faster, so users find it intuitive without spending much effort learning the platform?
RESEARCH
The common feedback from users was “SO CONFUSED.” Despite our efforts to simplify the coding process with text input, users struggled after testing project templates and couldn’t build applications independently.
Product review on Medium
Understand how, what, why people use Imagica
🧑🏽‍💼 No-code tools are appealing and cost-effective for solopreneurs launching their businesses.
⏱️ Once users learn to use the platform, they find the AI-powered functionalities very useful.
💡 Short development times on Imagica allow users to quickly test and iterate on their ideas.
TARGET USERS
Initially targeting solopreneurs, we had trouble retaining users aged 18-40. We shifted our focus to tech-savvy individuals in this age group with limited coding skills. We decided to use a chat-based interface to make the product easier and more engaging, capitalizing on their familiarity with AI assistants.
USER JOURNEY 
User journey was a key factor in our product decision. We aimed to amplify AI’s power to help users easily complete tasks. Users follow three steps to create a web application: ideate, build, and publish. With most users having no prior experience, our AI chat assistant simplifies the process through text interactions. We automated the ideate and build steps, enabling users to quickly generate and iterate on their apps using our AI and generative interface system.
Ideate
The AI helps users build a clear architecture, introduces powerful functionalities, and defines necessary features for their app from their creative ideas.
Build
Our generative interface system can quickly build the app for users based on their conversations with the AI.
Publish
Through a published link and QR code, users can experience their creation in real life on both mobile and desktop web.
SOLUTION
A new Chat with AI feature for users to create their application with one sentence. 
📌 Accessible AI chat allows users to discuss and refine any ideas they have.
📌 A creation progress bar clearly guides users through building their app with straightforward steps.
📌 Intuitive actionable buttons allow users to quickly build their ideas when ready.
New AI Chat feature
New Imagica project creation page
VALIDATING THE SOLUTION
Once the chat feature was ready, we asked our existing users to test it. We were thrilled to find that all users were able to intuitively start and create their applications, understand the new features, and experience minimal issues.
Some Verbatim feedback
Clear, focused publishing flow that delivers only what the user needs
WHAT WAS THE PROBLEM
Previously, Imagica aimed to showcase all publishing formats together, but this overwhelmed users. Multiple options confused them and made the publishing flow confusing. How might we simplify the publishing flow so users to easily understand and complete their tasks in a straightforward way?
USER FEEDBACK
The most critical customer reports highlighted that our users do not understand how to publish their applications. This issue prompted us to redesign the publishing flow to address and resolve these problems.
Old publishing options
Group 2117129423.png
Customer reports in our Slack feedback channel
UNDERSTAND THE PROBLEM
Cluttered information on screen made users feel lost and unable to focus on their tasks. 
Same actionable items appeared twice, causing confusion.
Old imagica publishing options
Redefine Design Princple
Users faced major issues with the old Imagica experience due to an overwhelming number of options and a lack of task-focused design. I redefined the design principles to be simple, task-focused, and intuitive, ensuring the redesign follows clear guidelines for a smoother user experience.
Simple
Condense information and steps to complete user tasks.
Task-focused
Focus on key user tasks with no distractions.
Intuitive
Familiar and easy for users to use without needing to learn 
DESIGN DECISIONS 
Based on product data, we decided to focus solely on the web application publishing format. We eliminated the option to store multiple sites in one project to simplify the publishing flow, allowing users to focus on one task at a time.
SOLUTION
Effortless and intuitive publishing experience
📌 Clear and actionable publish button
📌 Immediate feedback on project status after user actions
📌 Flexible ways to view their creation through a URL on desktop or a QR code on mobile.
📌 For users familiar with the old Imagica publishing format, we notify them of the changes and assist in storing their past creations.
VALIDATING THE SOLUTION
After launching the new publishing design, we saw a significant increase in user publishing rates and no new bug reports related to application publishing.
Seamless mobile experience
WHAT WAS THE PROBLEM
As we refined our target users to tech-savvy individuals aged 18 to 40 with creative ideas they want to quickly realize, we found that accessing our product on mobile devices was crucial for their user journey. To ensure flexibility, we redesigned our mobile experience.
PROCESS
I paid particular attention to the differences between mobile and desktop experiences. While maintaining consistency with the desktop version, I established guidelines to optimize the mobile experience for its unique interactions and screen sizes.
Consistent
Consistent with the desktop experience, with no new learning required.
Prioritization
Prioritize essential content for users’ fragmented attention on mobile devices.
Easy to complete
Tasks should be simple, easy to complete, and seamless to resume at any time.
SOLUTION
Consistent application building experience by chatting with AI
📌 Consistent user flow starting with AI chat
📌 Suggestions for users without specific projects to build
Prioritized key interactions, allowing users to focus on one task at a time
📌 Easily preview their application after confirming their idea through chat.
📌 Ensure the screen focuses on one main task at a time, with other key screens accessible via page navigation.
Edit app easily on one screen
📌 After long-pressing a section, users can quickly edit it by chatting with the AI while staying on the app preview screen.
We did even more... 
Within the new product scope, we included a complete revamp of the entire platform.
Simplified Project Flow
Clear Top Menu Bar
Easy APP Management
Prioritized flow with an AI chat agent for users to simplify the web application creation process.
Redesigned the top menu bar with clear architecture to highlight the most frequently used actions.
Revamped the project management system for users to easily manage and update specific applications.

By closely collaborating with the data scientist, we tracked performance metrics on Amplitude and achieved

Daily new user sign up

Total paying users 

bottom of page