National Account Dashboard Concepts — Reasoning & Recommendations

01TL;DR

02What's there now

The current /your-account page is sparse:

• Three big chunky tile buttons at the top — Order Parts / Fleet Reporting / Dispatch A Tech
• A "transition notice" card with a stock photo of a smiling customer service person and copy about "making this transition as smooth as possible" (legacy from a recent platform migration)
• The National Accounts phone number + an email link
• Flat tabs: Orders / Addresses / Recently Viewed / Account Settings
• Empty state: "You haven't placed any orders with us"

What's missing

• No personalization. No name, no company, no account number, no role context.
• No account team. The named rep relationship lives in email signatures, not the portal.
• No multi-site visibility. A National Account spans buildings/sites; the page treats them as if they don't exist.
• No multi-buyer awareness. Approvals, role distinctions, and team activity are invisible.
• No fleet integration. Even though "Fleet Reporting" is in the nav, the equipment customers manage is divorced from the account experience.
• No spend visibility. Budgets, MTD/YTD, contract pricing savings — all absent.
• No quick-action affordances. The three tile buttons are 2010-era B2B portal aesthetics; they consume huge vertical space for 3 clicks.

03Phase 0 — Simplified / theme-only quick win

Live preview →

The full Phase 1 dashboard is the right destination, but it's a meaningful build. Before any of that ships, there's a theme-only intervention that closes most of the visible-quality gap with the current screen — and ships as a Stencil update with zero new data plumbing.

