Reducing Order Cancellations at Eyeconic

Overview

Eyeconic, VSP Global's direct-to-consumer eyewear platform, identified order cancellations as a top business priority. Leadership directed the Site Optimization team to diagnose the problem and reduce churn — a high-visibility initiative with measurable revenue implications.

I was brought in across both design and front-end development, taking work from mid-fidelity wireframes through stakeholder approval and into production implementation.

The Problem

Customers were abandoning completed orders for a cluster of interconnected reasons:

• Unclear or hard-to-find cancellation and return policy information
• Friction and confusion during checkout and payment
• Surprise at shipping costs or delivery timelines surfaced too late
• Insufficient clarity around prescription lens options and compatibility

The common thread: customers were reaching decision points without the information they needed to feel confident. Rather than seeking help, many simply cancelled.

My Role

This project sat at the intersection of communication design and front-end engineering — a natural fit for my hybrid skill set.

• Designed mid-fidelity wireframes in Figma to map proposed UI changes
• Presented designs through formal stakeholder review for approval prior to build
• Implemented approved designs in HTML, CSS, and JavaScript within Salesforce Commerce Cloud
• Ensured all implementation met WCAG 2.1 AA accessibility standards

Design Approach

Rather than redesigning entire flows, the strategy was to surface critical information earlier and more contextually — before customers reached a point of uncertainty.

Modals and inline alerts

Contextual modals and inline messaging were introduced at key friction points — particularly around shipping cost and delivery time — to surface expectations before checkout rather than after. The goal was to eliminate surprise as a cancellation driver.

Product detail page improvements

The prescription lens selection experience was refined to reduce ambiguity for customers unsure about compatibility or configuration. Clearer microcopy, better visual hierarchy, and contextual tooltips were added to guide decision-making.

Mid-fidelity wireframes kept the review process focused on information architecture and interaction decisions rather than visual polish — which accelerated stakeholder approval cycles.

Process

• Reviewed customer cancellation data and identified the key problem clusters
• Mapped intervention opportunities across the purchase funnel
• Designed mid-fidelity wireframes in Figma for each proposed change
• Presented designs to Merchandising, Marketing, and Creative stakeholders for formal review
• Iterated on feedback and received sign-off before moving to implementation
• Built and deployed all changes within Salesforce Commerce Cloud
• Conducted QA and UAT across device viewports and accessibility standards

Outcome

This placed the initiative among the team's top contributors to Eyeconic's 2025 performance goals, which saw revenue, gross margin, and EBITDA all exceed plan.

Beyond the numbers, the project demonstrated the value of a designer who can own both the design rationale and the production implementation — compressing the handoff gap and maintaining intent from wireframe to live experience.

Reflections

One of the most valuable aspects of this project was working across the full design-to-implementation arc. Having designed the wireframes myself, I could make informed front-end decisions that preserved the UX intent — without relying on another developer to interpret my specs.

If I were to revisit this work, I'd advocate for post-launch qualitative research — exit surveys or session recordings — to understand whether the changes addressed root causes or surfaced new friction points. The quantitative metric tells us what changed; the qualitative would tell us why.