Web Application

Marketing Pathfinder

Internal project name for an internal web application that manage marketing budgets globally for Google.

Company

R/GA

Collaborators

Bobby Schultz

Angus MacDonald

James Slater

Client

Google

Technology

AngularJS

Django

MySQL

My Role

Software Engineer

When

Jun 2016 ~ Dec 2017 (4 weeks)

Summary

While working embedded inside Google for 3 years, Project Pathfinder was the first of its kind, as well as, the largest project R/GA had received. Pathfinder was the internal project name for an internal web application that manage marketing budgets globally for Google. Before Pathfinder, Google somehow had managed their entire marketing budgets on a Google spreadsheets. In 2016, Managing all of the marketing budgets over spreadsheets was becoming increasingly unmanageable. Google knew they needed better tools but couldn’t find the resources internally to help. In steps R/GA and over the course of 18 months we would work with various departments of the marketing and finance teams to design and build a tool that would help Google get away from managing their marketing budgets with spreadsheets.

Breakdown

  • -

    Pathfinder

    Internal project name for an internal web application that manage marketing budgets globally for Google.

  • -

    Google Sheets

    Before Pathfinder, Google somehow had managed their entire marketing budgets on a Google spreadsheets.

  • -

    Unmanageable

    In 2016, Google was managing all of the marketing budgets over spreadsheets.

  • -

    Teamwork

    R/GA worked with various departments of the marketing and finance teams to design and develop a tool that would help Google get away from managing their marketing budgets with spreadsheets.

  • -

    Result

    An internal application used globally across Google to request, track, manage, and report, all marketing budgets. 2017 Marketing Pathfinder had processed over 2 billion dollars

Process

Pathfinder took over 18 months to complete. It took this long because the stakeholders for Pathfinder were global. The system was estimated to move 2 Billion USD a year. And getting to a system that could accommodate all stakeholders was incredibly difficult.
Marketing Pathfinder Process Model

Agile Design

Early on User Testing played a huge role in the sucess of pathfinder. Jackie Fok took lead on teh design of Pathfinder and ran robust user tests on every part of Pathfinder before handing it off tech.

Visual Design

Pathfinder leveraged as much Material Design as possible.

Google Product Sans

Product Sans is a geometric sans-serif typeface created by Google for branding purposes. It replaced the old Google logo on September 1, 2015.

Material Design

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

Site Map

There were 3 major routes inside Pathfinder:
Site Map

User Interface

At a glance, this project looked seemingly simple.
User Interface
Dual Login

Something to note, is that every Googler must “dual-auth” with a unique USB key. And therefore, Pathfinder need to run oAuth2 and implement Googles dual auth service.

Dashboard

Double click inline text editing. Drag and Drop text elements to change text lock ups. Update grid alignments of text. Add and style buttons to any text lockup.

Media Request Form

Double click inline text editing. Drag and Drop text elements to change text lock ups. Update grid alignments of text. Add and style buttons to any text lockup.

Sorted by Priority

Hundreds of users a day would post, update and review Media requests. The lifespan of a request was typically 1 to 2 weeks. This dashboard view was sorted by priority so that users could take the actions on the media requests that were highest priority.

Personalized by Role

Each Media request had Four Approval Roles: Scoping, Compliance, Finance, & Media. Each Media request would need to be approved by each four role for full approval. Each Media request on the dashboard was relevant to that user. Either the Media request was owned and created by that user or that user was one of the four roles that was to approve a particular Media request.

Approval Notifications

Our system would notify a user via email or through dashboard notifications in real time as soon as the status of their Media Request was updated.

Actionable Reminders

Highest priority Media Requests came with immediately actionable reminders. These buttons afforded the opportunity for users to get their Media requests approved as quickly as possible.

Technology

We had to move quick, we went from a list of product requirements to paper prototype with in the first day. We based most of our interaction design on the precedence of teams’ tooling e.g. Photoshop and CQ5. Next, we gathered all of the creative assets, e.g. fonts, color pallets, iconography, etc., in preparation of developing a MVP.
Django
Backend Framework
MySQL
Relational Database
AngularJS
Frontend Framework
gAPI
API Client Library
App Engine
Google Cloud Hosting
gRPC
RPC Library

IMMUTABLE DATABASE

Challenge

By design our backend had no delete action of a record. As our database grew, our client side performance fell. 3 months into launch we received daily feedback that our application was so slow, that it was unusable.

Solution

Performance test with realistic seed data. In our case, it was our UI object pool and paginate the data from the backend.

Takeaway

Stress test your application with realistic seed data to identify the possible bottlenecks, as early as possible.

TEST COVERAGE

Challenge

Without exception, Google has a SLA to have 100% line coverage on code. And at this time my testing experience was extremely shallow.

Solution

Wherever possible we took a functional approach to the application. We wrote bite size stateless components that used pure functions to maintain a application or feature state

Takeaway

100% code coverage is tedious but it teaches you to write cleaner and more readable.