Xiaorui Li

AI made the options. I made the product decisions.

As founding designer at Reverie AI, I took PopVid from concept through launch and iteration: image and video creation, live character interaction, and a shared experience across web and native apps. I used AI to explore and build, while owning the requirements, final design, measurement and user feedback.

Role
Founding Designer, Reverie AI
Period
2025–2026
Scope
Concept, launch, iteration
Surfaces
Website, web app, native app
2.5M
Peak monthly active users, web
Google Analytics active users, deduplicated across one calendar month. Web only; native apps are not included.
14+ min
Peak monthly engagement per active user
Google Analytics average engagement time per active user over one calendar month. This is not session length.

Historical product-level peaks, measured in different months. They reflect the team’s product, rather than the effect of an individual design change.

Product UI rendered from main · e1e1a0f with fixture data. These captures use actual components; they have not been matched to the live deployment. Prices, people and call content are test values.

Public PopVid page showing live character interaction and character creation
PopVid’s public product page: live character interaction and creation. The screens below are rendered from the actual product components with fixture data.
01

Why AI is in my process

I use AI for quick wireframe and visual-effect inspiration. Comparing several directions early helps me ask better questions about hierarchy, interaction and feasibility. I define the requirement and choose the design; AI takes the lead on implementation details.

The tradeoff is breadth versus coherence. A convincing mockup still needs to fit the product. I review the build against the chosen design, then use tracking and support feedback to decide what needs another iteration. The product screens in this case come from the application’s source code, rather than AI-generated proposals.

02

AI proposes. I decide.

I keep responsibility visible across exploration, implementation and the feedback that shapes the next iteration.

I decide

  • Product direction and requirements
  • The final design
  • What we track
  • How to read user behaviour
  • What changes after support conversations

AI proposes and builds

  • Wireframe and visual-effect alternatives
  • Implementation details in selected React interfaces, shipped through my pull requests

Real users inform

  • Behaviour data from the tracking I set up
  • Support conversations I handle directly
  1. Requirement
  2. Chosen design
  3. AI-assisted build
  4. Tracking and support
  5. Next revision
My working loop, from a product requirement to the next revision.
03

A plan, an add-on, and a clear distinction

Premium Pass was already the main plan. I renamed the extra video-call purchase Video Call Add-on, drawing on the familiar model of adding minutes to an existing mobile plan. The goal was to make its relationship to Premium Pass easier to understand.

The implemented Buy Credits page gives the add-on its own section and explicitly says it is sold separately from Premium Pass. The add-on uses purple; lime marks Pass benefits and badges. This is the hierarchy in the product code, including the separate credit packages below.

Buy Credits page from product source: Premium Pass benefits, a separate purple Video Call Add-on and credit packages
Implemented purchase hierarchy. Source-rendered UI with fixture prices and balances. Amounts shown are not current offers.
04

Keep the conversation continuous

A low-credit state should explain what happens next. In the implemented call, insufficient credits disable auto-extend and trigger a status message. The add-on is offered before connecting and again when the call ends.

There is also an in-call Premium Pass upsell when someone without a Pass tries custom quick actions. The upgrade is available at the moment a paid feature becomes relevant, with a tradeoff between access and continuity of the conversation.

The checkout route matters. An in-page PayPal modal can leave the call connected; a new-tab checkout can too, unless it falls back to a redirect. Same-tab payment redirects end the call. This is a constraint to review and track, rather than a solved outcome to claim.

Real pre-call plan picker with auto-extend and a separate video-call add-on
Before the call · plan and add-on
Live-call low-credit toast disabling auto-extend over a labelled fixture stream
During the call · low-credit status
Call-ended screen with add-on offer and feedback controls
After the call · add-on and feedback
Three moments in the call. The original call client is driven by fixture session states; the video is a labelled placeholder, with no real call or audio.
Premium Pass upsell for custom quick actions with Get Pass buttons and no credit-pack option
An exception · in-call Pass upgrade
The paid-feature exception. The actual upsell component uses the in-call configuration. Whether checkout interrupts the call depends on the payment route; payment was not executed in this render.
05

Make identity and voice settings explicit

People choose who they are in a roleplay scene. The persona manager and co-film sheet use the same persona data, with a visible selected/default state and a creation form that asks for a name, photo and description.

The implementation includes missing-photo, uploading and filled photo tiles; a rejected upload is reported through a toast. Clear selection, upload and recovery states help the shared pattern stay understandable. In live calls, the code resolves a persona name; reuse of the persona photo was not confirmed in the inspected paths.

Character creation separates a preset voice from an optional custom voice. The upload sheet gives concrete recording guidance, and the saved state makes the custom voice visible. The UI describes its scope as Soul chat and video calls; the video-call connection path was traced, while the Soul chat backend path remains unverified.

Persona manager with synthetic personas and a selected default persona
Choose · selected and default
Create Persona form with missing photo, name and description fields
Create · explicit photo requirements
Co-film sheet using the same synthetic persona data
Reuse · shared roleplay identity
The implemented persona system. All names, descriptions and abstract persona images are fixtures.
Original character creation step with preset voice and optional custom voice fields
Voice in character creation. The original form, rendered with a synthetic character and preset voice.
Custom voice upload sheet with recording tips, upload area and save button
Upload · recording guidance
Character creation form with a saved synthetic custom voice
Saved · visible custom voice
Upload and saved states. The upload sheet was opened through the real control. The saved voice is fixture data; no audio was uploaded or played.
06

What changed, and what I measured

The product now names the extra minutes as an add-on, separates them from the main Pass, exposes low-credit status during calls, and shares persona data across roleplay and co-film. These are concrete states visible in the inspected code. The screenshots alone do not establish the date or impact of each change.

After launch, I defined tracking, followed user behavior and handled customer support directly. Analytics helped me locate friction; support conversations added context. I used both to shape the next requirement.

The 2.5M web MAU and 14+ minutes of monthly engagement above describe historical product-level peaks. A before-and-after result for an individual revision has not been established. For checkout, the next useful comparison is completion and call interruption by payment route; for identity and voice, it is setup completion and recovery from upload errors.

07

Reflection

My contribution connected product direction, design and the work after launch. AI helped me explore and implement; I remained responsible for choosing a coherent experience and learning from how people used it. Across naming, purchase hierarchy and identity, the most useful decisions made the product easier to understand as it evolved.