Case Study : Essilor Site Consolidation

Essilor USA Site Consolidation

Screen Shot 2017-10-19 at 6.46.33 PM

The Ask

Essilor of America is the largest manufacturer of eyeglass lenses in the United States.

The corporate Essilor brand was struggling with low awareness and affinity. The sub-brands within the Essilor family felt fragmented to the consumer. The Essilor brand team decided to bring the sub-brands under one marketing umbrella: Essilor USA.

Seven websites needed to be consolidated into one cohesive site that clearly communicated the product's benefits, how they worked together and how they can help solve the user's specific eye issues.

My role was to lead user experience design, strategy, and research, direct cross-discipline teams, and manage client relationship during the project lifecycle.

0117171709a

Getting Started

I ran a 3-day immersion workshop on site at the clients' office. I lead sessions with a group of more than 20 stakeholders focusing on developing key personas, defining needs for content, prioritizing key functionality and developing consumer journeys.

This session helped to build bridges between the team and stakeholders as well as push to unify the vision across a very large group of stakeholders with different goals.

0117171635
0117171538

Consolidation

After our session, the core content "wants" from a business perspective were clearer.  The client wanted us to repurpose as much content as possible to reduce costs, so I took a deep dive across all sites to audit content.

We created a content matrix that would grow and evolve over the course of the project. It helped to identify redundant, quality, and archivable content. It was key to building out the sitemap and content development needs.

Even though the client thought they knew their target personas, I wanted to speak to them to make sure we were clear on what the site should do for them.

Screen Shot 2019-01-06 at 1.31.42 PM
Screen Shot 2019-01-06 at 1.34.57 PM

Interviews

With a product that could seem complicated to consumers, I needed to really understand how they thought about this space to help us inform the messaging and how we present the content architecture.

I performed interviews with opticians as well as consumers to get their perspective. The key learning was that consumers don't necessarily key on brand name.  They think about the specific need that the lens they are buying is solving. For example, they would ask for something that reduces glare, not ask for Crizal.

This drove me to create an architecture that supported both user and business by allowing us to highlight the key need that the product is solving while also setting up landing pages for brands for media.

Screen Shot 2019-01-06 at 9.48.35 AM

Helping users choose

After speaking with consumers and eye doctors, it was clear that they needed help not only understand the complex technology but choosing which is right for their needs.

With that in mind, I started to design a wizard that would walk users through the process of finding the right product.

I experimented with different flows and wordings for the questions based on some learnings from how opticians guided their customers through the process of choosing a lens for their glasses.

I created a set of prototypes which I used while running user testing sessions to help confirm the flow and language that resonated most with users.

 

flow_3_-_option_a
flow_1
flow_2
Screen Shot 2019-01-06 at 1.44.47 PM
Screen Shot 2017-10-19 at 6.48.01 PM

Framework Design

The client utilized Adobe Experience Manager as their CMS. We wanted to take full advantage of the system's capabilities.

I focused on creating a flexible component-based design system that would give us the ability for dynamic personalization as well as multivariate testing.

Many whiteboard sessions with devs, creatives and systems analysts later, we had what we needed. A set of templates and components that would ultimately create a ton of efficiencies during the build phase as well as reduce maintenance costs.

Screen Shot 2017-10-22 at 11.24.44 AM
Screen Shot 2017-10-22 at 11.25.09 AM

Setting up for success and learning

After the framework was developed, I focused on defining the strategy for experimentation and where to target users with personalized content.

First thing I did was develop a maturity model that would allow the client to grow into their new technology over time as they progressively profiled users and learned more about their behavior.

Screen Shot 2019-01-06 at 2.48.04 PM

Personalization and Testing Strategy

Ultimately, I developed tests around calls to action, layout placement and changing content or images types based on context to see how it affects conversion.

These things were set up to be triggered by things like site referrer, paid ad variable, on-site behavior or data we captured about their product usage.

We are set up to continuously learn and experiment with the site.  Optimizing the experience with each learning.

Screen Shot 2019-01-06 at 2.49.07 PM
Screen Shot 2019-01-06 at 2.49.21 PM

Result

  • The output was a modular template system in Adobe Experience Manager that allows great flexibility for the client and creative teams. Ultimately simplifying site management and reducing turn around time and cost to implement on new content.
  • Atomic design allowed that creative team to rapidly produce assets and create efficiencies through production.
  • The experiences content was designed to dynamically react to certain personalization triggers so that we can get the right content in front of users are the right time.
  • Site architecture based on users needs instead of complicated industry eye terms allows users to discover products that may fit their needs in a more relatable way making lenses less complicated.
  • Overall site conversions have risen 300% and increases in engagement through the configuration tool have help to drive users to their local eye care professionals.

Wireframe - Large screen      |      Wireframe - Mobile      |      Components