Nova
Building a screen recorder that makes every recording look designed.
How might we take someone from Record to a designed, shareable video in minutes, without teaching them video editing? Raw recordings feel amateur, editors are heavy and sharing is clumsy with large files and no links.
I worked with two AI coding agents. Claude implemented the UI from my Figma designs. Codex built capture, export and persistence. I set the direction, wrote the acceptance criteria, reviewed the results against Figma, and made the calls when trade-offs appeared.
Designed Nova end to end: a floating recorder that stays out of the way, a focused editor with backgrounds, zoom and a timeline, and an export and sharing flow. Built the design system and specified every state.
Contribution:
Product Designer & Builder
Designed Nova end to end: a floating recorder that stays out of the way, a focused editor with backgrounds, zoom and a timeline, and an export and sharing flow. Built the design system and specified every state.
Nova
Design Showcase
The challenge
Screen recordings of software look raw. Making them look designed means learning a video editor, and most people demoing a product never do.
Constraints
What I did
Designed Nova end to end: a floating recorder that stays out of the way, a focused editor with backgrounds, zoom and a timeline, and an export and sharing flow. Built the design system and specified every state.
Approach
A working Windows alpha (v0.1.6) with a real editor, export that matches the preview, and in-app updates. 150+ designed frames in Light and Dark.
A recorder that floats, not a window
A frameless toolbar docked at the bottom of the screen. Pickers open above it, and only Display, Window and Area sit on the main row.
01
A recording HUD that stays out of the way
Once recording starts, the toolbar shrinks to a 44px pill with a timer, pause, restart, discard and stop. Errors appear as a toast above it.
02
One panel at a time in the editor
A scene bar (Video, Background, Camera, Audio) with one-line summaries. Clicking one opens a single floating panel and the preview re-fits beside it.
03
A timeline that explains itself
Lavender for the clip, blue for zoom blocks, dimmed trimmed parts with a “Hide the trimmed parts?” prompt, and split pieces you can select, delete with a confirm and restore.
04
Honest about what is not built yet
Unfinished features (music, noise reduction, custom size) show a “Coming soon” chip instead of a dead control.
05
Presets first, settings second
A Recommended preset by default, format as three tiles, resolution as a size bound, and a live summary line. Share link creates the link before encoding finishes.
06
Zoom as something you can hold
Every zoom is a block on the timeline you can drag, resize and delete. A panel sets the level and Auto (follows the cursor) or Fixed (stays on a spot), and Instant removes the easing.
07
Backgrounds as a small, complete menu
None, Presets or Color. Presets split into Smooth and Hype gradients, eight slowly drifting animated backgrounds and images with size and blur. Padding lives in the Video panel as “Video scale”.
08
The camera is a layer, not a corner
The camera bubble is drawn on the canvas with its own panel: circle or rounded, size, mirror and position. It has an accent ring and a resize handle when selected, and it stays put while the screen zooms.
09
Gating an alpha without friction
A licence gate that replaces the picker only when Record is pressed without a key. It keeps the source you chose and starts recording the moment a key is accepted.
10
Light and Dark by construction
Every screen is built once against tokens. The Dark version is the same layers with the Dark variable mode switched, and recordings and backgrounds keep their own colours.
11