Back to Home

Growth Design: Designing Onlook's Onboarding Flow & Growth Enabling Features

Company

Onlook (YC W25)

Role

Lead Product Designer & Design Engineer

Timeline

2 weeks

Skills

UX Research, Competitor Research, Prototyping

Tools

Onlook, Figma

Overview

Led end-to-end research, design, and prototyping of multiple features and enhancements to increase new-user retention at Onlook—driving improvements through a revamped onboarding flow, a streamlined publishing experience, and collaborative sharing features.

Onlook is building an open-source, visual editor for code that merges design, development, and AI.

Challenge

Increase new user retention, conversion to paid subscribers, and grow active user base for Onlook, an AI design tool startup competing in a crowded market with tools like Lovable and V0.

In-session analytics revealed critical drop-off points where users abandoned their sessions before completing key actions in Onlook's product, indicating missed opportunities to demonstrate Onlook's unique value over competitors, and failing to convert users to paid subscribers.

Approach

Problem Discovery

Conducted comprehensive current state discovery and user behavior analysis using PostHog data and surveys through Onlook's Discord channel to identify conversion barriers and understand retention insights.

Current State First-Time User Experience

Onboarding Audit - Video of Submitting a Prompt & Initial Site Generation

Green = low friction/users navigate smoothly, Yellow = slight friction/users navigate less smoothly, Red = high friction/users drop off.

Early Session Drop-off Insights:
  • Users abandon sessions before initial site generation is completed due to lack of loading state feedback.
  • Limited awareness of Onlook's core features—code panel, design panel, brand styles, and infinite canvas—reducing engagement with differentiated product offerings and increasing churn risk as new users fail to realize product value.
Retention Insights:
  • Users who publish sites show higher retention rates
  • Users who publish AND add custom domains convert to paid plans at highest rates
  • Most publishing users fail to enter the add-custom-domain-flow, missing conversion opportunity

Research & Ideation

User Research:

  • Analyzed PostHog session recordings of new user behaviors: Which key features do new users struggle with and/or are unaware of?
  • Surveyed users on feature discovery preferences: Which features do experienced users value the most?
  • Collaborated Onlook's founders to identify key features for onboarding priority: From a product growth and retention perspective, which features should new users be made aware of?

Findings:

  • New users have low engagement with the code panel—a valuable and differentiated, yet new feature to many "vibe-coders"
  • New users shared that the "Brand Styles" feature in the design panel, while not difficult to use, is valuable to discover early in project development
  • Onlook's founders confirmed the importance of "Site Publishing" and "Custom Domain Hosting" features for new Onlook users – data shows users who publish their site early remain paying customers for longer.

Solution Development:

  • Onboarding Flow: An Interactive product tour during initial site generation downtime using spotlight modals and existing UI to overview key product features
  • Publishing Optimization: Streamlined publish workflow with preview functionality and reduced cognitive load
  • Custom Domain Flow: Simplified the custom domain flow "entry-point" through clean UI intentional timing of the flow's introduction to the user
  • Collaboration Features: Added sharing feature in the "Publish" modal to encourage a network effect and address a key user problem

Design & Implementation Strategy

Onboarding Experience:

  • Leveraged site generation wait time for feature overview and education
  • Focused on high-value features: AI Chat, Design Panel (Brand Styles), Code Window, Design-Preview Toggle, Publish
  • Implemented rapid visual movement to maintain engagement
  • Concluded with Publish action to capitalize on recency bias

Publish, Share, & Custom Domain Features:

  • Added attention-grabbing vertical carousel to the publish/share button
  • Integrated sharing tab within publish modal
  • Enhanced the Publish/Share modal loading states and preview functionality
  • Sequenced Custom Domain addition call-to-action to come after the site is published
  • Created streamlined domain verification with helpful guidance

Implementation Work Flow:

  • Designed in Figma detailed and new UI components and to review past design considerations for the original Publish modal
  • Designed a clone of Onlook's current product using Onlook
  • Prototyped solutions (Onboarding Experience & Publish, Share, & Custom Domain Features) using Onlook
  • Created a GitHub issue for an open source contributor to implement the prototyped solution

Results

Project Status: Production Implementation underway with expected completion Fall 2025

Expected Outcomes:

  • Increased new user retention through improved feature awareness and enhanced publish flow
  • Increases in revenue due to higher conversion to paid subscriptions via optimized add custom domain flow
  • Improved collaboration and user growth through frictionless sharing capabilities

Key Success Metrics Defined:

  • User retention rate improvements
  • Conversion rate from free to paid plans
  • Publish completion rates
  • Custom domain addition rates
  • User session duration and feature adoption
  • Monthly Active Users (MAU)

*Note: Quantitative impact assessment pending sufficient data collection period post-implementation.*

Back to Home