Beauty Industry

Natura e Avon

Educational SaaS (LMS) redesign

Improvement of learning experience through the redesign of the educational platform

Context

Natura & Avon is the largest beauty company in LATAM, with more than 3 million Beauty Consultants responsible for selling its products.

To help this network succeed, the company created Natura & Avon School, a digital learning platform used by over 200,000 consultants every month.

Through courses, learning journeys, and educational content, the platform supports consultants in developing business skills, improving sales performance, and growing their businesses.

Context

Natura & Avon is the largest beauty company in LATAM, with more than 3 million Beauty Consultants responsible for selling its products.

To help this network succeed, the company created Natura & Avon School, a digital learning platform used by over 200,000 consultants every month.

Through courses, learning journeys, and educational content, the platform supports consultants in developing business skills, improving sales performance, and growing their businesses.

Context

Natura & Avon is the largest beauty company in LATAM, with more than 3 million Beauty Consultants responsible for selling its products.

To help this network succeed, the company created Natura & Avon School, a digital learning platform used by over 200,000 consultants every month.

Through courses, learning journeys, and educational content, the platform supports consultants in developing business skills, improving sales performance, and growing their businesses.

UX Challenge

How to improve the engagement of the users in the platform to increase course completion rate?

CES score (effort): Regular

Course completion rate: decreasing monthly

Design approach

Based in the main hypothesis defined to guide this process, I choose the frameworks that allowed me pass by discovery and delivery stages, considering the time and tools I could work with.

Understand

the problem

  • data analysis

  • user interviews

  • quantitative research

  • heuristic analysis

Design

the solution

  • benchmarking

  • wireframe

  • prototype with Figma

  • usability test

Discovery

To understand the problem my approach was to analyse the information already existed and go deeper in some specific doubts

Data analysis

Google Analytics + Tableu

Data analysis

Google Analytics + Tableu

Quantitative research

Google Forms with diferent kind of users

Quantitative research

Google Forms with diferent kind of users

Heuristic analysis

Identify pain points of usability

Heuristic analysis

Identify pain points of usability

users access what is easy to find

85% of the access are with mobile device

user leave the course before finishing it

users don't know which course to do when they access the platform

Heuristic analysis

match between system and real world

Icon commonly used as a menu, is used to show the progress

recognition rather than recall

Course timeline is hidden in a menu icon

aestethic and minimalist design

lack of hierarchy and blank spaces

user control and freedom

No way to leave the page, move forward or go back in the course progress

visibility of system status

Screen does not show course progress and lower perception of progress and motivation to complete course

match between system and real world

Icon commonly used as a menu, is used to show the progress

aestethic and minimalist design

lack of hierarchy and blank spaces

visibility of system status

Screen does not show course progress and lower perception of progress and motivation to complete course

recognition rather than recall

Course timeline is hidden in a menu icon

user control and freedom

No way to leave the page, move forward or go back in the course progress

benchmarking

Understand how others players:

  • design homepage to arouse interest

  • communicate progress of a course

  • keep users engaged

  • design a great experience in mobile

before & after

components: CourseCard

The course card was redesigned to fit with the Design System patterns - applying tokens the tokens, colors, icons e components. And it was also add a description to briefly presents the content of the course.

Virtual Classroom

Virtual Classroom was redesigned to create a better experience in mobile device: all the content can be accessed in the same screen, by scrolling the page, without needing to click any button to find hide content or view progress.