Role: Product Designer · UI/UX Designer · Framer Developer Project Type: E-commerce · Interaction Design · 3D Web Experience Tools: Figma · Framer · CMS · 3D Interaction Design

Floréa is an editorial-style e-commerce experience designed for plant, planter, ceramics, and home-decor brands. Inspired by Mediterranean interiors, natural materials, and the quiet beauty of botanical spaces, the project explores how immersive interactions can transform a traditional online store into a more engaging product discovery experience.

The concept combines a warm visual identity with a functional shopping journey, including a scroll-driven 3D pot-making studio, a live product customizer, shoppable interiors, and a complete multi-page storefront.

The goal was to create an experience that feels as thoughtful as the products themselves—balancing visual storytelling, product personalization, and usability.

Traditional e-commerce interfaces often rely on static product imagery and conventional product detail pages. For customizable products such as planters and ceramics, this can make it difficult for customers to understand the available options or imagine how a finished product will look in their own space.

Floréa explores a different approach: making product discovery part of the experience itself.

The design needed to balance an expressive, editorial art direction with practical shopping functionality, while keeping customization intuitive and the overall interface cohesive.

The visual direction draws from Mediterranean architecture, natural textures, olive foliage, warm stone, and soft daylight.

Libre Baskerville introduces an editorial character, while Plus Jakarta Sans provides clarity across navigation, product information, and interactive controls. Generous spacing and restrained layouts allow product photography and materials to take center stage.

The homepage features a scroll-driven product story that follows a pot through its creation journey.

As visitors scroll, the pot evolves through different stages: its shape develops, materials and colours are applied, a plant is added, and the finished product moves through packaging and delivery.

A live specification card and price display accompany the experience, connecting visual storytelling with product information.

The customizer lets customers create a planter that reflects their preferences.

Customers can rotate the 3D model, explore combinations in real time, and see the price update as they make selections. The experience turns product configuration into a visual and interactive process rather than a series of disconnected form controls.

Styled interior scenes connect inspiration with product discovery. Visitors can select plants within a room to reveal product cards and add items to their cart.

This interaction creates a more contextual shopping experience, helping customers discover how individual products relate to a complete interior.

Beyond the homepage, Floréa includes product detail pages, cart and checkout flows, account creation, profile management, order tracking, wishlists, and other essential storefront screens.

The experience is designed as a connected system rather than a collection of standalone landing pages.

Even the 404 page follows the brand's playful botanical language: visitors can water a pot and watch a flower bloom.

The project was built in Framer with an emphasis on reusability, consistency, and realistic product interactions.

90+ reusable native components with variants for consistent interface patterns.

CMS-driven product pages supporting galleries, sizes, planter options, attributes, and care information.

Organized design system with reusable colour styles, typography, and consistent section and container layouts.

Persistent shopping interactions for cart, wishlist, and account experiences, supporting more realistic demonstrations.

25 designed pages covering product discovery, customization, checkout, authentication, and customer account management.

The result is a modular storefront that combines a distinctive visual direction with a scalable foundation for a product-led e-commerce brand.

Outcome Floréa demonstrates how 3D interactions, editorial art direction, and thoughtful UX can work together in a cohesive e-commerce experience.

Rather than treating customization as a secondary feature, the project makes it central to the product journey—giving visitors more ways to explore, personalize, and connect with the products they are considering.

The template is designed for plant shops, ceramics studios, planter brands, and lifestyle retailers looking for an online presence that feels immersive, considered, and distinctive.

Live website: florea.framer.website

Framer Remix: https://framer.link/LsG8qGf