Published in


How We Designed Our Focus Mode

A peek into the design of our latest feature

The Replay UI (dark theme is coming soon, shh!)

The problem we set out to solve

Watching vintage YouTube concert videos is one thing, but what about navigating through software? Any developer will tell you that debugging too often feels like finding a needle in a haystack and the haystack is on fire and you’re on fire and everything is on fire because you’re in hell. So we’ve been working on the technology to focus replays to a window of time to help make life easier. We call it Focus Mode.

The goal is “of course”

There are a lot of technical details and considerations listed below, but our end goal is always “of course.” The end-user shouldn’t marvel at all the complexity because they shouldn’t notice it. Like a well-done soundtrack, this UX should do its dang job without drawing attention to itself.

1. Here’s our standard timeline in light theme

We start with a pretty standard pattern. The only tricky part is the slightly darker grey that shows how far we’ve buffered. YouTube does this too.

2. Unloaded states

Our first curveball! In some rare cases, a video might be so long that we need to unload portions of it. How can we show a user that the video is available but telegraph that there could be a delay? (#jealous that YouTube doesn’t have to deal with this) Here’s what we came up with — a dotted line:

3. Setting a focus window

This is where things get spicy, so we message it with an instructional prompt (not shown) and keep the wayfinding strong by keeping the interface the same with one important detail: we overlay a new focus component with draggable edges.

4. Shrinking the focus window

I love this screen, because it’s designed to feel obvious even though there’s a ton going on behind the scenes. Soak it in and I’ll explain why it’s cool.

4. “Focus mode, engage!”

In this view, the user is done focusing and wants to get back to the work of debugging. They’re returned to the same timeline they’re used to seeing, but now the details outside the focus area are faded back significantly.


Looking at this visual, you’d be excused for thinking we’re not very good at this whole product design thing. But bear with me, there’s some brilliant work going on here, even though I accept that it looks overly complicated and designed by a stupid person. Hang tight.

  • 1 and 7 will never load because they’re outside the focus window
  • 2 will load, but it’s gonna take a second, hold your horses pls
  • 3 is hot to trot, gosh I’m really going for a horse theme here
  • 4 is our standard buffered view, so if you hit play, this area will work
  • 5 is a cousin to 2, it’ll be ready soon
  • 6 is a lot like 5, but we need it to look different because it was previously outside the focus window, and that’s important info, can ya dig it?

6. Re-hydrating our focus mode

7. Done loading

Baby steps

This is a brand-new bouncing baby feature. Just like a real-life human baby, it’s cute and simple but now it’s up to us to make sure it grows up to be awesome. There are going to be lots of twists and turns along the way, and that’s the fun part. Let us know if you have any feedback by joining our Discord. We’d love to chat about this more to make it even better!

Bonus content

Here’s a one minute video demo of me geeking out about this feature.



Behind the scenes at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store