/li:st/ Cosmetics

1. Introduction

/li:st/ is a cosmetics brand that offers minimalist, natural, and scientific skincare products with high standards of effectiveness and safety.

My task was to customize the website for the brand using a given default theme. The website consists of numerous files in the *.liquid format, which serve as containers for the HTML and CSS source code. It is hosted on Havaran, a platform similar to Shopify.

In this project, the design was made by a designer beforehand.

2. Process

Here is a summary of the tasks I performed:

Received the design from the designer.
Investigated the source code to identify aspects of the design that were not feasible and proposed necessary changes.
Discussed the issues identified in step 2 with both the customer and the designer.
Started the coding process.
Engaged in repetitive discussions with the customer and designer to receive feedback.

3. Tech stack

I primarily worked with HTML and CSS, and a little of JavaScript within the *.liquid files.

4. Results

Due to my limited knowledge in HTML and CSS at the time, the code I wrote could not perfectly match the desired design. Fortunately, the customer was understanding and accepted the final product.

Comparison between the Proposed design, the Default theme and the Finished version for the Navigation bar

4.2. Slider

Comparison between the Proposed design, the Default theme and the Finished version for the Slider

4.3. Featured products

Comparison between the Proposed design, the Default theme and the Finished version for the Featured products

4.4. Product introduction

Comparison between the Proposed design, the Default theme and the Finished version for the Product introduction

4.5. Featured posts

Comparison between the Proposed design, the Default theme and the Finished version for the Featured posts

4.6. Testinomials

Comparison between the Proposed design and the Finished version for the Testinomials

Comparison between the Proposed design, the Default theme and the Finished version for the Footer

5. Problems and solutions

The design was made only for the desktop view → I used the source code for the mobile view from the default theme and made some changes to make the new mobile view harmonize with the design of the desktop view.
The provided images are large (in Megabytes) that it takes the website so long to load (4s Time to interactive, desktop view) → I used tools to compress the images to make them smaller (in Kilobytes), then the website could improve the page load time (1s Time to interactive, desktop view)
Some parts of the design seemed easy to implement but they were not → I iteratively discussed with the designer, and the customer to find the optimal solutions for those parts of the design.