OpenClassrooms : Introducing Emotional Design to the Learning Experience

Kulikova Anna
12 min readOct 15, 2021

Ironhack Final Project

Customer :

OpenClassrooms is an online training website that offers its members certifying courses and pathways leading to growing professions. The platform has two types of users:
- “Free users” who access free courses available on the platform, without a diploma.
- “Students”, who integrate a graduate and paid training course.
The objectives of OpenClassrooms are to promote the employability of students, to convert free users into students and to encourage the engagement of free users on the platform.

Initial Brief :

The initial brief was formulated in the following way : “ Today, we miss emotional design to celebrate success of our students, whether it is a course, a project or more importantly the path. We also miss a way to share their success inside their network.”

Challenge :

For this project we worked in duo with another UX/UI designer Guerri Amel. The kick-off helped us to understand the product organization of OpenClassrooms and the objectives related to our challenge. We also specified what was a success for OpenClassrooms and its embodiment in the student journey. The kick-off workshop was done remotely via Mural.

During the kick-off we also refined our challenge to a specific goal, fesible in two weeks. Our goal was to help Openclassrooms students celebrate and share their successes in order to motivate them and help the to promote their achievements.

To do so, we analyzed the expectations of students and free-users in some particular key moments of their training course and aligned them with personalized modes of sharing this success.

Workflow :

Double Diamond Design Process

We had two weeks to realise the reserach, and to propose a solution in the oflrat of prototyped high fidelity wireframes for the desktop, realised in Figma.

We used Design thinking as a method of our work. Also Design Sprint was aour refercence for organising our workflow.

  • Empathise: secondary research; cometitive analysis; primary research ( quantitative — survey, qualitative —user interviews)
  • Define : downloading data with affinity diagram; understanding the user with persona and user journey map; problem statement; HMW
  • Ideation : Crazy 8 and Worst idea, prioritization with Moscow method
  • Proto : lo-fi, consept/usability tests, ititrations, mid-fi, usability test, itiration,
  • Final : hi-fidelity, design critique, iterations, desirability test

Research :

The difficulty of our competitive analysis was to access the validation stage of a course and the associated elements of success (certificate, celebration screen, graphic elements, etc.)

Competitive analysis

We used FAQs on platforms and content shared by students on personal and professional social networks. This research also helped to understand what information the students most liked to share.

We also desided to enlarge our competitive alaysis by taking alook at some applications that use emotional design and easily sharable achivements. We took examplas of Spotify’s Year Retrospective, Adidas Running sharable previeou of the course, and Petit Bamboo shareable inforamtion about user’s meditations.

Spotify’s Year Retrospective : 1-The general idea of retrospective; 2-Easy to share format
Petit Bamboo Statistics Page: 1-Shareable progression statistics; 2-Gamification

Then we conducted user interviews with 6 students, 7 free users, a mentor and career coach.
The objective was to understand how the students lived their learning (moments of demotivation or joys), their definition of success and how they celebrated this according to their personal goals.

Key Learning from User Interviews

Define :

We then analyzed and categorized the information via an Affinity Diagram which allowed us to identify our Primary and Secondary Personas as well as thier pain points.

Affinity Diagram on Mural

Personas :

From our Secondary and Primary Research, we learned that OpenClassrooms has two main categories of users — students and free users. They have had different goals&motivations, user-flows and logically different pain points. That led us two synthesise our findings into two personas :

Free User :

Our first persona is a free-user Yohann.

He wants to learn and master new skills. The pleasure of learning is his main source of motivation, but he also has a perspective vision about his professional evolution that motivates him to continuously develop his professional skillset.

Yohan has nothing to share with his professional network about his learning activity, which creates a certain frustration and badly influences his motivation. On his side, the lack of constructive visualisation of his progress encourages sporadic learning instead of enrollment in a complete course.

If we manage to resolve Youhann’s paint points he could become our second primary persona — Student “Sarah”.

Free User — Persona

Free User Journey :

The generic learning experience of Yohann as a free user follows a light curve from feeling neutral about starting another course on OpenClassrooms to feeling pleased and excited to master another skill. The pic of his positive emotions collides with the impossibility to share his success nor to properly visualize his progress on the platform.

Free User — User Journey

Free User Problem Statement :

