FMG

Reimagining the digital journey for branded merchandise solutions.

(Client)

FMG

(Year)

2022

(Role)

Product + visual design, Design System, UX Strategy

Main Image

Where Strategy

Meets Story

Project at a Glance

A redesign of Fuel’s client store platform to increase modularity, mobile usability, and brand flexibility.

  • Reduced new client portal launch time by over 40%, thanks to a reusable design system and pre-configured components

  • Improved user engagement across portals, with clearer product navigation and faster path-to-purchase

Result: Faster internal build times and improved client satisfaction

Built Fuel’s new digital home from the ground up—unifying brand, streamlining UX, and supporting a more impactful e-commerce journey.

Project Overview

Fuel Merchandise Group is a national B2B provider of custom branded merchandise and fulfillment. Their core offering includes white-labeled e-commerce portals for major corporate clients — used to distribute uniforms, swag, and incentive items at scale.

But while their back-end logistics were airtight, their digital storefronts told a different story: inconsistent UX, dated UI, and a lack of scalable design standards across client sites. Each portal required heavy manual customization, causing inefficiencies for both internal teams and end users.

The Problem

Fuel’s core business relied on custom e-commerce portals — each one built for a specific client, often with unique product catalogs, branding, and user flows. But the underlying system lacked a consistent design foundation, which led to slow onboarding, visual inconsistencies, and friction for users trying to place simple orders.

Each portal felt like a one-off. Layouts were cluttered, interactions varied between clients, and the design didn’t support modern UX expectations — especially on mobile. The lack of reusable components meant every site required custom design and dev effort, slowing timelines and introducing quality gaps.

From a business perspective, the system wasn’t scalable. Internally, the sales and account teams couldn’t preview or demo portals easily. Externally, clients were frustrated by dated interfaces that didn’t reflect their own brand standards.

Fuel needed an e-commerce design system that could adapt to any client’s brand while still offering a consistent, streamlined experience — one that looked and felt custom, but was built on a stable, reusable foundation.

Research & Discovery

To design a system that could scale across Fuel’s diverse client base, I started by understanding the full ecosystem — from how clients ordered merch to how internal teams managed and launched new portals.

I conducted stakeholder interviews with sales leads, account managers, and warehouse staff to map out the full lifecycle of a store — from setup to fulfillment. I also reviewed existing portals across 10+ clients to identify design inconsistencies, pain points, and recurring layout patterns.

A few critical insights stood out:

  • Clients wanted brand consistency. Many Fortune 500 partners expected their portals to match internal brand standards, but Fuel’s templates couldn’t flex without major design and dev work.

  • End users prioritized speed. Whether ordering uniforms, onboarding kits, or sales swag, users wanted quick, mobile-friendly experiences — not long menus or dense product grids.

  • Internal teams needed modularity. Without reusable UI components, even minor portal updates required manual work or one-off solutions.

To round out the discovery phase, I audited modern B2B and DTC platforms — including Shopify, Custom Ink, and Printful — to benchmark user flows, product filtering, and mobile interactions.

These findings made the path forward clear: we needed a flexible, branded e-commerce experience built on a smart, repeatable system — not a series of standalone sites.

Strategy & Design Process

With clear patterns and needs identified, I focused on building a design system that could support customization without sacrificing structure — one that could scale across dozens of client stores with speed and consistency.

My approach was guided by three strategic goals:

  1. Design for modularity – Create flexible UI components that could be reused across portals and tailored with client branding.

  2. Simplify the buyer journey – Reduce friction across core flows like product selection, filtering, and checkout.

  3. Empower internal teams – Deliver a scalable system that enabled sales and dev teams to launch new stores quickly and confidently.

System Architecture & Component Design

I began by mapping all common elements across existing portals — from product cards and navigation bars to login forms and filters. I created a modular design system with reusable components:

  • Responsive navigation with built-in brand theming

  • Product grid variations (with or without inventory status)

  • Flexible CTA patterns for “Add to Cart” and “Request Approval” flows

  • Branded header and footer blocks that could be swapped per client

UX Patterns & Flow Optimization

Using user flow diagrams, I simplified key steps: browsing, adding to cart, and checkout. I reduced visual clutter and limited options per screen to prevent decision fatigue — especially for high-volume repeat buyers.

On mobile, I prioritized large tap targets, collapsible filters, and persistent cart access. I also restructured the product detail view to prioritize essential info and quick action.

Brand-Flexible UI

To ensure each store still felt unique, I introduced theming variables — including brand colors, logos, type pairings, and accent elements — that could be applied dynamically without breaking the system. This allowed client portals to reflect their visual identity without requiring custom design work.

Throughout the process, I collaborated with Fuel’s in-house dev team to ensure the system was not just visually sound, but technically feasible and ready for implementation.

The Final Solution

The redesigned e-commerce system gave Fuel Merchandise Group the consistency, flexibility, and scalability it had been missing. Instead of designing each client portal from scratch, the team could now launch branded, user-friendly stores using a shared library of modular components — dramatically improving speed, cohesion, and usability across the board.

Key Improvements:


  • Component-Based Design System: A flexible set of UI components — from product cards to checkout flows — allowed internal teams to configure new portals quickly, while still meeting client brand standards.

  • Streamlined Ordering Flow: The new UX reduced unnecessary steps and decision points, improving product discoverability and shortening the time-to-checkout for both first-time and repeat users.

  • Mobile Optimization: All layouts and interactions were redesigned mobile-first — with large tap targets, simplified filtering, and sticky cart access for users ordering on the go.

  • Brand-Flexible UI: Each client portal now felt like an extension of the company it served, with configurable logos, colors, and typography that stayed true to the brand without sacrificing system integrity.

This system-first approach didn’t just improve the user experience — it empowered Fuel’s internal teams. Sales could pitch more confidently. Developers could build faster. Clients could trust that their portal would look sharp, work well, and scale effortlessly.

Impact & Outcomes

The new e-commerce system gave Fuel the ability to scale without sacrificing quality — transforming portal setup from a manual process into a modular, brand-consistent experience. Key outcomes included:

  • Reduced new client portal launch time by over 40%, thanks to a reusable design system and pre-configured components

  • Improved user engagement across portals, with clearer product navigation and faster path-to-purchase

  • Enabled internal teams to self-service, using templates and brand-flexible UI blocks without relying on design support

  • Increased consistency and brand alignment across all client portals, reinforcing trust and professionalism

  • Optimized mobile usability, with new layouts resulting in higher conversion rates on phone-based orders

The result was more than a visual upgrade — it was a scalable design framework that helped Fuel deliver a better experience for both their clients and the users those clients serve.

FMG

Reimagining the digital journey for branded merchandise solutions.

(Client)

FMG

(Year)

2022

(Role)

Product + visual design, Design System, UX Strategy

Main Image

Where Strategy

Meets Story

Project at a Glance

A redesign of Fuel’s client store platform to increase modularity, mobile usability, and brand flexibility.

  • Reduced new client portal launch time by over 40%, thanks to a reusable design system and pre-configured components

  • Improved user engagement across portals, with clearer product navigation and faster path-to-purchase

Result: Faster internal build times and improved client satisfaction

Built Fuel’s new digital home from the ground up—unifying brand, streamlining UX, and supporting a more impactful e-commerce journey.

Project Overview

Fuel Merchandise Group is a national B2B provider of custom branded merchandise and fulfillment. Their core offering includes white-labeled e-commerce portals for major corporate clients — used to distribute uniforms, swag, and incentive items at scale.

But while their back-end logistics were airtight, their digital storefronts told a different story: inconsistent UX, dated UI, and a lack of scalable design standards across client sites. Each portal required heavy manual customization, causing inefficiencies for both internal teams and end users.

The Problem

Fuel’s core business relied on custom e-commerce portals — each one built for a specific client, often with unique product catalogs, branding, and user flows. But the underlying system lacked a consistent design foundation, which led to slow onboarding, visual inconsistencies, and friction for users trying to place simple orders.

