🪶

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 week 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.

Kino saw the opportunity to 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 you could view a months worth of footage, pre-sorted into your storyline before you even enter Premiere Pro.

🏃Section 5 // Diverging...

Figure 3. Our pivot focused on individual cameras their footage

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 have video files spanning days.

Figure 4. Easily Identify Corrupted Footage & Action Points

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

User-interviews uncovered the manual searching editors had to do to find a specific clip- manually scrubbing through days of tripod footage to find second-long clips.
‍
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. Screen Studio Prototype

the end, but not really...

✨ Section 4 // My takeaways

📼

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.

🍿

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.

🎞️

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.

🎥

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 designs 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.

Kino AI Internship— Fall 2024

👀 Take-Home Design Challenge