Home

Return and retention of students in LMS

Return and retention of students in LMS

👩🏼‍💻 My role

As the Lead Designer, my responsibilities included:

  • Creating a design system for 15 projects, including this one.

  • Redesigning the student's personal learning platform — HSE LMS.

👩🏼‍💻 What I did

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

📍User problems

1) UX research revealed that young users no longer found our product stylish or visually appealing.

2) The user experience suffered due to the product's confusing behavior, and outdated interface patterns made it less user-friendly.

📍Business problems

1) The business aimed to enhance the university's brand to establish itself as a leading technological institution and align with the marketing strategy, ultimately attracting more students. The product was an obstacle to achieving the goals.

2) All product metrics showed a decline based on analytics and UX research findings.

🎯 My goal

I was tasked with bringing back students to the system, engaging and retaining them, and to achieve this, I had to perform a complete redesign of the LMS.

I was tasked with bringing back students to the system, engaging and retaining them, and to achieve this, I had to perform a complete redesign of the LMS.

I was tasked with bringing back students to the system, engaging and retaining them, and to achieve this, I had to perform a complete redesign of the LMS.

🌟 Solution

Before getting into my design process, here's a direct comparison of the redesign

How it happened..

Project initiation

Why did we need to make it?

Why did we need to make it?

It started with a task assigned by the Staff Product Designer…

Staff Product Designer

Hi, Lead :)
Take three more designers and improve LMS product.

Me

Hi, Staff :)
What's the reason to improve LMS? What's happened?

Staff Product Designer

I had a discussion with the business team, and due to the new marketing strategy, they want to digitize all processes at the university and enhance the existing ones.

Staff Product Designer

The LMS is the core of the educational process that connects tutors with students. You will have student access and 3 months to redesign it. The next 3 months will be given to our developers.

Me

Cool 🔥 What do we have right now? Analytics, research results, and specific metrics that should be achieved?

Staff Product Designer

Not yet. We've only completed the initial research to overview the educational process, and we now have an overall CJM with some insightful results. You have access to analytical data and to anyone you may need. Feel free to do what you think is best.

Me

Got it. I'll review what you have and may need to conduct further research. I'll define design goals and establish OKRs for them, prioritize objectives, and assign them to designers. Of course, I'll check my initiatives with the product owner. Then, I'll validate my plans with stakeholders. Based on the design system I'm developing right now, we should end up with a great product :)

Staff Product Designer

Sounds great, good luck :)

Me

Thanks :) See you later ✨

I started by analyzing the current situation and followed the next steps..

Research

What makes students avoid LMS?

What makes students avoid LMS?

Poor user experience with no need to use it👇🏻

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Research

What drives consumer behavior?

What drives consumer behavior?

The UX researcher and I scheduled a series of interview sessions, during which we identified the specific Jobs to be Done (JTBD) that our product should be 'hired' for. I've recorded the needs that drive users' behavior.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Research

How do they solve their problem right now?

How do they solve their problem right now?

The inconvenience of using LMS made designers create themed chats on Telegram. I studied the topics and identified the main 3 groups:

  1. Educational announcements.

  2. Social events outside of classes but within the university.

  3. Chat rooms for group conversations.

All this led to various problems for users, but the students got used to the inconvenience. We needed to create a solution that would make the students' lives so much better that they would stop using other products.

Scope of work

Let's start together

Let's start together

It wasn't a traditional design sprint as described in the book because I suggested brainstorming for each 'How Might We' (HMW). I wanted to immerse the team in the entire product, not just each task individually. Additionally, developers provided insights into the capabilities and limitations of the Moodle system, on which the entire LMS was built. This helped designers understand what could be technically easy to do and what couldn't.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

3 designers, 1 product owner, 1 lead developer, 1 business analyst from the university side, 1 stakeholder.

As a result, we ended up with 8 main 'How Might We' (HMW) questions. For each of these questions, we brainstormed ideas using Crazy 8's and voted for the best ones. The idea that received the most votes was taken into development. If it was a developer's idea, a designer who wanted it could take it. This approach worked well because I had an experienced and motivated team of designers.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Goal clarifying

