Case Study: Product Design AI-Generated Product Photo App

Role:  Product Designer
Year: 2022

‍

AI App improves marketing images based on user prompt "Add violet background and herbs around the cosmetic tube."

Project Overview

This project focused on designing a beta version of an AI-powered product photo generation app aimed at eCommerce sellers. The app empowered users to create professional-quality product images through pre-designed templates and custom AI-generated prompts. The core objective was to deliver an intuitive UX/UI that reduced user frustration, validated market demand, and encouraged trial-to-paid conversion through a guided, user-centered experience.

Project Overview

As the Product Designer, I led the UX/UI design efforts from concept to beta launch. The main goal was to simplify the complex AI interaction for non-technical users and create a frictionless onboarding experience. My responsibility included designing user journeys, high-fidelity interfaces, and a scalable design system for both web and mobile platforms.

‍

Challenges & Initial Observations

Low Prompt Usability:

  • The first version of the app only allowed custom AI-generated prompts, but users struggled to write effective prompts.
  • Poorly written inputs resulted in low-quality image outputs, reducing user satisfaction and retention.

Engagement & Retention Issues:

  • Only 1% of trial users converted to the paid plan, signaling a need for better onboarding and guidance.
  • High subscription cancellation rates suggested that users were unsure of the app’s long-term value.

Paid Acquisition Efficiency:

  • Google Ads successfully drove signups, but the 4% conversion rate from ad clicks to signups was not translating into paid retention.
User Signup Onboarding
User Signup Onboarding - 7 days free trial
User Signup Onboarding - Stripe Credit Card Connect

UX UI Product design

To ensure efficient execution, I led the project using an Agile methodology, focusing on structured sprints and iterative improvements.Agile Process & Sprint Structure

  • Sprint Planning: Defined Epics (e.g., "Guided Prompt Optimization", "Template-Based UX Enhancements") and created actionable Jira tickets.
  • User Story Development: Prioritized key user journeys, ensuring that features addressed core pain points.
  • Backlog Grooming: Regularly refined backlog priorities based on user feedback and data insights.
  • Development & QA Sprints: Ensured bi-weekly releases, allowing continuous iteration.

Solution: Improving User Experience Through Structured Guidance; Adding Template-Based AI Generation:

  • Introduced pre-built templates for product categories (watches, perfumes, electronics) to eliminate guesswork for users.
  • Outcome: Enabled faster and more accurate image generation, significantly improving user success rates.

Implementing Guided Prompts for Custom Input:

  • Added a real-time guided prompt assistant, providing users with suggestions while typing.
  • Outcome: 80% of users successfully generated usable images, compared to almost none before.

Refining UI & User Flow:

  • Improved navigation and feature visibility, ensuring that advanced settings were clearly discoverable from the start.
  • Outcome: Reduced user frustration and confusion, increasing engagement time in the app.

‍

Initial Product List Page
Initial Product Image Generation Page
Upload Image to be generated

‍

User Testing & Data-Driven Iteration

Research & Testing Approach:

  • User Interviews: Conducted structured feedback sessions with early users to identify UX pain points.
  • Behavioral Analytics (PostHog): Set up event tracking for each user journey, monitoring drop-off points and feature adoption rates.
  • A/B Testing: Compared before and after engagement rates with templates vs. custom prompts.

Live Testing & Iteration:

  • Outcome: Post-launch analysis showed that the new guidance systems significantly improved initial user satisfaction, though retention beyond the free trial remained a challenge.

‍

Methods

  • User Research & Insights: Conducted in-depth user interviews and usability testing to uncover pain points, such as ineffective prompt creation and confusion during onboarding.
  • UX Design: Developed wireframes and interaction flows focused on clarity and user guidance. Designed key user journeys for onboarding, template selection, AI prompt entry, and payment flows.
  • UI Design: Created a modern, minimalistic UI aligned with SaaS best practices, ensuring accessibility and a sense of professionalism.
  • Design System Development: Built reusable components, typography scales, color palettes, and interaction patterns in Figma to maintain visual consistency across all screens.
  • Prototyping: Delivered interactive Figma prototypes for stakeholder reviews and early user testing, allowing rapid iterations.
  • Collaboration: Worked closely with developers to ensure pixel-perfect implementation and optimized handoff using advanced Figma features and developer-friendly specifications.

