Designing LearnBox's e-learning platform for rushed users

Note: The in-person interviews and contextual inquires described in this case study were done pre-COVID-19. Stay safe!


Overview

Learnbox is an all-in-one e-learning platform for full-time employees who want to sharpen their skills for their jobs or prepare for a new job altogether. 


To begin, regardless of the project I work on, I don't believe in any UX dogma. I see UX as a toolbox of techniques and tricks that can be used in the context of the problem we have to solve. Flexibility is key.


At each stage, I employ techniques from my "UX toolbox"



Each project must adhere to the ISO 9241-210, the highest standard of ergonomics and human-computer interaction.


Problem Statement

Create an e-learning app that goes the extra mile by helping users choose the right career path, focus on important skills, and keep track of the shifts in the job market.


Platforms: Web, iOS, Android

User & Audience

Employees with full-time jobs and college students

Roles & Responsabilities

  • Logo and Brand Identity Design
  • Design UI/UX for web, iOS, Android
  • Design and Develop a landing page to increase conversions
  • 3D Design Assets

Scope & Constraints

This a minimum viable product that will offer unique benefits in addition to the catalog of courses. We will not be focusing on anything besides core features.

Process & What I did

I prepared an initial set of KPIs that we are going to constantly measure on every iteration of the project:


Qualitative KPIs: 

  • Reported expectations and performance
  • Overall satisfaction

Quantitative KPIs: 

  • Task success rate
  • Time on task
  • Use of secondary navigation
  • System usability scale



As this app is created for busy learners who want complete clarity in their educational endeavors, I started looking for my users both online and offline.

  • Online sources: Education/Career Planning forums, subreddits, social media groups.
  • Offline sources: Full-time employees taking a cigarette break from work. I asked if I can interview them for this project.

The most valuable source of my data was a job fair that took place in my city. I went there to interview people who were looking for a new/better job. Education was important to them since it meant more opportunities in their professional lives. I invited 15 users for coffee where I interviewed them about this app. Six of them were able to bring me to their office so I could observe how they work.


I started by asking users:


  • How they learn a new concept online. What steps do they follow?
  • Describe a typical day at school/work.
  • What makes a good day in their current routine? How about a bad one?
  • What activities waste their time?
  • How do they approach problems and how do they solve them?
  • What shortcuts do they use on web/apps?
  • How they expect a course to be structured
  • What expectations do they have from a learning app?
  • What features do they expect from the app?
  • What features they think would be great but don't necessarily expect?
  • What do they enjoy about the experience?
  • What issues do they face?
  • When might they use the app?
  • Where might they use it?
  • Would they like to use it in a group experience?


Competitive analysis


Meanwhile, I carried a competitive review to learn about our competition. 

My competitive analysis was split into 2 stages:


Stage 1: Competitive review (discover strengths, weaknesses, patterns, and content strategy)