Me + PM established OKR's

Me + PM established OKR's

After the design sprint, I documented what we do, why we do it, what our goal is, and how we will measure it using the HEART method. I discussed the results with the product owner and then presented them to the team

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Stakeholders approvement

Me + stakeholders prioritized the tasks

Me + stakeholders prioritized the tasks

Since we had a plan on how to technically solve design tasks, I could estimate how much effort was needed for each one. This also helped guide developers on the functionality they would be working on. As a result, we prioritized tasks and had a call with stakeholders for approval.

Project managment

I've allocated tasks

I've allocated tasks

Based on the structure, I estimated the hours required for designers. Using our internal software, we automatically calculated the effort for developers and managers into the final commercial proposal. I managed the acceptance process in Asana.

Redesign preparation

Structured IA

Structured IA

I also reviewed the existing information structure and made significant changes. Many sections were duplicated, and some information was inconsistent. That's why I documented the information structure, as well as the sections and information that aligned with our goals.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Redesign preparation

Wrote stories and scenarios

Wrote stories and scenarios

To set tasks, I outlined what stories should happen in the section or page that the designer would be working on. This way, I documented the functionality in alignment with the structure to ensure that the product was cohesive and connected different parts.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Redesign preparation

Conducted Competitive analysis

Conducted Competitive analysis

I've reviewed LMS analogs to find different interface pattern ideas. The main source of inspiration was Google Classroom. I chose it because it closely resembled the technical capabilities of Moodle.

Redesign preparation

Passed ideation process

Passed ideation process

During the secondary research on students, I developed a hypothesis that students need to receive three types of news that they create in Telegram: announcements from teachers, updates on events, and chat discussions. I decided to test this idea because it has been tried and tested before and is familiar to users.

I've drawn ideas which could meet user stories and chose the best by SWOT method.

Project redesign

My core features redesign

My core features redesign

1️⃣ Home page

📍 User problem

Students found it difficult to navigate the interface because functions were duplicated without clear distinctions. There was either a lack of necessary information or it was duplicated in multiple places with similar meanings.

📍 Obstacle for business goal

Students are reluctant to use the LMS (Learning Management System). Instead, they are resolving their queries in Telegram or spending time seeking assistance from technical support and teachers to find information.

🌟 Solution

Separate news by types, present them distinctly and pleasingly. Provide comprehensive course information so that the user can make decisions based on it.

2️⃣ Home page

📍 User problem

Students find it difficult to adapt to various course design styles. Announcements often go unnoticed, and learners miss important updates. Additionally, research has shown that students find it inconvenient to switch to the grades tab to check their course scores instead of seeing them immediately

📍 Obstacle for business goal

Teachers spent time making courses 'user-friendly.' They decorated them with images to make announcements stand out. Indirectly, student performance suffered due to missed announcements, such as changes in the deadline for research papers. These factors hindered the achievement of business goals.

🌟 Solution

Provide complete information about the course, including progress and academic performance. Organize the information for easy overview and in-depth details. Offer quick access for both teachers and students without interrupting the course activities.

3️⃣ Social aspect of the course

📍 User problem

To discuss course-related questions, students had to exit the course, go to chats, find the course chat, and communicate there. These additional steps were cumbersome for students and disrupted the context of the discussion topics. Additionally, reaching out to the instructor required a separate search outside the course page.

📍 Obstacle for business goal

Moderators used to spend time monitoring the names of newly created forum topics to ensure they complied with the guidelines. Automatically generated chats for communication with students and teachers have eliminated the need for moderator intervention, further reducing labor costs.

🌟 Solution

Allowing you to get in touch with students and teachers from the course page. Using a user interface pattern similar to mobile apps or desktop services, like Dribbble, that clearly indicates the connection of the new page to the course page. This way, we visually communicate that 'you are viewing students and teachers of this specific course.

Other pages with my redesign

