DreamyStudio26

Luxury Fragrance E-Commerce Platform (DreamyAroma) — Architecture & UX Engineering

DreamyStudio26 is a custom-engineered e-commerce platform built to deliver a refined digital storefront for a fragrance brand. The project involved rebuilding the default WooCommerce storefront layer to create a premium, performance-focused shopping experience that aligns with boutique luxury brands rather than traditional template-based online stores.

The platform emphasizes clean architecture, optimized rendering performance, and a consistent UI system designed to scale as the product catalog grows.

The Problem

Most WooCommerce stores suffer from several structural limitations:

• Generic product grid layouts
• Excessive DOM output from default WooCommerce templates
• Fragmented UI components
• Performance overhead from unused markup and hooks
• A visual identity that resembles thousands of other WooCommerce stores

For a fragrance brand positioned as boutique and premium, these limitations create several issues:

The shopping interface feels mass-produced rather than curated.
Product discovery lacks elegance and visual hierarchy.
Performance suffers due to unnecessary template layers.
Design consistency becomes difficult as the catalog expands.

DreamyStudio26 required a completely different approach — one where the storefront interface was engineered from the ground up rather than customized on top of WooCommerce defaults.

The Solution

Instead of styling WooCommerce output, the project replaced the storefront presentation layer entirely with a controlled UI system.

The solution included:

• A proprietary shop grid layout system (V15)
• Custom product card architecture
• Removal of legacy WooCommerce loop markup
• A curated homepage product rendering engine
• Controlled category-driven merchandising
• A performance-optimized DOM structure

By controlling the markup output directly, the platform achieves a luxury storefront aesthetic while also reducing unnecessary rendering overhead.

System Architecture

The platform runs on a custom WordPress theme specifically designed for DreamyStudio26.

Core Architecture

Frontend Layer
Custom theme templates replace WooCommerce archive output while preserving the backend commerce logic.

Commerce Engine
WooCommerce handles product management, inventory, and checkout logic.

Rendering System
Custom PHP rendering functions generate the storefront layout instead of default WooCommerce loop templates.

Content Structure
Product categories are used as merchandising “buckets” for homepage sections and curated product collections.

Custom Shop Interface (V15)

A proprietary layout system known internally as V15 was developed as the canonical shop interface.

The V15 system defines:

• Grid structure
• Product card layout
• Pagination interaction
• Class naming standards
• DOM hierarchy

Unlike typical WooCommerce themes that layer CSS on top of default markup, V15 replaces the archive rendering structure entirely.

This ensures:

• predictable layout behavior
• minimal DOM complexity
• easier UI maintenance
• consistent brand presentation

Product Card Design System

The product card component is the core visual element of the storefront.

The design prioritizes:

• clean typography
• large product imagery
• subtle hierarchy between product name and price
• balanced spacing for luxury aesthetics

Each card follows a strict structure to ensure visual consistency across all product grids.

The card system was later evaluated for reuse across the homepage to maintain UI consistency throughout the storefront.

Homepage Product Rendering Engine

Rather than relying on default WooCommerce widgets, the homepage uses a custom product rendering system.

Products are dynamically sourced from curated category buckets such as:

• fragrance families
• device collections

This approach allows the homepage to function as a merchandising layer rather than simply displaying random product listings.

Benefits include:

• better storytelling around product categories
• improved navigation into the catalog
• controlled presentation of featured products

Performance Optimization

A major goal of the project was reducing unnecessary frontend overhead.

Optimization strategies included:

• removal of unused WooCommerce templates
• elimination of redundant wrapper markup
• strict control of CSS selectors
• reduction of DOM depth in product grids

By replacing WooCommerce’s default loop structure with a lean custom renderer, the platform improves page rendering efficiency while maintaining flexibility.

UX Philosophy

DreamyStudio26 follows a minimalist luxury design philosophy.

Key principles include:

• Product-first presentation
• Clean visual hierarchy
• Spacious layouts
• Subtle interactions rather than aggressive animations

The interface intentionally avoids discount-heavy visual patterns common in large marketplace stores.

Instead, the goal is to replicate the feeling of browsing a boutique fragrance brand.

Technical Stack

WordPress
WooCommerce
Custom PHP theme architecture
Modern CSS layout systems
Performance-optimized frontend structure

My Role

I was responsible for the complete storefront engineering and UX architecture of the platform.

Responsibilities included:

• designing the shop interface system (V15)
• building the product card design architecture
• engineering the homepage product rendering system
• overriding WooCommerce archive templates
• optimizing DOM structure and frontend performance
• defining internal UI standards for the storefront

Results

The final platform achieves several improvements over traditional WooCommerce implementations:

• A distinctive luxury storefront design
• A consistent product presentation system
• Reduced frontend complexity
• Faster rendering performance
• Greater control over future UI expansion

