Building a case for Design System

A UK-based B2B telecom network provider had doubled customer base in two years and to take off pressure from Service Manager team, they rolled out a Customer Online Platform. The rationale was that the customers would use it for checking connectivity and getting quotes, creating and tracking orders, managing service operations, and handling invoices.

By 2020, not many had adopted the self service platform even when they tried conducting training sessions to enrol users from their customers without any measurable lift. They tried a mobile app too but only under 150 sign-ups.

This is when they hired my agency and I got involved.

How does one diagnose a problem, let alone suggest a solution, when there's no way to interview the actual end users?

So we fallback to industry best practices for Desk Research

Heuristics Analysis as taught in Georgia Tech HCI (CS 6750) curriculum

A comprehensive review of the 450+ evaluated interactions indicates that the product's most critical vulnerabilities lie in Tolerance (56), Documentation (45), and Discoverability (44). Together, these high-frequency offences mean that the user cannot

Discover what to do: They cannot easily find features or see the current state of the system (Discoverability).
Recover when they make a mistake: They cannot easily undo actions, and the system fails to prevent slips (Tolerance).
Find help when stuck: They cannot look up clear instructions or troubleshooting guides to solve their problems (Documentation).

Competitive Analysis a UX-focused SWOT Analysis

A UX-focused SWOT takes your heuristic data and categorises it immediately into strategic business buckets. I converted heuristics evaluation findings into internal forces, and competitor offerings into external forces.

Weaknesses: Critical vulnerability in product safety net due to 56 Tolerance offences.
Threats: Competitor B has highly structured, intuitive workflows.
Opportunities: No competitor has good in-app Documentation; if we fix our 45 documentation bugs, we can win on self-service onboarding.

Interviews with Service Manager teams

They were using the portal on behalf of their customers revealed that the platform was most useful for Network Operations, but neglected executive and business teams who also required account insights.

"The bigger enterprise accounts had many users accessing the same company account, depending on department: Procurement, responsible for placing new orders; Finance, responsible for setting billing centers and paying bills; Network Ops & Field Engineers, managing network performance and coordinating with the service assurance team during outages and maintenance, unlike smaller companies, which had fewer users, often with overlapping responsibilities."

Understanding the User Ecosystem

In B2B, a single account is rarely a single person; it is a fluid ecosystem. How many people interact with the platform—and why—depends entirely on the size of the organization. A two-person startup might have one founder handling procurement, billing, and network operations simultaneously. A large enterprise will split those identical tasks across a dozen people in four isolated departments. Therefore, any design that assumes a static, single 'user' is fundamentally broken for most B2B accounts.

Takeaway: Design for role-based adaptive views rather than a rigid, static interface. Empower administrators and end-users to configure their information to their team’s operational workflow.

Not just redesign, also organizational restructure

Because distinct internal business units built their own portal features in silos, the underlying data was often inconsistent—using different naming conventions and definitions for the exact same metrics. The portal was ultimately rendering the client’s internal org chart rather than a cohesive user experience.

A surface-level redesign would have failed. The poor UX was merely a symptom; the core issue was organizational and systemic. Lasting product impact required driving change across strategy, structure, and execution simultaneously. To achieve a lasting fix, transformation had to happen across three distinct levels:

Organization Level: Secured executive backing and funding using evidence-based design metrics.
Team Level: Consolidated fragmented business teams into a single, cross-functional portal squad.
Project Level: Executed two parallel tracks: establishing a Design System while rolling out redesigned modules.

Spinning a Design System as we redesign

Once the centralised "online portal" team was established, I advocated for building a scalable Design System alongside the redesign. This ensures long-term cohesive experience for upcoming feature and tools.

Establishing the Team as a Strategic Partner

A joint Design System team (DesOps), comprising myself, a UX engineer from my agency, and two Experience Managers from the client side was established. Our first mandate was to take the 8 core modules and 32 connected sub-systems, finding our footing among three existing working groups:

Marketing: We anchored the system to their brand guidelines while auditing and dropping non-compliant components to enforce strict WCAG accessibility standards.
Product & Domain Teams: Teams across Infrastructure, Connectivity, WAN, and Voice were accustomed to launching tools in isolation. Instead of being an operational bottleneck, we earned early buy-in by demonstrating how an off-the-shelf framework (Angular Material) can fail for their complex B2B scenarios and therefore building a case for in-house built, adaptable patterns.
Engineering Teams: Rather than forcing a single rigid stack across disparate tech environments, we partnered with developers to build framework-agnostic components where possible. Together, we audited component drift to prioritize the rebuild roadmap based on technical debt.

Getting team together

Building the Backlog

Screenshots

Getting team together

1/3

Execution & Delivery
While managing cross-functional alignment, I spearheaded the core deliverables: authoring documentation, creating designer/developer kits, defining the dev backlog, and leading API and technical reviews.

2 months & 5 core tiers of Design System:

Foundations
Components
Patterns
Experiences
Data Viz

Validation & Early Adoption

To de-risk deployment, we validated the system against active projects in flight before touching live production environments. This allowed us to clear technical debt early and run an Early Adopters Program to stress-test and refine the system against real-world usage.

Proving in the field

With the Design System foundations established, we put it to the ultimate test by tackling the platform’s most complex, high-friction module: order management. It is far from standard e-commerce order tracking—it is an information-intensive ecosystem with assured pauses between creation of an order and final delivery.

Incomplete Data Inputs: Customers frequently reached stages where required provisioning details were missing, blocking order placement.
In-Flight Modifications: Orders required flexibility for mid-delivery change requests without breaking current progress tracking.
Multi-Stakeholder Communication: Different users needed distinct notification trails, audit logs, and reference points across the order lifecycle.

Unmoderated Testing via Optimal Workshop

Rather than relying on subjective opinions, we validated the flows empirically using unmoderated testing of prototypes. We conducted 5-second tests targeting high-stress scenarios to confirm whether users could instantly identify order states, pinpoint missing inputs, and determine their next required action.

Long-Term Enablement & DesOps Governance

Beyond the dashboard and order management, we applied the design system to every remaining portal module—including billing, account management, and service operations. With foundational patterns and component governance established, standardizing these workflows became an efficient assembly process rather than a ground-up redesign effort.

The DesOps team transitioned from initial rollout to active governance, continuing to build framework-agnostic components and expand the design system.
DesOps team authored comprehensive online help documentation, interactive guides, and instructional videos—ensuring both internal product teams and external clients had clear, ongoing support as the platform evolved.

The dual-track approach of building a Design System while testing high-friction modules delivered immediate results and a foundation for scalable growth.

Reduced Load on Service Managers as action-first workflows enabled clients to self-serve order tracking and account management.

Positive Reception for Configurable Dashboard with re-orderable widgets directly addressed the diverse needs of users and therefore, it became one of the platform's most praised updates.

writika bhaskar