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
Modularity and Scalability
All the edge cases, in context pop overs have their own space, so the experience is seamless and not cluttered. This allows for focus and what matters on the tool.
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
Light Theme Preview
07
Dark Theme Preview
08