The project concept and the process is under the Non-Disclosure Agreement (NDA). I have used dummy data on all of the screens to protect the confidentiality of the content. All the work belongs to the respective companies and should not be copied or recreated in any manner.
ELX - ON THE GO
Overview
Estée Lauder Companies is a global leader in prestige beauty — delighting consumers with transformative products and experiences, inspiring them to express their individual beauty. It owns over 30 different brands spanning across cosmetics, skincare and fragrances.
​
The ELC Learning Platform, or Project Learn, is an ongoing effort at Estée Lauder Companies to create an internal cross-brand e-learning platform that allows both new and experienced in-store sales personnel, or Beauty Advisors, to bring themselves up to speed on the brand philosophy, brand news, product launches, demonstration techniques and selling practices.
​
The goal of this particular project was to study & analyze the existing Myelx web portal & provide a next-generation digital experience for Beauty Advisors that can be used On-The-Go on their mobile devices.
​
​
My Role
User Research, Interaction, Visual Design, Prototyping & Usability Reviews
Tools
Sketch, Invision, Zeplin, Principle
Team Member
Aniket Patni
Timeline
2 months
Design Process
As there was an existing web portal, we followed a slightly modified design process, where the initial requirement gathering was based on the research done on the existing Myelx portal, stakeholder discussions. This process helped us understand the domain well, better understand the user needs, and the best option to deliver the solution. As we moved forward we were able to iterate on our design and validate the direction of our project. Overall, this process was a great means of ensuring that our project delivered a solid solution.
Why?
Why?
How?
What?
"Design first" says that all things should be designed with the end-user experience as the focal point. By focusing on your user needs improve the adoption and effectiveness of the solution.
How?
A framework that focuses on empathising with the users first, drawing insights and defining the problem statement clearly and then designing an experience around the problem statement.
What?
An amalgation of business and user needs to execute the right solution through a design first approach.
Discover
We began with extensive domain research, which gave us a better understanding of the business goals & requirements. Few of the insights are as follows,
of oragnization now offers mobile learning in some form
67%
respond to alerts as soon as they come in
42%
of mobile users believe that mLearning has enhanced their experience
99%
like to be able to access learning on the go
57%
use a mobile to access resources they need to do their job
74%
are accessing work-related resources whilst they are travelling
37%
The mLearning market was predicted to be a $37.6 billion market by 2020
This was followed by numerous discussions with the stakeholders and end user interview to understand the requirements. The findings from this research helped us shape the persona of the Beauty Advisor.
My research encompassed:
Understanding the user goals and needs
Uncovering pain points with the existing user journey
Define
After collecting the recordings from the end-user interviews and stakeholder discussions, I conducted affinity mapping with my teammate to synthesize the pains identified. We grouped these problems under common themes and features in the platform.
Understanding the End-User
In order to empathize with the different beauty advisors, we developed a persona, which is based purely on initial research, stakeholder & end-user interviews, and few assumptions. These serve as a starting point to reflect on the needs and challenges of the user and possible solutions that can be considered later in building the information architecture.
User Journey
A product-based journey map helped to better understand the learning phases as well as the user and their experience in them. The originally planned syllabus was greatly adapted as there were unnecessary and unfavorable steps coming to light.
Existing System
Previously, the users had access to the learning modules on the MyELX portal. This portal had a dump of data that was difficult to make sense out of. Along with that, it lacked a personalization aspect to the learning platform.
Setting Goals
By brainstorming and prioritizing with the stakeholder helped us redefine our goal to,
​
-
Provide a next-generation Digital Learning platform for the Beauty Advisors(BA) that can be used On-The-Go on their mobile devices.
-
Content will be delivered to these BA’s in small and repetitive form so that it can be consumed easily.
-
Drive towards ‘snackable’ learning that can be done in an easy but focused way.
-
Enable content to be consumed when there is no network connectivity - offline learning.
-
Enrich the learning experience by providing micro-interactions.
-
Encourage the BA’s to learn more by engaging through notifications.
Design
Information Architecture
We then went on to define the information architecture for this application based on the initial research & insight gathering from the interview card sorting, journey mapping. This site map generated went through few iterations subjected to the feedback we received from the stakeholders & our inputs as well. Here is a glimpse of the final information architecture of the mobile application.
Ideation
The next step was to get in an interactive session with the business team & chalk out the feature list for this digital learning platform. All the above steps helped us achieve the feature list which was broken down into an Attract-Engage-Retain model as follows,
ATTRACT
- Value proposition hooks
- Informative onboarding
- Personalised sign up
- Sign-up rewards
ENGAGE
- Snackable learning
- Personalised dashboard
- Offline content
- Delightful microinteractions
- Powerful search
- Notification for new products
- Rich community experience
RETAIN
- Push notification
- Native features
- Usage rewards
- Leaderboard & badge updates
- Take notes
- Social feed & community
Visual Design
We adapted the Attract-Engage-Retain model while designing the solutuion for this application, we wanted to make sure the visual language followed this path as well.
We incorporated a card structure to showcase the data which was flexible enough to accomodate the content & engaging for the users as well. The Esteé Lauder’s periwinkle color was used as a primary actionable color throughout the application.
To make this learning platform consistent throughtout, we worked on creating a standard system consisting of the fonts, button styles, card structures. This was extremely helpful considering the strict timelines that we were dealing with & also helped reduce the development efforts later.
The Solution
After some quick paper prototyping, mid & high-fidelity prototypes were created to be shared with the stakeholders for their feedback. Theses prototypes were supplemented by clickability using Invision. This followed with few iteration of the wireframes & lead to aligning the screens to the style guide.
ATTRACT
- Messages placed around existing ELX desktop and responsive mobile experiences will serve as value proposition hooks to convince the users to download the app
​
- Providing the users with guided on-boarding experience.
​
- Allow users to select their interests on learning so as to get personalised experience.
ENGAGE
- The home screen offers a great deal of information & quick access to learning levels, trending articles & videos.
​
- Personalized greetings and subtitle space that contextually changes
- The cards also show the progress, points for the learning levels, & an ability to like or bookmark it.
​
- Dive into the learning level to view the lessons curated & earn designated points after its completion.
- The users can like or download this level to view it offline as well.
RETAIN
- Allows user to see gratis points value, current completion, and individual lesson details, completion and journey to completion of overall learning level
​
- Linear guided approach to learning makes it easy for users to know what they have to do next
Deliver
For this project, we had review sessions every week with the stakeholders & the crossfunctional teams to go through the progress & the designs. We created a clickable prototype on Invision for the teams to interact with. The dev handoff consisted of walkthrough sessions of the clickable prototype, & assets were provided via Zeplin. Once the modules were developed I conducted a heuristic evaluation for the same & these recommendations were incorporated by the dev team before each release. At this moment, the application is available on the App Store for the Beauty Advisors.
​
My engagement with this project ended with this phase one as I moved onto another project in the company. Post phase 1 release, the features & enhancements mentioned in the below future scope were incorporated in the application.
Future Scope
- Experimental Learning - gain practical knowledge by experimenting with products.
​
- Learning with AR - Blended learning environment combining Augmented Reality and Object Recognition to encourage users to explore the store and learn contextually.
​
- Digital Look Book - Explore styles and looks just by swiping & learn about products involved to build that look.
THANK YOU!
Clear Ocean
An Enterprise Service Management system with self-service functionalities.