KAMA UI Facelift

Background

The brand required a UI facelift for the current website. After conducting an in depth analysis and reviewing visual references, we identified that many of the issues stemmed from underdeveloped brand assets rather than structural UX problems. Given the limited project budget, our strategy focused on refining existing visual assets and introducing subtle but impactful design enhancements to elevate the overall experience and create a more premium feel.

As part of the white label ecosystem, Kama was the first brand to go live. Since its initial launch, several new features have been developed across the platform. We took this opportunity to incorporate those newly built features into the facelift, ensuring the refreshed experience not only looked more refined but also aligned with the latest product capabilities.

Homepage
Product Detail Page
Sitewide UI issues

Introduction

Which Pages involved?

Project Background

Homepage Improvement

Before

After

Before & After

Analysis Old UI

Visually Unbalanced Banner

_______________________________

Distracted colour elements

__________________________

Colourful product boxes

____________________

Unnecessary gaps and margins

__________________

Miss aligned product information

_________________________

Overload of contents

______________________________

Messy visual elements

___________________________________________

Styling issues

______________________

_______________________________

Uncertain grey colour

____________________________

Considering use transparent Header

___________________

Unecessary gaps and margin

The breadcrumb occupies nearly one-fifth of the first screen, and the textured background visually creates excessive spacing.

Old Homepage

Homepage banner:

Apply a darker colour to the promo bar and footer to enhance clarity and contrast on the page
Use a transparent header. → Reduces visual clutter, creates a clean, modern immersive look.
Increase banner height. → Gives the content more breathing space and creates a stronger first impression.
Replace button with a text link. → Keeps the design light and minimal, avoids distraction from the main message.
Increase headline font size. → Creates a clear visual hierarchy between the headline and body copy.
Limit banner text to a maximum of two font sizes.
Layout: Position text and visuals to maintain balance.

Overall:

Remove the texture background and use a pure white colour instead.
Remove unnecessary paddings and margins

Improvement points-What have been done

Product shots

Apply a neutral light grey background colour to the product shots.
Remove any colourful boxes from the background.
Center the product bottle in the image.
Center-align the product information.
Use lowercase for the product name.
Change the description font style and keep it to a single line as it's a more slim style.