Kinople

Category

Case Study

/

Year

/

Kinople is a 0-to-1 UI and information architecture rebuild for an AI-powered pre-production management platform. A raw, feature-heavy interface reshaped into a structured, professional workspace where directors and crews can move from script to schedule without getting lost in the tool.

About the Project

Kinople is a film and OTT production management app where crews upload scripts and AI breaks them down scene by scene, identifying props, characters, timings, and every element a team needs to shoot. The technology underneath was powerful. The interface on top wasn't keeping up.

The product had been built feature by feature, with no design system holding it together. Generic AI-style gradients stood in for a brand. The AI's breakdown output, the actual core value of the product landed as a raw, overwhelming table that directors had to wrestle rather than use. This was a four-week, end-to-end redesign across 27 screens and two core workspaces, rebuilding the product around how film production teams actually work.

At its core, the Kinople redesign is about organizing complexity. It takes a backend that can do extraordinary things and gives it a frontend that makes those things usable, scannable, and finally professional.

Designing for Clarity, Built for the Set

The original brief was "make it look better." The reframe that made the work possible was a different one: stop treating Kinople as a collection of features and start treating it as a workflow that mirrors how a production team actually moves from idea to shoot day.

That shift drove the whole rebuild. The product was restructured around six clear navigation pillars — Script → Breakdown → Cast → Locations → Scheduling → Dashboard — that map directly onto a director's real path through pre-production. Two distinct contexts emerged from the same architecture: an Organization workspace for studios and larger teams, and an Individual workspace for solo directors and small crews. Same logic, different scale.

Visual Language

Kinople's new visual language replaces "AI slop" with a confident, professional identity. A bold orange accent (#FF6454) anchors the system, energetic enough to feel like film, restrained enough to feel like enterprise software. The gradients are gone; in their place, a clean, modern surface that lets the work breathe.

Typography, spacing, and components were built from scratch as a single, coherent system. Buttons that used to look different on every page now share one identity. Inputs behave consistently. The result is an interface that finally feels like the tool serious production teams already believed they were paying for, aesthetically considered, professionally built, and ready to sit on a director's monitor next to the rest of their pipeline.

Structured Around the Workflow

The product's biggest unlock wasn't a screen , it was the breakdown table. When the AI parses a script, it returns enormous amounts of data: every character, prop, timing, and scene element. The original interface dumped that data into raw tables that directors couldn't scan, let alone edit. The redesigned table treats that complexity as a first-class problem: clear row hierarchy, distinct scene headers, inline editing, and element assignment built directly into the row. What was once an overwhelming data dump became a working surface, something a director can actually sit in and shape.

The work itself unfolded in four tight weeks: a week on discovery and information architecture, a week building the design system and brand foundation, a week on the core script-and-breakdown experience, and a final week on the surrounding views, cast lists, locations, scheduling — plus edge cases, empty states, and dev handoff.

Built for Real Use

A redesign only ships if the unglamorous states ship too. Empty states across every section. Loading and processing states for the AI breakdown flow, so the user always knows what the system is doing. Hover interactions, error handling, and edge cases for the breakdown table, inline editing, row deletion, element reassignment, all designed to work the way someone actually uses them on a deadline, not just the way they look in a screenshot.

Beyond the surface, the redesign was built to be implemented. It went to engineering with a complete Figma component library, established design tokens, and documented patterns, a system the team could extend without breaking what was already there.

A Foundation that Scales

Kinople wasn't just dressed up; it was given a structure to grow into. The new design system covers every primitive the product needs — typography, color, spacing, buttons, inputs, modals, tables — so new features land inside a coherent language instead of accumulating as more loose parts. The same architecture serves a one-person workspace and a multi-studio organization, which means the product can scale up without rebuilding itself.

Clarity that Scales with You

Every element earns its place by reducing friction between the director and the work. Twenty-seven screens redesigned across two core flows. A full design system built from zero, replacing scattered components and inconsistent branding with a single, professional identity. Information architecture restructured around the actual production workflow rather than the original feature list. The result is a product that finally looks like what it can already do — a tool a serious crew would choose to keep open.

The takeaway from this one is small and useful: a professional UI doesn't just look better. It actively reduces the cognitive load required to get work done.

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