Project Brief

Goals:

• Using the existing branding for the Interplanetary Travel Syndicate (IPTS), create a design system that is able to be used across multiple websites.

• Take everything we learned from the Scaling Design System course and apply that knowledge to creating the design system.

Problems:

• IPTS have 3 different websites (a trip planner for traveling on interplanetary transport, a news website, and a travel destination marketing website) that are under their organisation and they need a cohesive way to tie all them together under the same branding.

• It’s unclear what components can be used across all the websites versus can only be used on one specific one.

• There is no previous documentation on how to use or implement any of the components.

Approach

For this project, I approached it as if I was the head of product for IPTS and didn’t necessarily have a good grasp on product design. Also for the sake of time, I chose to focus on only 2 websites, the rails and travel destination websites.

I made this choice based on the branding assets provided for this project and I knowing that these designs will soon undergo a rebrand with an agency in part 2 of the Capstone Project case study.

Discovery, Ideation & Design Mockups

I spent some time looking into several public transport planning and travel destination websites that had a less modern feel to them so that I could really play into the “not being a designer”. I also used ChatGPT to help me get started on some of the foundational concepts for the design system. Personally I thought it was a great way to have something to start with as a base but if I were to do this again while allowing myself to flex more designer skills, I’d definitely scrutinise the colour palette more.

Here I sketched up a quick concept of what both websites could look like, keeping in mind what components could be the same across both.

Final Design

A screenshot of the final designs for the IPTS Rails website.

A screenshot of the final designs for the IPTS Travel website.

Takeaways

It was definitely hard not to spend a lot of time trying to make things “look better” since I was limiting myself from playing the role of being an experienced designer as part of this fictional project. It was also good to see where I could easily use the same components across the different websites. For next time, I would like to spend more time doing a deeper dive into best practices for the components that I created and have a more detailed discovery around that. Hopefully I can achieve that in part 2 of this capstone project.