Each portal felt like a one-off. Layouts were cluttered, interactions varied between clients, and the design didn’t support modern UX expectations — especially on mobile. The lack of reusable components meant every site required custom design and dev effort, slowing timelines and introducing quality gaps.

From a business perspective, the system wasn’t scalable. Internally, the sales and account teams couldn’t preview or demo portals easily. Externally, clients were frustrated by dated interfaces that didn’t reflect their own brand standards.

Fuel needed an e-commerce design system that could adapt to any client’s brand while still offering a consistent, streamlined experience — one that looked and felt custom, but was built on a stable, reusable foundation.

Research & Discovery

To design a system that could scale across Fuel’s diverse client base, I started by understanding the full ecosystem — from how clients ordered merch to how internal teams managed and launched new portals.

I conducted stakeholder interviews with sales leads, account managers, and warehouse staff to map out the full lifecycle of a store — from setup to fulfillment. I also reviewed existing portals across 10+ clients to identify design inconsistencies, pain points, and recurring layout patterns.

A few critical insights stood out:

  • Clients wanted brand consistency. Many Fortune 500 partners expected their portals to match internal brand standards, but Fuel’s templates couldn’t flex without major design and dev work.

  • End users prioritized speed. Whether ordering uniforms, onboarding kits, or sales swag, users wanted quick, mobile-friendly experiences — not long menus or dense product grids.

  • Internal teams needed modularity. Without reusable UI components, even minor portal updates required manual work or one-off solutions.

To round out the discovery phase, I audited modern B2B and DTC platforms — including Shopify, Custom Ink, and Printful — to benchmark user flows, product filtering, and mobile interactions.

These findings made the path forward clear: we needed a flexible, branded e-commerce experience built on a smart, repeatable system — not a series of standalone sites.

Strategy & Design Process

With clear patterns and needs identified, I focused on building a design system that could support customization without sacrificing structure — one that could scale across dozens of client stores with speed and consistency.

My approach was guided by three strategic goals:

  1. Design for modularity – Create flexible UI components that could be reused across portals and tailored with client branding.

  2. Simplify the buyer journey – Reduce friction across core flows like product selection, filtering, and checkout.

  3. Empower internal teams – Deliver a scalable system that enabled sales and dev teams to launch new stores quickly and confidently.

System Architecture & Component Design

I began by mapping all common elements across existing portals — from product cards and navigation bars to login forms and filters. I created a modular design system with reusable components:

  • Responsive navigation with built-in brand theming

  • Product grid variations (with or without inventory status)

  • Flexible CTA patterns for “Add to Cart” and “Request Approval” flows

  • Branded header and footer blocks that could be swapped per client

UX Patterns & Flow Optimization

Using user flow diagrams, I simplified key steps: browsing, adding to cart, and checkout. I reduced visual clutter and limited options per screen to prevent decision fatigue — especially for high-volume repeat buyers.

On mobile, I prioritized large tap targets, collapsible filters, and persistent cart access. I also restructured the product detail view to prioritize essential info and quick action.

Brand-Flexible UI

To ensure each store still felt unique, I introduced theming variables — including brand colors, logos, type pairings, and accent elements — that could be applied dynamically without breaking the system. This allowed client portals to reflect their visual identity without requiring custom design work.

Throughout the process, I collaborated with Fuel’s in-house dev team to ensure the system was not just visually sound, but technically feasible and ready for implementation.

The Final Solution

The redesigned e-commerce system gave Fuel Merchandise Group the consistency, flexibility, and scalability it had been missing. Instead of designing each client portal from scratch, the team could now launch branded, user-friendly stores using a shared library of modular components — dramatically improving speed, cohesion, and usability across the board.

