Brand Networks
Introduction
During the Fall 2024 cohort, our team had the pleasure to work with Brand Networks on overhauling the implementation of their Cross Platform Optimization tool. Working with the amazing development team of Zach Kruchoski and Brandon Thivierge led by Bob Wilkinson, we implemented an automated optimization dashboard tool designed to streamline data analysis, decision-making, and performance tracking for BN’s core operations.
Timeframe
October — December 2024 | 8 weeks
Tools
Design — Figma
Development — Next.js, TailwindCSS, TanstackUI, PostgreSQL, Docker
Maintenance — AWS ECR, GitHub, Notion, Jira
Why This Stack?
Next.js was chosen primarily for its seamless integration with React and its ability to optimize server-side rendering, enhancing our page-load performance. With TailwindCSS, we ensured a consistent design language that could be rapidly iterated. Docker allowed our team to maintain a standardized environment, minimizing friction when transferring builds between development and production servers. TanStack UI provided robust, customizable components that streamlined our front-end development, letting us focus on core logic instead of building common UI elements from scratch. On the back end, PostgreSQL served as our reliable relational database, handling multi-channel ad metrics and complex queries while ensuring data consistency and integrity.
Team
Client
Brand Networks (BN), founded in 2006, is a company specializing in AI-driven social media advertising solutions. Their platform enables brands to manage and optimize media across various social platforms, utilizing personalization data and automation technologies to enhance media investments. They operate under Augeo, founded in 1998, who is a global leader in engagement technologies, specializing in loyalty and engagement programs for employees and customers. Headquartered in Saint Paul, Minnesota, the company operates across 11 locations and offers services like workplace engagement, experiential marketing, customer loyalty, and sales incentives.
Task
The BN team was looking to transition their current advertising budget optimization tool from a Google Sheets-based system to a web application. This application will allow BN staff to help professional advertisers optimize ad spending across multiple channels by connecting to their existing ad accounts. The primary functionality is to adjust budgets based on user-defined metrics and display detailed tracking of optimizations. This project aimed to provide a stable, intuitive platform for advertisers, incorporating the current Google Sheets functionality into a more efficient and accessible web app.
Design
User Research
As part of the user research phase, we engaged with and interviewed several end users of the current iteration of the tool to understand their needs, preferences, and feature specifications thoroughly. These interviews provided critical insights into users’ current pain points with the existing tools and their expectations for our solution, forming the foundation for our iterative design process. Through a series of collaborative discussions and feedback exchanges, we refined our approach and modified our design iterations. Through their input, we made changes spanning from adding more intuitive filtering for our tables and charts to making a permanent navigation bar that is present across all pages. This overall process ensured the tool’s functionality aligned with user requirements, helping us deliver a more tailored and effective solution as the project progressed.
Lo-Fi
Beginning our ideation stage, we used Brand Networks’ existing internal tools as a reference, leveraging their layouts and functionality as a starting point. To ensure our solution was both innovative and user-focused, we conducted a competitive analysis to explore industry best practices and trends. By blending these findings with the insights gathered from our user interviews, we were able to craft a streamlined and customized solution. This approach let us align with BN’s established design format while ensuring that each page was tailored to address the specific needs and preferences of the end users, enhancing both usability and functionality.
After gathering information from our clients and users, we started sketching some initial ideas to ensure our tool achieves its intended functionality, follows BN’s brand guidelines, and provides a clean and intuitive UI.
As we moved into our Mid-Fi stage, we wanted to ensure that our interface design elements were thoroughly aligned with BN’s existing internal tools while still improving upon known pain points. We began by refining our wireframes to flesh out the core user flows, focusing on how a user would transition between the Configuration, Campaign Execution, and Log pages and their needs on each page. We examined color palettes, typography, and spacing in greater depth, ensuring a uniform look and feel that adhered to BN’s brand guidelines.
During this phase, we also revisited our user feedback to validate that each component — like toggles, dropdown filters, tables, and charts — remained intuitive as we increased fidelity. We conducted internal test sessions where we walked through typical user scenarios, such as scheduling an ad optimization or viewing a recent budget adjustment. By observing how easily users could navigate between pages and locate key metrics, we were able to refine the layout further and streamline the arrangement of data. In addition, we introduced a consistent structure for displaying analytics on each tab, ensuring that every page showcased the most relevant metrics at a glance.
Hi-Fi
There are three main pages to our tool: Configuration, Campaign Execution, and Log.
Our configuration page is where users can modify the algorithm’s parameters and specifications to fine-tune its performance. Active channels are displayed, allowing the user to know exactly what they are targeting and adjust the parameters and scheduled execution times to their needs.
Next, on the Campaign Execution page users are met with a large graph at the top which can be toggled to view budget shifts over time or individual key metrics such as CPM and impressions. Graphs can also be filtered by platform. Scrolling down, users can scroll through a clear, organized table of raw data organized by platform which can also be filtered. Overall, this page serves as a view of current optimizations and calculations for user reference.
Finally, the log page provides a streamlined and easy to quickly read view of the optimization algorithm’s actions. Platforms can be identified by their logo, and the metrics and data are accessible in a responsive, scrollable table.
Development
Campaign Execution Page
The Campaign Execution Tab serves as the central hub for end users, providing a comprehensive and visually intuitive interface for monitoring campaign performance. Unlike BN’s initial tool, which relied on text-based updates for optimization insights, this tab leverages dynamic charts and adaptive tables to present real-time data in a more actionable format. By offering configurable visualizations and detailed metrics for active channels, users can quickly interpret performance trends, assess the optimization algorithm’s impact, and make data-driven decisions efficiently.
Logging
Another one of the crucial pages we developed was our improved version of the client’s logging page. Before our adaptations, logging was all stored in a Google Sheets spreadsheet and would pile up exponentially, with one day easily being responsible for the creation and storage of hundreds of different logs. To combat this, our primary goal was to migrate this system into a much cleaner and legible setup while also allowing the user to have certain filtering capabilities to lower the number of logs that had to be seen at any given moment. We fulfilled this goal through our use of our database, allowing our user to pull up their respective logs at any point. Logs are also automatically set to be filtered in order of creation, allowing our client to intuitively find key data given a day and time.
Configuration
The final page we built was the configuration page, a critical entry point designed to empower users to customize their chosen metrics, benchmarks, and update schedules, ensuring the application aligns with their specific goals. As the first page users land on, it serves as a hub for configuring campaign parameters and gaining an immediate overview of their ongoing campaigns. Additionally, the page enables users to set update frequencies, ensuring data is refreshed and optimized at intervals that suit their needs. Our primary goal for this page was to provide a straightforward and intuitive platform for the users to tailor their optimization data points.
CI/CD
To ensure consistent and efficient deployments, we implemented a robust CI/CD pipeline using GitHub Actions. This pipeline utilized Docker for containerization, streamlining the development and deployment process across environments and allowing BN’s engineers to analyze our progress in a QA registry. Linting tools were integrated to enforce code quality, while Git Secrets helped us secure sensitive information by detecting potential credentials in the codebase. We managed our container images using BN’s AWS Elastic Container Registry (ECR), enabling seamless storage and retrieval during deployments between development, QA, and production environments.
Challenges
Integrating into Existing API Ecosystem
Brand Networks’ requirement for integration with multiple platforms, including TikTok, Facebook, and YouTube, meant we had to work with a variety of custom APIs. Each platform had its own unique specifications and constraints, often leading to unexpected errors. Debugging these issues within a tight schedule required deep dives into documentation and rapid troubleshooting. Despite these setbacks, our team’s commitment to collaboration ensured that each API was successfully integrated, enhancing the tool’s functionality.
Authentication
Integrating OAuth for user authentication was one of the most complex tasks we faced. The process of managing token exchanges, handling redirect flows, and ensuring secure data access required significant debugging and testing. Early in the project, unexpected API limitations from third-party platforms added to the complexity, causing delays. However, by leveraging the expertise within our team and maintaining open communication, we were able to overcome these obstacles and deliver a secure and functional authentication system.
Timeline
Meeting our project milestones within eight weeks demanded precise planning and prioritization. The initial weeks were dedicated to understanding the project’s scope and user needs, but as the timeline progressed, overlapping tasks in design and development created bottlenecks. Our team adapted by implementing agile practices, holding frequent check-ins, and streamlining workflows.
A Closing Word
We’d like to take a moment to once again express our heartfelt gratitude to Brand Networks and their amazing team! This project has been such a rewarding experience, giving us the chance to explore the field of advertisement strategy and optimization, something that few of us had experience in. It pushed us to grow both as developers and designers, presenting us with unique challenges to overcome and conquer. We’ve learned so much along the way, and we’re incredibly thankful for the support and trust that made this journey not only meaningful but truly enjoyable.
