Creating a Design System

Client: Intrepid Travel
Project Duration: 6 months
Role: Lead UX Designer/Project Manager (remote)
Team: 1 UI Designer, 1 Front-End Developer + wider governance team including Tech Lead, Digital Management, Business Analyst, Insights, Brand.

Intrepid Travel are a group adventure travel company offering more than 1,100 escorted tours worldwide. A certified B Corporation, the company's headquarters are in Melbourne where it was founded with more than 30 offices worldwide.

Consistency, Scalability and Accessibility: Future proofing Intrepid

  • The Challenge

    Intrepid Travel’s flagship site consisted of innumerable pages with their own unique design. This inconsistency led to a fragmented user experience, higher maintenance costs, and slower development cycles.

    The goal was to create a unified design system in parallel with the replatforming that would ensure consistency, improve usability, and accelerate the development process across the entire Intrepid site.

  • Research and Discovery

    To kick off the project, we conducted a thorough audit of Intrepid’s existing website and assets, conducting user interviews, stakeholder workshops and extensive competitive analysis.

    Key findings from the research included: inconsistent UI elements and patterns across applications, redundant design efforts due to the lack of a shared resource and users' frustration with the lack of a cohesive experience.

  • Strategy and Planning

    Based on the insights gathered, we developed a roadmap for creating the design system.

    The strategy involved defining our core design principals, building a robust and reusable component library base on atomic design principals, ensuring compatability with development flows and worktools, creating comprehensive documentation and guiDelines as well as establishing a governance team and approvel process.

Step 1: Defining Design Principles

We conducted a workshop with all members of Intrepid’s User Experience team, as well as Brand and management to define five core principles that ensured the new design system would align with Intrepid’s brand and user needs:

  • Consistency

  • Scalability

  • Accessibility

  • Flexibility

  • Simplicity

By being able to refer to our design principals. we were able to establish clear framework to align our team's efforts and ensure consistency and transparency across the business.

Step 2: Auditing & Mapping

We compiled a comprehensive list of all UI components currently in use across the site, including buttons, forms, icons, and navigation elements.

Our goals for the audit were to analyse where and how each component is used, identifying any inconsistencies in design or functionality as well as detecting duplicate or similar components that could be consolidated to simplify the design system.

Other goals for the audit were to review accessibility, document component functionality and gather internal and external feedback. Once this was actioned we were able to prioritise updates and create a plan for rollout.

Step 3: Designing & Developing

Beginning with core elements and working within existing brand guidelines, we set out to sketch and prototype initial component designs. and iterate on initial component designs.

Working closely with development and obtaining regular feedback from key stakeholders, we gathered feedback on our initial designs and iterated as necessary. We then started to build the component library incrementally in parallel with the website replatform that was taking place and incorporated design tickets into agile sprints.

As part of the development process we created comprehensive documentation for designers and developers. We also started to develop broad guidelines in Confluence to begin to engage the wider business.

Step 4: Testing, Iterating, Launching

We engaged in comprehensive usability testing to validate key components with users via video testing sessions, ensuring they met usability and accessibility standards. This feedback was incorporated into our weekly reports to the website governance team and iterations were made as necessary within project constraints.

Throughout the project we had a direct feedback loop with developers, website governance, business analysis and insights to address any implementation or business challenges and refine components based on their insights.

We launched components throughout the replatforming project, beginning with the introduction of low-risk components to help refine out methodology and ensure a robust system and process.

Step 5: Maintaining and Governing

We established a governance team to provide a continuous feedback loop for updates, ensuring the implementation of version control, and conducting regular review sessions throughout the build to ensure consistency, scalability, and alignment. The appointment of a designated UI Designer to manage the system was discussed and flagged as a future hire to stay abreast of evolving user needs and industry standards.

Final Deliverables:

  • A set of high-level design principals to guide decision-making

  • A comprehensive collection of reusable UI elements with states

  • A pattern library for solving common problems (e.g., navigation, forms, cards, lists)

  • A library of scalable and consistent icons.

  • A new set of illustrations for use across the product (brand)

  • Detailed guidelines on how to use components, patterns, and layouts including developer specifications

  • Guidelines for integrating the design system into projects (for both designers and developers)

  • Guidelines on how teams can propose updates or add new components

  • Channels for reporting bugs, suggesting improvements, or requesting new features

  • A clear plan for future updates to the system

  • Localisation guidelines for adapting designs for different languages and cultural contexts

Conclusion

The development and implementation of a comprehensive design system for Intrepid Travel marked a significant milestone for the User Experience team. By focusing on core principles such as consistency, scalability, and accessibility, we created a robust library of reusable components that streamlined both the design and development processes.

The collaborative efforts across stakeholders, rigorous testing, and iterative refinements ensured the system met diverse needs and expectations. The resulting improvements in user satisfaction, development speed, and maintenance simplicity underscore the critical value of a well-governed design system.

Moving forward, ongoing maintenance and iterative enhancements will be essential to adapt to new challenges and continuously elevate the user experience. This case study highlights the importance of a unified approach to design, fostering innovation, and operational excellence in digital product development.