Coupa BSM Platform — White-label brand mockups

White-label deployment range — one platform, any brand

Coupa asked for a facelift. The work proposed something better.

Coupa's BSM platform is powerful. Administrators can configure it to look like anything — any brand, any company, any identity. The catch: doing that requires laborious DIY HTML work, and the default state of the platform out of the box was an experience nobody wanted to adopt.

My job was to make it friendlier. What I ended up building was a design system from the ground up — icon sets, illustration systems, animation specs, white-label deployment kits — starting from a raster PNG sprite sheet with no vectors and no Figma library.

Coupa asked for a facelift. The work proposed something better. Not all of it shipped.

Step 1

The Facelift That Wasn't

Coupa's value proposition is elegant in theory: make it easy for employees to get what they need through your own procurement platform, and you'll save money. The catch is that it only works if people actually use it. Adoption is the product.

The brief was to improve that adoption by improving first impressions — make the platform more likeable, raise the net promoter score, do it without fundamentally changing the product. A visual overhaul. A facelift.

"What enterprise software owes its users is a first experience that doesn't make them want to route around it."

Coupa knew this. They wanted it fixed. The question was whether a surface-level intervention could address what was underneath.

Old Default View

Old Default View — the before state

Step 2

Starting From a PNG Sprite Sheet

There was no Figma library. No SVG assets. No naming conventions, no component structure. What existed was a raster PNG sprite sheet: hundreds of icons in a single file, many with multiple inconsistent color variants, misaligned at size, irreproducible without pixel-level reconstruction.

Before any new design work could happen, the inheritance had to be understood. Every icon was audited: flagged for color inconsistency, reconstruction needs, rule violations, scaling problems. Naming conventions were established. A migration path was mapped — from raster originals to fixed assets to transitional versions to a final scalable set.

This is the part of the project that doesn't show up in the deliverables deck. It's also the part that made everything else possible.

Sprite sheet audit — tearing apart a PNG sprite sheet to assemble a library of SVG assets

Sprite sheet audit — this is what "starting from nothing" actually looks like

Step 3

Trying to Deploy It Ourselves

Understanding the administrator problem didn't come from the research deck alone. It came from attempting to configure and deploy an actual admin homepage — and struggling with it the same way any administrator would.

The research confirmed what the experience made visceral: Coupa's default platform required extensive DIY HTML work to achieve even standard deployment functions. There was no out-of-box path. Every client administrator was rebuilding the same things from scratch, with no starter assets, no templates, no scaffolding.

This was the gap. Not the visual language — the deployment infrastructure underneath it.

Defining the Problem

Defining the Problem — composite of admin homepage research

Design Exploration Approaches

Design Exploration Approaches

Step 4

Building the System

The system had to work at multiple layers simultaneously.

At the icon level: a scalable SVG library built from the audited raster originals, with naming conventions established, modifier systems designed, and icon packs produced in multiple visual languages so administrators could choose a style that fit their brand.

At the illustration level: a character-based system designed for animation — music notes that pop and disappear, a cat whose tail twitches, a woman at a desk whose hair and clothing could sway. Two test animations were completed and specced for both light and dark mode. The illustration system wasn't decorative. It was the warmth the platform had never had.

At the deployment level: a proposed homepage architecture built around the most common administrator setups — standardized Quick Actions (Requests, Expenses, Travel, PTO, Contracts), clear hierarchy between work tasks and account functions, a search-first hero that asked "What do you need right now?" instead of presenting a wall of features.

And a small thing that mattered: when a user finished all their tasks, the platform said "You've finished all your tasks, congrats! Time to take a break superstar. :)" Enterprise software never lets you know when you've finished the job. It should.

Icon Pack Explorations

Icon Pack Explorations

Icon System Mapping & Modifier System Design

Icon System Mapping & Modifier System Design

Illustration System Design

Illustration System Design

Light and Dark Themed Icon and Illustration Set System

Light & Dark mode system coverage

Final visual design target render

Final visual design target render

Step 5

What Got Designed vs. What Got Shipped

The proposal was for standardized deployment kits — pre-configured icon sets and homepage functions built around the most common administrator setups. Instead of every Coupa client rebuilding the same things from scratch with DIY HTML, administrators would have a starting point: real assets, real configurations, a real out-of-box experience.

"It was a better answer than the one Coupa asked for."

Coupa's platform administration setup was not changed. It still requires extensive DIY HTML work. The system designed here — the icon packs, the illustration sets, the deployment architecture — exists as a proposal. Some of it informed the broader product direction. None of it shipped in the form it was designed.

That's a common ending for design work done at the edge of what a client is ready to build. The work was right. The timing wasn't.

Design Iteration Round 1

Design Iteration Round 1

Final Design

Final Design

Key Takeaways

  • Users and administrators often have divergent goals — white-label platforms have to meet both groups' needs simultaneously
  • The most valuable research sometimes comes from doing the task yourself and struggling with it
  • A surface-level brief can reveal a structural problem; the designer's job is to name it, even if the client isn't ready to fix it
  • Proposing a better solution than the one requested is a risk worth taking — even when it doesn't ship, it demonstrates what's possible

Software & Skills

  • Figma · Adobe Creative Suite · Pendo · InVision
  • Icon design & systems · Illustration systems · Animation specification · White-label platform design · WCAG 2.1 accessibility · Atomic UX design · User likeability research