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 365.
Client
EXM Manufacturing Ltd.
Year
January 2025 - April 2026
Category
Product Design
B2B Platform
ERP & CRM 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
Distributors 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
Distributors and sales agents could confirm stock availability in under 30 seconds — down from multiple emails and phone calls.
User Satisfaction Score
Collected from internal teams and distributor feedback after launch, reflecting strong adoption across all five user roles.
Reduction in Support Tickets
Distributors 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 distributor 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.
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, distributors 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, distributors, 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. Distributors 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 distributors 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 distributor clients — creating an opportunity to build a structured self-registration and approval flow that scales as the distributor 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
distributors 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 distributor 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.
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 distributor 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 365.
Building a multi-role B2B portal meant every design decision had to serve five different users without creating five completely separate systems.
Reduced inbound support tickets by 70% as distributors could self-serve for stock, orders, quotes, and account management independently.
Achieved 95% task completion rate across all five user roles, confirming the role-based structure matched how each team actually worked.
Cut average stock check time to under 30 seconds — down from multiple emails and phone calls to the internal team.
Delivered an 8.5/10 user satisfaction score from internal teams and distributor feedback after launch.
Enabled distributors to manage their own sub-accounts independently, reducing admin workload for the EXM internal team.
1. 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.
2. 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.
3. 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.
4. 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.
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 Distributor — 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.
Quote Management
Distributors can view, track, and manage open and closed quotes in one place, with a quotes vs orders analytics chart on the dashboard.
RMA Management
Distributors and internal teams can track return merchandise authorizations with status indicators (Processing, Completed, Rejected, Closed) and PDF export per entry.
Account Management
Self-registration with structured approval flow, tiered sub-account creation for larger distributors, and user management for internal admins.
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.
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.
