FMG

Redesigning a B2B E-commerce Portal

(Client)

FMG

(Year)

2022

(Role)

Lead Product Designer (UX/UI, Information Architecture, Design System)

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

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 challenge

• Portal felt dated and unintuitive — clients couldn’t find products easily.

  • Checkout process was slow, with multiple points of friction.

  • Internal teams had to handle too many manual support requests.

  • The platform lacked a consistent visual identity and design system, making updates expensive and inconsistent.

High-stakes context: Corporate clients expected an Amazon-like experience; FMG risked losing contracts without a modern solution.

My Role

  • Created scalable design system for catalog and checkout flows

  • Led end-to-end redesign of the e-commerce portal

  • Designed responsive UI with complex filtering/search needs

  • Partnered with dev and sales teams for feature alignment

Research & Discovery

  • Stakeholder Interviews: Learned that account managers were fielding repetitive calls from clients confused by the system.

  • User Feedback: Clients wanted faster search, better categorization, and a smoother checkout.

  • Competitive Benchmarking: Looked at Shopify, Zazzle, and Staples B2B ordering systems.

The Solution

Design Priorities:

  • Streamline navigation with clear product categories and robust search.

  • Modernize the checkout flow for speed and clarity.

  • Create a design system for consistency and scalability.

  • Add trust signals (brand logos, order history, confirmation emails).

Key Design Choices:

  • Dashboard home page with quick links to frequent orders and account info.

  • Product cards with large images, clear pricing, and CTA buttons.

  • Sticky cart preview so users always know what’s inside.

  • Streamlined checkout reduced from 5 steps to 3.

  • Design system in Figma with reusable components for long-term efficiency.

Visual Process

  • Wireframes: Restructured IA to make categories and ordering intuitive.

  • Mid-Fi Prototypes: Tested search + checkout flows with internal users.

  • High-Fi Mockups: Clean, corporate look with bold CTAs, simplified cart, and scalable design system tokens.

Outcome / Impact

  • Efficiency: Reduced checkout steps by 40%, cutting order time significantly.

  • Conversions: Estimated 15–20% increase in completed orders after launch.

  • Support: Decreased repetitive support calls as clients could self-serve more effectively.

  • Scalability: Design system enabled FMG to reduce new client portal launch time by 40%.


Reflection

This project demonstrated how streamlined flows and a scalable design system can deliver real business value. By focusing on both the end-user and FMG’s internal needs, the new portal provided a frictionless experience that helped clients order with confidence and allowed FMG to scale efficiently.

FMG

Redesigning a B2B E-commerce Portal

(Client)

FMG

(Year)

2022

(Role)

Lead Product Designer (UX/UI, Information Architecture, Design System)

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

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 challenge

• Portal felt dated and unintuitive — clients couldn’t find products easily.

  • Checkout process was slow, with multiple points of friction.

  • Internal teams had to handle too many manual support requests.

  • The platform lacked a consistent visual identity and design system, making updates expensive and inconsistent.

High-stakes context: Corporate clients expected an Amazon-like experience; FMG risked losing contracts without a modern solution.

My Role

  • Created scalable design system for catalog and checkout flows

  • Led end-to-end redesign of the e-commerce portal

  • Designed responsive UI with complex filtering/search needs

  • Partnered with dev and sales teams for feature alignment

Research & Discovery

  • Stakeholder Interviews: Learned that account managers were fielding repetitive calls from clients confused by the system.

  • User Feedback: Clients wanted faster search, better categorization, and a smoother checkout.

  • Competitive Benchmarking: Looked at Shopify, Zazzle, and Staples B2B ordering systems.

The Solution

Design Priorities:

  • Streamline navigation with clear product categories and robust search.

  • Modernize the checkout flow for speed and clarity.

  • Create a design system for consistency and scalability.

  • Add trust signals (brand logos, order history, confirmation emails).

Key Design Choices:

  • Dashboard home page with quick links to frequent orders and account info.

  • Product cards with large images, clear pricing, and CTA buttons.

  • Sticky cart preview so users always know what’s inside.

  • Streamlined checkout reduced from 5 steps to 3.

  • Design system in Figma with reusable components for long-term efficiency.

Visual Process

  • Wireframes: Restructured IA to make categories and ordering intuitive.

  • Mid-Fi Prototypes: Tested search + checkout flows with internal users.

  • High-Fi Mockups: Clean, corporate look with bold CTAs, simplified cart, and scalable design system tokens.

Outcome / Impact

  • Efficiency: Reduced checkout steps by 40%, cutting order time significantly.

  • Conversions: Estimated 15–20% increase in completed orders after launch.

  • Support: Decreased repetitive support calls as clients could self-serve more effectively.

  • Scalability: Design system enabled FMG to reduce new client portal launch time by 40%.


Reflection

This project demonstrated how streamlined flows and a scalable design system can deliver real business value. By focusing on both the end-user and FMG’s internal needs, the new portal provided a frictionless experience that helped clients order with confidence and allowed FMG to scale efficiently.

FMG

Redesigning a B2B E-commerce Portal

(Client)

FMG

(Year)

2022

(Role)

Lead Product Designer (UX/UI, Information Architecture, Design System)

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

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 challenge

• Portal felt dated and unintuitive — clients couldn’t find products easily.

  • Checkout process was slow, with multiple points of friction.

  • Internal teams had to handle too many manual support requests.

  • The platform lacked a consistent visual identity and design system, making updates expensive and inconsistent.

High-stakes context: Corporate clients expected an Amazon-like experience; FMG risked losing contracts without a modern solution.

My Role

  • Created scalable design system for catalog and checkout flows

  • Led end-to-end redesign of the e-commerce portal

  • Designed responsive UI with complex filtering/search needs

  • Partnered with dev and sales teams for feature alignment

Research & Discovery

  • Stakeholder Interviews: Learned that account managers were fielding repetitive calls from clients confused by the system.

  • User Feedback: Clients wanted faster search, better categorization, and a smoother checkout.

  • Competitive Benchmarking: Looked at Shopify, Zazzle, and Staples B2B ordering systems.

The Solution

Design Priorities:

  • Streamline navigation with clear product categories and robust search.

  • Modernize the checkout flow for speed and clarity.

  • Create a design system for consistency and scalability.

  • Add trust signals (brand logos, order history, confirmation emails).

Key Design Choices:

  • Dashboard home page with quick links to frequent orders and account info.

  • Product cards with large images, clear pricing, and CTA buttons.

  • Sticky cart preview so users always know what’s inside.

  • Streamlined checkout reduced from 5 steps to 3.

  • Design system in Figma with reusable components for long-term efficiency.

Visual Process

  • Wireframes: Restructured IA to make categories and ordering intuitive.

  • Mid-Fi Prototypes: Tested search + checkout flows with internal users.

  • High-Fi Mockups: Clean, corporate look with bold CTAs, simplified cart, and scalable design system tokens.

Outcome / Impact

  • Efficiency: Reduced checkout steps by 40%, cutting order time significantly.

  • Conversions: Estimated 15–20% increase in completed orders after launch.

  • Support: Decreased repetitive support calls as clients could self-serve more effectively.

  • Scalability: Design system enabled FMG to reduce new client portal launch time by 40%.


Reflection

This project demonstrated how streamlined flows and a scalable design system can deliver real business value. By focusing on both the end-user and FMG’s internal needs, the new portal provided a frictionless experience that helped clients order with confidence and allowed FMG to scale efficiently.