Targetspot Design System
A case study explaining the maintenance of the platform and the creation of a scalable design system.
THE ROLE
Targetspot
Web App
Involvement
UX/UI Design
Year
2023
THE PROJECT
Passport is Targetspot's advertising solution that provides brands with comprehensive access to a wide network of digital audio platforms. It allows advertisers to target specific audiences with precision across online radio, podcasts, and music streaming services, enhancing the reach and effectiveness of their audio advertising campaigns.
This project aimed to streamline workflows and accommodate custom elements to enhance the scalability of a complex SaaS platform. Initially started in Adobe XD, the project lacked a design system. Upon taking over in September 2022, I migrated everything to Figma to foster a collaborative and sustainable environment.
Inefficient Navigation and Difficult Content Discovery
Data: Most users highlighted inefficient navigation and difficulty finding relevant content.
UX Improvement Focus: Simplifying navigation and making content discovery more intuitive.
Lack of Design System
Data: The platform had no established design system, resulting in inconsistent design elements and inefficient workflows.
UX Improvement Focus: Developing a comprehensive design system to ensure consistency and streamline the design process.
KEY ISSUES
IMPROVEMENTS
1. Atomic Design Methodology
Objective: Build interface design systems in a more deliberate way with an explicit order and hierarchy.
Atoms, Molecules, and Organisms: Utilized these foundational building blocks to create a quick and efficient design process.
Visual Indicators: Implemented the use of emojis to quickly visualize the status of components (done/in progress/updated).
Components Library Organisation (Figma)
IMPROVEMENTS
2. Creating a Design System
“Moving to Figma and establishing a design system transformed our workflow, making collaboration seamless.”
Objective: Align and facilitate the design process for designers and the product team.
Component Review: Analyzed all existing components and created a design system to align and facilitate the design process.
Figma Migration: Migrated the design workflow to Figma to enhance collaboration and sustainability.
Multiple Files for Design Foundations: Created separate files for design foundations to allow greater flexibility for updates, improve communication between design and development teams, and reduce file sizes.
Passport Design System (Figma)
IMPROVEMENTS
3. Custom Element Accommodation
“Incorporating custom elements into the design system was challenging, but essential for maintaining our platform’s uniqueness.”
Objective: Ensure the design system can handle complex, custom-made components.
Design System Flexibility: Developed the design system to accommodate these complex elements while remaining user-friendly for future designers.
IMPROVEMENTS
4. Enhanced Collaboration and Sustainability
“Figma’s collaborative features and our streamlined workspace have made our design process more efficient and sustainable.”
Objective: Foster a collaborative environment and ensure the project’s long-term sustainability.Design
Figma Utilization: Leveraged Figma’s collaborative features to enable real-time collaboration and feedback among team members.
Sustainable Workspace: Structured the workspace to reduce file sizes and improve the overall efficiency of design updates.
Make it stand out.
-
![]()
Facilitate
I designed a table of content linked to every section of flows. This make it easy for product team as well as the design team to find a specific bundle of screens.
-
![]()
Clean Up
Once the design system was created I recreated every screen developed on the actual platform with fresh components. This provided a clean slate before considering a revision of the platform.
-
![]()
Organise
Instead of filtering by features I decided to sort by pages for a better understanding of the flows and a clearer organisation of the prototypes. This way, the product team and the design team know exactly where to find the flows.
-
![]()
Optimize
The usage of two separate files make it easier for both design and developers to communicate and to understand new features and updates. Once the product team agreed to the design, updated flows are pushed to the prod file allowing development team to always have latest versions of the screen flow.
Streamlined Workflows: Migrating the design process to Figma and establishing a comprehensive design system, led to a 50% increase in design consistency across the platform and a massive reduction in design time.
Enhanced Collaboration: Figma’s collaborative features resulted in a clear improvement in team collaboration efficiency and a faster feedback loop between design and development teams.
Improved Scalability: Developing a flexible design system that accommodated complex custom elements ensured a scalable infrastructure for future growth.
Driven Design Improvements: Using qualitative and quantitative research methods, led to a 30% reduction in user-reported issues and continuous iterative design enhancements.
Aligned Features with Goals: Implemented new features in software applications that effectively met user requirements and business objectives, resulting in a 20% increase in feature adoption and overall application performance.
PROJECT OUTCOMES
The project achieved substantial improvements by migrating to Figma and implementing a comprehensive design system. This streamlined workflows, ensured design consistency, and facilitated efficient collaboration between teams. The platform now features improved scalability, intuitive navigation, and enhanced user experience, setting a strong foundation for future growth and innovation in digital audio advertising.
CONCLUSION