3M B2B Service Automation Portal

Overview

3M needed to modernize its B2B service automation portal—a critical tool for business customers to manage orders, resolve service issues, and access key account data. The legacy platform was underperforming: it lacked design consistency, presented unintuitive flows, and over-relied on customer service representatives (CSRs) for basic support needs.

My role as Lead Designer was to reimagine the experience from the ground up. I led a small team of two junior designers, partnered closely with product and engineering, and directed all stakeholder-facing presentations and reviews.

The Problem

The existing 3M portal made resolving order-level issues confusing and time-consuming. Users faced limited visibility into problems like mismatched pricing or invalid materials, and resolution required external communication with account reps or CSRs. This created bottlenecks and consumed significant internal resources.

Key pain points:

Fragmented workflows and redundant steps
Unclear options for resolving issues
Lack of real-time visibility and feedback
Over-reliance on CSRs for common tasks
Design inconsistency with 3M’s global standards

‍

Goal

To create a user-friendly, scalable service automation portal that empowers business customers to resolve issues independently, confidently, and efficiently—while reducing CSR dependency and aligning with 3M's broader enterprise design ecosystem.

‍

The Solution

We designed a fully self-service portal experience that shifted control to the user while dramatically reducing internal support strain. Key components included:

A structured, intuitive resolution interface for common order issues
Smart defaults and confirmations to reduce decision friction
Integrated product detail views and material availability logic
A new embedded chatbot that triaged issues, surfaced context-aware help, and routed escalations only when needed
Modular UI components built for scalability and long-term maintainability
A user flow architecture aligned with 3M’s enterprise design system, ensuring consistency and extensibility across the ecosystem

‍

My Role

Partnered with the UX Director (agency-side) to align with client strategy—while independently leading design execution and stakeholder presentations.
Led UX and UI design across all core flows and portal modules
Managed and mentored two designers
Translated business requirements into user-centric interface logic
Extended the 3M design system to meet B2B-specific needs
Delivered dev-ready prototypes and interaction specs

‍

The Impact

Created a streamlined, self-service resolution path for common order issues
Improved clarity, feedback, and actionability across key flows
Significantly reduced CSR involvement through automation and UX enhancements
Introduced a scalable chatbot experience that now acts as a first line of customer service
Delivered a scalable, maintainable interface aligned with 3M design standards

‍

Design thinking

Stakeholder Discovery

We began by auditing the current portal and facilitating collaborative workshops with product, engineering, and support teams. These revealed the most frequent issues customers experienced and highlighted where the design needed to step in. A major insight: CSRs were fielding hundreds of routine support requests that could be automated through better UX.

‍

Experience Mapping

User Flow: Resolving a Line Item Issue

To support 3M’s service automation goals, we mapped out resolution pathways for two of the most common order-level issues: mismatched pricing and invalid materials. This flow illustrates how a business user can identify a flagged line item, evaluate resolution options (such as accepting, disputing, replacing, or canceling), and complete the process through confirmation.

The logic is modular, responsive to different issue types, and designed to reduce dependency on customer support teams—streamlining resolution and resubmission.

‍

‍

Self-Service UX Strategy

To reduce CSR load, we designed intuitive paths that empowered users to resolve issues independently. This included:

A structured resolution interface with smart defaults and confirmations
Integrated product availability checks and PDP links
A new chatbot assistant embedded in the portal to handle common questions, guide users through resolution flows, and escalate more complex issues when necessary
Context-aware help within the portal to reduce confusion at key decision points
A tiered support model that allowed customers to complete most actions without needing to contact a rep

‍

Design & Prototyping

Working in Figma, I translated these flows into a modular UI grounded in 3M's design system. I extended several components to better suit B2B use cases, ensuring flexibility without compromising consistency.

‍

Iteration & Collaboration

Through multiple rounds of internal design critique, PM reviews, and stakeholder alignment, we refined the flow for simplicity, accessibility, and speed to resolution. Each step focused on reducing friction and minimizing the need for manual support.

‍

Finished product

This project emphasized the power of systems thinking, thoughtful collaboration, and user-centered design in complex enterprise environments. Even without full access to formal user research, I was able to align with internal SMEs, define critical flows, and lead a small team toward high-impact outcomes.

‍

By transforming a support-heavy service model into a self-service, user-driven experience, we not only delivered a more efficient tool for 3M's business customers but also demonstrated the business value of strategic UX. The chatbot integration and modular resolution logic reduced CSR workload and elevated the overall experience.

‍

This case study highlights my ability to lead with clarity, work cross-functionally, and deliver scalable solutions grounded in real user needs and business goals. It’s a strong reflection of my leadership approach: balancing vision with execution, strategy with systems, and outcomes with empathy.