Designing a seamless, engaging user experience for set-top box (STB) and over-the-top (OTT) video applications can be a complex and time-consuming process. Traditional workflows involve multiple iterations between designers and developers, slowing down the transition from concept to functional application. The result is a slower time to market at the same time as ballooning costs. In today’s economic climate, video service providers need a faster, more cost-efficient approach.
>> Download: “Tactical guide, the 5 best practices for a unified cross-device strategy”
Wiztivi, a leader in Pay-TV and OTT UI design, has fast-tracked this process with its Figma plugin, making it easier than ever for brands to go from design to development in just minutes. Using the integration between Figma and Wiztivi’s Timeless platform allows companies to streamline their app design workflows, reduce costs, and launch stunning, fully functional video apps faster than ever.
In this blog article, we will cover the following topics:
One of the biggest challenges in video app design is the disconnect between designers and developers. Designers create pixel-perfect UI mockups, but translating those designs into functional code requires extensive back-and-forth communication. Minor adjustments, such as changing a color, an icon or a typeface, can lead to delays as design teams and developers try to align their vision.
Wiztivi’s Figma plugin eliminates this bottleneck by allowing designers to export their work directly into Timeless, Wiztivi’s advanced platform for both STB and OTT application development. Instead of relying on developers to manually extract design specifications, Wiztivi's solution converts Figma designs into a structured ZIP file that integrates effortlessly into Timeless. This process reduces miscommunication, speeds up approvals, and ensures that the final product matches the original design vision.
The Figma-to-Timeless workflow is designed for simplicity and efficiency:
The screenshots below demonstrate this process in action:
The "Design Manager" area is dedicated to customizing the main templates that make up a UI. This is where customers can choose from the four different themes offered by the plug-in (light, dark, light colored, and dark colored).
The plugin created by Wiztivi allows you to inject the customer's colors and logo into the app templates.
Once the guidelines have been injected into the templates, we extract the designs and transform them into simple ZIP files using this second plugin, the Theme Exporter.
A glimpse of the "Home" corner of our system design.
Some tiles that are used in different corners and that will suit all use cases.
Architectural example of the TOP10 component, one of today's essential components that can be found in all good UIs.
With Wiztivi’s STB and OTT UI design approach, speed is a major advantage. What once took days or even weeks to complete can now be accomplished in as little as 15 minutes, dramatically reducing development time and costs.
This efficiency is especially beneficial for large media companies that publish video apps for multiple consumer devices and frequently update their video app design. Instead of hiring external agencies or dedicating extensive internal development resources to the task, teams can implement design changes instantly, ensuring their video apps remain fresh, modern, and aligned with evolving brand identities.
Wiztivi’s approach is not just about speed, it’s also about flexibility.
Want to know more about how to achieve cross-platform consistency in your video apps? Download our eguide.
Wiztivi’s design system follows the Atomic Design methodology, a modular approach that enhances flexibility and scalability.
Instead of designing static screens, Wiztivi has a design system made up for reusable UI components (buttons, tiles, grids etc.) that can be dynamically rearranged to create different layouts. In fact, Timeless currently offers our customers the power to choose from:
This modularity means that updating a single component (e.g., a button style) automatically updates all instances of that component across the UI. Overall, the system can be compared to using Lego blocks, allowing designers to assemble complex interfaces from pre-built, standardized elements, ensuring consistency while enabling rapid design changes.
And because we make four releases to our design system every year, our customers are constantly benefiting from new innovation.
For companies looking to simplify OTT app design, reduce development time, and ensure pixel-perfect UI implementation, Wiztivi’s integration of Timeless with Figma is crucial.
By leveraging Wiztivi’s cutting-edge OTT UI design solutions, brands can launch video apps faster, smarter, and better, without compromising on quality. Whether you’re building a new OTT platform or optimizing an existing one, Wiztivi’s innovative approach makes video app design effortless.
Watch this video interview with our product owner, Christophe Harry.
Or book a demo with our team to see for yourself how easily we can take your brand elements from Figma to flawless apps in minutes!