UI DesignE-commerceResponsiveVTEX

Redesigning the Shopping Experience: From Lifestyle to Organization.

Strategic redesign of two retail giants via VTEX.

Clients Petite Jolie + Ou Role UI Designer Team 3 Designers + 3 Devs Platform VTEX Status Both live

Process

Design process for both brands

Immersion & Benchmarking

Brand identity analysis, competitive landscape, VTEX constraints.

Information Architecture

Navigation, categories, and content prioritization.

UI Design & Prototyping

High-fidelity screens, mobile-first, VTEX components.

Dev Handoff & QA

Structured handoff, design tokens, QA rounds.

Petite Jolie

Youthful, trend-driven shopping

View live site ↗

Homepage

Editorial-First Discovery

Editorial homepage, not a catalog. Hero, category carousels, thumb-friendly mobile.

Product Listing

Scannable Grid with Smart Filters

4-column grid, sale badges, color variants, sticky mobile filters.

Product Detail

Immersive Product Experience

Multi-angle gallery, video, cross-sell, ratings with verified badges.

Institutional

Brand Story & Sustainability

J-Lastic innovation, sustainability narrative, trust signals for conversion.

Contextualization & Cross-Selling: Weather-Based Shopping

Discovery logic based on local temperature, connecting catalog to consumer's reality.

<Ou>

Clean, minimal, conversion-focused

View live site ↗

Homepage

Collection-First Architecture

Products by collection, ambient photography, curated kits.

Product Listing

Multi-Faceted Filtering System

Sidebar filters, clean grid, category education.

Product Detail

Technical Depth for Considered Purchases

Gallery, expandable specs, bundles, trust signals.

Product Line Storytelling Page

Hero product line page with lifestyle imagery and feature education.

Institutional

Brand Story & Trust Foundation

30-year heritage, quality, sustainability, complete brand ecosystem.

Authority & Average Order Value: Kits and Social Proof

Curated kits for higher AOV, strategic social proof for trust.

Results

Impact by brand

Petite Jolie

100% thumb-friendly navigation

Visual prioritization of high-appeal categories

Reduced cognitive steps to products

Better mobile storefront scannability

<Ou>

Clearer primary vs. secondary info

Improved action states

Reduced reading effort

Consistent across purchase steps

Learnings

Strategic takeaways

Visual Flexibility on VTEX

Max brand identity within VTEX constraints.

UX as Business Differentiator

User context (weather/location) drives organic cross-selling.

Squad Collaboration

3+3 squad: impeccable handoff and Design System vision.