Timeline April 1st - April 13th

Role UX Designer and System Designer

Company Rebrand from IPTS to Shuddle

Tools Figma + Zeroheight

Goal

Updating the entire Design system based on the new rebrand requirements is the new goal. This big turnover will be able to demonstrate the strength of the current Design system I’ve built.

Keep in mind some goals will remain the same, such as the component consistency, reusability, and obtainability being passed over from IPTS space travel website to Shuddle Travel. Develop another batch of Design tokens, typography style, colour style, and reference site.

Problem

As stated above, after a prestigious branding has been replaced by IPTS to Shuddle, this will heavily impact all 3 products designed. The current brand does not cater to the younger demographic. This might be time-consuming, but it will certainly be a fun challenge.

Solution

Rebrand the Design system with the following items

• New assets provided by Shuddle Typography style and Colour style

• Redefine 5 Components and design tokens

• Create a new reference site to share how to use the components.

Approach

Step 1

Revisit existing Components, and implement typography and colour style brand

Step 2

Replace main components with a new font, and colour, and change the overall look of the website with the feedback given by new management.

Step 3

Duplicate Zeroheights, and update information on existing reference sites on how to use rebranded components, where the components can be used on the website by displaying examples as well.

Step 4

Showcase various examples of all the components in a website format in Figma.

Solution

Rebrand the Design system with the following items

• New assets provided by Shuddle Typography style

• Colour style redefine 5 Components

• Create a new reference site to share how to use the components.

What I learned

Thank God it’s a Design system!

While building the components out from time to time I encountered errors shown by the purple frame in Figure 1. so being able to go back to the main component to fix this error is time effective.

Figure 1

After investigating the sub layers of the components, I caught the issue rather quickly. I noticed the footer logo duplicated in the frame.