Key Improvements:


  • Component-Based Design System: A flexible set of UI components — from product cards to checkout flows — allowed internal teams to configure new portals quickly, while still meeting client brand standards.

  • Streamlined Ordering Flow: The new UX reduced unnecessary steps and decision points, improving product discoverability and shortening the time-to-checkout for both first-time and repeat users.

  • Mobile Optimization: All layouts and interactions were redesigned mobile-first — with large tap targets, simplified filtering, and sticky cart access for users ordering on the go.

  • Brand-Flexible UI: Each client portal now felt like an extension of the company it served, with configurable logos, colors, and typography that stayed true to the brand without sacrificing system integrity.

This system-first approach didn’t just improve the user experience — it empowered Fuel’s internal teams. Sales could pitch more confidently. Developers could build faster. Clients could trust that their portal would look sharp, work well, and scale effortlessly.

Impact & Outcomes

The new e-commerce system gave Fuel the ability to scale without sacrificing quality — transforming portal setup from a manual process into a modular, brand-consistent experience. Key outcomes included:

  • Reduced new client portal launch time by over 40%, thanks to a reusable design system and pre-configured components

  • Improved user engagement across portals, with clearer product navigation and faster path-to-purchase

  • Enabled internal teams to self-service, using templates and brand-flexible UI blocks without relying on design support

  • Increased consistency and brand alignment across all client portals, reinforcing trust and professionalism

  • Optimized mobile usability, with new layouts resulting in higher conversion rates on phone-based orders

The result was more than a visual upgrade — it was a scalable design framework that helped Fuel deliver a better experience for both their clients and the users those clients serve.

FMG

Reimagining the digital journey for branded merchandise solutions.

(Client)

FMG

(Year)

2022

(Role)

Product + visual design, Design System, UX Strategy

Main Image

Where Strategy

Meets Story

Project at a Glance

A redesign of Fuel’s client store platform to increase modularity, mobile usability, and brand flexibility.

  • Reduced new client portal launch time by over 40%, thanks to a reusable design system and pre-configured components

  • Improved user engagement across portals, with clearer product navigation and faster path-to-purchase

Result: Faster internal build times and improved client satisfaction

Built Fuel’s new digital home from the ground up—unifying brand, streamlining UX, and supporting a more impactful e-commerce journey.

Project Overview

Fuel Merchandise Group is a national B2B provider of custom branded merchandise and fulfillment. Their core offering includes white-labeled e-commerce portals for major corporate clients — used to distribute uniforms, swag, and incentive items at scale.

But while their back-end logistics were airtight, their digital storefronts told a different story: inconsistent UX, dated UI, and a lack of scalable design standards across client sites. Each portal required heavy manual customization, causing inefficiencies for both internal teams and end users.

The Problem

Fuel’s core business relied on custom e-commerce portals — each one built for a specific client, often with unique product catalogs, branding, and user flows. But the underlying system lacked a consistent design foundation, which led to slow onboarding, visual inconsistencies, and friction for users trying to place simple orders.

Each portal felt like a one-off. Layouts were cluttered, interactions varied between clients, and the design didn’t support modern UX expectations — especially on mobile. The lack of reusable components meant every site required custom design and dev effort, slowing timelines and introducing quality gaps.

From a business perspective, the system wasn’t scalable. Internally, the sales and account teams couldn’t preview or demo portals easily. Externally, clients were frustrated by dated interfaces that didn’t reflect their own brand standards.

Fuel needed an e-commerce design system that could adapt to any client’s brand while still offering a consistent, streamlined experience — one that looked and felt custom, but was built on a stable, reusable foundation.

Research & Discovery

To design a system that could scale across Fuel’s diverse client base, I started by understanding the full ecosystem — from how clients ordered merch to how internal teams managed and launched new portals.

I conducted stakeholder interviews with sales leads, account managers, and warehouse staff to map out the full lifecycle of a store — from setup to fulfillment. I also reviewed existing portals across 10+ clients to identify design inconsistencies, pain points, and recurring layout patterns.

A few critical insights stood out:

  • Clients wanted brand consistency. Many Fortune 500 partners expected their portals to match internal brand standards, but Fuel’s templates couldn’t flex without major design and dev work.

  • End users prioritized speed. Whether ordering uniforms, onboarding kits, or sales swag, users wanted quick, mobile-friendly experiences — not long menus or dense product grids.

  • Internal teams needed modularity. Without reusable UI components, even minor portal updates required manual work or one-off solutions.