Stage 2: Competitive testing (recruited 5 participants from my target segment and ran a usability test on my main competitors' apps/websites)



This is a sample from a 15-page analysis.


Competitor 1 

1.The good

  • A high volume of content
  • Low prices
  • Forums & Comunity
  • Self-paced courses

2. The bad

  • Anyone can teach on the platform, no quality control
  • No structure (users don't know what course/tutorial to start with)

Competitor 2

1.The good

  • A high volume of content
  • Outstanding cross-platform support
  • Certification of completion

2.The bad

  • No forms
  • No lifetime access to course

Competitor 3

1.The good

  • a high volume of content
  • well structured
  • employees are helped to use the platform by employers
  • certification of completion

2.The bad

  • very expensive

Conclusion

  • most competitors have a lot of content, however, not everyone focuses on quality
  • cross-platform & sync of content are a must since a lot of users start learning on the laptop and then want to continue learning on the phone
  • there is a lot of choice paralysis on these platforms since users are overwhelmed with all of content available
  • self-paced is a critical feature that most users seek
  • an online community around the app is important for users to share feedback and seek support
  • successful e-learning apps involve companies by offering an enterprise plan, by which employers pay for the education of the employees. 


Expert Interview

Interviewing a domain expert is very important in my UX workflow. I contacted university professors, career coaches, and tutors to get their input on e-learning. Our conversations focused mainly on what is being done well thus far and also what can be improved. Everyone was very helpful and I will return to them throughout each project phase.



Empathy Map

It's time to turn my full attention to the users. I usually start by analyzing the research data from the interviews and contextual inquires and put together an empathy map. Here is one of the many I made for what was soon to become the Jane the Sales Manager persona.



Personas

The next step is putting together the user persona, based on the research I have done thus far. To create the persona, I had to interview the target audience based on these criteria:

  • tool experience (users who already used an e-learning app)
  • domain experience

My preferred technique of creating a persona is through qualitative research with quantitative validation.


I identified a primary & secondary persona. Here is the first draft of my primary persona research:


Jane, the anxious sales manager (user 1/15 of user interviews)

Jane finished college eight years ago and has been working in sales ever since. She is anxious that she will be stuck in this career for the rest of her life. She considered going back to college but she doesn't have enough savings to stop working. She has the stamina to work, but her current situation stresses her greatly.


Jane is 29 years old. She spends very little on education and usually learns new skills from her company's organized events. She is a very good employee. She takes off from work very rarely and uses her free days to visit her family that lives across the country. She attended a sales conference last summer and learned about new sales techniques and trends. She is passionate about her job but knows for sure that she does not want to do it forever. Therefore, she wants to prepare for a new beginning.

She doesn't have any debt and she currently lives with her fiance in a 2 bedroom apartment. She wants to move to a house by the time she is 30. On weekends she spends time with her friends, goes shopping, and watches Netflix.

On her phone, the most common apps she uses are Facebook messenger Instagram, Pinterest, and Spotify. She used to have an e-learning app years ago but she uninstalled it after the free trial expired.


Her go-to sources for new information are Google, Youtube, or asking friends on Facebook. She reads 1 book/month, usually a novel.


Demographics

Age: 29

Education: Bachelor's degree

Job Title: Sales Manager

Salary: $50K

Devices: Laptop, tablet, phone, TV, watch.

Web user for 14 years

Smartphone user for 8 years

Personal hours on web/apps/day: 8

Business hours on web/apps/day: 5

Hours/day spent on email: 3

Learning sources: work, web, experts from her network

Active learning: 2 weeks/year

Most frequent sites: Social Media


After analyzing every research note and quantitatively validated my findings, I ended up with 2 personas:


Primary Persona: Full-time employees who want to change their career

Secondary Persona: College students who are getting ready to begin a career.



Mental Models


In addition to the user persona, I always put together a mental model, which is a diagram that informs me what users are expecting and how familiar they are with a product/service similar to mine. The persona and mental model give me a comprehensive understanding of the user and they give me full confidence once I arrive at the design phase. Here is a sample of the greater mental model.



User stories & Task matrix


I now have enough data to write the first set of user stories and the task matrix to prioritize the functionality of the app. Here is what I discovered:




  • As a job seeker, I want to be reassured that I am spending time & energy wisely by improving the right skills that will make me more qualified for my job
  • As a course student, I want to communicate with other students and that will help me if I needed it and keep me accountable.
  • As someone looking for a change in my career, I want my CV to be stellar and my interview skills to be ready.
  • As a course student, I want to take notes that will be helpful to me when I review my skills later on.
  • As a busy professional, I want the lessons to be short so that I can watch them during breaks.
  • As a course student, I want to check on my progress so I know if there are any gaps in my learning.


Information Architecture


Next, I wrote down major concepts, sections & tasks offered by the app and began building the IA. I always do a combination of a card sort and tree testing until I reach a unanimous agreement and start sketching with full confidence.


User Flow


Building upon the IA, I can now get into more detail and create the paths the users will take to achieve a goal. The user flow tool is my favorite from the entire UX process because it is, for me at least, the technique that reveals most potential problems of the app's navigation.



Journey Map

Finally, the journey map. For this case study, I chose to show the journey map of the primary persona trying to watch a lesson during her commute to work. Laying down a journey map will give you great insight into what obstacles the user may encounter during the completion of a task but also show you many opportunities to fix them.




Design

I now present you the design that was created based on the information above. I begin with the wireframes then a design system that together create the high-fidelity design.



+


=



In terms of mobile design, I usually adhere to the guidelines provided by Google's Material Design for Android and Apple's Human Interface Guidelines for iOS.

Why? One word: immersion

I learned that user experience is immensely improved when the app we design fits with the system and it does not appear as if it was ported from one place to the other. The seamless transition within the Android device or iOS device design offers the app more legitimacy since it was crafted specifically for that environment.

Prototypes

Web Protoype

iOS Prototype

Android Prototype

I was also responsible with designing and developing the landing page for the platform. You can view it here:

https://learnbox.webflow.io/

Outcomes & Results


We took the prototype to the users. Here is what I learned.


  1. Users were happy that the app includes a Resume Builder and the possibility to prep for a job interview. The all-in-one nature of the application was a pleasant surprise for all of the people we tested the app with.
  2. After testing the video player itself, we noticed that users were constantly switching from our platform and a note-taking app. These gave me the idea to add a note-taking feature inside the player. When the user clicks on the note icon inside the player, the video pauses and they can now take and keep the note inside the app instead of having to switch back and forth.
  3. Users complained that the quizzes are too shallow. I went back to a domain expert and talked about how can we make the evaluation part following a lesson more useful. I learned that talking about the lesson and creating something with the newly acquired knowledge will deepen the understanding of what has just been learned. Therefore, in addition to a simple multiple-answer quiz, users will now have a practical task to complete as well as write their thoughts about how they will use what they have just learned.

These are the top 3 findings. I implemented them in the prototype above.

In the near future, I will run a usability test on the improved prototypes and then implement them with the developers.


Thank you very much for reading!