Celestial Design System: A Case Study
Introduction
A few weeks ago, I was approached by the remarkable team at Interplanetary Travel Syndicate (IPTS) to lead their Digital Department. The exciting challenge at hand was to create three pivotal products: IPTS.org, IPTSTravel.com, and IPTSRail.com, which would define IPTS's digital presence.
However, I encountered a couple of important considerations:
Branding on the horizon: IPTS had yet to establish its brand guidelines and was in the process of collaborating with a branding agency. Despite this, the urgency to launch the digital products demanded immediate action.
Countdown to launch: With the highly anticipated spacecraft launch date approaching, IPTS desired to have their digital presence up and running beforehand.
In this case study, I will share my journey of harnessing my expertise in digital product design and working closely with cross-functional teams. Together, we navigated these challenges and successfully established IPTS's digital presence, while ensuring flexibility for future brand styling changes.
With the freedom to unleash my creative instincts, I was determined to create compelling products that not only met the present needs but also laid the foundation for IPTS's future growth
Join me as we explore the power of Design Systems in shaping the digital landscape of IPTS.
The final product
Before we begin, here's a glimpse of what we built.
・・・
With evolving brand guidelines and an impending spacecraft launch, our challenge is to create captivating and adaptable digital experiences that redefine interplanetary travel.
The Process
In the world of digital product design, there is no one-size-fits-all approach. Each project comes with its own unique requirements and constraints, challenging designers to find the most suitable solutions that align with the product vision.
To tackle this task, I embraced a blend of Design Thinking and Systems Thinking.
Starting with the Product Design process, I continuously adjusted and fine-tuned the strategy, making iterative decisions that felt right at every step of the way. This dynamic approach ensured a flexible and adaptive design process that led to successful outcomes.
Low-fidelity wireframes
Once the initial brainstorming sessions with stakeholders were complete, my first priority was to envision a high-level overview of how the three products would look. I focused on defining the layout and section placement, prioritizing the overall structure rather than getting into intricate details.
Content Is King
I strongly oppose the use of Lorem Ipsum. Although I have used it in the past, in today's content-rich world, relying on Lorem Ipsum in designs is highly unacceptable.
That's why I prioritize involving UX writers and the copywriting team from the very beginning when using a design tool. I believe that well-crafted content plays a crucial role in creating engaging designs and meaningful user experiences.
Mid-fi wireframes
With the lo-fi sketches in hand, I began crafting the detailed wireframes, integrating authentic content sourced from the copy team.
Adopting mid-fi designs allowed me to fine-tune the components, enhancing their structure and fostering a clearer understanding of their purpose and functionality.
・・・
TYPOGRAPHY
During the search for the perfect typography for this project, my primary focus was on finding a font that exuded both contemporary and futuristic qualities. I sought a font that would evoke a sense of nostalgia while also feeling cutting-edge.
After exploring various options, including
Dosis
Space Grotesk
Exo 2, I carefully evaluated their suitability in different scenarios.
Dosis and Exo 2 were ultimately discarded for specific reasons.
Dosis conveyed a dystopian and authoritative tone that didn't align with the desired approachability for this project.
Although Exo 2 had a crisp and futuristic appearance, it didn't quite meet the criterion of retro vibes.
The font that emerged as the ideal choice was Space Grotesk. It perfectly embodied the desired qualities for this project – a futuristic aesthetic combined with sleek retro vibes. Therefore, I made the decision to proceed with Space Grotesk, recognizing that although there could be even more visually appealing fonts with more time for exploration, the constraints of time and the potential for future rebranding led me to select Space Grotesk.
・・・
COMPONENT DECISIONS
Button:
Rather than defining all possible button variations upfront, I adopted a strategic approach for buttons.
I began by creating a single primary button with a robust architecture that could be easily scaled as needed.
Our buttons feature rounded corners, giving them a pill-like shape. Before delving into further details, let's explore the significance of rounded elements in design.
----------------------------------------------------------------------------------------------------
In a recent article by Mohamad Eltazy, he highlights the scientific findings that suggest a linear relationship between the perceived brightness of corners and the sharpness of their angles. According to research papers from the Barrow Neurological Institute in Phoenix, AZ, sharper angles appear brighter to the human eye.
Putting aside the technical details, the key takeaway is that round objects are more efficient as they require less cognitive effort to be recognized. This frees up valuable human energy that can be redirected towards more essential tasks.
----------------------------------------------------------------------------------------------------
When it comes to rounded elements and components, there are several reasons behind this design choice:
They are more aesthetically pleasing to look at.
They seem more approachable and friendly.
They enforce a relaxed layout instead of a tightly spaced design.
For instance, our buttons have a left-right padding of 20px. If we had square buttons, a 20px padding would appear too spacious, necessitating a tighter 8px or maximum 12px padding.
By using rounded buttons, we strike a balance between spacing and aesthetics, resulting in a visually appealing and user-friendly interface.
Navbar:
When designing the navbar, I explored two types: horizontal and vertical. After careful consideration and testing, I made the decision to go with a horizontal menu positioned at the top of the page.
The choice of a horizontal navbar was driven by several factors:
Compatibility with the Hero/Banner: The horizontal header works seamlessly with the Hero/Banner section, especially when there are embedded components within the banner. For example, in the Travel site, we have a bookings component within the banner, and the horizontal menu doesn't overlay on it.
Optimal space utilization: Certain menu options, such as "Schedule & Status" in IPTS Rail, might have longer text. By using a horizontal menu, we can allocate sufficient space for these options without compromising the visual impact of the banner.
By selecting the horizontal navbar, we ensure a cohesive and user-friendly design that enhances the overall user experience across the three products.
Banner:
The banner component in our three products consists of key elements that include:
Image
Text
Button
To ensure flexibility and product-specific customization, I made the decision not to include the 'Booking' and 'Schedule' components within the main banner component.
Instead, I introduced a slot component that allows the Product teams to replace it with a relevant local component based on the specific requirements of their respective products.
By adopting this approach, we empower the Product teams to create tailored and engaging banners that align with the unique features and functionalities of their individual products.
Below mentioned points played a key role in making decision on the banner style:
Image and text is balanced
Message is conveyed, curiosity is built
Visual language is established
Airy spacing gives user space to think and reflect
Cards Vs. Lists
When considering the wireframes of all three products, it becomes evident what kind of content we aim to present to our users. Without delving into the intricacies of these component types, let me outline the reasons for choosing 'Card' over 'List':
Visual emphasis: Lists primarily rely on icons and text to represent actions. However, in our case, we want to leverage imagery to capture the user's attention. By using cards, the image becomes a defining and aesthetically prominent element, rather than a mere supplement to the text.
Enhanced visual appeal: When examining examples of lists, you'll notice that icons tend to supplement the text rather than defining the list item as a distinct component. Even if we were to replace the icons with images, their size would be too small to stand out effectively. Given our emphasis on imagery, the 'Card' component aligns better with our goals and offers a visually engaging experience.
By selecting the 'Card' component, we ensure that our design showcases captivating images, draws attention, and delivers a user-friendly interface across our products.
The reasons that influenced the choice of card:
In style 2, the tag might break when card title is long. Also, placing the tag at the top left immediately gives user context of what he can expect from the rest of the card.
In style 3, the image to content ratio is too low, and as our brand relies on imagery to grab attention, this layout isn't feasible.
Footer:
By now, the design language had been defined to a good extent, so creating a footer layout was a simple task. The only critical decision we had to make was whether to make it minimal or descriptive. We went with the latter.
----------------------------------------------------------------------------------------------------
COMPONENT ARCHITECTURE
Component architecture involves designing and organizing reusable UI components that serve as the building blocks of a design system.
We can achieve a robust component architecture by
adhering to atomic design principles
applying a consistent visual style
making sure your components are scalable
and creating components that are flexible enough to adapt to various scenarios and use cases
Architecting a component is about balancing between overtly simple components that are of no use and highly complicated components that make your product teams not want to use them.
Let's take a look at the architecture of the components we've defined for our system:
Navbar:
Button:
Icon:
The icon resizer component saves the hassle of creating multiple sizes for the same icon. By using this component we're able to reduce the size of our icon library drastically.
Banner:
Card:
Segmented control:
The segmented control was initially not planned as a component, but while looking at the wireframes of all three products, I realised there are certain elements that are serving the same purpose, though they were visually different.
(slide to see the wireframes)
Footer:
COLOR STYLES
Let's dive into the exciting part.
Even though I had the freedom to unleash my creativity due to the absence of brand guidelines, my focus was on establishing a structure first and then applying colors.
You might wonder, "Isn't it counterproductive to design the components before defining the color styles?" Well, at first glance, it may seem that way, but if we delve deeper, you'll discover that it's actually highly efficient.
Allow me to explain.
If I started by defining the color styles, I would constantly be questioning things like, "Will this button color complement the background?" "Does the text have enough contrast with the primary color?" "Will this color harmonize well with others?"
The good news is, I don't have to worry about these questions because I already have a set of components that make up a significant portion of each product I'm building. Now, all I need to do is apply the color styles to these components, and the answers will be right in front of me. This approach saves me countless hours of time.
THE APPROACH
I prefer keeping the color library separate from the components library, and here's why it works:
Theming becomes incredibly easy.
It provides fine-grained control over who can add and update colors.
For this project, where theming and rebranding are inevitable, this approach makes perfect sense. Once I receive the new brand guidelines, all I have to do is create a new color library with the same color style names and replace the existing library. Voila!
Until the brand guidelines are finalized, I can freely experiment with different color variations, light/dark modes, and have some fun exploring a wide range of colors.
Also, don't define the colors you don't need. Do not plan ahead when it comes to colors. Else you'll end up with a large palette that overwhelms your Design System users.
"Define what you need and move forward."
HI-FIDELITY DESIGNS
But where are the other components coming from?
We'll answer that question in the next section.
ROOM FOR INNOVATION
There's a golden rule when it comes to determining which components should be included in your Design System:
"If a component appears in three or more products or pages, it becomes part of the Design System."
This rule helps maintain a balance between a comprehensive system and avoiding unnecessary bloating.
It's important to note that not every component in your product should be part of the system. If you include every single component, the system will become overloaded over time, and users may feel overwhelmed and reluctant to use it.
On the other hand, the system shouldn't be too sparse, as this could lead people to create their own components, defeating the purpose of having a centralized system.
Consider a scenario where you have five components on a page. Ideally, around four out of those five components should come from the Design System, while leaving one component for innovation by the product team. However, it's important to note that this number can vary depending on the specific team and product.
Adopting this approach brings several benefits. Firstly, it increases the adoption of the Design System, as product teams begin to realize the advantages of not having to recreate the same components repeatedly, while also gaining more time for innovation. Secondly, it helps prevent monotony in your products. Despite adhering to the same design language, your products will maintain a fresh and diverse appearance.