Modernizing the Media Planning Experience: A Unified Design System, UI and Product Design
Product Design, UX/UI, Design System

As the Design team responsible for the Telmar platform, our primary goal was to create unique products and experiences that put users first. With more than 20 products on the platform, we carefully managed and designed every page and step of the user journey to ensure it aligned with the overall vision set by the UX design team.

To make this happen, we worked closely with product owners to coordinate resources, plan sprints efficiently, and deliver the product roadmap. We also collaborated with the UX team to prototype ideas, gather user feedback through interviews and surveys, and refine design concepts based on data insights. This required producing various design materials, from initial sketches and prototypes to final, production-ready designs.


Combining all of Telmar's diverse modules and styles was quite a task. Each module had its unique branding and visual design, and creating a consistent look and feel that would unify everything was essential.

We thoroughly reviewed all the modules and their styles to tackle this challenge. We examined each module individually to identify similarities and differences in their design approaches. From this analysis, we developed a comprehensive style guide that would serve as the foundation of the new design system.

We worked closely with the development team to ensure the new design system could be effortlessly integrated into their workflow. We provided detailed documentation and support to help them adopt the new approach.


We encountered several difficulties while integrating different modules into our unified design system. One of these modules was the "Insights" module, which allowed users to access insights from multiple data sources through a simple drag-and-drop function. However, the original module was hurriedly put together by developers and needed a revamp.

The most significant challenge was dealing with the organization and structure of the data. For instance, search results displayed repeated suggestions or lengthy texts as chips on the UI, making it hard for users to find what they needed. To fix this, we collaborated closely with the system architects to revamp the data structure and modify the data to enhance the user's search experience.

Aside from these data-related problems, we introduced fixed components on the UI to prevent excessive scrolling for users. We also prioritized content in boxes and introduced steps and steppers to help users better understand the platform's functions.

Through iterative design and user testing, we developed an interface for the "Insights" module that was more intuitive and user-friendly, in line with the overall design system. Ultimately, this made it easier for users to uncover insights from their data sources and make more informed decisions.


Telmar's media planning platform relied heavily on the OOH module, which allowed users to search and select digital out-of-home advertising locations on an interactive map with specific conditions and audiences. However, the existing module had several challenges that made it difficult for users to navigate and plan their advertising campaigns effectively.

One of the primary challenges was the size of the map on the screen, which made it hard for users to view all the relevant information at once. Additionally, the map was not fixed to the screen, which meant that users had to keep scrolling back and forth between the map and the search panel to make changes or modifications.

The audience selection and conditioning fields were disorganized and lacked a clear hierarchy, making it challenging for users to navigate the options. Finally, the digital OOH billboard information was often hidden, making it difficult for users to find the information they needed.

To address these challenges, we conducted extensive user research and developed a design strategy focused on a fixed map on the right side of the screen. This design allowed users to browse and modify searches on the left-hand panel, making viewing all the relevant information easier without scrolling back and forth.

We introduced a clear hierarchy and order to the audience selection and conditioning fields to make it simpler for users to navigate the options and select the right campaign conditions.

Finally, we designed a modal that users could click on to get more information about a specific billboard and address the challenge of hidden information. This design element was vital for big brands and significant data users, making creating and forecasting campaigns easy and efficient.

The new design system for the OOH module was a significant success, receiving overwhelmingly positive user feedback. Overall, the OOH module redesign demonstrated the importance of user-centered design in creating more effective and efficient media planning tools.


We had to incorporate the "Audio" module into the Telmar platform's design system. This module allows users to research and gather insights on North American radio stations. However, the original module interface could have been more user-friendly and needed significant improvements to meet the users' needs.

One of the main challenges we faced was creating an interface that allowed users to easily navigate through different radio stations and view target audiences. Additionally, users needed to be able to build their own audience groups and export data as reports and analytics.

To make the module more user-friendly, we introduced various components and features. For example, we added filters to help users find radio stations based on specific criteria such as location, target audience, and format.

In another part of our work, we had to design a new design system for the Telmar platform. Using the Atomic design methodology, we created a visual language, typography, color palette, and design components that unified the scattered modules under one platform.

Working closely with the development team, we realized a custom design system was necessary to meet the platform's specific needs. Through user research and iterative design, we created a new design system that improved the overall user experience and made the platform more visually cohesive. Users could move seamlessly between different products and modules with a more consistent interface.