COSTA DEL MAR · 2021 · web
Transforming the PDP into a guided lens decision journey
Costa del Mar's customers chose lenses based on color preference, not performance. I redesigned the Product Detail Page into a guided experience that shifts decisions from taste to context. The new, data-driven flow boosted add-to-cart rates by 4.2% and the conversion rate by 2.7%, building user trust and clarity.
+2.7%
Conversion Rate
+4.2%
Add to Cart
+7%
CTR on Lens Selector
THE CONTEXT
A loyal customer base with a hidden problem
Costa del Mar is an iconic brand with a deeply loyal following, especially among fishing and on-the-water enthusiasts. Customers trust the brand implicitly, often for generations. However, user research uncovered a critical disconnect between their best-in-class lens technology and the e-commerce experience.
Customers were loyal to the brand, but their choices were based on instinct, not insight.
- Despite relying on Costa for performance, their online purchasing behavior was driven by aesthetics. The data was eye-opening:
- 80% of users chose their lens color based on personal taste or prior knowledge, reporting that the site offered no guidance on what lens was best for their needs.
- While polarization was a key selling point, only 65% of users could tell if the lenses they were viewing were polarized.
This meant customers were often buying the wrong tool for the job, leading to a subpar experience and representing a massive loss of revenue and brand equity for the business.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
My goal was to shift the conversation from "what color do I like?" to "what lens do I need?"
MY ROLE
Leading design from strategy to execution
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
THE CHALLENGE
Navigating business skepticism and technical constraints
The path to the final solution involved overcoming two critical hurdles that required more than just design skills.
1.
Proving the value: Turning skepticism into buy-in
The business team was initially hesitant about a "lens-first" selection flow, fearing it would add friction and hurt conversion. Rather than debating opinions, I let the data speak for itself. I designed two variants—a classic picker versus a "Double Selector" for lens and frame—and we ran a focused A/B test.
The results were clear and decisive. The Double Selector variant delivered:
- 3% increase in conversion rate
- 3% increase in revenue
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
2.
Adapting on the fly: Solving an engineering blocker
Mid-project, the engineering team flagged a significant risk: our proposed design would trigger too many backend API calls, threatening to slow down the page and harm site performance.
Performance is non-negotiable. I immediately partnered with the developers to understand the bottleneck and pivoted to a simpler interaction pattern that preserved the core guidance and clarity of the user experience while removing the technical risk.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
THE SOLUTION
Guiding decisions, not just choices
The redesigned Product Detail Page (PDP) was designed to educate users and guide them toward the right choice by creating a clear, logical path:
- Key Product Features: Essential information like polarization and bio-based materials are surfaced as scannable badges, allowing users to see key features at a glance.
- Contextual Guidance: The core of the solution lies in providing dynamic guidance for the specific lens selected. Benefit-oriented descriptions and badges explain the best use for each lens color in real-world conditions, translating complex technology into simple recommendations.
- Layered Information: For users who want to dive deeper, a clear and accessible link to a comprehensive lens selection guide offers more detailed information on demand.
- Guided Flow: This new layout gently guides the user to consider lens performance first and then frame style, creating a logical journey from function to taste.
- Key Product Features: Essential information like polarization and bio-based materials are surfaced as scannable badges, allowing users to see key features at a glance.
- Contextual Guidance: The core of the solution lies in providing dynamic guidance for the specific lens selected. Benefit-oriented descriptions and badges explain the best use for each lens color in real-world conditions, translating complex technology into simple recommendations.
- Layered Information: For users who want to dive deeper, a clear and accessible link to a comprehensive lens selection guide offers more detailed information on demand.
- Guided Flow: This new layout gently guides the user to consider lens performance first and then frame style, creating a logical journey from function to taste.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
THE IMPACT
Measurable, sustained, and business-changing
After a successful test launch in a single market, the new PDP was rolled out globally. In the U.S., Costa’s primary market, the redesign delivered significant, measurable results:
- +7% click-through rate on the lens selector
- +4.2% add to cart rate
- +2.7% conversion rate after the full rollout
The strongest evidence of its success is its longevity. The design has remained essentially unchanged in production since its launch in 2021, proving its sustained value in a fast-moving e-commerce landscape.
KEY TAKEAWAYS
My approach to senior-level design
This project was a powerful reminder of three core principles that drive my work:
- Evidence converts resistanceWhen faced with stakeholder skepticism, good data is the most persuasive tool you have. The A/B test didn't just solve a design problem; it aligned the entire team and built a foundation of trust for future initiatives.
- Performance is a core part of UXA brilliant design that breaks the tech stack is a liability, not a solution. Proactively partnering with engineering to anticipate and solve constraints is essential to shipping high-quality work on time.
- Guide decisions, not just choicesThe best digital experiences don't just present users with options; they help them make better decisions. By focusing on user education and guidance, we created more value for the customer and, in turn, for the business.
KEY TAKEAWAYS
My approach to senior-level design
If you found this e-commerce optimization project interesting, see how I applied a similar data-driven approach to streamline the most critical step of the funnel.
RAY-BAN
Optimizing the checkout for an e-commerce leader
E-COMMERCE OPTIMIZATION
HEURISTIC ANALYSIS
MOBILE-FIRST
Or, see all my work
ABOUT ME
WORKS
CONTACTS
COSTA DEL MAR · 2021 · web
Transforming the PDP into a guided lens decision journey
Costa del Mar's customers chose lenses based on color preference, not performance. I redesigned the Product Detail Page into a guided experience that shifts decisions from taste to context. The new, data-driven flow boosted add-to-cart rates by 4.2% and the conversion rate by 2.7%, building user trust and clarity.
+2.7%
Conversion Rate
+4.2%
Add to Cart
+7%
CTR on Lens Selector
THE CONTEXT
A loyal customer base with a hidden problem
Costa del Mar is an iconic brand with a deeply loyal following, especially among fishing and on-the-water enthusiasts. Customers trust the brand implicitly, often for generations. However, user research uncovered a critical disconnect between their best-in-class lens technology and the e-commerce experience.
Customers were loyal to the brand, but their choices were based on instinct, not insight.
Despite relying on Costa for performance, their online purchasing behavior was driven by aesthetics. The data was eye-opening:
- 80% of users chose their lens color based on personal taste or prior knowledge, reporting that the site offered no guidance on what lens was best for their needs.
- While polarization was a key selling point, only 65% of users could tell if the lenses they were viewing were polarized.
This meant customers were often buying the wrong tool for the job, leading to a subpar experience and representing a massive loss of revenue and brand equity for the business.
The original Costa del Mar Product Detail Page (PDP)
My goal was to shift the conversation
from "what color do I like?" to "what lens do I need?"
MY ROLE
Leading design from strategy to execution
As the sole Senior UX/UI Designer for Costa del Mar within EssilorLuxottica, I owned the design process end-to-end. I partnered with research, business, and IT stakeholders to frame the problem, define a data-driven strategy, and deliver a solution that was desirable for users, technically feasible, and valuable for the business.
THE CHALLENGES
Navigating business skepticism and technical constraints
The path to the final solution involved overcoming two critical hurdles that required more than just design skills.
1.
Proving the value: Turning skepticism into buy-in
The business team was initially hesitant about a "lens-first" selection flow, fearing it would add friction and hurt conversion. Rather than debating opinions, I let the data speak for itself. I designed two variants—a classic picker versus a "Double Selector" for lens and frame—and we ran a focused A/B test.
The results were clear and decisive. The Double Selector variant delivered:
- +3% conversion rate
- +3% revenue
Classic picker
Double selector
Our proposal featured a single panel for all customization. Frame and lens selections happened in one place, with a product preview that updated in real-time based on the user's choices.
2.
Adapting on the fly: Solving an engineering blocker
Mid-project, the engineering team flagged a significant risk: our proposed design would trigger too many backend API calls, threatening to slow down the page and harm site performance.
Performance is non-negotiable. I immediately partnered with the developers to understand the bottleneck and pivoted to a simpler interaction pattern that preserved the core guidance and clarity of the user experience while removing the technical risk.
THE SOLUTION
Guiding decisions, not just choices
The redesigned Product Detail Page (PDP) was designed to educate users and guide them toward the right choice by creating a clear, logical path:
- Key Product Features: Essential information like polarization and bio-based materials are surfaced as scannable badges, allowing users to see key features at a glance.
- Contextual Guidance: The core of the solution lies in providing dynamic guidance for the specific lens selected. Benefit-oriented descriptions and badges explain the best use for each lens color in real-world conditions, translating complex technology into simple recommendations.
- Layered Information: For users who want to dive deeper, a clear and accessible link to a comprehensive lens selection guide offers more detailed information on demand.
- Guided Flow: This new layout gently guides the user to consider lens performance first and then frame style, creating a logical journey from function to taste.
Product Detail Page (PDP) for sunglasses (desktop)
Product Detail Page (PDP) for sunglasses (mobile)
Product Detail Page (PDP)
for eyeglasses (mobile)
Product Detail Page (PDP)
for apparel (mobile)
A selection of components designed in Figma for the Product Detail Page redesign.
THE IMPACT
Measurable, sustained, and business-changing
After a successful test launch in a single market, the new PDP was rolled out globally. In the U.S., Costa’s primary market, the redesign delivered significant, measurable results:
- +2.7% conversion rate after the full rollout
- +4.2% add to cart rate
- +7% click-through rate on the lens selector
The strongest evidence of its success is its longevity. The design has remained essentially unchanged in production since its launch in 2021, proving its sustained value in a fast-moving e-commerce landscape.
KEY TAKEAWAYS
My approach to senior-level design
This project was a powerful reminder of three core principles that drive my work:
- Evidence converts resistanceWhen faced with stakeholder skepticism, good data is the most persuasive tool you have. The A/B test didn't just solve a design problem; it aligned the entire team and built a foundation of trust for future initiatives.
- Performance is a core part of UXA brilliant design that breaks the tech stack is a liability, not a solution. Proactively partnering with engineering to anticipate and solve constraints is essential to shipping high-quality work on time.
- Guide decisions, not just choicesThe best digital experiences don't just present users with options; they help them make better decisions. By focusing on user education and guidance, we created more value for the customer and, in turn, for the business.
WHAT'S NEXT?
Continue the story
If you found this e-commerce optimization project interesting, see how I applied a similar data-driven approach to streamline the most critical step of the funnel.
RAY-BAN
Optimizing the checkout for an e-commerce leader
How applying foundational principles led to a significant conversion uplift
E-COMMERCE OPTIMIZATION
HEURISTIC ANALYSIS
MOBILE-FIRST
Or, see all my work