Building an Enterprise Design System for Livingston International

Introduction

Livingston International, a global trade advisor with over 75 years of expertise in customs brokerage, trade compliance, and freight forwarding, processes hundreds of thousands of shipments monthly. With a workforce of 3,000 employees and a diverse suite of web applications managing real-time communication, shipment statuses, and customer insights, consistency across their digital ecosystem became critical.

In 2021, AUX Studio partnered with Livingston to address inconsistencies and inefficiencies in their digital products. By 2024, we delivered a scalable Enterprise Design System (EDS) that has transformed Livingston's approach to design and development, significantly improving efficiency, collaboration, and customer satisfaction.

The Challenge

Unifying fragmented frameworks and workflows

Livingston faced a complex challenge: their digital products, developed on varied frameworks and tech stacks, lacked standardisation.

Each team implemented unique approaches, resulting in:

• Inconsistent design and user experiences
• Limited reuse of code and components across projects
• Slower development cycles due to duplicated efforts
• Absence of responsive design, impacting usability

Our assessment revealed UI and branding inconsistencies, emphasizing the need for distinct web and product design approaches.

Without a centralised design framework, development teams were solving similar problems in silos, leading to inefficiency and escalating costs.

Our Approach

A phased implementation for easier adoption and success

We began by thoroughly analysing Livingston's digital landscape to identify inconsistencies and opportunities for improvements in the design and management of React components.

Analysis revealed design inconsistencies and guideline deviations, highlighting areas for improvement.

Our phased approach included:

• Proof of Concept (POC): Developed and tested a scalable architecture in a User Acceptance Testing (UAT) environment.
• Framework Standardisation: Unified front-end frameworks and introduced responsive design standards.
• Enterprise Design System Wiki: Centralised design guidelines, reusable components, and documentation to streamline collaboration.
• Team Onboarding: Provided training for development teams, ensuring smooth adoption of the new system.

This strategy ensured that each application could integrate seamlessly, maintaining flexibility while addressing specific needs.

The Solution

A robust, custom experience for Livingston employees and customers.

The Livingston design system is a comprehensive framework of reusable components, templates, and design guidelines. Key features include:

• 90+ Components: Over 90 custom components designed specifically for Livingston users using Livingston data - a consistent approach to interface and interaction design.
• Mobile-first For All Products: Mobile responsive design and improved usability across all devices and platforms.
• Centralised Resource Hub: The Design System Wiki is the single source of truth, streamlining workflows and enhancing collaboration for developers and product managers.
• Techstack Modernisation: Scalable front-end architecture supports faster upgrades to core components and NPM packages.

By 2024, the system had been successfully deployed across eight enterprise applications, transforming Livingston's digital ecosystem with a unified approach to product design.

The Impact

Driving efficiency, consistency, and innovation

The Livingston design system has empowered product teams to work faster and more independently.

Key outcomes include:

• Release Cycles: Teams moved from quarterly to monthly releases, improving responsiveness to customer needs.
• Improved Collaboration: A shared framework fosters cross-functional alignment and reduces technical debt.
• Higher Customer Satisfaction: Consistent and intuitive user experiences elevate Livingston's digital presence.

The Livingston Design System Wiki serves as a vital resource for maintaining interface and development consistency, fostering idea generation and encouraging team collaboration.

With streamlined workflows and reusable components, Livingston has seen a significant reduction in development time and cost, allowing teams to focus on innovation.

Today, the design system is used by multiple Livingston products.

What's Next

Future-proofing Livingston's digital products and adopting new features.

AUX Studio's long-term approach to solving design and engineering challenges means that Livingston's leadership can confidently focus on new blue-sky projects:

• Generative AI Integration: New AI-driven features to be considered and added consistently.
• Smart Wiki Enhancements: Adding AI-powered search and dynamic updates to the Design System Wiki.
• Continual Tech Stack Upgrades: Ensuring predictability and scalability of techstack upgrades.

The Livingston design system exemplifies how a well-executed design framework can transform enterprise operations. As new projects emerge, Livingston is poised to deliver innovative solutions with speed, consistency, and impact.