Sedex

Background

Sedex had a problem. Customers were being driven across two separate platforms to access their information, and the legacy platform was costing the business £2 million a year to run. The existing design system had failed on almost every dimension — poor accessibility, no responsive behaviour, and typefaces entirely unsuited to a data-heavy product.

Compounding this, customer feedback was clear: competitors were being rated as simpler and easier to use, despite offering a fraction of the data depth that Sedex provided. The platform was getting in the way of its own product.

The business was approaching a significant acquisition, and investors had directly raised questions about the platform's future. The relaunch — and the design system underpinning it — needed to demonstrate not just usability, but a credible, investable vision for where the product was going.

My role was to develop the vision for the new platform and design system, and deliver it within the project timeframe — running alongside and in support of the buyer proposition strategy relaunch.

The Existing Platform

The screenshots below show the two platforms customers were navigating between — a fragmented experience that immediately signals the problem. Visually inconsistent, built on an ageing design system with no responsive foundation, complex tables made no attempt to adapt to smaller screens, and there was no keyboard control or accessibility support. Typography was poorly suited to data-heavy screens, colour usage was inconsistent and failed accessibility standards, and the navigation offered little in the way of clear hierarchy or user-type tailoring. For customers managing complex global supply chain data, the platforms were getting in the way rather than enabling the work.

North star - for stakeholder approval

Before a single component was built, I created a north star deck to align stakeholders and build momentum. The presentation was deliberately calibrated for an executive audience – clear vision, light on detail, heavy on direction – supported by a conceptual prototype to provide a glimpse of the future platform.

The timing was contested. The decommission of the legacy platform had a fixed deadline, and there was real resistance to replacing the design system at the same time. The concern was understandable with an already demanding programme. But the counter-argument was simple: if we didn't do it now, we never would. A hard deadline was the only forcing function we'd get. We made the case, got the buy-in, and moved forward.

AXIS Design System

The pillars I set for the new design system and platform refresh:

Brand alignment without compromise – Adopt the new Sedex brand while protecting semantic colour logic. Brand red was the main tension point and required careful handling to avoid clashing with error and warning states.

Responsive by default – Allow users to complete tasks efficiently across any screen size, with a phased rollout plan to bring legacy screens in line as initiatives allowed.

Surface what matters – Prioritise key information on the new dashboard and throughout, reducing the time users spent hunting for what they needed most.

Clear, human language – The platform was dense with acronyms, technical jargon, and oversized tooltips that even long-serving employees struggled to parse. With customer staff constantly evolving, assuming institutional knowledge was never a safe bet. We introduced a clear language principle across every touchpoint — tooltips, banners, error states, Gainsight flows and beyond — with a voice that was authoritative yet approachable.

Faster data access – Make data downloads quick and intuitive. The previous experience involved waits of up to ten minutes.

Integrated data visualisation – Replace Thoughtspot with our own data visualisation layer built through Highcharts, enabling us to close down a costly third-party dependency. Accompanied by comprehensive usage guidelines covering colour rules, chart selection for categorical and sequential data, and guidance for all teams working with data across the business.

Smarter global navigation – Introduce a sidebar navigation tailored to individual user types without compromising screen real estate.

Micro animations – Bring moments of considered motion to reinforce actions, guide users, and add a layer of craft to the experience.

WCAG 2.1 / EAA compliance – Full adherence to European Accessibility Act standards across colour contrast, keyboard control, and beyond.

Guided onboarding and intuitive patterns – Support users through their first experiences with Gainsight-powered onboarding flows and contextual tooltips, clear signposting throughout, and UI patterns grounded in consistency and familiarity. By reducing unnecessary choice and leveraging recognisable conventions – Hick's Law in practice – we lowered cognitive load and helped users find their footing faster.

Component Architecture

With the north star agreed, the next challenge was scoping what needed to be built. Working across the four pods, I collaborated with tech leads, designers and PMs to sketch out the early buyer proposition flows and identify which components could be shared and reused across the platform. This became the foundation of the component inventory — a working list of everything that needed to be designed and built.

