Overheads Planning Tool

Case Study: Overheads Planning Tool for Global Cost Centers

Client: Mars Inc. (via Fractal Analytics) Project: Salary, Wages, and Benefits (SWB) Budgeting Tool Role: UI Designer Duration: Oct–Nov 2021 Team: PM, UX Researcher, UX Designer, UI Designer (myself), 3 Engineers Tools Used: Figma, Miro, Power BI (legacy platform), ReactJS (handover)

1. Overview

A digital transformation initiative to streamline and centralize overhead cost budgeting across Mars' global cost centers. This tool aimed to standardize Salary, Wages, and Benefits (SWB) budgeting for 3,500 users and over 600 cost centers, replacing error-prone Excel-based workflows.

2. Problem Statement

Budget Owners (CCBOs) and Business Partners faced challenges in creating, managing, and validating budgets due to a lack of standardized tools. Disconnected Excel sheets led to inconsistency, limited visibility, and increased manual effort.

3. My Role

• Developed UI for core budgeting workflows and dashboards

• Created responsive design components for Figma handoff

• Participated in flow discussions and interface ideation sessions

• Collaborated with tech teams to align ReactJS feasibility with design

4. Process Timeline

Stage 0: Proposal walkthrough & scoping Stage 1: Pre-work (tool walkthroughs, stakeholder sync) Stage 2: Ideation & IA Stage 3: Lo-Fi, Mid-Fi, and Hi-Fi design iterations Stage 4: Handoff for MVP build

5. Research & Insights

User Segments:

• CCBOs: Cost center budget owners responsible for data input

• Business Partners: Approvers and validators

Activities:

• 5+ stakeholder walkthroughs

• Process mapping for 8 stages

• Interviews to uncover pain points

Insights:

• Existing workflow was non-linear and decentralized

• Budgeting lacked real-time oversight and collaboration

• Different roles required distinct access and visibility levels

6. Ideation & Design

Key Flows Built:

• Budget creation with historical comparisons

• Multi-budget review and approval

• Editable tables with embedded insights and filters

• Freeze and submission for final budgets

Wireframes and IA:

• Sketched flows for both personas

• Aligned with Power BI tool structure

• Iterated via Miro workshops

7. UI Design Highlights

Design Decisions:

• Modular card layout for dashboards

• Use of consistent color for deviations (red/green budget markers)

• Table designs with in-line editing and validation messages

• Lightweight navigation for multiple budget types

Component Design:

• Created a mini design system in Figma (buttons, dropdowns, tabs)

• Optimized components for handoff to ReactJS team

8. Challenges

• Navigating strict access control due to sensitive financial data

• Designing intuitive experiences for users with varying tech fluency

• Managing multiple approval levels and backtracking scenarios

9. Outcome & Impact

• MVP released on time; adopted across key Mars teams

• Became a benchmark project internally at Fractal

• Set design standards for future budgeting tools

• MVP shipped with ReactJS in close collaboration with dev

10. Learnings

• Cross-team co-creation leads to better adoption

• Early demos prevented misalignment during final builds

• Building component-first saved dev time during integration

• Reinforced the need to build for scalability from day one

11. Visual Gallery (placeholders for sanitized images)

• Budget dashboard view (anonymized)

• Multi-role switcher interface

• Editable budget table with filters

• Approval status tracker (persona-specific views)