Other pages with my redesign

I redesigned the other pages of the main user paths with a focus on making the information more useful, user-friendly, and visually appealing in a modern way.

I've developed animated interfaces using Figma and undertook usability studies to comprehend the user engagement with this fresh interface. I executed 40 evaluations across two weeks, engaging with learners who were active on the platform. I coordinated the examinations, crafted tasks in the model, watched users through Zoom screen exposure, and collected their thoughts. The positive resonance I received was merged with spots of enhancement that I discovered, all of which was factored into the finalized design.

🧐 My challenge -> How to automatically decorate courses?

🧐 My challenge -> How to automatically decorate courses?

I regularly synced up with the team responsible for developing the faculty access. They, in turn, identified a pain point among teachers, which was the difficulty of creating course covers and formatting each time. We also received feedback from students that it was inconvenient to see different styles from various instructors.

🔥 I've tackled it with design creativite

🔥 I've tackled it with design creativite

At the university, there are over a thousand courses in 34 academic fields. Providing ready-made covers is not practical because it's a lot of work, and it would need to be repeated as new courses are added.

In that case, I talked to the developers to see if they could write a script to automatically generate textures. To my delight, the developers said it could be done quite easily. So, I came up with the following logic for the script.

Next, I asked the illustrator to draw many pieces, and I prepared the original colors that could be used to create color variations myself.

We assign a color or combination of colors to each subject. All courses in the same subject will be colored with these set colors, but they will have different patterns to create a unique course look.

😳 The biggest UX challenge

😳 The biggest UX challenge

In this project, the biggest challenge for me was merging UX with Moodle's technical capabilities. Due to code limitations, I couldn't implement the solutions that performed best in testing. I had to find compromises and enhance the user experience using the available means.

Here's an example of my course page redesign.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

😳 Addition challenges

😳 Addition challenges

I couldn't predict how the product would change in the future because it's built on the Moodle platform. A teacher might want to insert a quiz for which I hadn't done a redesign. I addressed such situations as follows:

1) I created a design system that provides tokens. Tokens define the visual style of any Moodle page by specifying basic interface elements like colors, shadows, borders, as well as the sidebar and header.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

2) For additional unique parts, I designed them separately, considering that a part of Moodle would be inserted via code through an iframe without changes. But with my design, the insertion would look seamless.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Constant improvement via testing

Constant improvement via testing

When assigning tasks, I took on the core pages that had the most significant impact on the user experience. Other parts, such as redesigning the survey process, managing educational materials, and handling exam sessions, I delegated to team members, and they did an excellent job with the tasks.

As a result of creating all the screens that enabled us to achieve the set goals, I, together with the team of UX researchers, conducted moderated and unmoderated testing. My goal was to find out if students could:

🤔 easily find and access all types of news updates within the LMS.

🤔 continue learning quickly

🤔 obtaining and submitting educational materials.

🤔 find a tutor or classmate from the specific course

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

🙂 Final solution

🙂 Final solution

This video with screens represents the team and my design efforts. This outcome is a testament to our team's synchronized efforts and effective leadership throughout the project.

🌟 KPIs achieved

🌟 KPIs achieved

After the first three months of using the updated Desktop LMS and LMS App

+24%

+24%

Course Resumption Rate

+12%

+12%

Process Time Metrics

+8%

+8%

User Engagement Metrics

+16%

+16%

Student NPS score

Reflection

Reflection

I'm very happy to work with such a challenging product. Once again, I've realized that the product's value determines its demand. By understanding the deep needs of users, I was able to re-engage them with the product.

I also made sure that the design system creates a consistent visual language even in areas where no designer has worked before. It was the right decision to develop the design system alongside the LMS because I could see how components interact with each other and create tokens within the product context.

Next steps

Next steps

The next step for me was to move on to mobile application development and adjust the process so that it matched the desktop version. This was necessary for data synchronization and ensuring a uniform cross-functional user experience.

Elevating User Engagement by 30% and Improving Academic Performance by 25%

Case study