You’re the Head of Digital for the newly launched IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy.

The Details

Project Brief

As the Head of Digital for the newly launched IPTS: The Interplanetary Travel Syndicate, I have been tasked with creating 3 unique offerings:

ipts.org: an informational website containing the latest IPTS news and

happenings

IPTS Travel: a site enabling browsing and bookings to destinations within our galaxy

IPTS Rail: a real-time web app where you can view lines, routes, and times for various commuter lines

I have been provided IPTS' logo, but no other brand assets.

Wireframe

For a start, I decided to wireframe roughly each site, to see what I can reuse from each one, and what types of components I might need.

Competitor

Apart from examining IPTS products, I conducted an analysis of various rivals in this field. I assessed platforms such as Expedia, Ferrovie Italiane, NYC MTA, to gain deeper insights into shared characteristics among travel-oriented offerings. I documented commonly utilized elements and their diverse iterations for future reference in component development. Additionally, I observed the overall aesthetics of these websites, which generally exuded a combination of sleekness, contemporary design, and a warm and inviting ambiance. It is my goal to elicit similar emotional responses with the IPTS design system.

Design System

We built the Design System based on three fundamental principles:

1. Clarity and Consistency: Maintain clarity and consistency in design elements, such as colors, typography, spacing, and UI components. Establish clear guidelines that specify how these elements should be used across all products and platforms. This consistency helps users recognize and understand your brand and products more easily.

2. Modularity and Reusability: Design systems should be modular, with components that can be easily reused across different projects and applications. Break down your UI into reusable building blocks, such as buttons, forms, and navigation elements. This modularity streamlines the design and development process, reduces duplication of effort, and ensures a unified look and feel.

3. Collaboration and Documentation: Encourage collaboration between designers, developers, and other stakeholders. Document the design system comprehensively, including guidelines, code snippets, and design patterns. This documentation serves as a reference for everyone involved in the design and development process, ensuring that they adhere to the established standards and practices.

These principles help create a robust design system that fosters efficiency, consistency, and a cohesive user experience across all digital products and services.

Foundations

Color, Typography and Spacing

Components' Library

Due to the groundwork laid before, I've successfully crafted my collection of components. Here are a handful of Components:

3 Products

Enter your text here...

Breaking News!

Your leadership at the IPTS—the Interplanetary Travel Syndicate—just hired the prestigious branding firm MegaBrand to do a rebrand of the entire organization, and there are a few things that’ll affect the three products you’ve been working on.

MegaBrand discovered through focus groups that the IPTS name and logo felt very ominous, like it was cold, faceless corporation that was always watching. (“The eyeball-shaped logo doesn’t help,” said one candid participant.) In addition, the IPTS wants to appeal to a younger demographic.

After weeks of research and exploration, they’ve settled on the new name “Shuddle,” which feels more like a cool, new startup.

Design System

I have restructured my existing design system to accommodate the needs of a new product. This means that I've made adjustments and modifications to the established design principles, guidelines, and components to ensure they align with the specific requirements and objectives of the new product. This process involves analyzing how the existing design system can be adapted and extended to maintain consistency and a cohesive user experience while catering to the unique features and functionality of the new product. It may also include the creation of new design elements or patterns as needed to address the product's distinct challenges and goals. Ultimately, the goal is to leverage the existing design system's strengths while tailoring it to suit the specific context of the new product.

Shuddle Visit

Shuddle Ride

Shuddle World