BrandNetworks | Cross-Platform Optimization Tool

Redefining How Teams Optimize and Track Ad Performance

Timeline

January - April 2025

Role

Contract UX/UI Designer

Team Size

1 PM, 3 Designers, 6 Developers

BrandNetworks | Cross-Platform Optimization Tool

Redefining How Teams Optimize and Track Ad Performance

Timeline

October - December 2024

Role

Contract UX/UI Designer

Team Size

1 PM, 3 Designers, 6 Developers

Our Client

BN (BrandNetworks) is a company, operating under Augeo, that specializes in AI-driven social media advertising solutions, helping brands optimize media and enhance investments across various platforms.

The Problem

The BN team’s cross-platform optimization tool, used for budgeting and campaign management, was operating in a Google Sheets based system that lacked stability and efficiency. They were looking to transition to a web application that their media team could use to help professional advertisers optimize ad spending across multiple channels.

The Product

In 8 weeks, we created an automated, stable optimization dashboard and data input tool designed to streamline data analysis, decision-making, and performance tracking for BN’s core operations. We transformed a complicated sheet system into a sleek and intuitive user-friendly application that can be directly integrated into BN’s existing internal tools and shown to clients.

Research & Define

Discovering Pain Points

To better understand the goals of the product, user pain-points, and feature requirements, I conducted 4 user interviews with the Sr. Director of Tech, Lead Engineer, and our primary users, the BN Media Team. We clarified essential KPIs to highlight, gathered insight on the current usability of the Google Sheet system, and identified three main pain points:

Due to its complex nature and lack of design, the Google Sheet is never shown to clients, making communication and management more difficult.

The layout lacks clear indicators of what requires user input which disrupts the team’s workflow.

Troubleshooting and tracking changes becomes challenging as quantities of data increases in hundreds of columns and rows.

Researching Current Industry Standards

With much creative freedom from our client, I took a deep dive into existing ad optimization platforms to research user-friendly design patterns and components that provide support to users with similar problems or needs. Our goal was to build a strong foundation in understanding how to create a product that was both intuitive in its functionality while also sleek and professional to show to external clients.

After looking at products such as Kenshoo Skai and The Trade Desk, we drew these insights:

Options to view data in different ways enhances overall product experience.

Key insights aren't always clear from the jump, making drawing conclusions hard.

Filters and visual aids are a must for navigating large amounts of data.

While these products have a wider user base, we adapted these insights to form solutions for our clients who will use our product internally on behalf of their own clients.

Focus & Scope

Our stakeholders expressed that the priority of the tool should be to input data so that cross-platform optimization (CPO) runs smoothly. With this, we knew our final design would include similar components to the Google Sheet, such as a data log and specific input fields.

Our key pages of focus were Configuration, Campaign Execution, and Log. In these three pages, users can set parameters for budget optimization, view current optimizations and metrics, and view past histories.

Design Iterations

Establishing Consistency in Design Systems

When starting our iterations, I studied BN's brand guidelines and examined the visual design of their existing internal tools. This research ensured our design would integrate seamlessly into their existing portal. However, BN’s existing UI components were not available in Figma, and an official brand kit was not initially provided, making it difficult to maintain consistency. To streamline our team’s workflow, I spearheaded the creation of our component library by studying their components and proactively replicating them directly into Figma, as well as designing new components modeled by the same style.

Easing Company Tool-to-Tool Transitions

With the component library, iteration became more efficient as I led the designs for the Campaign Execution features and layouts. I designed dual-view layouts to help BN’s Media Team track changes more effectively, pairing intuitive data visualizations with a familiar table view to ease the transition from their existing Google Sheet system.

Highlighting Key Insights

Noting our users’ prioritization of CPO budget shifts, I brought this to the forefront of the page with a line graph, which garnered client approval in weekly meetings. As more metrics required attention and importance, I designed a tab configuration to easily switch between graphs and toggle to view different metrics individually. These sleek visualizations assist both our users and their clients, turning abstract data into clear visuals and making discussions easier to understand and align on.

Final Design

Empowering User Decisions for Campaign Configuration

On our Configuration page, users can set parameters for budget to their client’s needs and goals with a simplified, straight-forward process and clear input fields. A quick overview of active channels allows users to monitor and make adjustments to update schedules and benchmarks, efficiently fine-tuning campaign performance.

Visualizing Complex Ad Optimizations

Leveraging dynamic charts and adaptive tables for real-time optimization and campaign insights, users can easily interpret performance trends and impact. Troubleshooting issues and decision-making is made more efficient with the help of multi-view graphs for different KPIs with coinciding data tables and filters. The BN-branded, sleek interface provides a tool for user-client meetings and aides discussions surrounding campaign management.

Organizing and Tracking Past Optimization Histories

Error identification and analysis of budget shifts are streamlined with a comprehensive record of past optimizations in a scrollable, easy-to-read table. Users can use our filtering system to pull up respective logs and adjust how many are shown at a given time, reducing cognitive overload when compared to the old Sheets system.

Thank you BN & CodeLab!

Takeaways

Thank you to our client contacts at BrandNetworks for their trust and support, and to CodeLab (a design & software agency at UC Davis) for making this opportunity possible! This project was my first time doing design work for clients and working alongside software developers, which made this product even more exciting. I learned so much about working under tight time constraints, and continue to carry lessons about design consistency and team collaborations into all of my projects.

Team BN @ CodeLab's Fall Cohort Banquet

Our first team meeting! Spoiler: this marked the start of some beautiful friendships <3

A Note from Our PM!

"I directly managed Viv during our time building a real-time data processing application for Brand Networks. Viv's extensive UI/UX knowledge allowed her not only to excel in her work throughout the design process, but act as a mentor and leader to fellow designers. What set her apart was her ability to tackle ambiguous problems, translating complex data requirements into an intuitive user interface. She communicated clearly and effectively with the developers on my team, leading to high-quality handoffs that significantly accelerated our development timeline. This efficiency allowed for multiple iterations during a condensed schedule. Viv would be a tremendous asset to any product team, and I wholeheartedly recommend her."

Aidan DeVaney

Contract Product Manager @ BrandNetworks

thanks for reading! back to top?

nice to see you!

feel free to reach out about design opportunities or to connect!

resume

nice to see you!

feel free to reach out about design opportunities or to connect!

resume

nice to see you!

feel free to reach out about design opportunities or to connect!

resume