Overview
Bitmovin is an Austrian Series B video technology company powering video encoding and adaptive streaming for media companies, broadcasters, and OTT platforms worldwide. The platform processes millions of encoding jobs monthly and is used by a specialized B2B audience: engineers and media operations teams whose work depends on precise, real-time information - where an ambiguous UI can mean a failed job at 2am for an on-call engineer.
As the sole in-house UX/UI Designer and design system owner, I built Bitmovin's first cross-product component library and design language from zero - unifying three product surfaces (encoding dashboard, analytics, and player UI) that had grown in isolation with no shared standards, no consistent token system, and no documented component guidelines. This was early-stage operating mode: hands-on, embedded with engineering, owning the playbook before scaling it.
Close daily collaboration with engineering and product management; regular design reviews with technical stakeholders. I mentored Bitmovin's engineers on design system governance - how to consume the library, request new components, and maintain the system as the product evolved. The knowledge transfer worked: the system stayed actively maintained after my engagement ended, design standards that travelled past me.
The Challenge
The UI had grown organically across three product surfaces - duplicated components, inconsistent patterns, no shared visual language. Each product felt like a different team had designed it, because they had.
Discovery for technical users
Engineers and media operations specialists value precision over aesthetics and spend hours in the dashboard. Discovery had to surface what was actually broken in their workflow, not what looked broken aesthetically. The persona who owns the binding decision in a developer-tools product is rarely the loudest - finding them required embedded observation.
Personas served
- Engineers - encoding pipeline operators, on-call for failed jobs at 2am
- Media operations specialists - monitoring and diagnosing encoding jobs in real-time
- Product management - internal alignment on roadmap, priorities, and customer feedback
- Engineering leadership - design reviews, technical sign-off, governance handoff
Discovery methods I ran
Process
01 - Audit
Full component inventory across all three products - cataloguing patterns, identifying duplicates, documenting interaction inconsistencies. Data tables, status indicators, and form inputs surfaced as highest-priority unification targets.
02 - Token System
Dark-first token architecture separating brand primitives, semantic aliases, and data visualisation colours. Semantic tokens covered status states (success/error/warning/running), interactive states, and data density levels.
03 - Component Build
Figma component library with full state variants - default, hover, focus, disabled, error, loading. Data tables, charts, and forms prioritised given frequency. Every component documented with usage guidelines, do/don't examples, and accessibility notes.
04 - Engineering Collaboration & Handoff
Structured design reviews with engineering leads walked through component specs, token values, and interaction behaviour. Zeplin for handoff, Confluence for docs. Contrast ratios validated against WCAG AA across dark backgrounds.
05 - Knowledge Transfer
Workshops embedded design system governance into the engineering team's workflow - how to consume the library, request new components, and maintain the system as the product evolved. The system outlasted my direct involvement.
Key Design Decisions
- Dark-first design language: Engineers work in the dashboard for extended periods across varied environments. The dark theme reduces eye fatigue and makes the high-contrast orange brand accent immediately visible for primary actions - a deliberate contrast with most SaaS dashboards that default to light.
- Monospace for all data values: Job IDs, configuration values, API keys, and encoding parameters use JetBrains Mono throughout. The choice makes data scannable, visually aligned, and immediately familiar to a developer audience - making the interface feel native rather than imposed.
- Progressive disclosure in configuration: Advanced encoding parameters are hidden behind "Advanced settings" - surfacing only the most common options by default. This reduces cognitive load for new users without removing power for experienced ones.
- Inline status, no modals: Job status, error messages, and progress indicators live in-context within table rows. Engineers monitoring multiple jobs simultaneously do not need to open modal dialogs to check status - the information is always visible in the primary view.
- Calibrated data density: The dashboard shows many concurrent jobs. Column widths, font sizes, and whitespace were systematically calibrated so that 30+ rows are scannable without horizontal scrolling - validated through usability sessions with on-call engineers.
Outcomes
- Knowledge transfer workshops embedded design system governance into the engineering team's workflow - system stayed actively maintained after the engagement ended
- Design decisions and system architecture presented to Bitmovin's product leadership, securing alignment on the dark-first language and governance strategy
- Improved scanning efficiency in the encoding dashboard - validated through usability sessions with the on-call engineer user group