L'Oreal Essie Pinterest Tool
Ideation and implementation of L’Oreal Essie Pinterest tool.
The Challenge
Essie users were finding nail inspiration on Pinterest but lacked a direct way to translate those images into exact product matches. This created a "social-to-store" gap where high-intent inspiration was lost because the manual search for specific shades was too difficult. Additionally, the site needed a more dynamic way to feature seasonal collections alongside these user-generated inspirations.
The Solution
I designed a multi-step "Pinterest Tool" that bridges this gap by allowing users to sync their boards and extract real-time color matches from their Pins. By integrating a "Switchable Module" architecture, we allowed the UI to pivot between personalized social content and targeted promotions like the Reem Accra collection.
Essie Pinterest landing page (anonymous users)
Instructional Entry Point: Features a clear "Step 1" callout that guides users to connect their Pinterest profile to begin the personalized color-matching experience.
Dynamic Promotion Modules: Utilizes "Switchable Modules" (like the Reem Accra Collection) that allow the landing page to pivot content based on current marketing campaigns or seasonal trends.
Segmented User Collections: Provides a dedicated section for users to explore their own saved inspirations, bridging the gap between social discovery and brand products.
Pinterest modal
Transparent Permissioning: Designed a focused Pinterest OAuth modal that clearly outlines the data being accessed—profile, Pins, and boards—to establish user trust.
Branded Integration: Integrated a co-branded "Essie Pin Configurator" interface that maintains visual consistency between the social platform and the web application.
Explicit User Control: Features high-visibility "Okay" and "Not Now" actions to ensure the user remains in control of the data-sharing process.
Essie Pinterest tool collection landing page
Step-Based Navigation: Implemented a "Step 2" instructional overlay to guide the user to select specific collections for deeper detail.
Visual Filtering Grid: Developed a 6-tile image-rich interface for users to browse and filter their inspirations into categories like "My Favourite Gold" and "Nail Art".
Functional Continuity: Includes a "Back" utility and help icon to assist users in navigating the selection process without losing their progress.
Essie Pinterest tool collection detail page
Dynamic Swatch Synchronization: Engineered a sticky color palette that updates in real-time based on the user's selected Pinterest images, creating a direct visual link between social inspiration and product swatches.
Deep-Level Pinterest Integration: Implemented "Step 3" of the workflow, allowing users to drill down into specific Pins to extract and match colors with Essie’s Gel Couture line.
Intelligent Content Mapping: Developed a Pinterest-style masonry grid that displays individual pins alongside automated color recommendations to streamline the product discovery process.
Essie Pinterest tool product detail page
Final Discovery Step: Features a "Step 4" tooltip that leads the user to select the final product matched from their chosen Pinterest inspiration.
Quick-View Product Integration: Displays a "the best-est" product modal that surfaces key details—price, shade description, and social sharing—directly within the discovery flow.
Direct Path to Purchase: Streamlines the transition from inspiration to conversion with an "Add to Cart" and "View Full Details" utility at the end of the matching process.
Essie Product detail page
Direct Conversion Path: Designed a dedicated product detail view that surfaces core information—including shade description, pricing, and social sharing—immediately following the color-match discovery.
Integrated Selection Utility: Features an "Add to Bag" call-to-action with quantity selection, allowing for a seamless transition from social inspiration to the final purchase.
Discovery-Driven Cross-Selling: Implements a "By Color" recommendation row at the bottom of the interface, showcasing a curated gradient of related shades like "Pearly White" and "Satin Slipper" to encourage further exploration.
Essie cart
Seamless Checkout Integration: Implemented a "Checkout on Amazon.com" feature within the mini-cart, providing a trusted third-party fulfillment option directly from the brand's digital tool.
Persistent Cart Visibility: Designed a sleek slide-out "Your Essie Bag" modal that allows users to review selected items, adjust quantities, or remove products without navigating away from the seasonal discovery page.
Limited Edition Contextualization: Positioned the cart overlay atop themed content like the "Winter 2017 Collection," ensuring the shopping experience feels integrated with the curated seasonal browsing journey.