MORE WORK
MORE WORK
MORE WORK
MORE WORK
MORE WORK
MORE WORK
MORE WORK
EXM's distributors and sales agents had no self-service platform — every order, quote, stock check, and account request required direct contact with the internal team. As EXM grew its network across Canada and the United States, this manual process created bottlenecks for both clients and staff.I designed and built a multi-role B2B customer portal from scratch, giving distributors, sales agents, and internal teams their own tailored dashboard — connected to live ERP data from Microsoft Dynamics.
Client
EXM Manufacturing Ltd.
Year
March 2025 - April 2026
Category
Product Design
B2B Platform
ERP System
·
Led end-to-end UX design as the sole designer, owning the full process from stakeholder discovery through final UI across five distinct user roles
·
Collaborated closely with the sales team to understand distributor workflows, pain points, and the data each role needed day-to-day
·
Worked directly with the development team throughout the build, bridging design decisions with technical feasibility and implementation
·
Designed a phased launch strategy — starting with a simplified MVP to gather real feedback, then iterating toward the full role-based portal
·
Integrated AI-assisted chat support into the portal design, giving users a faster way to track orders and find information without navigating multiple pages
Clients had no way to check stock, track orders, or manage quotes independently — every request required contacting the sales or support team directly, creating delays and bottlenecks on both sides.
Sales agents and managers had no centralized view of their customers' orders, quotes, or account activity — making it difficult to follow up proactively or spot issues before they became problems.
Opening a new distributor account required back-and-forth emails with the internal team. There was no structured approval flow, no self-registration, and no way for larger clients to manage their own sub-accounts independently.
Results were measured after launch through staff feedback and user testing across all five roles.
Task Completion Rate
Users across all roles could successfully complete their key tasks without needing to contact the internal team for help.
Average Stock Check Time
Clients and sales agents could confirm stock availability in under 30 seconds — down from multiple emails and phone calls.
Reduction in Support Tickets
Clients could now self-serve for orders, quotes, stock, and account management — significantly reducing inbound requests to the support team.
Understanding five different roles before designing a single screen.
Without a formal research budget, I took a structured discovery approach — meeting directly with each stakeholder group to understand how they worked day-to-day. This included the sales team, support team, admin team, quotation team, operations team, and existing clients. I also reviewed competitor portals from other industries to identify best practices in multi-role B2B platforms. Rather than designing one system and fitting everyone into it, I mapped each role's specific needs separately — which became the foundation for the role-based architecture.
Before finalising the design, I walked key team members through an interactive Figma prototype to validate the role-based structure and gather final feedback before development.
Insights from meetings with internal teams, sales agents, and existing distributor clients that directly shaped the portal's role-based design.
1. Each role needed completely different information on their homepage
Conversations with the sales team, support team, and distributor clients revealed that what mattered to each group was entirely different — sales agents wanted performance metrics, clients wanted order status, and admins wanted full platform visibility. This directly drove the decision to build five distinct dashboards rather than one shared view.
2. Stock availability was the single most requested self-service feature
Across almost every stakeholder group — sales agents, clients, and the support team — the most common pain point was having to contact someone just to check if a product was in stock. This shaped the Stock Overview and Stock Lite features, and the colour-coded availability indicators built into both.
3. Clients needed to manage their own team's access
Larger distributor clients had internal teams who needed portal access, but every new account required back-and-forth with EXM's admin team. This led to the tiered account structure — where approved clients can create and manage sub-accounts for their own staff independently.
Build Role-Based Self-Service
Each stakeholder group had distinct needs that weren't being met by any existing tool — creating a clear opportunity to design tailored dashboards that let every role work independently without relying on other teams.
Centralize Order & Quote Visibility
Sales agents and managers had no single place to monitor their customers' activity — presenting an opportunity to surface real-time order, quote, and RMA data in one centralized, role-specific view.
Automate Account Management
The manual account approval process was a bottleneck for both EXM and its clients — creating an opportunity to build a structured self-registration and approval flow that scales as the clients' network grows.
Insights from stakeholder meetings, competitor research, and internal team workshops that directly shaped the portal's design decisions.
1
Mapping out what each of the five roles needed — and more importantly, what they didn't need to see — was the most critical design decision of the project. Without this step, the portal would have become as overwhelming as having no portal at all. This shaped the entire information architecture before a single screen was designed.
2
Every group — from distributors to sales agents to the support team — flagged stock checking as their most frequent and frustrating manual task. Prioritizing this feature in the MVP phase meant the portal delivered immediate value from day one, building trust with users before the full system was complete.
3
Reviewing B2B portals outside the electrical enclosure industry — particularly in manufacturing and distribution — revealed patterns that EXM's clients already expected but weren't getting: real-time tracking, self-service quoting, and tiered account management. This raised the design standard and justified building a more sophisticated system than originally scoped.
TO EMPOWER
clients and sales agents to self-serve — checking stock, tracking orders, managing quotes, and handling accounts without contacting the internal team.
TO CENTRALIZE
all order, quote, RMA, and sales data into one role-based platform, giving every team member a focused view of exactly what they need to do their job effectively.
TO SCALE
EXM's clients network by replacing manual account management with a structured self-registration and approval flow — reducing admin overhead as the client base grows.
A unified portal, five distinct experiences.
The existing process had no digital layer—everything was handled through email, phone calls, and spreadsheets. The redesign introduced a structured, multi-role portal in which each user type lands on a dashboard tailored to their workflow. From the clients checking stock and placing quick orders, to the sales manager monitoring team performance and chasing high-value quotes, every role has a focused interface connected to live ERP data from Microsoft Dynamics GP.
Building a multi-role B2B portal meant every design decision had to serve five different users without creating five completely separate systems.
Role-based architecture over a shared interface
Rather than building one dashboard for everyone, I mapped each role's daily needs separately and designed five distinct interfaces — ensuring every user sees only what's relevant to their workflow without unnecessary noise.
Phased launch to validate before scaling
Instead of building the full system upfront, I launched a simplified Stock Lite MVP first to gather real feedback from sales agents and distributors. This confirmed the core need and shaped the priorities for the full portal.
Live ERP data connection for real-time accuracy
All dashboards pull live data from Microsoft Dynamics 365, ensuring stock levels, order status, and pricing are always accurate — eliminating the need for manual updates or back-and-forth between teams.
AI chat assistant for faster self-service
An AI chat interface was integrated across all roles, allowing users to ask questions, track orders, and find information conversationally — reducing dependency on the support team even further.
Before designing any screens, I mapped how information would be structured across five distinct roles. Every navigation decision, feature boundary, and content hierarchy was defined at this stage — before a single UI element was placed.
1. One portal entry point branches into five completely separate navigation structures
2. Each role sees only the data and actions relevant to their daily workflow — nothing more
3. Super Admin, Admin, Sales Manager, Sales Agent, and Distributor each have a distinct homepage, nav items, and permissions
1. Phase 1 — Stock Lite (MVP)
The first version was a single flat list sorted alphabetically and numerically. There was no search, no filtering, and no way to narrow down results. It was intentionally simple — fast to ship and enough to validate that stock visibility was the right problem to solve first.
2. Phase 2 — Standard Product Stock Overview
As user needs became clearer, the experience was restructured into a deliberate three-step flow:
Step 1 — Select Category
Choose a product category to narrow the catalogue before any list appears.
Step 2 — Search & Filter
Search by part number, keywords, or cross reference. Filter by dimension, material, and product format. A live map shows stock by warehouse location.
Step 3 — Select Location
Confirm live stock and location-specific pricing. Out-of-stock items surface a "Find Alternatives" action directly in the list.
The portal introduced a formal account approval flow with three defined states — Pending, Approved, and Rejected — each with a clear owner and action. Admins review incoming registrations in one centralized view, with the ability to filter by status, search by company or email, and act directly from the list.
Beyond the approval flow, approved distributors unlock the ability to create and manage sub-accounts for their own team independently — replacing ongoing admin requests with a self-managed hierarchy. This parent account → sub-account structure was an IA decision that scales as EXM's distributor network grows.
Before the portal, clients had no visibility into where their order was — every status check required a phone call or email to the shipping team.
Designing the tracking experience meant first deciding what states needed to exist and who owned each one. The full status sequence — Order Received → Building → In-Transit → Delivered — was a structural decision, not just a visual one.
Each state has a defined trigger and owner — from production marking a build start, to the shipping team triggering in-transit on label scan — giving clients a realistic timeline even before the carrier picks up.
All accessibility decisions were documented in the living design system — including contrast ratios, component states, and WCAG AA compliance notes.
Phase 1 was shipped without formal accessibility compliance. The focus was on validating the concept quickly, and accessibility had not yet been built into the design system.
quickly validating the conceptIn Phase 2, as the portal scaled to five roles, WCAG 2.1 AA compliance was formalised across the entire design system
Key decisions included:
- Colour is never used alone — every status state pairs a colour dot with a text label, so meaning is always clear regardless of how a user perceives colour
- Contrast ratios verified across all colour tokens — text, buttons, and status indicators
- Typography scale maintained readable sizes across all five role dashboards
are - Focus states built into all interactive components for keyboard navigation
If I could go back, would I have built accessibility in from Phase 1?
Yes. The phased approach was the right call to ship quickly and validate, but accessibility is much harder to retrofit than to build in from the start. On my next project, I would advocate for at least a basic accessibility checklist even at the MVP stage.
Built in Figma and documented as a living HTML web page, the Portal Design System covers color tokens, typography, spacing, size, corner radius, icons, and WCAG 2.1 AA accessibility compliance across all components. Variables are used throughout to control color, spacing, font, and visibility — making updates consistent across all five role-based interfaces without rebuilding individual components. The system was built using Claude connected via MCP to Figma, enabling design tokens and WCAG AA compliance to be verified and updated directly within the design environment. The HTML documentation format means the development team always has direct access to the latest design decisions without needing to open Figma.
Role-Based Dashboards
Five distinct homepages tailored to each user role — Super Admin, Admin, Sales Manager, Sales Agent, and Clients — surfacing only the data and actions relevant to their daily workflow.
Stock Overview
Real-time inventory browsing by product category with colour-coded availability indicators, direct access to 2D drawings and 3D STP files, and an alternatives modal for out-of-stock items.
Order Tracking
Live shipment tracking with map view, per-item progress indicators (Order received → In-transit → Delivered), and carrier information including tracking number and contact details.
Quick Order
Repeat buyers can upload a CSV or PDF file to place bulk orders instantly without browsing the product catalogue manually.
Invoice or Order Management
A centralised order and invoice tracking hub giving distributors and internal teams real-time visibility into order status, invoice history, and shipment details — replacing manual email follow-ups with a structured, searchable view filtered by date, status, customer, and reference number.
Quote Management
Clients can view, track, and manage open and closed quotes in one place, with a quotes vs orders analytics chart on the dashboard.
RMA Management
Clients and internal teams can track return merchandise authorizations with status indicators (Processing, Completed, Rejected, Closed) and PDF export per entry.
Product List
A filterable product catalogue within the portal allowing users to browse by category, NEMA/IP rating, dimensions, and material — with starred favourites, dimension range selectors, and direct Add to Cart or Ask a Question actions.
Account Registration & Approval
A structured self-registration and approval flow replacing manual email processes — with three defined states (Pending, Approved, Rejected), centralised admin review, and a parent account → sub-account hierarchy that lets approved distributors manage their own team access independently.
Order & Quote Analytics
Sales managers and admins can track orders placed, RMAs, cancellations, top sales items, and regional order-to-build breakdowns in real time.
AI Chat Assistant
Integrated across all roles, allowing users to ask questions, track orders, and find information conversationally without navigating through multiple pages.
PROBLEM
EXM works with multiple carriers, but none of them provide API access to tracking data — meaning there was no way to pull live shipment status directly into the portal. The only data available was the tracking number itself, and even that couldn't always be searched online depending on the carrier. Customers who wanted to know where their order was had no choice but to call or email the shipping team directly.
Design Decision
Rather than waiting for a perfect technical solution, I designed a practical tracking experience around the data that was available. The portal surfaces the carrier's tracking number alongside their phone number, email, and online tracking link where available — giving customers everything they need to check status themselves. In parallel, I designed a production-to-shipping status flow where the production manager marks when an order starts building, and the shipping team triggers the "in-transit" status when scanning the shipping label — using estimated process times to give customers a realistic timeline even before the carrier picks up.
Outcome
The live version currently provides carrier contact details and tracking numbers, with the status flow actively being improved as EXM refines label scanning within Microsoft Dynamics. The design laid the groundwork for a fully automated tracking experience — built to scale as carrier integrations become available, without needing to redesign the interface.
1
Designing for multiple roles taught me that the hardest part isn't building the features — it's deciding what each role should NOT see. Restraint is a design decision, and getting that right made the whole system feel focused rather than overwhelming.
2
The phased launch approach was one of the best decisions on this project. Shipping a simplified MVP first gave us real feedback before committing to the full build — and it built trust with users early, which made adoption of the complete portal much smoother.
3
The order tracking challenge taught me that good design isn't always about having perfect data. Sometimes the most valuable thing you can do is design around the constraints you have — and build a foundation that scales when those constraints are eventually removed.
