Google : Herald

The NET-NEW internal Finance & Business budgeting web tool standard for Google and all Alphabet (>70k users).

DURATION: 10 months to MVP

 

Value-add::

  • immediate and accurate
    budget views

  • enabling users to make
    informed decisions for
    their organization's spend

My role

 

Sr UX / UI Designer, Strategist,  Lead

Contract with Nelson Staffing

Duration: 10 months MVP

Ownership:

  • UX

  • UI

  • Research

  • Content

  • Strategy

 Stakeholders

 

  • UX / UI Designers: 1

  • Internal user groups

  • Engineering (FE / BE / Architect) / QA / Test, multi-geo)

  • Project Managers

  • Managers

  • Director

  

Problem Statement

Google and Alphabet Business and Finance (~70k active users) need an on-demand, customizable, view into their budgets in order to make immediate, accurate, and critical business decisions on spend within their organization and division, at a glance, removing the chance for over/under-spend which could delay payments and affect brand perception and payee base.

UX Strategy

Create an accurate, on-demand, ground-up, foundational tool for both Budget and Finance (Ops), that allow for; immediate insights, customization, accountability, enabling immediate and accurate decision-making, and future spend planning.

Challenges

Resources

Engineering teams were limited and frequently under-staffed.

Evaluations

2 main user groups (3 user roles for MVP), and the disparate methods users adopt to curate data to gain insights.

  • 6 main tools used to capture disparate financial dimensions

Communications

Ensure all Stakeholder Teams are in the loop.

UX Methodologies

1. Evaluate the Engineering Proof of Concept (POC)

 

When I joined the team, Engineering had started

creating a simple data grid POC. I reviewed and started

to get understanding and insights into the project.

Shown is a sample page from the readout deck.

Link to full deck

I did a basic evaluation on the first 2 dimensions:

  • Usability

  • Accessibility

  • Design (high-level)

Screen Shot 2021-03-23 at 7.54.34 PM.png

2. Evaluate the current process flow (before/after

Main improvements (proven & evolving)

  1. 7 tools > 1 tool

  2. No need for manual data aggregation

  3. Direct API ingestion from data layer

After arch.png

3. Define users for Minimum Viable Product (MVP)

Assembledd from User interviews

Screen Shot 2018-05-24 at 10.19.43 AM.pn

4. Design Scrum

While at Google, We conducted a day-long design scrum with our expanded Stakeholder Team.

The design scrum activities included: user task identification, empathy analysis, pain point identification and categorization, flow definition, task and pain point prioritization, etc.

20180611_124625.jpg
20180611_124612.jpg
20180605_145026.jpg
20180611_145219.jpg

5. Define user tasks

Assembledd from User interviews

Finance role resp.png
Business role resp
Herald roles 2.png
Herald CUJ 1.png
Herald CUJ 2.png

6. Analyze as-is user journeys

Assembled from User interviews, these journeys were inefficient and very time-consuming for users.

Herald User Journey 1
Herald User Journey 3.png

7. Create the UX / UI explorations

Main improvements (proven & evolving)

  1. Slim header allowing for more data display

  2. Ability to switch currency and role in banner

  3. On-call left nav drawer to maximize real estate

  4. Pivot structure  to flatten data

  5. Summary at top for quick insights w/o scrolling to bottom

  6. Easily see available balance with color and '-'

Screen Shot 2021-03-23 at 9.58.03 PM.png

Main improvements (proven & evolving)

  1. Data visualization allows for a visual view of the high-level components that affect budget availability.

herald data viz 4.png

"Before" Engineering draft (FishFood)

"After" UX Exploration

"Before" Engineering draft (FishFood)

"After" UX Exploration

8. Create mocks & CUJ flows

Of the journeys identified in the previous step, we chose 1, 3, and 4 for MVP which address the critical aspects needed for our phase 1 users.

CUJ 1 : "As a Financial Planner & Analyst, I need to be able to

check my budget availability."

Screen Shot 2021-03-27 at 7.15.43 PM.png

CUJ 3 : "As a Cost Center Owner, I need to create

a budget placeholder."

Screen Shot 2021-03-27 at 7.46.26 PM.png

CUJ 4 : "As a Purchase Order Owner, I need to

forecast a budget line item."

Screen Shot 2021-03-27 at 7.51.19 PM.png

Desktop notification feature - interactive InVision POC

From the notifications dropdown, users can select options

and are taken directly to that view in the content area to

address the tasks needed.

Mobile Herald-lite feature (notification -> budget transfer) - interactive InVision POC

The lightweight mobile feature allows for simple actions

and status views. In this flow, the Financial Planner &

Analyst is able to easily do a budget transfer request

from those available and viable accounts, based on

customizable thresholds. Machine learning can be

employed in the future to further recommend more

tailored selections.

Outcome

1 To 2 weeks -> 1 to 2 seconds - Time to see budget availability

APIs, curating appropriate figures from disparate back-end sources, delivers sumated totals for both budget and operating capital dimensions, to users, allowing them to make immediate and accurate decisions on their division spending and budget planning.

100% Audit Compliance for Legal and Accountability

By building in contextual messaging, we removed the chaos factor of spend accounting and approvals. Users are now able to keep all communications about any specific entity, in context and accountable for immediate auditing.

 

ZERO Mathematical Errors / Data Staleness

By automating the process and allowing the user to pivot their data as needed, with sort and filter capabilities, we have removed the archaic, inefficient, practice of copying and pasting into spreadsheets, and re-ingesting those data, which had historically introduced errors.

 

"I can FINALLY analyze all of the budgets I manage, accurately, immediately, without using a spreadsheet."

- Financial Planner & Analyst

"I don't have to ask my FP&A for my availability anymore!"

- Cost Center Owner

"I can finally open a placeholder to reserve  money for my team!"

- Purchase Order Owner

Style guide snippets

In general, I used assets from Google Material Design and modified them as necessary for enterprise data-dense displays.

02-Color
02-Color

press to zoom
01-Typo Elevation
01-Typo Elevation

press to zoom
04-PO Table spacing
04-PO Table spacing

press to zoom
02-Color
02-Color

press to zoom
1/7

Next steps

After delivering key user tasks in MVP, in-plan is: addressing the next strata of users and their needs

  1. creating data visualization dashboards for each role

  2. enabling cell alerts for events (customizable benchmarks and thresholds)

  3. ML: incorporating predictive analytics based on historical and individual trends

  4. Build in a Partner portal (a subset of total budget)

Herald db 4.png
Herald db 3.png
Herald db 1.png
Herald db 2.png

Stage / QA

Takeaways

I had no idea just how complicated it could be, and how many people were responsible for different parts of corporate budgets and operating expenses.

Even though it was a bit chaotic at first, once we created the entire budget view with operating expenses, creating the other user views was much easier. ACL-based views did the trick for default views, with the option to see the full figures, based on permissions.

What really struck me was the convoluted process that all roles had to deal with before the tool was created, and just how much manual cut/paste was involved, and the 1-2 week time lag to get the (by then, outdated) available spend figure.

The entire Stakeholder team committed to the UX process and really worked hard to deliver a solid product that the Users really loved.

What a fantastic experience!

Additional deliverable examples

(WIPs used to generate Stakeholder discussions)

Deck snippets from substantial research

(orig research deck ~750 slides)

Flows

Wireframes

These apps open within the STUDIO UI wrapper, and auth is on STUDIO open only.

These apps open in a new browser tab and require re-auth.