I led the design of the new navigation for the Magenta Advertising Platform, a marketing solution that advertisers manage campaigns leveraging T-Mobile mobility data.
TIME
October, 2021 - December, 2021
SKILL
Web Design
User Research & Testing
Cross-function Stakeholder Collaboration
TEAM
3 Designers, 3 Project Managers, 5 Engineers
After T-Mobile acquired PushSpring (now T-Ads), the primary product, Magenta Advertising Platform (MAP), initially focused on providing first-party audience data to advertisers and agencies.
As MAP pivoted toward becoming a Demand Side Platform (DSP), additional product features were integrated to align with the new business strategy. However, the existing navigation system was limited to a two-level hierarchy, making it unsustainable for future growth. A new navigation system was necessary to support the evolving business needs and accommodate the expanding product line.
Previous Navigation Design
New to the ad tech industry and T-Ads, I prioritized learning about the business and product before diving into design, as I believe navigation is heavily influenced by product vision.
Based on my experience with a few smaller MAP-related projects, I demonstrated my understanding of the business to PMs.
This user story highlights the campaign as the core of the product. Users rely on the Measurement and Insights tools to monitor campaign performance and the Audience feature to customize their target audience. However, I didn’t yet see the full picture.
"Your flow caters to only certain groups of users. Our users have shifted largely as the business expands."
I sat with the PMs and reviewed the newly created personas from the product team. With the addition of new products to MAP, the platform's user base has shifted from solely focusing on audience creation to addressing various user needs.
Some users are audience experts who can quickly navigate the platform to target the desired audience, while others are activation mangers concentrating on campaign creation and ensuring the campaign performs as expected.
Select the appropriate audience set that corresponds to campaign objectives and customer profiles.
I want to use the platform to identify media and audience tactics that meet client and budget objectives.
Launch, manage and optimize ad campaigns. Keep track of performance of campaign launch.
I want to use MAP reporting tool to monitor campaign performance and meet KPI benchmark.
Working with the PMs, we narrowed to 2 navigation structures based on the new user groups’ needs: Action oriented VS. Object oriented.
Action Oriented:
From users perspective, Action Oriented structure shows a stronger linkage between each product and it would be easier for users to find where they want to start regardless of their level of expertise. However, from the business standpoint, the value derived from this navigation structure is limited.
Even though each product can be sold individually, users might need to access to one portion of other products to complete their workflows. For example, the audience experts need access to both “Create” and “Manage” to locate the targeted audience and send the audience to campaigns. This creates complexity and lacks flexibility for sales to create sales plans for the customers.
Object Oriented:
The Objection Oriented structure better supports the SaaS model the business aims for. Each product is standalone, allowing users to purchase products individually or as a bundled without disrupting their workflows, while also maintaining some linkage between them. In addition, this navigation structure is designed for salability. For future sub-products, such as campaign optimization and audience inventory, can be easily integrated into the main product branches.
With the business vision and user goals in mind, I started the initial framework by shifting from a top navigation to side navigation and adding sub-navigation for each sub-product. This structure not only aligns with the object-oriented business strategy but also makes it easier for user to navigate through the platform.
Partnering with the the product managers, I was able to test the initial framework with 4 users who have different needs and level of expertise of the platform.
"The icon doesn’t mean anything. It would be good to have the navigation to be as explicit as possible."
"The 2 layers of navigation takes up too much space of the screen and visually not clean enough."
After the validating with our users, I came up with the solution that addresses the following pain points:
As one of the main product lines generating 30% of T-Ads' gross revenue and growing, MAP's redesigned navigation better aligns with the business strategy and positions MAP to expand in multiple dimensions within the ad-tech industry.
.svg){kind=icon}
.svg){kind=icon}