Background
In 2019, live shopping exploded. Inspired by influencer-led shopping streams in China, brands across Europe rushed into live video sales.
Our customers – banks, corporations and municipalities – weren’t fashion brands. And, according to our research, Swedish buyers don’t buy on impulse; they research and compare first. So instead of live shopping, we bet on on-demand interactive video: informational content viewers explore at their own pace. Product guides, courses, tours, and anything in between.
The guiding principle: Familiar
Our users had never made interactive video. But they had edited videos, retouched images, built PowerPoints and created websites using tools like Wordpress, Squarespace and Elementor. So instead of inventing a new interface for a new medium, I built Interact from the patterns they already knew.
| Pattern they recognized | Where it lives in Interact |
|---|---|
| Video Editing | The timeline, where every widget is a layer |
| Powerpoint / Flowcharts | The node view: scenes as boxes, connections as lines |
| Website builders | Drag-and-drop canvas and desktop/mobile preview |
| Image editors | In-video frame editing, layers and a settings panel for color, borders and opacity |
“You don’t know what you’re doing, let the professionals take over.”
— Christiane Kirkegaard Borup, Danish Agency for IT & Learning, on the platforms they used before Qbrick and Interact
Design decisions
Making interactive videos easy to build
Interactive video had always been something you hired an agency for. For Interact to work, a communicator or marketer had to be able to build one on their own – without a manual and without thinking about what goes on under the hood. To help with that, users need to be able to work with what they see.
Example
A drag-and-drop widget library
Text, images, shapes, icons and buttons sit in a library next to the video. Drag one onto the video, and it’s there and ready to be adjusted from its default settings.
Widget cards that can be dragged into the video preview window.
Wireframe: Widget library in scene editor
An interactive video can’t exist in a linear space
A regular video runs from start to finish. An interactive video branches: one scene leads to three, each of those to three more. A timeline or a list can’t show that – and the shape of the story is exactly what creators need to see.
Example
The node view
Every scene is a box, and every choice is a line to the next scene. The pattern is borrowed from tools our users already knew: slides in PowerPoint, boards in FigJam, and the user flows and task flows designers draw to map a journey. Creators see their whole story at a glance and can plan it the way they’d sketch it on a whiteboard.
Every scene is represented by a box that can be connected to other boxes. This can be done visually with lines or manually in the settings menu.
Wireframe: Node view
Interactivity brings UX thinking into the editor
The moment something in a video can be clicked, it stops being just graphics and becomes interface. Creators suddenly need to decide what a button does, and how it tells the viewer it can be clicked – questions that belong in web design, not video editing.
Example
Default and hover states
Widgets have separate styling for their default and hover state, so a button can change colour when the viewer points at it – a basic signal that something is clickable. The pattern is borrowed from website builders like Elementor and Squarespace, where marketers were already used to them.
Different styling options for “Default” and “Hover”, just like states in a component kit.
Wireframe: Default and hover states in scene editor
An interactive video must work wherever it’s placed
Interactive videos live embedded on customers’ websites, viewed on every kind of screen. If the interactivity breaks in one of those places, the whole video breaks with it.
Example
A fullscreen that keeps the interactivity
On mobile, pressing fullscreen swapped our player for the browser’s own – and every interactive element disappeared. We built a custom lightbox that keeps fullscreen inside our player, so buttons and choices stay in place on every device.
Custom lightbox fullscreen — interactive elements stay in place on every device.
What we left out
We wanted separate layouts for desktop and mobile, so buttons could be larger and stacked vertically on small screens. It was too big of a project for a first version. Instead, we added a desktop/mobile switch – familiar from website builders – so creators could check both views while building and plan their layout accordingly.
Finished product
In 2023, we released the full first version of Interact. Our customers now had access to a full editing platform where they could create interactive video courses, product demos, guided tours for desktop and mobile; embeddable anywhere.
Impact
+44% sign-ups for Digidage
A national conference for Danish educators, after moving to an interactive event they designed and built themselves in Interact. The organiser named an easy-to-navigate platform as one of the key factors.
Hundreds of interactive videos built
Across several industries, including e-learning, retail, real estate, banking, beauty and events. Some of our clients include: Workz, Digidage, Pieces, GE HealthCare, Jensen YH, Kekäle, VILA.
Still in active development
Interact is still in use and in active development. The latest release included widget animations.
What I learned
Measuring value should be designed in from the start. We focused on making interactive video easy to build, but never defined how we’d measure if it worked. Designs for analytics for interactive video – which choices viewers made, what they clicked, where they dropped off – came much later. Until that is in place, neither we nor our customers can see the value the interactivity creates. Today, success metrics is one of the first arguments I bring up before any designs are planned.