To round out the discovery phase, I audited modern B2B and DTC platforms — including Shopify, Custom Ink, and Printful — to benchmark user flows, product filtering, and mobile interactions.

These findings made the path forward clear: we needed a flexible, branded e-commerce experience built on a smart, repeatable system — not a series of standalone sites.

Strategy & Design Process

With clear patterns and needs identified, I focused on building a design system that could support customization without sacrificing structure — one that could scale across dozens of client stores with speed and consistency.

My approach was guided by three strategic goals:

  1. Design for modularity – Create flexible UI components that could be reused across portals and tailored with client branding.

  2. Simplify the buyer journey – Reduce friction across core flows like product selection, filtering, and checkout.

  3. Empower internal teams – Deliver a scalable system that enabled sales and dev teams to launch new stores quickly and confidently.

System Architecture & Component Design

I began by mapping all common elements across existing portals — from product cards and navigation bars to login forms and filters. I created a modular design system with reusable components:

  • Responsive navigation with built-in brand theming

  • Product grid variations (with or without inventory status)

  • Flexible CTA patterns for “Add to Cart” and “Request Approval” flows

  • Branded header and footer blocks that could be swapped per client

UX Patterns & Flow Optimization

Using user flow diagrams, I simplified key steps: browsing, adding to cart, and checkout. I reduced visual clutter and limited options per screen to prevent decision fatigue — especially for high-volume repeat buyers.

On mobile, I prioritized large tap targets, collapsible filters, and persistent cart access. I also restructured the product detail view to prioritize essential info and quick action.

Brand-Flexible UI

To ensure each store still felt unique, I introduced theming variables — including brand colors, logos, type pairings, and accent elements — that could be applied dynamically without breaking the system. This allowed client portals to reflect their visual identity without requiring custom design work.

Throughout the process, I collaborated with Fuel’s in-house dev team to ensure the system was not just visually sound, but technically feasible and ready for implementation.

The Final Solution

The redesigned e-commerce system gave Fuel Merchandise Group the consistency, flexibility, and scalability it had been missing. Instead of designing each client portal from scratch, the team could now launch branded, user-friendly stores using a shared library of modular components — dramatically improving speed, cohesion, and usability across the board.

Key Improvements:


  • Component-Based Design System: A flexible set of UI components — from product cards to checkout flows — allowed internal teams to configure new portals quickly, while still meeting client brand standards.

  • Streamlined Ordering Flow: The new UX reduced unnecessary steps and decision points, improving product discoverability and shortening the time-to-checkout for both first-time and repeat users.

  • Mobile Optimization: All layouts and interactions were redesigned mobile-first — with large tap targets, simplified filtering, and sticky cart access for users ordering on the go.

  • Brand-Flexible UI: Each client portal now felt like an extension of the company it served, with configurable logos, colors, and typography that stayed true to the brand without sacrificing system integrity.

This system-first approach didn’t just improve the user experience — it empowered Fuel’s internal teams. Sales could pitch more confidently. Developers could build faster. Clients could trust that their portal would look sharp, work well, and scale effortlessly.

Impact & Outcomes

The new e-commerce system gave Fuel the ability to scale without sacrificing quality — transforming portal setup from a manual process into a modular, brand-consistent experience. Key outcomes included:

  • Reduced new client portal launch time by over 40%, thanks to a reusable design system and pre-configured components

  • Improved user engagement across portals, with clearer product navigation and faster path-to-purchase

  • Enabled internal teams to self-service, using templates and brand-flexible UI blocks without relying on design support

  • Increased consistency and brand alignment across all client portals, reinforcing trust and professionalism

  • Optimized mobile usability, with new layouts resulting in higher conversion rates on phone-based orders

The result was more than a visual upgrade — it was a scalable design framework that helped Fuel deliver a better experience for both their clients and the users those clients serve.