Hi everyone ??. My name is Camille and I'm a Product Manager & Product Designer, currently learning how to make great Design Systems thanks to Dribbble Course! ?

Project overview

Project brief

As the Head of Digital for the newly launched IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy, my job was to create three websites:

1. ipts.org, an informational website where you can find the latest news and happenings with the IPTS

2. IPTS Travel, a website where you can browse and book travel to and from multiple destinations within our galaxy. Like Expedia for space.

3. IPTS Rail, a real-time updated web app where you can view lines, routes, and times for all the different commuter lines. Think NYC subway or the London Underground, but for interplanetary travel.

Because a design system will likely help me with this effort, I've decided to make one in the center of all this.

Ideation, wireframing

For a start, I decided to wireframe roughly each site, to see what I can reuse from each one, and what types of components I might need.

Once the wireframes were done, I was able to distinguish several types of components. I've extracted them to be able to see where I needed variants, conditions… by doing once again rough wireframes.

Components' Library

Thanks to the previous work, I've able to create my components Library. Here are a few examples:

UI Design

Once the components' Library was ready, I was straightforward for me to design each page, using the same components with variations.

A Few days later...

Breaking news! IPTS is becoming Shuddle!

Part of this exercice, we learned that IPTS hired MegaBrand, an agency, that discovered through focus groups that the IPTS name and logo felt very ominous, like it was cold, faceless corporation that was always watching. (“The eyeball-shaped logo doesn’t help,” said one candid participant.) In addition, the IPTS wants to appeal to a younger demographic.

After weeks of research and exploration, they’ve settled on the new name “Shuddle,” which feels more like a cool, new startup.

The color palette is fresh and vibrant, and the identity relies much more heavily on photography of younger people to feel more welcoming and inviting.

The typographic palette relies heavily on the IBM Plex superfamily to both give a wide range as well as make everything feel familiar. (You can download IBM Plex Serif and IBM Plex Mono for free on Google Fonts.)

The 3 main products have also been renamed to feel more like a family of products instead of independent offerings:

1. “ipts.org” is now “shuddle.world.“

2. “IPTS Travel” is now “Shuddle Visit”

3. “IPTS Rail“ is now “Shuddle Ride“

So, I had to update those products according to this new branding. Update your reference site to reflect the new brand, both in design and content.

About that identity change

It was a great way to see how valuable it is to have a design system in that particular moment of branding update.

I have saved a lot of time because of how the work was previously organized, and it allowed me to see how flexible it is to work this way.

Takeaways and next steps

Outcome / Results

Thanks to that project, I've learned a lot about how to make a great design system.

It's pretty hard to have in mind how much the content should be reusable, and how with some similar components we can make different websites, with their identity.

I still have a lot to learn to make those identities even more visible.

Even if it's still a work in progress, I have definitely seen how much time I have gained thanks to the use of components, and how valuable it is to have a Design System.