Varilux: Sales & Management App — Rebranding for Essilor's Sales Sector
Essilor sales encountered difficulties navigating the app and presenting products to potential buyers, resulting in reduced engagement and revenue. I proactively resolved this issue by recreating brand integration and enhancing viewership.
Role
Product Designer
Industry
Eyewear
Duration
Nov 23' — Dec 23' (1 month)
Core Responsibilities
Main designer in team of 2, product design, visual design, product strategy, user research, QA assist
Problems &
Insights
Essilor and its sub-brands each have their own guidelines, adding up to nine brand books. This creates confusion and makes navigation difficult for users.
The messy and unorganized backdrop colours of the logo gallery
Causes confusion and difficult to navigate
Viewing a new product page is disruptive for users due to the misaligned color system
Leads to low conversion rates and reduces sales number
Goals &
Planning
Brand integration is crucial:
Incorporating multiple brands identity and values with strategic methods.
Addressing the issue, I conducted a comprehensive review of the current brand structure. After conducting research, it became clear that there are multiple key actions to take:
Switch branding focus back to Essilor
Essilor's new brand identity colour palettes and application
Deliver consistent value across the app
While sub-brands coexist with Essilor, the rule applied should be 80/20
Design
Process
Building the system — What is our approach?
"A well-organized design system is crucial here to ensure that we develop good brand integrity."
Achieving this, we mapped out the design metrics, design system and reworked the UX that was overlooked in the previous design
Design System
We built a design system for application based on Essilor's brand guideline, including typography usage, assent and secondary colours, and background colours. This systematic approach ensures cohesion and consistency throughout the design, aligning with client's brand identity while allowing for flexibility and visual appeal across various interface elements.
Rethink UX & user flow
Several key UX errors were found based on our analysis — unclear headings and menus, no call-to-actions for sales person, lack of design consistency, and more
Work In
Progress
Our work in progress example 1 —
Galley cards
The Challenge: How to introduce old/ new products together?
How are the images and info shown on our website is critical to users taking action to move forward in the site. We needed to consider: how easy it is to see the promoted product, if we’re giving users enough information to compel them to action, and if we can come up with a solution that allows the design to scale in the future.
Design variants
We mapped out several different versions to assess which one fits the best
The Adjustment: Logo-only gallery cards
Essilor decided to show the images and logo individually without any overlay. We decided to go with the logo-only gallery cards to increase clarity and stand out call-to-actions.
Work In
Progress
Our work in progress example 2 —
Form fields
The Challenge: How to increase the sales engagement?
What was lacking in the current version was the absence of necessary information to drive sales within the app. To address this, we focused on enhancing user engagement by implementing form and contact fields tailored specifically for sales purposes.
The Adjustment: Dropdown Bar & Role Selection Radio
Profile section allows Essilor to collect essential info. Contact us form offers call-to-action to contact Essilor's sales team directly and smoothly.
Reflections &
Feedback
Culminated in a 12+% increase in sales number in first 3 weeks and a 13+% jump in conversion rates of the app
Achievements
The application is highly complimented by Essilor's sales team, giving us the opportunities to work on their next web project.
By implementing our atomic design system, we managed to produce over five tutorials for other energy and performance related tools.
See More