Kino AI Internship— Fall 2024

Role
UX Design Intern
Timeline
Fall 2024, 14 weeks
Tools & Skills
User Research
Prototyping
Design Systems
Typography
Figma
skip ↓ to the takeaways

👀 Section 1 // Overview

Figure 1. Sneak Peek at the Final Design
🪶
In highschool, I started dabbling in UX design because Adobe made me feel dumb.
⚠️
Due to my NDA, all details & research insights are omitted.
This case study solely covers includes the visuals I am allowed to share from a 1 month project I worked on. However, lots of additional process and research guides my designs— please reach out to hear more!
Linkedin me!
I liked what product design was- a way to tell efficient stories beautifully, for friends all around the world. But the software that enabled us to spin this magic was clunky. It was ‘unintuitive.’ It was grey and boring and I didn’t like it.

Half a decade later, ready to graduate university, the enterprise software I grew up with hadn't changed much. With my growing pains, I joined Kino (YC ‘23) to re-imagine the experience of enterprise video-editing for filmmakers.

📂 Section 2 // The Challenge

Editing long-form video is tedious. From conception to color-grading, media management is crucial to an editor's experience. It is hard to organize clips, but it is even harder to find the right clips.

This is what a portion of the files for a 5-minute documentary might look like. On any enterprise scale, this is magnified a thousand times.
How could we bring transparency to this opaque file management experience?

🎬 Section 3 // Let’s set the scene ;)

Figure 2. Kino's Search Screens
Kino often works with TV shows. We are a footage management platform that makes your file library searchable by dialogue, scene, actor, and text.

With the technical ability to organize footage by timecode, we saw an opportunity to unlock a novel type of interface. Every single user was sitting on mountains of footage: but they were cycling through their file previews one-by-one. Clips were as short as 0.01 seconds with no limit for how long they could be (several days long).
I worked within the existing Kino ecosystem to design UI that would bridge the gap between a user's file library, and their mental model.
Imagine if we could plot all 50 of your cameras out on a timeline in a “zoomed” out view of what happens on set.

Imagine if you could view a months worth of footage, pre-sorted into your storyline before you even enter Premiere Pro.

🎦 Section 4 // Initial Solutions

Inspired by product management apps like Jira & Linear, I re-imagined the classic film strip as a ‘chapter’ housing different scenes. What if different pertinent cameras lived inside of blocks?

Upon further iterations that explored common use cases (ie. highlighted keywords, multiple cameras, chapters, etc), this metaphor quickly became messy. Blocks overlapped at varying lengths, the UI wasn’t dense enough for enterprise, and the format did not lend itself well to clips of several seconds (which data showed was a common length).  Feedback I received from these iterations included:
"Can we focus on the cameras?"
"I would personally want to see the visuals themselves more than the scenes."

🏃Section 5 // More Iterations

Figure 3. Our pivot focused on individual cameras their footage

In my next few days of iterations, I sought to bring the classic timeline metaphor to users in a sleek and powerful way.

Rather than showing cameras as components of chapters, I fixed them to the left of our film ribbons. Testing helped us pay attention to the details: we minimized task time & physical interaction costs with icons that allow cameras to be easily re-ordered and collapsed.

This new design helped us pack more cameras into one screen: most shows had no more than 50 cameras, each of which could theoretically take an infinite number of video clips.
❌ Before:  "I think this design wastes a lot of space."
✅ After: "This timeline focuses on the information I want to see like the thumbnail itself"

Now, easily visualize scenes, at a glance. Kino AI highlights important moments automatically: organizing your footage into scrubbable 'chapters.'

Figure 4. Easily Identify Corrupted Footage & Action Points
Most reality TV shows have a sub 2-week turnaround time for editors & loggers.
However, terrabytes of unlabelled footage makes post-production painful, slow, & meticulous. Our new solution brings the features video editors have been dreaming of, straight into their favourite footage management platform ;)

Stationary cameras offer lots of footage, but this doesn't always translate to usable action.

A huge pain point we uncovered in user-interviews was the manual searching editors had to do to find a specific clip.

