As a member of the design system course, my primary role was ensuring consistent designs across all products and creating a scalable design system for future team members.
Let's set the scene. The project had just started: two weeks time to finish it. Three websites to build. One Design System to set. And only one logo as a reference. I was up for the challenge and excited to get started. Here's how I kicked off the adventure:
First things first, I conducted quick research to understand IPTS's needs and the general structure, content, and visual styles required. This included reviewing websites with similar purposes, such as travel, booking, and rail sites.
Without any specific briefing or content, my very first step was to map the structure and content for each website. As a team of one, I used Chat GPT to help me with that.
Systems are all about connections. With all wireframes done, I collected and connected common components within the pages, creating the first draft of my Design System.
At this point, I wasn't focused on their exact structure or design but rather on their goal and functionality. This helped me to understand the necessary components and their relationships with one another.
Next, I created a Pilot design. Design System components should be extracted from real products rather than rely on pure guesstimations. With that in mind, I started sketching the first website, the .org, by testing key elements and styles, such as sizes, colours, and typography. Then, I created purposeful components and styles, focusing on the product without over-designing it.
Using the Pilot design as a basis, I designed the other websites by extracting the necessary components and ensuring consistency across all three products.
Finally, it was time to create the library. I structured it by auditing and collecting all the common components from the designs and refining them in Figma. By prioritising software, I replaced them on the design and refined them as needed, making sure they were functional and easily reusable.
Imagine the scene: it's a sunny day, birds are chirping, and... IPTS decides to go through a rebranding process. That means a new name, new colours, new typography: everything had to be updated. IPTS.org became shuddle.world, IPTS Travel was now Shuddle Visit and IPTS Rail was now Shuddle Ride.
It was like the ultimate test to see how change-proof the system was. But there was no need to panic! Like any good system, everything was connected in Voyager, and adapting to the company's rebranding process was a breeze. These were my steps on the second phase of the mission:
The biggest challenge was to review the assets like images and illustrations, which wouldn't fit the new brand, but overall it was a huge success.
I was over the moon with what I had accomplished! It was amazing to see the results.
The adventure doesn't end here :) I'm excited to keep scaling the Voyager design system and take it to greater heights. Here are some of the things I'm looking forward to: