Replay
Published in

Replay

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

The goal is “of course”

1. Here’s our standard timeline in light theme

2. Unloaded states

3. Setting a focus window

4. Shrinking the focus window

4. “Focus mode, engage!”

5. OMG WTF BBQ

  • 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

Bonus content

--

--

Behind the scenes at Replay.io

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