Home
👩🏼💻 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
📍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
🌟 Solution
Before getting into my design process, here's a direct comparison of the redesign
How it happened..
Project initiation
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
Poor user experience with no need to use it👇🏻
Research
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.
Research
The inconvenience of using LMS made designers create themed chats on Telegram. I studied the topics and identified the main 3 groups:
Educational announcements.
Social events outside of classes but within the university.
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
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.
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.
Goal clarifying
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
Stakeholders approvement
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
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
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.
Redesign preparation
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.
Redesign preparation
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
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
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.
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.
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.
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.
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.
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.
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.
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
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.
After the first three months of using the updated Desktop LMS and LMS App
Course Resumption Rate
Process Time Metrics
User Engagement Metrics
Student NPS score
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.
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
