Building a Scalable Design System for IPTS

IPTS, the newly launched Interplanetary Travel Syndicate, set out to create three digital products:

• ipts.org – An informational hub about IPTS services and news.
• IPTS Travel – A booking platform for interplanetary journeys.
• IPTS Rail – A real-time commuter rail app for interplanetary transport.

Each product required a cohesive user experience, but without a structured design approach, they risked inconsistency, inefficiency, and poor scalability. Key challenges included:

• Fragmented UI components across different platforms.
• Inefficient design and development workflows due to a lack of reusable assets.
• A need for a future-proof system that could adapt to new features and planetary expansions.

Why did this matter?

• Inconsistent UX could confuse users navigating between IPTS platforms.
• Recreating UI components from scratch would slow down development.
• A lack of standardisation would make future updates costly and time-consuming.

The Goal & Constraints

What did we need to achieve?

• Develop a scalable, component-based design system that powers all IPTS platforms.
• Create consistency across all products while allowing for necessary flexibility.
• Improve the efficiency of design and development teams.

Constraints:

• Balancing brand uniqueness while maintaining usability standards.

Success Criteria:

• A fully functional design system was implemented across all three IPTS platforms.
• Faster design-to-development workflows, reducing redundant work.
• Improved user experience consistency across IPTS digital products.

The Solution & Design Process

How did I approach the solution?

1. Defined Core Principles – Established consistency, accessibility, and scalability as design pillars.
2. Created Content Designs – Crafted content for the most important parts of the product.
3. Defined Concepts – Used the Core Principles and Content to craft concepts for the different products.
4. Created a Component Library – Merged similar components into a set of reusable UI components for navigation, booking, and real-time updates.
5. Developed Design Tokens – Standardised colours, typography, and spacing across platforms.
6. Built Figma Libraries – Ensured designers had synchronised assets.

Results & Impact

Quantifiable Outcomes:

• Faster design-to-development process due to reusable components.
• Reduction in UI inconsistencies across IPTS platforms.
• Adoption across all IPTS product teams, ensuring long-term scalability.

Why This Matters

• Enhanced User Experience – Provided a seamless and familiar interface across IPTS products.
• Scalability for Future Growth – The system supports new features and planetary expansions.
• Improved Design & Dev Collaboration – Streamlined workflows with centralised components.