Kaisa BergWorkInteract
Resume
01 · Interact

Interact, making interactive video feel familiar.

A self-serve editor for building interactive video, designed for people who have never built one before.

02 · Cover
The Interact editor in use
03 · Project info
RoleProduct strategy, competitive research, UX design
Team1 PM, 3 developers, 1 UX designer (me)
Timeline2020 to 2023, beta in 2021
OutputAn interactive video editor and a lightbox fullscreen mode for the player
04 · The question

What if building an interactive video felt as familiar as tools people already use?

After the live-shopping boom of 2019, interactive video was everywhere. But our customers were banks, corporations and municipalities, not fashion brands. Our research showed that Swedish buyers like to research before they buy, so we bet on on-demand interactive video instead: product guides, courses and tours that people can explore at their own pace.

05 · Comment
Christiane Kirkegaard BorupDanish Agency for IT & Learning
"You don't know what you're doing, let the professionals take over."
On how the platforms she used before Qbrick and Interact made her feel.
06 · The guiding principle

Familiar.

Our users had never built an interactive video, but they had used plenty of other tools. Instead of inventing new patterns, Interact borrows the ones they already knew.

Video editorsImage editorsPowerPointWordPressSquarespaceElementor
From video editorsA timeline where every widget is a layer
From website buildersA drag-and-drop canvas with desktop and mobile preview
From image editorsSettings panels that work the way they expect
07 · Decision 01
Decision 01

Easy building

A drag-and-drop widget library lets anyone add buttons, text and images to a scene and adjust them, without opening a manual first.

Wireframe: widget cards that can be dragged into the video preview window
Wireframe: widget cards that can be dragged into the video preview window.
08 · Decision 02
Decision 02

Branching structure

A timeline cannot show a story that branches. A node view can: every scene is a box, and every choice is a line to the next scene.

Wireframe: each scene is a box that connects to others, with lines on the canvas or in the settings menu
Wireframe: each scene is a box that connects to others, with lines on the canvas or in the settings menu.
09 · Decision 03
Decision 03

Interactivity as UI

Viewers need to see that a button can be clicked. Borrowing from website builders, every widget has its own default and hover states.

Wireframe: separate styling for Default and Hover, like states in a component kit
Wireframe: separate styling for Default and Hover, like states in a component kit.
10 · Decision 04
Decision 04

Works everywhere

On mobile, native fullscreen dropped all the interactive elements. We built a custom lightbox fullscreen that keeps them in place on every device.

Custom lightbox fullscreen, with interactive elements staying in place on every device
Custom lightbox fullscreen, with interactive elements staying in place on every device.
11 · Hidden layer

What we left out

Separate layouts for desktop and mobile were cut from the first version to get the editor into users' hands sooner. In their place we added a preview switch, so users can check how their video looks on both before they publish.

12 · The finished product

The first full version launched in 2023.

Desktop · Web
Starting a new project
Starting a new project.
The scene editor with a button widget selected
The scene editor with a button widget selected.
13 · Impact
+44%more sign-ups for Digidage, a Danish educators' conference that built its interactive event in Interact.
100sof interactive videos built across e-learning, retail, real estate, banking, beauty and events.
Liveand still in active development. The latest release added widget animations.
14 · What I learned

Design the success metrics in from the start.

Analytics for viewer choices and drop-off came late in the project. Until they arrived, it was hard to show customers the value of making their videos interactive. Next time, measuring that value is part of the first version.

15 · Next
Thanks for reading

Want to see more?