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:
- Bridging the gap between designers and developers
- How Wiztivi’s Figma plugin works
- Speed and cost efficiency: A game-changer for STB and OTT app design
- Flexibility and scalability in video app design
- Atomic Design: A modular approach to OTT UI design
- Conclusion: Why Wiztivi’s Figma plugin is a game-changer
- Want to know more about Timeless?
1. Bridging the gap between designers and developers
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.
2. How Wiztivi’s Figma plugin works
The Figma-to-Timeless workflow is designed for simplicity and efficiency:
- Designers work in Figma: Our customers (pay TV operators, telcos, broadcasters and other media companies operating direct-to-consumer OTT video services) need only supply their brand elements like logos, fonts, colors etc. Wiztivi’s design experts can then rapidly apply these elements to the Timeless UI. They will share the results with the customer’s design team using the familiar Figma interface for approval.
- One-click export: Once the UI design is finalized and approved, the Wiztivi Figma plugin exports it as a ZIP file with all necessary elements structured for seamless integration.
- Direct integration into Timeless: Developers simply upload the ZIP file into Timeless, instantly converting the design into a functional video app.
- Configuring the UI before and after launch: Users can make final adjustments within Timeless’ back-office interface, enabling non-technical teams to tweak layouts and branding elements without needing developer intervention.
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.
3. Speed and cost efficiency: A game-changer for STB and OTT app design
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.
4. Flexibility and scalability in video app design
Wiztivi’s approach is not just about speed, it’s also about flexibility.
- Cross-platform consistency: One of the biggest challenges in video app design is ensuring a consistent experience across multiple devices. Wiztivi solves this with two standardized design systems with the Timeless platform: one for big screen applications (Smart TVs, STBs and other screen-connected devices) and another for responsive web and mobile interfaces.
- Back-office adjustments: Instead of relying on developers for minor tweaks, brands can use Timeless’ back-office tools to update layouts, adjust UI elements, and even add new content rows. It’s ideal for reacting to business needs such as seasonal promotions or the addition of content categories driven by events such as the Olympics or the Oscars.
- Customization without complexity: While Wiztivi handles the initial setup, brands retain control over their video app design, making it easy to align with unique branding requirements.
Want to know more about how to achieve cross-platform consistency in your video apps? Download our eguide.
5. Atomic Design: A modular approach to OTT UI design
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:
- Over 100 different components, each with many different variants,
- Two types of menu, horizontal and vertical,
- More than 120 predefined or customizable page templates.
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.
6. Conclusion: Why Wiztivi’s Figma plugin is a game-changer
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.
- Faster workflows: Reduce design-to-development time from weeks to minutes.
- Cost efficiency: Minimize the need for extensive developer intervention.
- Seamless collaboration: Ensure that designs remain true to brand guidelines with minimal effort.
- Scalability & flexibility: Adapt to evolving business needs with modular UI components and back-office tools.
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.
7. Want to know more about Timeless?
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!
%20pour%20blog.png?width=1000&height=309&name=CTA%20DL%20Ebook%20UI%201%20(Tactical%20Guide)%20pour%20blog.png)