AAVRANI

A Premium Skincare Experience Rooted in Culture and Clarity

Overview

AAVRANI is a beauty brand focused on plant-based skincare products. The goal of this project was to design a digital experience that reflects the brand’s identity while making it easy for customers to explore products and understand their benefits.

Focus Area

The design focuses on creating clear product presentation, strong visual hierarchy, and a smooth browsing experience across devices.

Roles

UI UX Designer

Platform

Responsive Web Design (Desktop, Tablet, Mobile)

Tools

Figma
Photoshop
Illustrator

The Challenge

Skincare products often contain detailed information such as ingredients, benefits, routines, and clinical claims. Presenting all of this clearly while keeping the browsing experience simple was a key challenge.

Users often struggled with:

• Understanding product benefits quickly
• Navigating multiple product categories and routines
• Comparing products with many details and attributes

Without a clear structure, product information can easily become overwhelming and slow down purchase decisions.

Key Improvements

The design focused on simplifying product discovery while clearly communicating the brand’s value.

• Introduced clear product hierarchy to help users quickly scan product information
• Simplified category navigation to make product exploration easier
• Structured product cards and pages to highlight the most important details first
• Used icons and visual cues to communicate product benefits quickly
• Established a consistent visual system to maintain clarity across the website

How I Started

Working closely with the Creative Director and PM, I focused on defining clear structure, visual rhythm, and storytelling flow.

The goal wasn't to reinvent the brand.It was to give every element space to breathe and connect.

01

Research & Benchmarking

I explored leading beauty and skincare websites to understand common patterns used in product presentation, ingredient storytelling, and product discovery.

This helped me identify familiar mental models that users already trust.

02

Structuring the Experience

I organized the website structure to support clear navigation and intuitive product browsing. The layout was designed to guide users naturally through the brand story, product categories, and individual product pages.

This early planning ensured that every page felt intentional and interconnected.

03

Wireframing Key Flows

Wireframes were created to define the layout structure for the homepage, product pages, and shopping flow.

These wireframes helped validate that the experience felt intuitive, coherent, and conversion-focused long before any UI styling was applied.

04

Moving Into High-Fidelity Design

The interface was designed with attention to typography, spacing, and visual hierarchy to create a polished and brand-aligned experience.

05

Creating Scalable Design System

I established reusable UI components and consistent styling rules to maintain visual consistency across the platform. I defined typography styles, color tokens, spacing rules, and grid structures to ensure a cohesive interface across different pages.

This system allows the interface to scale easily as new pages, products, and campaigns are added.

05

Creating Scalable Design System

This system allows the interface to scale easily as new pages, products, and campaigns are added.

Design Solutions

Challenge:

The brand needed to communicate science, tradition, and clean ingredients quickly so users could understand the brand value within seconds.

Solution:

I simplified the brand message into three short, scannable content blocks supported by icons.

Result:

This allowed users to quickly understand the key ideas visually without relying on long paragraphs.

Challenge:

Products can be explored by rituals, concerns, and categories, which can easily confuse users and make product discovery slower.

Solution:

I grouped the navigation into a compact horizontal tab system with a limited number of clearly labeled categories.

Result:

This helped users explore product groups more easily and find relevant products faster without feeling overwhelmed.

Challenge:

Each product contains multiple details such as price, size, reviews, clinical claims, and “New” tags, which can make product cards difficult to scan quickly.

Solution:

I structured the product cards so the product image and name dominate the visual focus, while secondary information follows in a clear and predictable order. The Add to Cart button was placed in a consistent position across all cards.

Result:

This helped users quickly scan products, compare options more easily, and move toward purchase with less friction.

Challenge:

PDPs needed to present benefits, ingredients, claims, FAQs, and clinical results without overwhelming users.

Solution:

I showed the most important information first and revealed additional details step by step. The page begins with a short benefit overview, followed by icon highlights and expandable sections for deeper information.

Result:

This allowed users to understand key product information quickly while accessing deeper details only when needed.

Challenge:

Integrating social proof without disrupting the page layout.

Challenge:

I placed social proof sections within clear card blocks and used enough whitespace around them so they stand out without breaking the flow of the page.

Result:

This helped users notice reviews and testimonials easily while keeping the overall layout clean and balanced.

Challenge:

Creating a modular and scalable design system that can support future growth.

Solution:

I designed a modular system using familiar card patterns, consistent spacing, clear typography, and reusable section templates.

Result:

This makes new pages easier to create while keeping the interface consistent across the website.

Expected Impact

Faster product discovery through clear navigation and scannable product categories

Better product understanding through structured PDP content and strong visual hierarchy

Improved add-to-cart flow with optimized mobile cart drawer and sticky CTAs

Higher user engagement through ingredient education sections and skincare quiz prompts

Consistent user experience through reusable components and predictable layouts

Thanks for scrolling along

Appreciate you taking the time to explore this project. I hope it offered useful insight into my UX process and how I design for clarity, scale, and real user needs.

Prev Project

Next Project