The Learning Spot

An E-Learning platform for Professional and Personal Development.

Johanna G
8 min readApr 17, 2021

The job market has changed a lot during the past year due to the global pandemic. Many people are becoming more and more interested in developing their skills, both professional and personally, and are looking for new challenges. After being in confinement, people have become bored, sick and tired of working from home, and are starting to look for further growth.

The Learning Spot is a project about launching a new product for self-paced learning on the go. The project duration has the lime limit of one week and the assignment is to create a Hi-Fi prototype flow of what the platform could look like. It’s an individual project and it’s to be launched on both iOS and Android and assuming that both apps will be built using a tool like React Native.

The beginning of the project

I started off my project with benchmarking & looked into different competitors; how are other platforms organised, how is the overall layout, what are they offering in terms of content, payment and pricing? I checked more in detail at competitions such as Domestika, Udemy and Coursera.

They gave me a great insight on how such a platform can be structured, with regards to navigation and design. I got inspired by Domestica’s video based learning solution and Udemy’s way to give feedback and rate each course. Coursera gave me the idea to make the screens more minimalistic and less busy.

Benchmarking — Platforms investigated

The reach a wide audience in my research, I decided to send out a survey. This would give me quantitative research findings. After a couple of days, it had reached more than 100 responses and the majority of responders are based in Europe and are between the ages of 19–29 years old. Some of the questions I asked were the following:

  • How do you prefer to learn new skills? By watching videos, reading, listening, exercises, or other options?
  • Have you ever done an E-learning course previously? And if yes, which platform did you use?
  • What is your preferred payment option? Paying per course, monthly subscription or having a free option but with advertisement inside the application?

The survey results were very useful, here are some of the key findings:

  • Users prefer to learn by watching videos (81.4%)
  • Users prefers to pay per course (73.2%)
  • The purpose is to improve professional skills (80.4%)
Survey Results

When I had accumulated more knowledge about the E-learning landscape, it was time to conduct some user interviews, and here I would be able to ask more follow up questions and get an even better understanding. All the interviewees had done online courses or classes previously — this was very important for me, in order to get relevant answers and to get valid inspiration on how I could structure my platform.

The 7 interviewees were men and women in between the ages of 27 to 34 years old, from places such as Sweden, Spain and Brazil. They are all full-time workers. Some of the most important findings from the interviews were:

  • Users wants flexible course schedules
  • Users needs to have tests at the end of the lessons
  • Users needs to know that the course material is up-to-date

Some of the quotes I collected from these conversations were:

“I definitely learn best with watching videos, because then I can pause and go back whenever I want.”

“Having tests at the end of the lessons are important to me — to make sure that I am actually learning!”

“As I am working full-time, I cannot enrol in a course with a fixed schedule. I need the option to study whenever I am available.”

Who are we trying to help?

With these findings, I was able to create my user persona. Personas are a useful way to keep a user in mind throughout the process, to remember who we are trying to help. Her name is Jennifer, she is originally from the UK but she is based in Barcelona. She is working at Amazon in the sales department, but she is looking for a career change at the moment.

Meet the user persona, Jennifer!

Personality wise, Jennifer is an outgoing and social person. She is very energetic and career driven. She has been working at Amazon in the same role for some time, and she is no longer satisfied with her job. Basically, as you can see in the photo above, her scenario is:

Jennifer is not satisfied with her current role at Amazon anymore and she is looking for a new challenge and wants to join the Marketing team. Her boss has informed her that she needs certain skills in order to make that move, so she wants to take some online courses as soon as possible.

She is also dealing with some pain points, for example:

  1. She can’t spend a lot of time on learning with her existing work schedule.
  2. Also, she is unsure about the quality of information she’s finding out there when researching different courses, as she is not sure whether it is up to date.

The problem to be solved

In order to have the problem clear in mind during the process, I summarised all my research findings into one statement to help me focus on the most important areas:

People who are looking to learn new skills are having a hard time to find reliable and flexible resources. Solving this would have a positive impact because it would help people to study at their own pace and grow on a professional and personal level.

It would also benefit our business because we would be able to engage users and reach a wide audience.

Business thinking

Of course, this is a platform that should become profitable one day. In order to have a strategic business model, the platform should be offering 2 different payment options:

Payment options presented in the app

The first option “pay per course” is the most preferred one, according to my UX research. The second option is the more business strategic one. To create revenue streams, the monthly subscription is highlighted inside of the app (which you can see int he photo above) since this would help to have more active users per month and secure the user retention. Also, what I noticed during the benchmarking process is that most competitors are offering similar solutions, and some offer only one option. For example, Masterclass only offers the monthly subscription. A while ago, they had both options, but very recently, they removed the “pay per course” alternative.

From UX to UI

Having all this information in mind, I started with some first sketches. As always, I made some Crazy 8’s, using just pen and paper to get the initial ideas down on paper. I was analysing what different features should be included and how to present them inside the app.

Soon, I started prototyping in Figma. I was able to get some feedback during DESIGN CRITS from my teammates. Afterwards, I made the first iterations. In total, I made two rounds of Usability Testing and I made three rounds of iterations in total to arrive at my current prototype.

Payment screen: The first version (the grey scaled prototype) had un unclear position of the payment. It was very hard for the users to find this, since it was a slide up on the screen, that the user had to reveal in order to see the price and be redirected to the payment. This was later on changed into a separate screen, where the 2 different payment options were more visibly clear.

Join course screen: In the early stage prototype, there were many important details missing. It was not clear that it was a preview video showing at the top of the screen, so the “Show Preview” button was added, and also the screen size was increased. And, I added the price to the screen so that the users are fully aware of what they’d be signing up for.

The busy course screen got some tabs to fold and unfold

The course screen was also improved after user testing. For example the “course progression bar” initially looked like a video progression, similar to the ones we can find in YouTube, which was confusing to the users. This was later on changed into the larger gradient blue bar, seen in the second screen. Also, the screen was way too busy, so the unfold and fold options were added on each unit, to view classes. Lastly, it was not very clear that it was “Course Overview” since that text is quite hidden on the first screen, while on the second screen is placed in the middle, in a grey color and with a line above.

Prototype in action

In order for you to have a better understanding of these iterations: In the video below, you will be able to see Jennifer navigate her way around her Learning Spot.

The Learning Spot — The current prototype version

Next steps & Learnings

There is still a lot of room for improvement, and some of the things I would like to further introduce into the application, would be:

  • Implement a Help Center & FAQ so users are able to ask questions and ask for help during their courses.
  • Improve overall navigation and design, I would improve things such as color decisions (pick more saturated colors to get more contrast) and implement more spacing at some screens.
  • Add more content to the platform in terms of courses and also offer more than video based learning. As the user research taught me, doing dynamic exercises, reading and listening are also popular ways of learning on the go.
  • Other design changes would be to change the boxes on the “Course screens”, as they might appear to be interactive, which they aren’t supposed to be. They are supposed to be automatically filled once the class is done. I would simply change them to a blue “check/tick” ✔️. Please see what I am referring to in the photo below:
Improvements to be made on this screen

All the learnings, I will bring with me into my next project! It has been a very interesting project to work on and I have learned a lot. As the project had a time limit of only one week, I didn’t have time to develop the design further. Things I have been practicing and improving during the process are designing in Figma, Usability testing, time management, benchmarking and UX research skills!

Thanks a lot for taking your time 💫

In case you’d be interested in knowing more about this project, feel free to leave a comment on this post!

--

--