A little bit background behind the project
Which page involved?
Homepage
Product Detail Page
Sitewide UI issues
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.
KAMA Web UI Upgrade
Homepage Improvement
Before
After
Old UI analysis
Unecessary gaps and margin
The breadcrumb occupies nearly one-fifth of the first screen, and the textured background visually creates excessive spacing.
Considering use transparent Header
Visually Unbalanced Banner
Miss aligned product information
Distracted colour elements
Colourful product boxes
Unnecessary gaps and margins
Overload of contents
Messy visual elements
Styling issues
Uncertain grey colour
Improvement points - What have been done
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.
Remove the texture background and use a pure white colour instead.
Remove unnecessary paddings and margins
Keep image assets clean: minimal text, neutral background colours.
Overall:
Product images
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.
Content Blocks
Remove the left and right margin for content blocks
Remove the gap between two content blocks
Change box button to text link and apply the hover animation for the text link
Reduce the content character count
Image Assets
Product detail Improvement
Before
After