Scope (what's in)

• Page header strip — Your account H1, "Welcome back, Maria · Summit Facilities · Account #4827-N" subtitle, two pills (National account, Net-30 active). The greeting and pills are the only personalization — they come from the existing customer object that Stencil already exposes.
• Three action tiles — same destinations as today (Order Parts / Fleet Reporting / Dispatch A Tech), restyled as Caster cards: smaller icon chip, tight title + hint copy, chevron, hover lift. Reads as a row of well-designed shortcuts instead of three 2010-era buttons.
• Support notice — replaces the stock-photo transition card with a Caster callout (left brand border, eyebrow, title, body) paired with an inline contact strip (phone with hours, email-the-team link). Same message, a fraction of the visual weight.
• Tabs — Orders / Addresses / Recently Viewed / Account Settings, restyled as Caster underline tabs.
• Empty Orders state — Caster card with a centered icon chip, "No orders yet" headline, one-line explainer, and two primary CTAs (Start an order, Call to place an order). Replaces the flat info banner.

Scope (what's out — deliberately)

Everything in the Phase 1 dashboard anatomy stays out: no account-team card, no spend snapshot, no active orders list, no fleet snapshot, no sites grid, no users overview, no in-progress sidebar, no saved lists, no documents section. Phase 0 is theme over data — it does not add a single new API call. The moment a new API needs to be wired in, the work belongs in Phase 1.

Why ship this first

• Days, not weeks. It's CSS, copy, and HTML restructuring on a single page. No B2B Edition feature flagging, no role gating logic, no fan-out endpoint.
• Removes the most-cited eyesores. Stock photo, chunky orange-bottomed tile buttons, sparse empty state — these are what customers and reps point to first when asked what looks dated. Phase 0 fixes all of them without committing to the full hub-and-spoke build.
• Unblocks the Caster migration. Today's /your-account page is one of the few high-traffic surfaces still on the original prototype's CSS. Bringing it onto Caster gets the design system fully across the buyer-facing surfaces, which is a prerequisite for retiring the legacy stylesheet.
• Honest about the bar. This is the floor, not the ceiling. The explainer card on the prototype links forward to the Phase 1 dashboard so stakeholders can see the destination while they're looking at the stepping stone.

What it does not solve

The structural gaps from the "What's missing" list above are all still there after Phase 0:

• No account-team card → still the single biggest differentiator opportunity
• No spend / approval / fleet / multi-site visibility → still requires Phase 1 data work
• No role-aware UI → Junior Buyers and Admins still see an identical page

04Distributor references

What the big industrial B2B distributors actually put on their account dashboards:

Grainger MyAccount

• Pending Approvals widget for approvers
• My Lists — personal + shared reorder lists with "add entire list to cart"
• Order History with reorder, tracking, ship-to filtering
• Quick Order / SKU pad (Grainger OMS)
• Budget caps + remaining visible to admin users
• KeepStock entry point — Grainger's vendor-managed-inventory module
• Role-based personalization: admins see budgeting, standard buyers don't

What's not there: a named account-rep card. Grainger relies on chat + 1-800-GRAINGER.

HD Supply Solutions

• Express Checkout Settings — pre-set default ship-to + payment
• Job Lists — variant of shared shopping lists, organized per-jobsite
• Order Approval Workflow — split into non-approver and approver views, inline Approve/Reject with reason required
• PunchOut to Ariba / Coupa / SAP

Amazon Business

• Business Analytics dashboard — spend by user/group/category/department/supplier, customizable reports
• Buy Again tab — previously purchased items with one-tap re-add
• Reorder Lists — shared across team members
• Approval workflows — built by amount, category, department, GL code, cost center, project, location. Pending orders auto-cancel if no approver acts.
• Spend Anomaly Monitoring (Enterprise tier) — AI flags unusual spend
• PunchOut to 300+ procurement systems

What's not there: an account-team card. Amazon Business is intentionally self-serve at scale.

McMaster-Carr — the minimalist contrast

Order history, saved orders (in-progress carts), tracking, document downloads, cart persistence. That's the entire account page. No dashboard, no widgets, no analytics. McMaster's bet: engineers want speed and document access; everything else is noise. Worth referencing as the floor — anything we add beyond this has to justify its weight.

Tennant IRIS Asset Manager — the fleet reference

None of the general-purpose distributors have equipment-management dashboards. The reference for USA Clean's "Fleet" surface is Tennant's IRIS Asset Manager in My Tennant: equipment inventory by location/model/serial, usage data (hours run, brush-engaged hours), battery monitoring, service history per machine, fleet-wide trends. Tennant IRIS is what USA Clean's fleet card should aspire to once enriched with usage data.

05The account-team card differentiator

Across Grainger, HD Supply, Amazon Business, and BC's stock B2B Buyer Portal, none surface a named rep with photo on the dashboard. The pattern is universally a generic chat widget + 1-800 fallback. The rep relationship is real but lives in email signatures, not in the portal.

This is a clear differentiator for USA Clean, where the account-team relationship is one of the most valuable things customers buy. The pattern to lift comes from B2B SaaS account-management UIs (Gainsight, Front, Intercom CSM portals):

• Photo + name + title — "Your Senior Account Manager: Andrew Chen"
• Phone + direct email, click-to-call/click-to-email
• Schedule-a-call CTA — Calendly-style booking link
• Backup contact — service dispatch, billing
• Static response-time line — "Typically responds in 2 hours" rather than a Slack-style real-time presence dot. Setting "online now" expectations for a field-rep relationship is the wrong promise; the static line is more honest.

06What BC B2B Edition gives us

The Buyer Portal is a separate React app overlaying the BC storefront, open-sourced at bigcommerce/b2b-buyer-portal. What's included out of the box:

Companies model

A Company is the parent account; multiple Users belong to one Company. Customer groups attach to Companies for catalog/pricing scoping. Account Hierarchy supports parent-child Companies (chains, franchises) — buyers at higher tiers can access subsidiary portals. Direct fit for USA Clean's multi-site National Accounts.

Roles & permissions

Three default roles, with custom roles supported:

• Junior Buyer — can build Shopping Lists and submit them for approval. Cannot purchase directly.
• Senior Buyer — approves Junior Buyer lists, places own orders, sees Company order history.
• Admin — all Senior Buyer powers plus user management, address book, invoice payment.

Approval workflows

Shopping List → submit for approval → Senior/Admin approves → order placed. Surfaces as a pending-approvals queue. The dashboard prototype's "1 order needs your approval" alert in the hero is this queue's primary entry point.

Quotes

Sales-rep quotes appear in a Quotes section; buyers accept inline and convert to an order. Shopping Lists can be promoted to quotes. The dashboard's "Open quote · awaiting rep response" tile points here.

Address Book

Multiple ship-to / bill-to per Company, attached at checkout / quote / invoice level. Direct support for multi-jobsite — the dashboard's "Your sites" card is rendered from this.

Invoice Portal

Customers view and pay open invoices (Net 5 / 15 / 30 / 45 / 60). Per-Company payment-method visibility means Net-30 / Pay-on-Account is only offered to credit-approved companies via the Payments API.

Sales Rep Masquerade

Sales reps log in as a Company user and place orders on their behalf. The rep's name/photo is not surfaced on the customer dashboard by default. If we want the "Your rep is Andrew Chen" card, we build it — tying a Company custom field to the team-member content. This is a build, not a buy. See Differentiator.

What's missing from B2B Edition out of the box

• Named account-team card. Build.
• Spend visibility. Surfaces some basic charts; Amazon-Business-class analytics require a build or a third-party integration.
• Equipment / fleet management. No native concept. Build on top of catalog metadata, or wire to a system like Tennant IRIS for telematics.
• Schedule-a-call. Build (Calendly embed or HubSpot meetings link tied to the rep).
• Recent-activity feed. Some bits exist (order events, approval events). Aggregating into a single feed is a build.

07Dashboard anatomy

The recommended layout, top to bottom:

Above the fold

1. Welcome strip — "Maria, welcome back · Summit Facilities", account number, account type (National), primary site, Net-30 status, site/user counts. Pulled from the Companies model.
2. Open-items alert — banner inside the welcome strip when there's something requiring action (pending approval, overdue invoice, service overdue). Single most-pressing item only; sub-items live in the relevant sub-pages.
3. Sub-page tabs — Dashboard / Orders / Equipment / Saved Lists / Users & Roles / Addresses / Billing & Statements / Settings. The hub-and-spoke pattern — the dashboard summarizes; the sub-pages are the work surfaces.
4. Quick actions row — Resume cart, Reorder pad, Track orders, Dispatch a tech, Fleet (with overdue badge), Net-30 statement. The 2026 replacement for the three-chunky-tile pattern.

Main column

5. Spend snapshot — This month / Last month / Q2 to date / YTD. Contract-pricing savings call-out. Bar showing % of monthly cap consumed.
6. Active orders — last 5 with status pill, ship-to site, ETA, total. Click to the Orders sub-page.
7. Fleet snapshot — top 3 machines with service status (due / overdue / up-to-date). Click to my-equipment.html.
8. Your sites — multi-site grid with primary flag, address, machine count, orders YTD per site.
9. Users on this account — name, role, site, recent activity per user. Avatars + role pills (Admin / Buyer / Junior Buyer / Viewer / Billing).
10. Recent activity — chronological feed: approvals, order events, service completions, cart adds, invoices paid.

Sidebar

11. Account team card — three contacts (Senior Account Manager, Service Dispatch, Net-30 Billing) with phone, email, response-time line. Footer CTAs: Schedule a call, Message Andrew.
12. In progress — Active cart $48.13, Saved for Later $171.99 (1 price drop), Open quote $3,420 (Q-1014).
13. Saved lists — Q2 reorder, Building 3 standing order, T500e service kit. (Phase 2 of Saved Cart.)
14. Documents & statements — May statement PDF, contract pricing agreement, tax exemption on file, service plan.

08Feature priority matrix

Each feature by job-to-be-done, BC capability source, and build effort:

09Phased recommendation

10Implementation notes

Auth + role gating

Only signed-in users with a B2B Edition Company assignment see this dashboard. Signed-in B2C customers see the standard BC account page. Signed-out users see a sign-in prompt with "Apply for a National Account" CTA. Role-aware UI: the spend snapshot shows budget caps only to Admins; Junior Buyers see their own pending approvals submitted (not other people's queue).

Data sources

• Companies / Users / Roles: B2B Edition's Company Roles & Permissions API
• Orders: BC Orders v2 API, filtered by Company ID
• Approvals: B2B Edition Approval workflow (Shopping List + Order events)
• Quotes: B2B Edition Quote API
• Addresses: B2B Edition Address API
• Invoices: B2B Edition Invoice Payments API
• Cart + Saved for Later: Storefront Cart API + native Wishlist API (see Saved Cart Concepts brief)
• Equipment / Fleet: Custom — Customer Attributes on the User + Catalog Products with a "machine-type" custom field
• Team-member assignments: Custom Company fields tying Company → Sales Rep User → display content (photo, phone, email, response-time text)

The team card content model

Three slot positions on the dashboard: Account Manager, Service Dispatch, Billing. Each Company has assignments to USA Clean staff records. Staff records have: name, photo URL, title, phone, ext, email, response-time string, schedule-a-call URL. Customer-facing content is mastered in the USA Clean admin (not BC Stencil) so reps can update their own response-time strings without involving engineering.

Performance

The dashboard pulls from 8+ APIs. Two patterns to avoid jank:

• Server-side fan-out: a single dashboard endpoint composes all the data and returns one payload. Keep it under 600ms p95.
• Progressive enhancement: render the static parts (welcome, team card, quick actions) instantly; lazy-load the order + activity + spend widgets with skeleton states. The prototype renders everything inline because it's a mockup; production should hydrate.

Accessibility

• Sub-page tabs are <a> elements with aria-current="page" on the active item — keyboard navigation works without JS.
• Status pills use both color and text (and an iconographic dot) so colorblind users get the same information.
• The hero alert is announced as an aria-live="polite" region on initial page load.
• The team card avatars are decorative (aria-hidden="true"); the name is the accessible label.
• Spend percentages should be expressed in the alt text of the bar charts ("57% of $7,500 monthly cap").

Analytics

Track which widgets get clicked. The "Account Team" card click-through rate is the most interesting metric — it tells us whether the differentiator is being used. Other useful signals: pending approval action time (queue → decision), quick-action click distribution (which of the 6 buttons is hottest), and sub-page navigation rate (do users stay on the dashboard or dive into Orders / Equipment / Lists?).

11Sources