Curious Free User Yohann needs to be able to visualize his learning dynamic on the platform and share his passion for learning with his network because without this features he feels frustrated and less motivated to continue his learning activity.

Design Opportunities :

Coming back to the emotions of your Free User Yohann we saw that his main point of “proud/pleasure” is situated in the moment of obtaining the result of his course. The breaking point for his experience on the other hand is coming directly afterwards with the impossibility to properly visualize his general progression. And finally, he feels frustrated by not being able to share his new skills with his network.

This is why we decided to seize those design opportunities by improving his experience :

  • When he sees his completed lessons cumulating;

“I share all my certificate on linkedin but it’s too much, so I’ve stopped” (Sarah, 30 )

  • When he wants to share his achivement.

“I would like to share my learning progress but I only have a screenshot and I am afraid that could be frowned upon” (Allan, 23 )

Ideation :

After doing a few rounds of Crazy 8 in a very effective combination with Worst Idea we came up with some features, that we prioritised with a MoSCoW Method during a workshop with our stakeholders. Doing the prioritization with the stakeholder allowed us to align with the business perspective of OpenClassrooms.

The results of our prioritization workshop :

  • Must Have : Sharing option, Reward badge system, Visualisation&Celebration of the Learning Progress
  • Should Have: Personalisation of sharing materials
  • Could Have/Won’t have: Badge Reward with a difficulty hierarchization

For the rest ouf our project we concentrated on Must Have features.

Placing Features on the journey of the Free User

Mid-Fi Wireframes :

After setting the clear expectation about the features to introduce we created or low-fidelty and then mid-fidelity wireframes.

Mid-fidelity Wireframes with the Usabilty Testing Feedback

After 10 usability testings (5 Free-Users and 5 Students) we gathered all the feedback at iterated our screens accordingly.

Free User Iteration :

Incons Iteration

Main iterations for the Free User Interface was the choice of icons, that was not correct, the user felt overwhelmed.

User’s Quote :

“ I feel lost …I don’t understand the significance of the two symbols ”

Free User Final Solution :

To address Yohann’s frustration about the impossibility to share his learning achievements with his network

We created a Shareable Badge System accessible after the validation of the lesson.

Free User — Solution
  • It is ready to share, a certificate-like visual that is adapted to social networks. The logo button automatically generates a post for a chosen platform.
  • The certificate represents the acquired skills, that add value to the act of sharing and helps the user to acknowledge his/her achievement.
  • This feature helps us boost the natural learning motivation of Yohann instead of generation frustration.

“I like the fact that you can share directly without doing a screenshot than re-oplad that etc..”

Different Levels of Badge System

“It’s really challenging…it’s like a game you want to play and unblock all the levels”

Then the Different Levels of our Badge System helps Yohann to visualise and track his progress. With a global vision he can now have a more constructive vision of his learning achivement.

  • The reward encourage Free User’s motivation and engagement.
  • The global visualisation open a path for to the Free User towards student status.

From Free User to Student

Now when we resolved Yohann’s paint points, helped him to stay motivated and have a more strategic global vision of his learning progress, he has some big chances to become a Student on OpenClassrooms plateform.

Student Persona :

Student Persona

Sarah is in professional retraining to become a web developer. She follows a paid course on OpenClassroom for a period of 6 months. She wants to gain legitimacy in her new field in order to find a new job. She also wishes to convey to those around her that she has made a successful professional transition.

Student User Journey :

We retraced Sarah’s learning journey on OpenClassrooms. We have identified the pain points but also the important achievements in Sarah’s eyes. It was interesting to note that the value of some successes in Sarah’s eyes is not same as OpenClassrooms’s:

For example for Sarah, the most important success is the finalization of her last project, while for OpenClassrooms it is the moment of the reception of the diploma.

Sarah feels excited to start her path. 2) Her fifth project is one of the most difficult so she is happy when she successfully validates it. 3) Final validation is the moment when she feels the proudest. 4) Then she feels frustrated while waiting for the diploma and not being able to share her achievement with anybody. 5) She is glad to finally receive her diploma though she would feel better if waiting for it wouldn’t be so stressful and frustrating.

Student User Journey

Pain points :

Mid-term demotivation : the student usually feels exausted in the middle of theis path. Generally the preparation of the Project 5 is marking a breaking point. A lot of students feels demotovated, tired and frustrated. This is a dangerous moment where a student can potentionaly abandon the path.

