2026

SpendTool — Admin Mobile Experience

Case StudyB2B FintechMobile UXAdmin Systems
SpendTool — Admin Mobile Experience dashboard overview
Role
Product Designer — Solo
Timeline
Apr 6, 2026 – May 7, 2026
Team
Independent concept — sole product designer
Platforms
Mobile application (iOS concept)
Tools
Figma, FigJam, systems mapping, prototyping
Impact
A complete admin-side mobile concept that turns fragmented financial signals into a coherent decision-making system.
01 · Context and framing

Why spend management—and why the admin side.

Spend management products have a well-documented employee-experience problem: most attention goes to expense submission. The admin side is consistently underserved, even though that is where financial control lives.

The African B2B context sharpens the problem. Corporate-card penetration is lower, teams often share a single card, and the resulting trust, fraud, and control implications are real. SpendTool explores an admin experience from the ground up—mobile first and grounded in that operational context.

01Reimbursement model

The employee spends first, submits later, and policy violations surface after the fact. Control is retrospective.

02Card-first model

Limits, restrictions, and budget assignments are configured before a card is used. The card becomes the policy layer.

Setup thinking stays on the web. Mobile exists for the moment something needs the administrator’s attention or action right now.

02 · Product understanding

Requests and approvals look similar but operate at different levels.

Treating Requests and Approvals as interchangeable creates an information architecture that confuses both the administrator and the product logic.

01Requests · Operational

Individual, time-stamped spend events tied to an amount and a person. This is an inbox—urgent and time-sensitive.

02Approvals · Structural

The engine that determines who approves what, escalation triggers, and sign-off rules. It is configuration, not an inbox.

Requests therefore earn a permanent bottom-navigation destination. Approval logic appears inside each request as context—such as “Triggered by: Spend above ₦50k rule”—while full workflow configuration remains on the web.

03 · Navigation architecture

Four tabs, each answering one administrator question.

A question-led architecture

  1. Home: Is everything okay with our money?
  2. Requests: Does something need my decision right now?
  3. Tools: Do I need to act on something specific?
  4. Analysis: How have we been spending?

Urgency determines the order. Financial health and decisions come first; reflective reporting comes last.

Question-led product model for Home, Requests, Tools, and Analysis
01Home

Wallet balance, budget utilisation, and pending work provide financial health in under five seconds.

02Requests

A transaction inbox that stays one tap away and explains which policy triggered each item.

03Tools

Cards and Budgets get complete mobile actions; Team is limited; setup-heavy Approval configuration stays on web.

04Analysis

Trend data is valuable but less urgent, so it occupies the final navigation position.

04 · Home screen

The financial-health view answers one question: is everything okay?

Designed for a five-second read

  • Wallet balance: The complete figure is shown while typical balances permit it; abbreviation is reserved for larger scales.
  • Budget health: Department budgets use utilisation bars so financial pressure is visible without another tap.
  • Pending scope: The request count appears in both the section heading and navigation state.
  • No card carousel: Individual cards belong in the Cards module. Home represents organisational health, not inventory.
SpendTool administrator home screen showing wallet, budgets, and pending requests
05 · Requests

The transaction inbox—not a mobile approvals module.

The rule travels with the request

Every request carries the policy that caused it to appear, so administrators understand why attention is required without opening a separate Approvals module.

Pending items require action. Flagged items require investigation. Approved items remain as historical context. Filter counts communicate the full queue before it is narrowed.

SpendTool transaction inbox with pending, flagged, and approved states
SpendTool request detail showing transaction context and approval actions
Transaction context is visible before approve or decline
06 · Tools module

Mobile access is explicit about what it can—and cannot—do.

Two honest tiers

Cards and Budgets provide complete mobile action sets. Team offers limited access for viewing and deactivation. Approval configuration is deliberately labelled as web-only rather than represented by a partial mobile experience.

Live badges communicate what is inside each module before entry, and the web CTA gives setup-heavy work a clear destination.

SpendTool modules separated into full and limited mobile access
07 · Card issuance

One action becomes five isolated decisions.

Issuing a company card combines identity, card type, budget, spend limits, and final verification. Compressing these decisions into a single form would increase cognitive load and make costly mistakes easier.

0101 · Assignee

Search and filter the team rather than relying on a list that fails as the organisation grows.

0202 · Card type

Choose virtual or physical with operational differences explained at the decision point.

0303 · Budget

Assign the card while seeing each budget’s remaining capacity.

0404 · Limits

Set monthly and per-transaction controls within the available budget balance.

0505 · Review

Confirm the complete policy package before issuing the card.

Connected five-step SpendTool card issuance flow
A stepped bottom sheet isolates one consequential decision at a time
08 · Card controls

Freeze and deactivate share a row—but carry different weight.

Freeze is a reversible state change; deactivate is permanent. Their interaction patterns need to communicate that difference before the administrator acts.

Active and frozen SpendTool card states shown side by side
The card visual and primary action both reflect its current state
01State is visible

The frozen card is muted and the primary action changes from Freeze to Unfreeze.

02Language predicts outcome

Action labels describe exactly what will happen instead of relying on generic confirmation copy.

03Permanent action gets friction

Deactivation names the cardholder, surfaces consequences, and requires a deliberate second step.

SpendTool permanent card deactivation confirmation
Two-step friction is intentional when an action cannot be reversed
09 · Budgets

The wallet is the ceiling; budgets are named envelopes.

The wallet establishes the available pool before the administrator considers departmental allocations. Budgets then show usage, remaining value, assigned cards, and paused states as parts of that larger financial system.

SpendTool budgets list and budget top-up flow
Top-up previews the movement from wallet balance to a named budget
01Wallet first

The total pool and unallocated balance establish the administrator’s financial ceiling.

02Preview movement

Top-up shows current and resulting balances before money is reassigned.

03Paused means paused

A dimmed budget and explicit badge communicate inactivity before any label is read.

04Show operational impact

Pause confirmation names how many linked cards will be blocked from new transactions.

SpendTool budget detail, pause confirmation, and paused budget states
Before, confirmation, and resulting state for pausing a department budget
10 · Team

Deactivating a member freezes their card—but does not destroy it.

Separate the person from the financial instrument

Deactivated members become visually distinct through reduced emphasis and status treatment. Member detail exposes linked cards and their current states before an administrator makes another decision.

Deactivating the person freezes their card rather than permanently cancelling it. Permanent card deactivation remains a separate Cards-module action, keeping two different levels of consequence cleanly separated.

SpendTool team list showing active and deactivated members
11 · Reflection

The most consequential decisions were structural, not visual.

The work was shaped by questions that precede interface styling: what belongs on mobile versus web, how requests differ from approval rules, and where friction should be removed or deliberately added.

01Role context shapes everything

The administrator and employee experiences of the same system are fundamentally different products.

02Mobile forces honesty

Every feature must justify its presence against an urgent question. If it cannot, it belongs on the web.

03Friction is a design tool

Knowing where to add resistance—and where to remove it—is essential in financial product design.

The best fintech UX is not invisible. It is legible—the administrator always knows what state things are in, what they can do, and what will happen when they do it.

Natural extensions include the employee-side mobile experience, a deeper Analysis module, and the full web counterpart where the configuration deliberately excluded from mobile would live.