[Case Study // 004]

ReelMuse

Shoppable video for any website. A dashboard that turns the reels a brand already posts into stories that sell on its own site.

Hero imageThe blue tablet shot already used on the ReelMuse card on your home page.
Role
Product Designer
Timeline
Month — Month 2026
Team
Solo
Skills
Product Design, Strategy, Design Systems, Prototyping
[Overview]

How do you get a brand's best video onto its own website?

Brands make short-form video that sells, then let it play only where someone else owns the audience. ReelMuse moves it to the site where the purchase happens — installed by a marketer, not an engineer.

  • Understanding where short-form video converts, and why it stops at the feed
  • Designing the full arc, from connected account to one line of code
  • Building it as a working prototype, so every decision met real use

A brand's best content never reaches its own storefront.

Brands spend real money on reels, then let them die inside someone else's feed. On their own site — the one place a purchase can happen — the shopper gets static product photography and a spec table.

Embedding the video is the obvious fix, and the hard part. A widget has to sit on a page it doesn't own, inherit nothing from it, break nothing, and install without a developer.

[Solution]

Your reels, running as shoppable stories on your own site.

Connect the accounts, group clips into highlights, point them at specific pages, copy one script tag. Four steps, and only the last one touches the website.

Screens — the dashboardTwo or three shots side by side: Dashboard, Reels table, Analytics.

With the product link sitting over the video, where the intent already is.

A story plays and the thing it sells is one tap away, on the same screen, at the moment of interest — instead of a bio link two apps away.

The install, then the numbers
[Core Flows]

Seven steps from empty account to live on the site.

001
Connect your accounts

Four short onboarding screens — company, platforms, done.

002
Create a reel — media, details, placement

The details step asks for the product link, because that becomes the button over the video.

003
Watch the preview while you type

Desktop and mobile, updating as the fields fill in.

004
Group reels into a highlight

Pick from the library you already have; the order you pick is the order they play.

005
Choose where it runs

ReelMuse crawls your site and shows it as a tree, so placement is ticking real pages.

006
Copy one line of code

The whole integration is a script tag and a config object.

007
See what it did

Impressions, clicks and CTR per reel, with traffic and conversion over time.

Walkthrough — create a reel, end to end
[Research]

Shoppable video is solved for Shopify, and unsolved for everyone else.

I audited how the established players get onto a customer's website — not what their video does, but what a brand has to do to install it.

  • Tolstoy installs as a native Shopify app
  • Videowise covers Shopify, Magento, Adobe Commerce and Salesforce
  • Both lead with no-code — but only if you're on a platform they built an app for
Image — competitive teardownScreenshots of each product's install step, side by side.

The gap is the install, not the video.

A brand on Webflow, WordPress or anything custom is outside every one of those integrations — and those are exactly the brands without an engineer to fall back on. That reframed the project: the hard problem isn't the player, it's arriving on an arbitrary page without breaking it.

[Exploring Form Factors]

Three ways to get video onto a site you don't control.

  • A platform app — deepest integration, but one build per platform
  • A hosted gallery — trivial to ship, but it moves the shopper off the page
  • A floating widget — one script tag, any stack
Diagram — the three optionsReach, install effort, and where the video appears.

Why the widget

  • Reach isn't gated by platform
  • The install stops being the drop-off
  • The story format needs no explanation

It gives up one thing: it can't put video inside a product grid the way a platform app can. A widget that works everywhere beats a template embed that works beautifully for a third of the market.

[Prototyping and Testing]

The flow only breaks once you actually use it.

I built the dashboard and a working embeddable widget, then used one to configure the other on a real page. The failures surfaced immediately, and none of them were visual.

Image — the broken versionThe earlier create screen with both Select Page fields visible.

What broke

  • The form asked for the wrong things
  • Nobody could picture the result
  • Highlights and reels had no relationship
[Design Decisions]

Four calls that changed the product.

001
Design the form backwards from the output

The create screen asked which page to use twice, meaning two different things, and never asked for a title, product link or cover — all of which the widget needs to render. Three steps mirroring what the widget consumes removed the ambiguity without adding a single field.

002
Show the result beside the form

Every field was an abstraction until you left the product to check it. A live preview sits next to the form, in both desktop and mobile arrangements — genuinely different layouts, not one scaled down.

003
A highlight is a collection, not a second uploader

Two upload paths split one library in half. Highlights now pick from the reels you already have, and the order you pick is the order they play on the site.

004
Placement should name real pages

Typing URLs asks someone to be precise about something they can't see. ReelMuse crawls the site and shows it as a tree, so placement is ticking pages that demonstrably exist.

Building a highlight, then placing it
[Designing for Platform Constraints]

You don't own the page your widget lands on.

Every other screen in this product is mine to design. The widget isn't — it renders inside a stranger's stylesheet, on a page that may already be heavy, beside elements I will never see. If it breaks that page, the brand removes it and never comes back.

How do you style something confidently on a page you can't inspect?

  • Shadow DOM, so neither stylesheet can reach the other
  • No dependencies, so it can't collide with what the site already loads
  • A configurable corner, to coexist with the chat bubble already there
Image — the widget on two different sitesThe same widget on two visually unrelated pages.

Trading polish for reach.

Working inside a shadow root means giving up automatic inheritance of a brand's typography. For something installed by copy-paste, predictable everywhere beats perfect somewhere.

[Reflection]

What I learned

A dashboard is only as good as the thing it produces.

The create flow only made sense once I designed it backwards from the widget's inputs instead of forwards from the screen. I'd now start any configuration UI by writing the config it has to produce.

The last screen is the product.

Everything in this dashboard exists to generate one script tag. Treating that snippet as the real deliverable changed how I prioritised every screen before it.

Designing for a surface you don't control is a different discipline.

Inside the dashboard I could lean on a design system for consistency. On someone else's page, consistency has to come from isolation instead — and the interesting question becomes how little you can assume rather than how much you can specify.

CLIENT PROOF
  • FZL (BILSEM)

    PRODUCT MANAGER

    WE HAVE BEEN WORKING ON DIFFERENT MODULESOF THE PROJECT, HE'S DOING GREAT JOB.

  • AHMAD

    STARTUP FOUNDER

    THE NEW ORDERING FLOW FEELS MORE FOCUSED. EACH STEP HAS A CLEAR PURPOSE, AND I ALWAYS KNOW WHAT TO DO NEXT.

  • BORDEN ANDREW

    BUISNESS OWNER

    ABDUL WAS GREAT, QUICK TURNAROUND, GREAT DESGIN AND OPEN TO OUR INPUT.

PAK

01:35

WAT
©2026
CLIENT PROOF
  • FZL (BILSEM)

    PRODUCT MANAGER

    WE HAVE BEEN WORKING ON DIFFERENT MODULESOF THE PROJECT, HE'S DOING GREAT JOB.

  • AHMAD

    STARTUP FOUNDER

    THE NEW ORDERING FLOW FEELS MORE FOCUSED. EACH STEP HAS A CLEAR PURPOSE, AND I ALWAYS KNOW WHAT TO DO NEXT.

  • BORDEN ANDREW

    BUISNESS OWNER

    ABDUL WAS GREAT, QUICK TURNAROUND, GREAT DESGIN AND OPEN TO OUR INPUT.

PAK

01:35

WAT
©2026
CLIENT PROOF
  • FZL (BILSEM)

    PRODUCT MANAGER

    WE HAVE BEEN WORKING ON DIFFERENT MODULESOF THE PROJECT, HE'S DOING GREAT JOB.

  • AHMAD

    STARTUP FOUNDER

    THE NEW ORDERING FLOW FEELS MORE FOCUSED. EACH STEP HAS A CLEAR PURPOSE, AND I ALWAYS KNOW WHAT TO DO NEXT.

  • BORDEN ANDREW

    BUISNESS OWNER

    ABDUL WAS GREAT, QUICK TURNAROUND, GREAT DESGIN AND OPEN TO OUR INPUT.

PAK

01:35

WAT
©2026

Create a free website with Framer, the website builder loved by startups, designers and agencies.