In the Scaling Design Systems course by Dan Mall, our assignment was to develop three distinct websites for a fictional interplanetary travel firm and its sub-brands. These sites were to be supported by a design system that we had to construct from the ground up, complete with its own documentation site detailing the design system's styles and how to create these pages.

The next phase of our task introduced an inevitable rebrand. This challenged the effectiveness of our design system, particularly in its effectiveness in handling a rebrand.

Getting Started

We were given just a logo and simple brief to work on the sites. To kick things off, I looked for ideas by checking out similar websites. I also used Claude.ai to brainstorm and figure out where to go with the project. Instead of diving straight into the design system, I first made low-fidelity wireframes. Then I used building blocks from the Relume library to ideate the layout while keeping the layout as consistent as possible across sites.

When I heard the rebrand brief, I knew I wanted to give each site its own color palette while keeping other elements consistent. So I designed the sites with distinct themes in mind. I checked font weights, colors, and the common components I used on the pages to ensure visual consistency across the rebrand.

Then, I created the IPTS design system which consisted of a color palette, typography, and common components from the three sites.

Putting the design system to the test, we were tasked to go through a rebrand exercise and were provided with new names, logos, color schemes and asset styles to work with.

To start with the rebranding, I created a new file with the IPTS design system and just changed the color and typography, which alone took care of 90% of the rebranding.

Because I wanted to keep both the IPTS design system and the new Shuttle design system in the original file, I added the Shuttle design system library to the original file. Then I replaced the components and text styles, which was an additional step but fast enough to easily incorporate the rebrand.

Here are the rebranding results:

Last but not the least, instead of just documenting, I used Zeroheight to chronicle the page structure for other designers on the team.

Closing Thoughts

I enjoyed taking the lessons from the Scaling Design Systems course, especially the code bits, because coding is something I don't generally dig deep into. This course helped me take the initiative to go beyond basic HTML/CSS/JS.

Also, this course has an interesting way of documenting/chronicling for other designers on the team. That's a new perspective for me.

Overall, it's a good beginner's course on design systems.