The brief

As a final project for Dan's Design System Course, our objective was to develop an adaptive Design System capable of serving three distinct websites under the same brand umbrella.

The challenge involved creating cohesive yet unique experiences for each website, which included a corporate platform highlighting IPTS's latest news, a galactic travel website akin to "Expedia for Space," and a rail website for shuttle-related information.

Though a mock exercise, this project allowed me to explore the design process, understanding the intricacies involved in crafting a comprehensive Design System.

This being a mock exercise of course, the whole design process was quite easier. Usually you would go through a process that takes week to correctly define this kind of projects:

• Stakeholder interviews: wherein I collaborate closely with the stakeholders to comprehend the underlying motivations behind the project. It aims to identify their goals, the key performance indicators (KPIs) they aim to enhance through these platforms, and their vision for the brand's overarching identity.

• Brand Knowledge: To effectively convey the brand's personality, I would need to delve into the realm of brand knowledge. By immersing in the company's look and feel, I can capture the essence of the brand's intended vibe. This should involve analyzing color palettes, typography, and visual elements that could be adapted consistently across the various websites, fostering a sense of familiarity while ensuring differentiation.

• Market Analysis: To make IPTS's brand stand out in the market, I should undertake a comprehensive analysis of competitors. By identifying their design choices, user experiences, and market positioning, we could uncover opportunities for differentiation. This step is crucial in crafting a unique and memorable experience for the brand's offerings, aligning them with the target audience's expectations.

• Tech Analysis: Understanding the underlying technology landscape is essential in creating a robust Design System. Conducting a tech analysis allows to identify existing frameworks and technologies employed by the engineering team. This provides valuable insights into what we could build upon, ensuring compatibility with existing systems while paving the way for future scalability.

In the beginning...

A logo isn't sufficient for a brand, you have to think about a full identity. For some reason this logo made me think a lot about old science-fiction tv shows (Babylon 5, Star Trek, ...), hence why I started to search inspiration into those old TV shows.

From this inspiration / moodboard, I started to work on the core part of the Design System: the typography.

Typography serves as the visual voice of a brand, playing a fundamental role in conveying information and evoking emotions. In the context of the Design System, typography ensures consistency and cohesiveness across all websites, reinforcing the brand's identity. By selecting appropriate typefaces, font sizes, and line spacings, I established a harmonious hierarchy that guides users through the content seamlessly.

Additionally, considering readability is paramount to enhance the user experience. Different websites cater to diverse content types, and careful typographic choices accommodate varying reading preferences. Whether it's the corporate website with extensive news articles or the travel website with enticing descriptions, the typography must be legible and aesthetically pleasing to users.

I also created the first color palette. Colors are powerful tools that evoke emotions, set moods, and strengthen brand recognition. The color palette is a crucial aspect of the Design System, extending from the brand logo and applied consistently throughout the websites.

Each website within the brand's ecosystem can have its unique color palette, aligned with its theme while adhering to the brand's core identity.

A well-considered color scheme not only enhances visual appeal but also aids in effective communication. By assigning specific colors to different elements such as primary and secondary buttons, links, and backgrounds, users can quickly understand interactions and navigate the websites with ease.

Moreover, the careful use of color improves user engagement and can evoke desired responses. For instance, warm and inviting colors may be employed on the travel website to evoke excitement, while a corporate website might utilize a more professional and subdued color palette to convey reliability and trust.

The choice of colors should also align with accessibility standards, ensuring that users with visual impairments can perceive content with ease. Contrast ratios between foreground and background colors are essential in creating an inclusive and user-friendly design.

From there, thinking in terms of the smallest element to the biggest component, I started to build the first two elements you can find on any website: the buttons & the fields. The creation of a component library fosters efficiency and consistency in design and development.

From the foundational elements, the Design System evolved to incorporate more complex components essential for each website. These included custom cards, headers with menu navigation, and search forms tailored to specific functionalities while maintaining visual coherence.

By defining reusable UI components such as navigation bars, cards, and modals, the Design System streamlined development, reducing redundancy, and ensuring consistency across all websites. This modular approach accelerates development and facilitates unified design updates.

Starting from minimal elements enabled the direct implementation of light and dark modes, seamlessly transforming the user interface. Users were empowered to switch between contrasting visual themes, designed with accessibility in mind for a consistent and inclusive experience (see examples below).

My aim was to maintain a minimalist approach, utilizing Figma variables, boolean components, and properties. The result was a concise set of components, though further refinement could be achieved with additional time.

IPTS Corporate

