• Work
  • About
  • CV

Essilor APP

Role: UI Design

Date: 2020

Company: Cheil Colombia

AV Expert project
APP

Loyalty APP

Essilor application is a proposal for the brand that allow the people involved in the commercial process of the company, for example: optical shops, optometrist and promoters have a good option to earn benefits through their sales.

Project intro

The first stage in the planning of the app was to understand well the different roles in the process and identify the possible needs and interests of each person, through this research it was possible to find the following insights:

Project Goals

  1. Propose a new digital product of loyalty with the Essilor brand.
  2. Develop an useful interface for the commercial process roles.
  3. Create a system to redeem their monthly benefits.
  4. Design an interface consistent with the brand and with friendly visuals and with microinteractions.

Customer Mindsets

Optical shops managers | “A digital interface of benefits would allow to grow the business.

we are thinking on a digital tool for our workers benefits, that would be a solution and a good way to motivate them.

Promoters | “It would be great if we can earn benefits with our work”

The benefits increases the motivation and allow us a healthy competence.

Ideate

With the research results of the UX team, I identified important information that allowed me to create a basic structure of the app that work for all profiles.

Empathy map

ideate

Wireframes

Mid Fidelity

ideate

High fidelity

ideate

Style guide

For the design system, I was based on brand values and developed a colour palette that identified the Essilor brand and optical shops environments with a light pattern, the colours were used to provide a differentiation for each profile, also I defined a type scale with the official fonts of Essilor, and used a component library that allow to solve tasks easily.

Brand

Essilor is a global ophthalmology brand that provide solid solutions in its field, the brand values meet the different goals of the company and look for improved through their digital tools.

ideate

Colors

The definition of the scheme colors was based in the current lineup for this category products, the dark mode theme is important also to transmit the quality and sobriety of the new line and design of products.

ideate

ideate

Imagery & illustrations

The imagery and use of illustrations were defined by the goal to represent a platform of redeem and benefits to all participants around the work process for this reason the visual elements respond to with friendly and illustrative characters.

ideate

Components Library

The creation of a components library allowed us to define elements that facilitated the communication with development team and the delivery of assets, in this way the visual aspects of the interface could be consistent with the porpuse, for this reason I create the assets with atomic design methodology.

ideate
ideate

Final design

Finally we presented an Application that solve the primary goal that is promote the space where the participants in this visual care process obtains benefits and learn more about their work.

ideate

Scan code

We think on an easy way to check and register new points for each sale, for this reason we use the code scan component that allows to speed up the process and at the same time control the sales of the products.

ideate

Redeem the points

To redeem the points for products we displayed a catalogue with category tabs, based on the points the user is able to change the quantity of products that they want.

ideate
prototyping

Thank you

Sebastian Gonzalez Logo

Let’s work together

Made with React • Designed & Built by Sebastian González