Dribbble Scaling Design Systems - Case study
Hi there👋
As part of the Dribble Scaling Design Systems course by Dan Mall, for my Capstone project, I have been tasked with developing a design system for The Interplanetary Travel Syndicate. This design system will foster a cohesive and consistent design language across three unique offerings:
IPTS.org
IPTS Travel
IPTS Rail
🥳 My role: Head of Digital (as assigned by Dribbble)
The problem:
The task was to develop a design system to harmonize visual aesthetics and user experience across the three IPTS platforms. The initial phase involved research, wireframes, and designing high-fidelity mocks for all three IPTS products. Once the design was complete I was able to flesh out the visual principles and start building out the components which then became our design system.
Then came the design system ✨
The design system encompasses all aspects of the brand's design across the three platforms. It includes guidelines for the design language, UI elements, interaction patterns, and implementation. Consistency was created by clearly defining the style guide which consists of color, typography, and spacing.
🌠 Design System Documentation created using Zeroheight
The Colors are foundational in the design system, establishing brand identity, consistency, and visual appeal while promoting accessibility and inclusivity. Regular review and refinement of the color palette ensure its alignment with evolving strategies, market trends, and user feedback, maintaining its relevance and effectiveness.
The typography stands out due to its excellent readability, versatility, modern aesthetic, multilingual support, web optimization, and accessibility.
The spacing guidelines were created for utilizing layout and spacing consistently and effectively within our design system, ensuring cohesive and harmonious user experiences across various digital products and platforms.
Iconography is a fundamental element of our design system and forms part of the UI elements, providing visual cues and enhancing user interfaces.
The components
Each component is created by combining everything that I will need to use in a master component. Then when using the component the user can turn off layers using the component's properties panel and choose the preferred variant.
Button: The button component is a fundamental user interface element used to trigger an action or perform a specific task. The button component consists of various variants that work together to create a user-friendly interface including, a text label that describes the purpose or expected input of the form field and leading and following icons.
Form: The form field component plays a crucial role in collecting user input. It includes a text label that describes the purpose or expected input of the form field, the actual input element where the user can enter data, radio fields, and dropdown fields.
Main navigation: This component helps users navigate and access different sections or pages. It consists of two main parts: the top navigation and the bottom navigation/footer all consisting of the brand logo, page labels, language selector, copyright information, and social media icons.
Blank slate: Blank slates are utilized when a page or section lacks content or needs a typical heading and body copy. When using the component, users have the choice to add an actionable option like a button. The user can also choose if the alignment is center or left-aligned.
Cards: This is a versatile user interface element to present concise and visually appealing information or content within a container. It is widely used in web and mobile interfaces to display a variety of data, such as articles, products, user profiles, and more. Seven responsive variants have been created to give users as many options as possible to create differentiation but stay consistent.
The process
By having well-established web pages by now, I was able to evaluate the component's eligibility for the design system based on their frequency of use. Once the component library started growing, it was time to consolidate the components. Based on the principles set out by Yesenia Perez-Cruz in the book Expressive Design Systems, I started auditing.
I found that asking the question “Does it add value for all brands?” helped me distinguish if the component upholds the design principles and should form part of the design system. Through this process, I continued to document each component by compiling purposeful, inclusive, and specific guidelines.
Have a look at the Design System Documentation here.
By now we had a purposeful-built design system that aims to unite the team on a shared vision of the brand’s voice, visual style, and behavior. This design system fosters valuable exploration and deviation, all the while preserving the core essence of the system as a whole. We aim for the design system to ignite inspiration and encourage its use.
Designers should feel driven to tackle intricate challenges using our design system and, in doing so, help it scale.🎉
The Rebrand
Once the initial design system was complete and applied to the web pages, a new challenge arose: adapting the approach to the rebranding efforts undertaken by MegaBrand. This rebranding encompassed renaming the products, refreshing the color palette and typography, and incorporating more vibrant imagery to appeal to a younger audience.
Steps that were taken to action the rebrand in Figma
Step 1: Involved duplicating the individual website page Figma files and the IPTS design system library. This ensured that we had a separate set of files to work with while preserving the original design for reference.
Step 2: We edited the style library once the files were duplicated. This involved updating and replacing colors to reflect the new brand palette. Unnecessary color shades were removed to streamline the design system. Additionally, the font was replaced throughout the library to match the new brand guidelines.
Step 3: The original brand logo component consisted of only two variants. However, additional logo variants for "Visit" and "Ride" were introduced as part of the rebranding effort. These new logo variants were added as components, expanding the options available for different use cases.
Preliminary changes to components:
During the process of updating colors and fonts, several preliminary changes were made to components. Firstly, the logo file within the main navigation component was completely replaced. This was necessary due to a difference in aspect ratio between the new logo and the previous version. Additionally, the "placeholder" text, which served as a field for the previous naming, was removed. This became unnecessary as new logos had been created during the rebranding process.
The moment of truth
After replacing the design system library in each web page file, the true impact of the rebranding was revealed. Surprisingly, only minimal edits were required to adapt to the new brand identity. One notable change was made to the font styles within the card component. The update was necessary to better support the new font, IBM Plex & Mono, which had a significantly larger line-height.
Conclusion
In summary, the successful rebranding of the three websites exemplifies the effectiveness of employing a design system. By leveraging the system's scalability, we achieved seamless integration of the new brand elements while minimizing disruptions to the existing design. Design systems facilitate collaboration, ensure consistency, and accelerate design and development cycles, making them invaluable tools in the realm of design and branding.