Internal Product · Propertybox
Concept · Design · Build

Vixel

Rethinking how property videos are made — from a brittle, settings-driven system to a template-first platform that cut production time and gave designers real creative freedom.

ROLE
Product Concept · UX/UI Design · Build
COMPANY
Focal Agent / Propertybox
TOOLS
After Effects · Sketch · Internal stack

BACKGROUND

Property videos, at scale

Focal Agent (now Propertybox) provides photography and marketing services to real estate agencies across the UK. One of those services is property videos — produced from the professional photos taken at each property listing. These videos combine room-by-room imagery, local points of interest (schools, transport links, supermarkets), text captions, and a voiceover narrated by a voice artist from a written script.

Originally, every video was handcrafted by a designer in After Effects — a time-consuming process that didn't scale. If a single agency branch had 50 active listings, that meant 50 individual videos to produce and maintain.

THE PROBLEM

A platform built around the wrong idea

To address the scale problem, the team had built an internal platform that tried to automate video creation. The concept was: configure every visual setting in the system — transition styles, animation types, text effects, colours, timing — and the platform would feed all of that into After Effects running on a server, which would then render the video.

On paper it made sense. In practice, it didn't work.

No preview — ever

To see what any combination of settings would look like, you had to render a full video — a process that could take 30 minutes or more. There was no way to preview an effect on the spot.

Complexity that kept growing

As more animation options were added to the platform, the UI became increasingly overwhelming. Dozens of individual settings, no clear hierarchy, no way to understand what you were building until the video came back.

Creative ceiling

The system only supported whatever animation types had been built into it. Complex motion design, layered transitions, or anything unusual was simply impossible — the system couldn't express it.

The automation wasn't working

The system was so complicated and unpredictable that designers ended up abandoning it and going back to making videos from scratch in After Effects manually. The automation had failed at its only job.

THE IDEA

Reverse the process entirely

When I joined the team, I looked at the problem differently. The old system was trying to describe animations through settings and then build them in After Effects. That's the hard way round — After Effects is a design tool, not a settings consumer.

My proposal was to flip it: build the template in After Effects first, with all the animations, transitions, and motion design already done, at full quality. Then use the system only for what it's actually good at — managing the data that changes per property: images, captions, points of interest, agency branding.

OLD APPROACH
  1. 1Configure every animation setting in the platform
  2. 2Send all settings to After Effects on a server
  3. 3Wait 30+ minutes for a render
  4. 4Review — if wrong, repeat from step 1
NEW APPROACH
  1. 1Design the full template once in After Effects — all animations done
  2. 2Export the structure and upload to Vixel
  3. 3Agency submits an order — just the data (images, text, branding)
  4. 4Video renders automatically at scale

THE PRODUCT

What Vixel actually is

Vixel is a video template management and order platform. On the production side, a designer creates a property video template in After Effects — with all the motion design, branding, slide structure, and placeholder data already defined. That structure is exported and uploaded to Vixel as a template.

On the agency side, an estate agent logs into Vixel, selects a template assigned to their brand, and creates an order by supplying the dynamic content: property photos, room captions, voiceover script, and points of interest. Vixel handles the rest — dispatching the render job, scaling infrastructure as needed, and tracking the order through to delivery.

Template library

Store and manage After Effects templates per agency brand. Each template has a defined structure — number of slides, placeholder types, branding rules — exported directly from AE.

Order management

Agencies create and track video orders. Submit property data, monitor progress, and receive the finished video — all without involving the internal production team.

Elastic rendering

The system spins up additional After Effects virtual machines on demand depending on order volume — so a branch submitting 50 orders doesn't create a bottleneck.

Points of interest

Automatically surfaced local POIs — schools, transport links, supermarkets — included in the video as dynamic slides alongside the property photography.

DESIGN THINKING

Key decisions that shaped Vixel

Keep complexity where it belongs

The old system tried to move animation design into the platform — the wrong place for it. The new approach kept complex motion design in After Effects, where designers already know how to do it, and kept the platform simple: just data in, video out.

Designed for agencies, not internal teams

The end users of Vixel are estate agents — not designers or developers. The order creation flow needed to be simple enough that someone with no video production knowledge could submit a job correctly. The platform hides all the complexity behind a clean, task-focused interface.

Creative freedom as a feature

Because animation was no longer constrained by the system, designers could build genuinely compelling templates — complex motion, random stock video inserts between slides, polished transitions. The quality of the output improved significantly, making the product easier to sell to agencies.

Reducing customer service load by design

Previously, every edge case and failed render created customer service work. By making the template the source of truth and the platform handle the rest automatically, the team's involvement in individual orders dropped significantly.

THE PLATFORM

Key screens

Scroll to explore

OUTCOMES

What the new system unlocked

  • Faster production at scale. A branch with 50 properties no longer needed 50 individual design sessions. One template, created once, covered all of them automatically.
  • Better output quality. Freed from the constraints of the settings system, designers could build high-quality motion templates in After Effects — more complex transitions, stock video inserts, polished motion design.
  • Elastic infrastructure. VMs spin up on demand based on order volume, meaning peak periods no longer created a backlog.
  • Reduced internal overhead. With orders processed automatically through Vixel, the team's involvement in day-to-day video production dropped significantly — less customer service, fewer manual interventions.
  • A product that could be sold. Vixel became a platform Propertybox could offer to agencies directly — not just an internal tool, but a commercial product with a clean user-facing interface.

REFLECTION

What this project taught me

The most important thing I learned here was about where complexity lives. The old system had put complexity in the wrong place — it tried to express creative decisions (animation, motion, transitions) through a data interface, which is fundamentally the wrong tool for that job. Recognising that mismatch, and proposing a way to move each concern to where it actually belongs, was the core insight that made everything else possible.

This project also showed me how much a product's design can be shaped by its underlying technical architecture. The old platform was hard to use partly because of its UI, but mostly because the architecture forced it to expose things that should have been invisible. Changing the architecture changed what the UI needed to do — and made a clean, simple interface possible.

Working on something end-to-end — from identifying the problem, to proposing the concept, to designing and building the platform — gave me a different perspective on product design. You make better decisions when you understand the full picture.

KEEP EXPLORING

See next project or jump back

Want to talk through this project?

Happy to walk through the thinking in more detail or discuss how I approach product design problems.