“The gap was so big between the first projects and the second that I didn’t understand what was happening to me… but afterwards I was really proud to have finished my project 5”
(Charlotte, 32 years old)

Personalization of success : when all the projects are done, Sarah receives a generic message of congradulation and the invitation o wait for her diploma. She is disapointed. After so much affort so little attention feels frustrating.

“Seeing how we got involved, it’s true that we expected more personalized and not generic feedback at the end…”
(Lamine, 45 years old)

Credibility of sharing success : then she waits for her diploma, with can take some time. She doesnt know what to do. She needs to start looking for a job but she has nothing to share to attract the recruters to her newly graduated profile.

“I’m looking for a job, I find that sharing a congratulatory email doesn’t sound very professional or a screenshot so I’m waiting to receive my diploma to share it… but it can take between 2 or 6 months”
(Virginie, 40 years old)

Student Problem Statement :

How can we help Sarah to make her success on the platform a boost for her professional profile and the source of motivation in order to optimize her job research ?

Ideation and Proritisation :

After the Ideation session and Prioritization workshop described earlier we brainstormed and prioritized different features :

  • Must Have : Student learning retrospective, Personalized feedback from mentor, Halfway supportive visualisation, Sharing option.
  • Should Have : Onboarding about sharing learning success.
  • Could Have : Personalised sharing according to the social network.
  • Won’t have: Final project survey (favorite music, etc), Zoom party.

Student Solution :

After some concept testing we finally decided on three main features for Student :

Onboarding module about strategic communication on students learning progression. This Should Have feature will become part of the general onboarding module of OpenCalssrooms. It will help to attract the attention of the student to the importance of professional communication on their learning achievements from their very first steps.

“We wait until the end of the module before discovering how it is useful to share our progress ” (User’s Quote)

Halfway supportive visualisation helps to cheer up and boost the student’s motivation during a hard time. It also gives the possibility to share one’s important progression.

“It’s good to see the projects we have done…more than half and what remains to do” (User’s Quote)

Student learning retrospective gives visibility on all the achievements, simplify the sharing of users’ final success. It facilitates and speed-up the process of his/her job research.

“Acknowledge the things that are done and the mentor’s message are a good moral boost!” (User’s Quote)

Student Iteration :

Before presenting you with the final solution, let’s just take a look at some iterations we did for the Student wireframes.
First of all our users had some difficulty accessing the retrospective page. So instead of the button on the right side of the screen, we changed it to a folder-like tab on the left side, with the already existing “My projects” section.

Iteration of clickable element

The sharable version of the retrospective felt too personal to share for some users. For others, it felt too long. Most of them agreed that the possibility to choose what to share would be optimal. This is we introduced a “checklist” module on the left, so the user can uncheck the information he/she doesn’t want to share. The chosen information will be generated into a sharable document.

Student Final Solution :

Finally, here are the prototype videos of the final solution. First Sarah is welcomed to her new path by a classic OpenClassrooms onboarding. Where she will now find a module about how, when and where to share her learning achievements. This will help her to feel more confident about her communication and avoid being frustrated at the end of her path, regretting some missed opportunities to communicate on her new educational and professional success.

Then after she validates her 5th project, she will receive an actionable summary of her new skills and learning that she achieved so far. It will be in a ready to share format. So Sarah can feel motivated and rewarded for her effort.

Finally, after successfully completing her path Sarah will receive access to her personal Learning Retrospective, with some personal feedback from her mentors. While waiting for her diploma, she now has actionable support to start her work research and to communicate on her success in her professional network.

Next steps :

As next steps, it would be interesting to :

  • Introduce the visualization of the waiting process between a project submission and the jury. As the lack of transparency on the actual waiting timing creates anxiety for a lot of students.
  • Create an option to share the diploma as now it’s a paper document that students receive by post.

Conclusion :

This was a big project, it’s now hard to imagine that everything was done in just two weeks. What is made us realize, is that a good workflow can lead us quite far in a limited amount of time. That also one clear persona is preferable for a UX/UI project of two weeks. This also brought us yet one more example of the existing gap between stakeholder and user. Even the well organised Design Team, need to make continuous UX Research in order to iterate its product. Always :)

--

--