top of page

Learned Dashboard Redesign

Elevating the educational experience of students from underserved communities.

Overview

Redesigning Oppia’s learner dashboard proved to be a gratifying undertaking. The goal of this project was to create a solution that enhances the overall learning experience, specifically tailored to a younger audience less familiar with technology. 


Embracing the principles of design thinking as a guide, valuable user feedback was continuously incorporated to create an educational interface that is both effective and user-friendly. This resulted in a product that enhances the information architecture, making navigation more intuitive, respecting usability heuristics, and including additional features. 

Role

Principal Product Designer, leading the end-to-end creative process, working collaboratively with various stakeholders. Project was carried out in 2023, over a period of 4 months.

Background

Oppia is a free open-source online educational platform with a specific mission: empowering students worldwide by promoting access to education. We achieve this by providing free, high-quality education, making learning accessible to everyone, especially for students from underserved communities. 

Oppia serves multiple user groups, including Learners, Learner’s Parents, Teachers, Partners, Volunteers, Donors, and more. However, this project is specifically centered on Learners, as they constitute the primary audience engaging with the Learner Dashboard and are our core target users.

Problem statement

The current information architecture for the Learner Dashboard is inconsistent and unintuitive, and there are various issues that should be resolved in the new design.

 

For instance, currently the navigational structure is completely different between Desktop and Mobile — making it confusing for anyone who uses both platforms to find what they’re looking for.

 

Additionally, the current architecture is not scalable, especially considering adding new features in the future. Therefore, a new information architecture was proposed for this project.

Group 1.png
where did  "feedback updates" go?

Main user stories

As a learner, I need to find lessons of my interest, so that I can start learning.

As a learner who has previously started a lesson, I need to find this lesson, so that I can resume it.

As a learner who has saved lessons to play later, I need to be able to find this lessons, so that I can play them in the appropriate moment.

As a learner who wants to learn a specific subject, I need to be able to set goals, so that I can focus on it.

As a learner who has set learning goals, I need to view related recommendations, so that I achieve those goals.

As a learner who done multiple lessons from the classroom, community library and practice sessions, I need to be able to view my progress, so that I'm aware of how far I've gone in my learning journey.

New information architecture

The updated information architecture is structured around three core tabs: Home, Goals, and Progress.

​

  • Home: Upon entering the platform, this will be the initial point of access for users. Here, they can swiftly dive into topics of interest, receive updates, access recommendations, and resume ongoing lessons.

​

  • Goals: will exclusively focus on the establishment of learning objectives, which will subsequently be highlighted on the Home tab in the form of personalized recommendations.

​

  • Progress: will comprehensively track and display a student’s advancement in terms of completed lessons (from Math Classroom and Community Library) and the mastery all available skills.

image.png

Wireframes

So I started working to visually translate the architecture information into wireframes. The wireframes for the “Home” tab comprise sections for resuming where users left off, exploring new topics, and managing learner groups.​

Group 13927.png
Group 13929.png

Lo-fi & Validation

After the inception of the initial wireframes for the learner dashboard, stakeholders provided valuable feedback. This feedback led to several iterations of wireframes, culminating in a final low-fidelity prototype version for user testing.

The usability test involved 25 users aged 7 to 14 years old, with a mix of virtual and in-person sessions. The test was conducted based on a Research Plan devised by me and carried out by volunteers from the Oppia Foundation.

 

Participants were from diverse locations, including Brazil, Nigeria, and Cameroon, providing valuable insights into the learner dashboard’s usability and user experience across different cultural contexts. A summary of the test results can be observed in the following:

First results

100%
completion rate

93%
conversion rate

4.5 of 5
satisfaction rate

Fixing issues & more

After the initial validation of the new information architecture and user understanding of the learner dashboard’s main features, the project entered the phase of detailing, iterating, and improving the mock-ups, while seeking to address the issues encountered in the first usability test.​

Issue #1

What to validate
Expected behavior
Results
Notes

Do they know how to resume a lesson?

Hover the card, and then click on "resume".

84% clicked or hovered the card, while 12% didn't try to click or hover the card.

Some students weren't aware of the "hover" interaction, so it might be worth to display the "resume" button without it.

Also, the title should be adjusted so the user doesn't have to move it to "reach" the button. 

How did I address this issue?

To tackle the challenge associated with the “hover” interaction, the decision was made to display the “resume” button without relying on hover functionality. This change ensures that all users, regardless of their familiarity with hover, can easily access the button. Additionally, adjustments were made to the tile positioning to eliminate the need for users to reposition it in order to access the button.

Before

Gravação-de-Tela-2024-02-21-às-15.09.35.gif

After

Issue #2

What to validate
Expected behavior
Results
Notes

Do they understand what they can do in the progress tab?

Understand that they can:

1) view history of lessons (in progress or completed)

2) view review cards

3) start practice sessions

1) 100% understood

2) 86% understood, while 14% didn't

3) 62% didn't understand

2) Students had difficulty understanding the concept to review, they thought it is about reviewing the previously done lesson, not a card that summarizes the content

3) Students had difficulty understanding that practice sessions are different from lessons.

How did I address this issue?

User testing revealed that students found the skill section confusing, often mistaking lessons for practice sessions and struggling to determine when to engage in practice sessions. This is because the current experience lacks clarity in how lessons relate to practice sessions and review cards, and it is not clear when students should engage in this flow. As a result of these discussions, it was decided to remove the skill section from the progress tab and consider it as a separate project to be addressed in the future. 

Deliver

Valuable feedback was provided by multiple stakeholders, including the product managers, tech leads, UX writers, and other UX/UI designers. Throughout the process, design critiques were conducted to ensure consistency in the design, while several challenges were addressed.

 

Through extensive user testing and feedback collection, we were able to confirm that the changes and enhancement made throughout the project successfully addressed the identified issues and met user expectations.

​

These challenges required careful consideration and problem-solving to ensure a seamless and user-friendly experience within the learner dashboard, while creating new standards for components that were not previously included in the design system, which is an ongoing endeavor. Material Design principles from Google were utilized to develop these components and standards.

Home tab

object.png

Goals tab

object6.png

Progress tab

What have I learned from this project?

At the end of every project, it’s crucial to take a step back, acknowledging the progress made, and, equally important, to recognize potential areas for improvement and elements to be addressed in the future.  After all, we understand that a project concludes when it must, as the possibilities for solutions and enhancements are boundless.

​

In this context, I’d like to highlight some key points:

Given that Oppia is planning to introduce additional topics beyond mathematics in the future, this project might require adjustments to accommodate these new subjects.

Despite this project adhering to the established design system standards, there’s room for improvement in terms of achieving a more refined overall UI. This enhancement will ensure a more polished and visually appealing experience.

Thanks for reading!

Check out other case studies

3.png
1.png
2.png
Valentinas

Promoting female leadership and empowerment through technology.

Practice Redesign

Promoting female leadership and empowerment through technology.

bottom of page