Abdul Ghafar

abdul

REELMUSE DASHBOARD (SAAS PLATFORM) CASE STUDY

SHOPPABLE VIDEO FOR ANY WEBSITE. A DASHBOARD THAT TURNS THE REELS A BRAND ALREADY POSTS INTO STORIES THAT SELL ON ITS OWN SITE.

role

product desinger

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.

[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- Highlights and widget settings

customization of widget that will be displayed on your website

004- analytics

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

005- widget(copy code)

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

006- website pages

crawl to find out pages that your website has

007- account Settings

account controls, the platforms attahced.

[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

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 THE 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

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 & TESTING]

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

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.

What broke

—The form asked for the wrong things

—Nobody could picture the result

—Highlights and reels had no relationship

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.

[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.

[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.