In discussions with tech and front-end leads, we made the decision to build using headless components. This gave us flexibility across multiple libraries, reduced dependency on any single framework, and freed us from the constraints of Material UI — which had caused real friction on our more complex, data-heavy screens.

From there I T-shirt sized the full component list in partnership with our front-end leads, stress-testing the scope against our deadline and available resource. The sizing was presented to stakeholders with full transparency — including a contingency plan for additional support from external contractors with both front-end and back-end expertise, who had already been identified and brought into the project should we need them.

Selling the Vision

While the new buyer proposition flows were in development, the sales team needed something tangible to take to customers. The removal of Thoughtspot — however slow and frustrating it had become — and the consolidation of information across platforms was causing anxiety among long-standing users. These weren't small accounts. Sedex's customer base included some of the largest organisations in the world — McDonald's, Walmart, and others at that scale — so managing confidence during the transition mattered enormously.

I built a Figma prototype of the new journey that the sales team could use either as a tap-through demo or export as a video walkthrough. It gave them something compelling and concrete to put in front of customers — shifting the conversation from what was being taken away to what was coming, and why it was better.

Building the System

With the architecture scoped and sized, we moved into the build. The core component library covered the full range of interaction patterns the platform required — selectors, tabs, tables, filters, buttons, form elements and beyond. Given the data-heavy nature of the product, particular care went into the risk profile communication, interactive scrollable tables and filter components, which needed to perform across a wide range of screen sizes and data densities without sacrificing clarity or usability.

Data Visualisation

Replacing Thoughtspot meant owning data visualisation entirely. After researching available libraries we landed on Highcharts, which gave us the flexibility and performance the platform needed. Alongside the integration we built out comprehensive usage guidelines — covering colour rules for categorical and sequential data, chart selection logic, and governance for how visualisation should be applied consistently across all areas of the business.

Documentation & Guidelines

Every pattern and component was documented with usage rules, dos and don'ts, and implementation guidance — giving designers and developers across the pods a single source of truth to work from. The full library is available on request.

Rollout Strategy

The rollout was phased and deliberate. Colour palettes and typography were switched across legacy screens first, bringing visual alignment quickly while the full component replacements followed as product initiatives allowed. This kept the deadline achievable without compromising the integrity of what we were building toward.

Testing

Testing was embedded throughout the process with small customer groups, but as the platform approached launch we ran a large-scale usability workshop to stress-test the experience properly. Participants, drawn from both the Sedex customer base and internal staff — were asked to complete a series of defined tasks across the platform, surfacing any friction in UX logic, flow and navigation before it reached production.

The sessions covered the new global navigation, the core buyer proposition journeys, and the broader platform design and experience. Participants tested across all breakpoints, and we were deliberate about including people with accessibility needs — testing keyboard control, screen reader behaviour and other assistive technology use in real conditions rather than as an afterthought.

Findings fed directly into a round of iteration and bug fixing before launch, ensuring what went live had been validated by real users under realistic conditions.

Outcome

The legacy platform was decommissioned on schedule, consolidating two platforms into one and eliminating £2 million in annual running costs. The new platform launched fully accessible to WCAG 2.1 and European Accessibility Act standards.

The results spoke for themselves. Mobile and tablet usage increased measurably as users could finally access the platform effectively across devices. Feedback from some of the world's largest organisations – including long-standing enterprise customers — was overwhelmingly positive, with particular praise for the platform's usability, simplicity, and data visualisation.

The relaunch also laid the groundwork for continued improvement post-launch – resolving edge cases and bugs, introducing card format for tables on mobile, dark mode, and a drawer slide-in pattern for filters that had been overloading page layouts. The platform was now in a position to evolve properly, rather than just survive.

Shortly after the relaunch, the acquisition completed successfully — with the platform's transformation playing no small part in demonstrating the product's value to investors.