1. They would rely on text-heavy scripts and hints from memory to recreate their stories. Existing software didn't do a lot of heavy lifting for them.
2. They would manually scrub through days worth of tripod footage, to find seconds of usable footage.
‍
Now, editors can finally skim through their footage without importing everything into Premiere Pro. Kino's design visually labels points of interest, corrupted files, and storyline-pertinent clips: stitching everything together on a customizable timeline.

🧱 Section 6 // Componentry & Conclusions

By bringing the ever-so-familiar timeline into Kino AI: we added an important new usecase to our flagship product.
Now, Kino isn't only strong at exporting specific clips directly into editing apps during the editing process. Timeline helps you situate, browse, & summarize non non-specific clips before editing.
Figure 5. Isometric Mockup of Figma Components
🤿 Taking a deeper dive into Kino's dark mode componentry...
The Kino team hadn't previously invested in dark mode, so I imagined what our interface would look like if painted in tints & shades of black.

I created reusable themed components we could extend to our core light mode product in Figma- leveraging my design systems background.
In the future, we hope to incorporate these timeline components into our search page: helping film crews situate clips inside entire TV seasons.
Figure 6. Atomic Desgin Components
the end, but not really...

✨ Section 4 // My takeaways

01

📼

Living inside of existing systems

Rather than fully reinventing the wheel for an antiquated industry, our users welcomed us with open arms for bringing in the mindset of improving existing process. Designing meant pinpointing where would our users be working, what sort of workstations would they be on, and what other monstrous technical constraints we would face. Editors are reluctant to leave what is comfortable, and what works: so we worked in the margins of their deadlines, established naming conventions, and familiar softwares. In this process, our User Journey Map became our north star: search would simply feel like a magic wand in their updated toolkit.
02

🍿

Movies aren’t made overnight, & software isn’t either

Designing for Kino was designing for months of footage, hundreds of cameras, years of scripts. One semester ago, I had taken a documentary-making class. I felt familiar with Premiere Pro (& dare I might say, comfortable, with Adobe CC), but I was thrown into a world of Avid, full-time loggers, and thousand dollar sets that ran 24-hours a day.

I learned not to drown in data. Set your constraints. Scope your specs. Choose your user persona(s) and make them your champion(s). Identify the problem to be solved, and don't lose track of it.
04

🎞️

Swim in a blue ocean, not a red one

In a team workshop, we identified there was a significant and lucrative opportunity to help editors during the part of the film-making process right before editing: where teams transition from uploaded footage, to categorization.

I would argue searchable footage is a blue ocean because it tends to be removed from the video editing process, into work-streams like Excel and Avid. Competing in search isn't making a better DaVinci Resolve, or Final Cut Pro. Studios & producers are hungry to invest in software that shortens the time it takes them to edit quality films. This blue ocean is an area worth innovating & competing in.
03

🎥

Approach UI with grace

Post-research & testing, refining my design meant abstracting features to their core and building them up with layers of minimalism. Our dark mode had to be extremely minimal to look clean with the density of information we had. I learned to minimize dashed lines and fills without creating too much elevation (this isn't 2016 MUI ;)

I would keep to <4 layers of elevation: leaning on icons, menus, and shortcut based interactions like popovers and contextual menus. Advanced users preferred a balance between shortcut-enabled actions and added panels: this keeps things clean and powerful.

Section 6 // An extra special thank you to...

Luke: Many thanks for taking a chance me & my ideas. You've given me & continue to give me equal amounts of freedom & guidance in designhis is just the beginning for Kino, & I sleep soundly knowing the company is in capable hands.
Jenny:  My favourite unicorn & lovely mentor. You set the stage incredibly well for my internship & I loved jamming with you on concepts + hearing the way you break down problems <3

I'm so, so excited to see what you ship next.
Angela: I initially landed at Kino after my other Fall internship offer was rescinded. To my wonderful roommate, thank you for your tasty noodles & cheer during my difficult months of interviewing & onboarding.
Ashley:  I have been putting off a portfolio update for a long time. Thank you for encouraging me to tell my story.
(c.) 2021—2023
Next Case Study

Other Fun Projects

(c.) 2021—2023