The corporate website was the initial application of my components, serving as the foundation for building the brand and guiding subsequent designs. My primary focus was on simplicity, crafting a website with a hero image header, informative news section, and a user-friendly contact form.

Below, you'll find both the dark and light versions of the website, showcasing the seamless integration of various components from the design system.

IPTS Travels

The second website, the travel platform, holds a pivotal role as the core of the IPTS brand. It empowers consumers to embark on intergalactic journeys, offering an extensive array of celestial destinations to explore.

My vision for the travel website was to evoke a genuine Star Trek vibe, immersing users in an adventure of the unknown and the final frontier. To achieve this, I focused on showcasing the planets' unique features, emphasizing intricate details, and sparking the spirit of exploration.

To ensure a seamless user experience, I collaborated with a colleague, a Project Manager, to develop a captivating single-page presentation for each planet, utilizing solely the elements from the Design System. This experience underscored the importance of precise and common object naming, facilitating smooth collaboration and ensuring the clarity of the shared language among team members.

The result was an engaging and informative platform that beckons users to embark on extraordinary intergalactic voyages.

IPTS Shuttle Times

The Shuttle Times website serves as a reliable companion, overcoming the hurdles that often accompany intergalactic travel. This platform provides travelers with up-to-date information on their journeys, including shuttle schedules and timely connections.

Moreover, recognizing the significance of mobility, the Shuttle Times website extends its accessibility with a simple yet effective mobile app. The app ensures that users can stay informed about their travel plans on-the-go, making the journey as smooth and efficient as possible.

The Brand website

While Figma is an excellent tool, making the brand accessible to everyone was of paramount importance. To achieve this, I utilized ZeroHeight to offer comprehensive insights into the IPTS brand and Design System.

Zero Height proved invaluable in presenting detailed information about typography, main elements, and colors across all websites. This allowed me to create user-friendly handouts, ensuring that anyone interested in the brand could readily access and comprehend its visual identity and design principles.

The Rebranding

The second part of this exercise entailed a complete rebranding process to explore how a Design System could adapt to the brand's transformation. This phase involved access to various brand elements, including the logo, fonts, colors, and button styles. While it offered more materials to work with compared to the first part, it also introduced additional constraints, challenging the alignment between the new brand proposal and my personal preferences.

During the rebranding, I began by adapting the fonts, which necessitated several modifications to maintain consistent width and readability. Similarly, the color palette required meticulous cleaning and alignment to harmonize with the new brand's vision.

The images included below illustrate the extensive flexibility of the Design System in accommodating changes to fit the new brand. However, it became evident that rebranding goes beyond making adaptations to an existing system.

It profoundly impacts the brand's tone of voice, overall vibes, and the impression it intends to convey to its audience. Creating a successful rebrand demands a thoughtful approach to ensure that every aspect of the brand aligns cohesively with the intended identity and perception.

In this short video, you can see how quickly the system could be changed to a new brand.

The reference website was also changed to the new brand and can be found here with the finished evolution of the design system

Key Learnings

A Design System's power lies not in its complexity or the number of components it encompasses, but in its adaptability and ability to offer sufficient variations to cater to diverse user needs. The key to its success is striking the balance between flexibility and consistency, ensuring users can leverage it without feeling overly constrained.

An often overlooked but critical aspect is naming the components in a universally understandable manner. Clarity in naming fosters seamless collaboration and enables the widest possible user adoption. When users can easily locate the components they require, the likelihood of deviating from the system diminishes significantly.

Starting with the smallest common denominator elements of websites forms the bedrock of a robust Design System. Thinking in terms of atoms allows for a modular approach, where each element retains its individuality while fitting cohesively into the envisioned system.

Documenting the decisions made during the system's development is vital. Keeping detailed notes not only aids in understanding the rationale behind specific choices but also enhances collaboration and facilitates future improvements.

Additionally, the rebranding exercise shed light on the adaptability and limitations of the Design System. While the system allowed for considerable variations to fit the new brand, rebranding extended beyond mere adaptations, requiring careful considerations of the brand's tone, vibes, and overall impression.

In summary, the creation of a Design System is a dynamic and iterative journey, requiring a delicate balance of creativity, practicality, and attention to detail.

A successful Design System goes beyond a mere collection of components, becoming a foundation that amplifies a brand's identity, strengthens user experiences, and fosters a seamless digital ecosystem for all.

With each step taken towards building a Design System, the possibilities of enhancing a brand's presence and delighting users across its digital platforms become "the final frontier".