DreamyStudio26 demonstrates how a standard e-commerce engine can be transformed into a refined brand-driven storefront through careful engineering and UI system design.

Dreamy AC Engine

Intelligent Abandoned Cart Recovery System for WooCommerce

Dreamy AC Engine is a custom-built abandoned cart recovery plugin developed to help WooCommerce stores recover lost revenue through intelligent cart tracking, behavioral triggers, and automated recovery campaigns.

The project was designed to solve a common limitation in typical abandoned cart plugins: most rely on simple email reminders and provide limited control over recovery logic, analytics, and campaign customization. Dreamy AC Engine approaches the problem as a revenue recovery engine, combining cart tracking, automation, and campaign management into a unified system built specifically for performance and scalability.

The Problem

In most e-commerce environments, a significant percentage of shopping carts are abandoned before checkout. While many plugins attempt to address this issue, they often suffer from several limitations:

• Limited visibility into cart abandonment behavior
• Basic reminder emails with little personalization
• Weak analytics on recovery performance
• Heavy plugin overhead that slows down the site
• Lack of integration between cart data, campaigns, and conversion tracking

For stores operating at scale, these limitations result in missed recovery opportunities and poor insight into customer behavior.

Dreamy AC Engine was built to provide a more robust and flexible solution.

The Solution

Dreamy AC Engine introduces a modular abandoned cart recovery system designed specifically for WooCommerce environments.

The plugin captures cart activity in real time and triggers automated recovery campaigns when a cart meets abandonment criteria. Campaigns can then be delivered through automated email sequences that encourage the user to complete their purchase.

The system emphasizes:

• Accurate cart tracking
• intelligent recovery triggers
• clean campaign management workflows
• minimal performance overhead

This approach turns abandoned carts into actionable revenue opportunities.

System Architecture

Dreamy AC Engine is built as a standalone WordPress plugin designed to integrate directly with WooCommerce’s cart and session systems.

Core Components

Cart Tracking Layer
Captures cart activity, product selections, and session data to determine when a cart becomes abandoned.

Abandonment Detection Engine
Uses timing rules and session monitoring to classify when a cart should trigger a recovery campaign.

Campaign Automation System
Manages automated email sequences designed to bring the user back to their cart.

Recovery Tracking Module
Monitors when users return and complete purchases, allowing the system to measure recovery success.

Intelligent Cart Tracking

Dreamy AC Engine continuously monitors cart activity during the shopping session.

The tracking system records:

• cart contents
• product details
• timestamps of activity
• session identifiers

When a user leaves the site without completing checkout, the system determines whether the cart meets abandonment criteria and initiates the recovery workflow.

This provides more reliable abandonment detection compared to basic timeout-based solutions.

Automated Recovery Campaigns

The plugin includes a campaign engine designed to re-engage customers after cart abandonment.

Campaigns can include:

• reminder emails
• product summaries from the abandoned cart
• purchase incentives or reminders
• direct links that restore the cart

Each campaign can be structured as a sequence, allowing stores to gradually encourage the user to return and complete the purchase.

Abandoned Cart Product Rendering

A key feature of Dreamy AC Engine is the abandoned cart product grid, which visually presents the items the customer left behind.

This grid typically includes:

• product image
• product title
• short description
• price information
• quick return-to-cart link

The design emphasizes clarity and familiarity so that customers immediately recognize the items they previously selected.

Analytics & Recovery Insights

The plugin also provides insights into cart abandonment behavior and recovery performance.

Metrics tracked include:

• total abandoned carts
• recovered carts
• recovery conversion rate
• campaign performance

These insights help store owners understand which campaigns are effective and where recovery strategies can be improved.

Performance Optimization

Many abandoned cart plugins introduce heavy database operations and tracking scripts that degrade site performance.

Dreamy AC Engine was built with performance in mind:

• lightweight tracking logic
• optimized database queries
• minimal frontend scripts
• controlled event tracking

This ensures that cart tracking does not interfere with the shopping experience.

Technical Stack

WordPress Plugin Architecture
WooCommerce Cart & Session APIs
Custom PHP backend logic
Automated email campaign system
Optimized database structures for cart tracking

My Role

I designed and developed the entire abandoned cart recovery system, including:

• plugin architecture and data model
• cart tracking and abandonment detection logic
• recovery campaign engine
• abandoned cart product grid rendering
• performance optimization and query design
• analytics tracking for recovery performance

Results

Dreamy AC Engine transforms abandoned carts from lost sales into measurable revenue opportunities.

Key benefits include:

• improved cart recovery rates
• better insight into customer purchasing behavior
• automated re-engagement workflows
• minimal impact on storefront performance

The plugin provides WooCommerce stores with a scalable and intelligent recovery system designed to maximize revenue from otherwise lost transactions.