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)
2. Evaluate the current process flow (before/after
Main improvements (proven & evolving)
-
7 tools > 1 tool
-
No need for manual data aggregation
-
Direct API ingestion from data layer
3. Define users for Minimum Viable Product (MVP)
Assembledd from User interviews
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.
5. Define user tasks
Assembledd from User interviews
6. Analyze as-is user journeys
Assembled from User interviews, these journeys were inefficient and very time-consuming for users.
7. Create the UX / UI explorations
Main improvements (proven & evolving)
-
Slim header allowing for more data display
-
Ability to switch currency and role in banner
-
On-call left nav drawer to maximize real estate
-
Pivot structure to flatten data
-
Summary at top for quick insights w/o scrolling to bottom
-
Easily see available balance with color and '-'
Main improvements (proven & evolving)
-
Data visualization allows for a visual view of the high-level components that affect budget availability.
"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."
CUJ 3 : "As a Cost Center Owner, I need to create
a budget placeholder."
CUJ 4 : "As a Purchase Order Owner, I need to
forecast a budget line item."
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
Next steps
After delivering key user tasks in MVP, in-plan is: addressing the next strata of users and their needs
-
creating data visualization dashboards for each role
-
enabling cell alerts for events (customizable benchmarks and thresholds)
-
ML: incorporating predictive analytics based on historical and individual trends
-
Build in a Partner portal (a subset of total budget)
In general, I used assets from Google Material Design and modified them as necessary for enterprise data-dense displays.
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!
Take-aways
Stage / QA
(WIPs used to generate Stakeholder discussions)
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.