Step 1 - Discovery

I conducted research and prepared a mood board of the company based on the preliminary briefing to redesign the company website and logo. I combined my prep in a document for the workshop where I would meet the stakeholders to extract their business and stylistic goals to shape those into the strategy for the project. Hearing design jargon in the discovery and strategy-building stages can be overwhelming for stakeholders unfamiliar with design methodology terminology. So I named the workshop: "The soul searching workshop" to bring the engineer-profile client to focus intensely on what they see in their brand and what they wish to transform it into with design. Through the workshop, I inspected their company's customer touchpoints, competitors, and the pain points of their website. I created a project roadmap for redesigning their logo, website, and social media content.

Softwares or applications used: Figma, Adobe Illustrator, Google Drive

‍

‍Step 2 - Logo design

I started with the logo design and framing the company's new look and feel. The client already had a typographic logo they wanted to keep the same; they just wanted to add a visual indicator of their services. I designed a logo that brings together the keywords that connect to the client's services: "the world", "vision", and "space". I also created an animated version of the logo to be used when their website is loading, in social media posts, and in introductory videos of the company.

Softwares or applications used: Figma, Adobe Illustrator

‍

‍

‍Step 3 - UX design

I created a single-page landing page design with lo-fi wireframes, focusing on three modules with animations of the client's top three services. I proposed using animations because their services are unique and difficult to explain using images or infographics. I kept the UX design process very short and simple as the direction became very clear in the project's early days. With a single-page design, the focus was really on the animations and the story being told.

Softwares or applications used: Figma, Adobe Illustrator

‍

‍

‍Step 4 : Animation production and testing

I created storyboards of each animation with the client to establish exactly what they would like to communicate in each service explanation. After getting a green light, I started creating the line style vectors for each storyboard and then exported them in .json format to reduce the animation's file size as much as possible. I also handed .gif and .mp4 file versions of the animation to be used in other media channels.

Softwares or applications used: Figma, Adobe Illustrator

‍

‍

‍Step 5 : UI Design and UI Kit

I created a UI kit and the UI design of the final concept. I handed off the contents to the team as they are going to build the website themselves.

‍

Softwares or applications used: Figma

‍