‍

Solutions

  • Template-Based AI Generation: Designed a library of pre-built templates for common product categories (e.g., cosmetics, watches, electronics). This reduced user dependency on writing complex AI prompts and increased success rates for image generation.
  • Guided Prompt Assistance: Designed a real-time prompt helper UI that offered live suggestions and sample inputs as users typed, drastically improving prompt effectiveness.
  • Onboarding Optimization: Redesigned the signup and onboarding flow with progress indicators and contextual help. Focused on reducing cognitive load and setting clear user expectations at each step.
  • Information Architecture: Organized complex features into a simplified IA, ensuring users could easily discover and navigate between template-based and custom AI generation options.
  • Mobile-First Approach: Ensured all designs were responsive and optimized for mobile users, as analytics showed a large portion of traffic came from mobile devices.

‍

‍

Go-To-Market Strategy & Conversion Metrics

Google Ads for Market Validation:

  • Implemented a strictly targeted keyword strategy to attract high-intent users.
  • Used detailed funnel tracking to measure conversion from ad click → signup → paid user.

Conversion Flow:

  • Users were required to connect a credit card upon signup for a 10-day free trial.
  • 4% of visitors signed up, but only 1.5% converted to a paid subscription.
  • Despite a 40% revenue recovery on ad spend, further optimizations were needed to improve long-term retention.

Metrics Tracking in PostHog:

  • Measured every step of the user flow, tracking which ad keywords led to the highest conversion rates.
  • Identified which features users engaged with the most, guiding future product improvements.

📌 Key Results

  • 4% conversion from paid ads to signups.
  • 80% success rate in generating high-quality AI product images after introducing guided prompts.
  • 1.5% conversion rate to paid plans, proving market willingness to pay, but highlighting a need for retention improvements.
  • 40% marketing budget recovered in initial revenue, validating the business concept but requiring further refinements.
Posthog metrics app conversions based on user Google Ads keywords
Posthog Google Ads onboarding conversion rates

‍

Key Learnings & Recommendations

Improve User Guidance Further:

  • While templates and guided prompts significantly improved user success rates, further onboarding enhancements were needed to ensure users understood the full capabilities of the app.

AI Model Optimization:

  • Enhancing AI prompt interpretation and image quality (potentially transitioning to Stable Diffusion) would increase user trust and subscription retention.

Refine Monetization Strategy:

  • Consider alternative pricing models such as lower-cost monthly plans or usage-based pricing to improve retention and reduce cancellations.

My Contributions

  • Led end-to-end product design, from concept validation to beta launch.
  • Defined and executed Agile sprints, managing tasks in Jira across design, engineering, and marketing teams.
  • Implemented user guidance improvements, introducing templates and real-time prompt assistance.
  • Developed a data-driven iteration process, leveraging PostHog analytics and user interviews to optimize the product experience.
  • Designed and measured a go-to-market strategy, ensuring data-backed decision-making for ad spend efficiency.
  • Successfully validated a startup concept, proving real user willingness to pay for AI-powered eCommerce product images.

Final Outcome & Next Steps

This project successfully validated market interest in AI-powered product image generation. Despite strong initial engagement, long-term retention and monetization required further refinements.Next Steps

  • Deepen AI functionality: Enhance model capabilities for higher-quality, more accurate image generation.
  • Expand onboarding support: Introduce interactive onboarding to ensure users fully understand the product.
  • Optimize pricing model: Experiment with alternative pricing structures to increase paid retention.

By leveraging user data, iterative testing, and Agile execution, this project demonstrated strong product-market potential and provided valuable insights for scaling the business.