Web application

Marketing Pathfinder

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

Company
R/GA
Collaborators
Bobby SchultzAngus MacdonaldJames Slater+4 more
Client
Google
Technology
AngularJSDjangoMySQL
My Role
Developer/Designer
When
Jun 2016 ~ Dec 2017

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.

🔑 Major Keys

  • Marketing 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.

  • Results

    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 accomediate all stakeholders was incrediably difficult.

Marketing Pathfinder Process
Agile Process

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 Text

Google or 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

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.

Dual Login

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

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.

Sorted by 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 relavent 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.

Personalized by Role

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.

Approval Notifications

Actionable Reminders

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

Actionable Reminders

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 precidence of teams’ tooling e.g. Photoshop and CQ5. Next, we gathered all of the creative assets, e.g. fonts, color pallets, icongraphy, etc, in preperation of developing a MVP.

Angular Logo

AngularJS

FRONTEND FRAMEWORK
Django Icon

Django

BACKEND FRAMEWORK
Google Logo

gAPI

API CLIENT LIBRARY
GRPC Logo

gRPC

RPC LIBRARY
MySQL Dolphin Logo

AngularJS

RELATIONAL DATABASE
Google App Engine Logo

App Engine

GOOGLE CLOUD HOSTING
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.