Case Study : Essilor Pro Business Portal

The Ask

Essilor of America partners directly with eyecare providers offering services and solutions to help their businesses grow in addition to becoming better prepared to sell Essilor branded products.

Essilor's B2B division offerings were spread across multiple silos including training materials, product education, sales and multiple loyalty programs.

They needed somewhere that would consolidate all of these in one place and allow flexibility for management and personalization.

I was tasked to lead a team located across the country in addition to developers in Brazil.  I was responsible for user experience design, strategy, and research, directing cross-discipline teams, and managing the client relationship during the project lifecycle.

Key Project Tenets:

Personalization - Modularity - Fluid Design - Agile Development - Consolidation - Optimization

Screen Shot 2020-07-28 at 4.43.00 PM

Getting Started

RESEARCH
First things first! Needing to know what we can about the users, I conducted interviews with business owners and stakeholders. Documenting core user goals and mental models helped us understand what we needed design within the interface to ensure users were happy :).

WORKSHOP
With the users needs defined we had to add in the business needs. I lead a 2-day Scrum workshop on site at the clients' Dallas office to begin ideation and definition of what the product could be.

We utilized the conversation to drive the initial set of features, stories and epics which would develop the overall product roadmap.

Defining the Future Architecture

With a clearer picture of the vision, we had an opportunity to define what the portal could look like and how it could function in a perfect world.

One of the core goals of the site was creating a flexible environment that would only show content to users who had appropriate access, roles or program enrollments.

To show how this could come together over the life of the project I created a phased sitemap that aligned with the sprint plan that took into account top level personalization rules.

future_sitemap

Agile Design

As we began the design process I focused on stories that pushed us to design a flexible and modular design system.

I mapped the individual requirements per user type to understand the potential use cases that would arise.  Different users could have vastly different content needs.

We needed a design that could handle a page, component or element change dependent on system, data availability and personalization requirements.

This need for flex also rippled into the navigation system. I created a menu structure that could push or pull navigation links into itself without breaking the UI and also work responsively.

The final UI kit created a set of fluid components that could show, hide and stretch to give the users what they needed to see and what business allowed them to see.

ee_landing_page

Personalization Factors

The system was created to allow for maximum flex. Personalization needed occur at multiple levels.

UI and UX engineering was based on requirement and factors such as:
User authority level - Store membership - Location - Role within the business - Business group

navigation

View full wireframes and architecture

Screen Shot 2020-07-28 at 6.47.21 PM

Results / Continuous Improvement

Through multiple sprints the work came to life:

  • We initially launched to as small Alpha group for Internal testing and improvement opportunities. It went off with a bang and its launch became highly anticipated
  • The program's growth has skyrocketed after full launch and and we continue to partner closely with the client as a trusted partner in strategy and design.
  • We continued to incrementally optimize elements and polish workflows around signing up for loyalty programs and training components.
  • It has become an active selling point for them as they are developing business relationships with potential B2B clients.
012319_CR_Page_05
012319_CR_Page_12
EssilorPro-Original-Concepts[1]_Page_3