ORF ON

As part of the product development team at ORF, I helped design and launch ORF ON, the streaming platform of the Austrian broadcaster.

Together with Swipe Circus, we redesigned the old platform known as TVthek into ORF ON with a new frontend and improved UX.

I was responsible for adapting the UI to scale across viewports, the UI of the video player, integrating the ORF design system into the project, maintaining the projects Figma libraries, and taking care of handovers and reviews with development teams.

Video Player

The video player was going to be the core component of ON. It had to be responsive, work appropriately for touch and mouse input, and work on Web, iOS and Android. At a later stage, remote input was added for TV, and AndroidTV als well as FireTV as platforms. It also needed to show content as live as well as on demand, have features such chapters, age verification, ads, tap to skip, subtitles of different sizes, and more. Keyboard navigation had to work intuitively, and a special focus on accessibility was paramount. Additionally, it had to work not just for ON but all ORF products, since developing and maintaining multiple video players made no sense strategically. Initially, I was responsible for designing the mobile and tablet UI, and at a later stage for the design of player as a whole.

Responsiveness

Ensuring the same quality user experience, no matter what screen size users have in front of them, was key for the project. I took care designing all screens ranging from 320px to 2560px with 6 dedicated layouts, each of them scaling typography, spaces and components to fit each viewport.

Working with Dev Teams

Already during the design process, we were taking in feedback from developers how flows or screens could be improved to allow for more elegant development, and before starting development, we wrote design documentation and organised handovers with dev teams. While development was ongoing, we were regularly doing ping-pongs with the teams to answer questions that came up. All finished components and screens were then reviewed by a colleague and me to make sure they were accessible, responsive, robust and implemented according to specification.

Keeping everyone on board

The project involved multiple internal and external teams, which made it crucial to have a central reference for all design specifications. Figma, at the time still new at ORF, worked beautifully for this role. During the design stage, Swipe Circus and I built a central library, which I then maintained throughout the whole project. This library contained all components, colours and typography, and an additional design file contained all screens and user flows. At a later stage when the design was more mature, each platform used its own design file with its respective screens and necessary platform specific screens and flows.

Integration of Mosaik

Mosaik, then simply called “ORF Design System”, was at the time only available for Web. Still, it was clear that ON was going use and build on top of Mosaik. This allowed us to reuse tried and tested components from SOUND and TOPOS. However, we had to redesign a number of components to fit the design specifications of ON, and the foundations of Mosaik had to be made available to other platforms and development teams. We also created custom Mosaik theme to accommodate the stylistic choices of ON. Additionally, all components had to meet WCAG 2.2 standards, as the ORF in its role as public broadcaster is required to be accessible.