📄 Introduction

The project involved redesigning existing website pages to improve visual design and layout. The goal was to ensure that the visuals align with the product and its messaging, addressing areas where the existing visuals did not correspond with the copywriting.

🎯 Understanding the Product

To gain a comprehensive understanding of the company's product, I thoroughly studied the provided document about Alqen. This helped in grasping the essence of the product and understanding its core values.

👀 Identifying Visual Misalignment

Several existing visuals didn't align with the product or the copywriting on the website pages. Elements such as images and layouts felt disconnected from the product's brand image and messaging. Due to confidentiality reasons, only select portions of the previous design can be shared to illustrate the visual misalignment without compromising sensitive information.

The previous visual representation was similar to the copywriting, but it lacked clarity and conciseness. It caused confusion among users as it didn't showcase the real product design elements within Alqen's dashboard.

The previous visual representation was similar to the copywriting, but it lacked clarity and conciseness. It caused confusion among users as it didn't showcase the real product design elements within Alqen's dashboard.

🥅 Objective & Approach

The objective was to revamp the visual elements and layouts to better complement the product and its messaging. My approach involved carefully analyzing the existing website, understanding its visual language, and incorporating the core values of the product into the redesign.

🪄 Redesign Process

  1. Analysis and Research: Reviewed the existing website pages, noting areas requiring improvement.
  2. Wireframing and Ideation: Drafted wireframes to envision the new layouts, focusing on enhancing visual appeal and coherence with the product.
  3. Design Implementation: Utilized design tools to create new visuals and layouts that seamlessly aligned with the product and its copywriting.

✍🏽 Alignment with Copywriting

The redesigned visuals and layouts were meticulously crafted to harmonize with both the updated visuals and the refined copywriting. The latest copy, streamlined by the copywriter for conciseness and impact, seamlessly aligned with the visuals. This concerted effort aimed to ensure coherence between visual elements and refined textual content, creating a unified and engaging user experience.

🖌️ UI Style Guide

1. Brand Colors

Brand colors were chosen to reflect what Alqen stands for.

Brand Colors.png

2. Typography