Announcing the new LSX Tour Operator Design System

Announcing the LSX Tour Operator Design System on Figma.com! This toolkit streamlines travel website design with a unified library of components and styles inspired by safaris and the African bush. Explore the full prototype and transform your web projects today!

Streamline your travel website design. Use our unified design system for a consistent and efficient design workflow.

We are thrilled to announce the launch of the LSX Tour Operator Design System, now available on Figma.com! This new design system is an essential toolkit for designing and building travel and tourism websites using the LSX Design theme. Here’s a behind-the-scenes look at our journey to create this robust system.

Background and Inspiration

The idea for the LSX Tour Operator Design System emerged from the necessity to redesign our Tour Operator plugin. By forking the LSX Design System, which already contained a comprehensive set of variables and atomic components, we were able to save time and build upon a solid foundation.

Design Process

Our initial steps in recreating the design system involved:

  • Forking the LSX Design System: Using the existing framework as a starting point.
  • Generating and Reassigning Colour Variables: Establishing a new colour palette.
  • Deciding on Fonts and Assigning Variables: Selecting and implementing suitable typography.
  • Building Tour Operator-Specific Components: Creating unique elements tailored for tour operators.
  • Developing Template Parts, Templates, and Patterns: Using the components to build specific template parts and patterns.

The colour scheme and branding elements were inspired by the wild, specifically safaris and the African bush, ensuring they align perfectly with the tour operator’s unique identity.

Component and Section Development

We approached the creation of components and design sections with a clear strategy:

  • Fork the LSX Design System: Utilise the existing foundation.
  • Generate New Colours: Align with the tour operator branding.
  • Technical and Design Specifications: Develop comprehensive specifications for the plugin and Figma design system.

One particularly rewarding aspect was developing reusable components tailored for tour operators, including templates for product listings, booking forms, itinerary displays, and customer reviews.

Figma Variables and Customization

The Tour Operator Design System leverages the LSX design variables, with a few additional variables to enhance customization. For instance, a Header Text variable dictates the header title on a universal accommodation page, showcasing the system’s flexibility and adaptability.

Testing and Feedback

Testing was a critical phase. Ash Shaw, our product owner, reviewed the design system components, providing invaluable feedback. Team members also interacted with the clickable prototype, identifying and rectifying broken parts. This collaborative approach ensured a high-quality final product.

Final Publication

The design system published on Figma.com provides users with a comprehensive set of template designs necessary for creating a professional Tour Operator website. The highlight is the full prototype, bringing all elements together in one testable space, demonstrating the system’s capabilities.

Future Plans

Looking ahead, we plan to continue improving the design system and prototype, aligning updates with the LSX Tour Operator plugin’s evolution. We anticipate major updates in late 2024 or early 2025.

Community Contribution

We encourage community members to contribute to the ongoing development of the LSX Tour Operator Design System by leaving comments on the Figma file, the public prototype, or via GitHub issues.

Explore the LSX Tour Operator Design System

We look forward to seeing how you leverage the LSX Tour Operator Design System to create stunning, efficient, and cohesive travel websites. Happy designing!