Shuddle: A Design system story
The challenge
As part of Dribbble's Design Systems Course, I was asked to work with a client called ITPS who wanted to build three websites for their products: ITPS org, IPTs Travel, and IPTS Rail. The goal was to not only design the three websites but to integrate the efforts by building a design system that serves as a source of truth and consistency for the product.
Later in the process and in an effort for appealing to a younger audience, IPTS rebranded as Shuddle, a bold and fun brand that will replace IPTS immediately. Meaning that all the products and systems needed to be updated in a "Shuddle" style.
Follow me to find out how I adapted the design system and products to the new branding.
The IPTS Process
Research visual references and styles to define the look and feel of ITPS products.
Define the Information architecture and contents hierarchy using the hot potato process and ChatGPT.
Developed sketches for the three products simultaneously to identify similar patterns and styles.
Built styles and components to use in the entire system
Finish UI designs.
Update components and styles.
The "Shuddle" breaking point.
The first thing I did after finding out about the Shudddle rebranding was to update the colors and font styles to match the new branding. In this process, I also remapped some colors to harmonize better the compositions.
After that, I reviewed the ui and some components like the newsletter banner were broken just because the current image didn't fade the background that easily. So I went to fix it and ended up adding another color to the style guide.
The UI started to feel more in sync with the new branding as I was replacing the content in components. This was the final result.
Conclusions
This project serves as a clear demonstration of the significant benefits that can be derived from the use of a Design System. The streamlined processes facilitated by a Design System were instrumental in achieving greater efficiency in product evolution. Without access to the synchronized components and styles in the Design System, the task of redoing components and mapping styles would have required a substantially greater amount of effort.
It is evident that a Design System is a valuable investment for organizations seeking to optimize their product development processes.
