The Oppia Foundation
Multiple subjects introduction
Team
1 UX Designer, 1 Product Manager, 1 WebTech Lead and 1 Developer
When
3-months (on going)
Tools
Figma, Github, Google suite
Oppia, a non-profit edtech based out of Northern California. Their aim is to make education universally accessible with focus in underserved countries, such as Africa and Brazil.
My role was to parse out goals from the product requirements document and iterate design solutions to increase awareness about Oppia’s new subjects. This project was carried out remotely with feedback from an international team. My final deliverables were desktop prototype, mobile phone prototype and a developer handoff file.
Company
www.oppia.org
Oppia currently offers Math as their primary subject for learners. With plans to release new subjects in the coming months, there is not a way to give access to new subjects.
Problem
Learners can simply explore an array of Oppia curated subjects by conveniently accessing them through main pathways such as the splash page, the navigation menu, the dashboard and from the adjacent subject pages. Once they arrive at a subject, guidances can offered to those that do not know where to start.
Solution
The work entails giving young learners 4 different ways to access new classroom subjects such as Science and Financial Literacy (near future).
The access points are:
Main splash page
Community library page
Learner’s dashboard
Navigation bar menu
New pages:
5. Science classroom page
6. Science topics page
Scope of work
1. Allow learners to quickly access all subjects
2. Easily navigate between topics and subjects
3. Quick starts for learners
Design goals
My main focus will be on the Community Library page, and the Science Classroom page. These two pages will require design exploration and content creation. For the remaining pages, I will follow guidelines from their design systems.
Target Audience
Our primary target users are learners from the ages of 8 -14. The challenges for our core users are being engaged while learning, and having access to a learning platforms from an electronic device.
Key insights
It is common for siblings to share devices, especially if they are growing up in the same household. Children also borrow mobile devices or laptops from parents.
Features such as gamification and interactive elements, and the app's compatibility with their devices can also influence a student's decision to use a particular education app.
Most of them prefer a combination of reading and writing while studying.
Students primarily use their cellphones at home.
Some students reported having limited working internet connection at home.
A preliminary review of the website provided areas to highlight proposed ideas of adding subjects and topics into the existing pages. Starting from the learner’s dashboard to the existing Math subject page. Having this step completed helped me to better plan and visualize ideas for the pages.
User entry points
I wanted to go through some ideas for concepts by looking at different ways I can arrange the subjects cards for the Community Library page. Following that I looked at a couple ways to arrange the classroom subject page and drop down menu. I really enjoyed this part of the project, it allows me to free up my thoughts.
Starting ideas
Working through iterations guided by feedback from the design team and PM gave way to new perspectives on how each subject should be displayed. I went through rounds after rounds of iterations for each frame, gathering feedback from designers and stakeholders for the project. At some point, I was advocating for a design direction that was imperative to the overall design brand.
Ideation
This project was selected as part of the Google Summer of Code (GSoC) program. There was a big push to get the designs completed for implementation by the developer. Aside from turning over a hand off dev package, I collaborated closely with the developer to make sure the design intent was consistent with the design file.
Collaboration with developer
On the community library page, the original idea was to incorporate an ad like panel in between the contents, but through a design audit and research, the direction going forward was to have the entry point at the top of the page. This creates less confusion for the learners. As I worked on the math subject page, I noticed there were three different math icons represented. Unfortunately, none correlates with the math subject. I proactively redesigned and consolidated the icons for the math subject along with coming up with a new icon for the science subject.
I want to highlight three areas that I made the most impact to this project.
Solution overview
Access to all subjects
Oppia started a wayfinding method unique to their own site. It was a breadcrumb style but incorporating the Oppia logo as their home link. While it was inventive and different, there were some drawbacks to have this “breadcrumb” feature on the navigation bar. One of the drawbacks was the limited amount of space to allow appropriate display of text, the second was taking focus away from Oppia as a brand by making the logo part of the navigation feature.
First, I audited the Oppia’s website to understand how the current way finding structure works. Next, I gathered data from competitive and adjacent researches to understand how others have solved way finding on their site.
I worked through iterations on how to optimize this feature. Primarily, I relocated the way finding feature, which is called breadcrumbs, to align with the main content heading. This resolves the text space issue, along with providing visual clarity on navigating within the different subjects. Next, I created a bread crumbs logic to apply a 3 level rule to featured pages. Allowing the breadcrumbs to only display 3 hierarchal pages deep at any given instance. For example the user chooses a subject (1st level) chooses a topic (2nd level) , and chooses a lesson to start learning (3rd level).
Improve way finding navigation
Research showed that 60% of learners do not know where start when they visit the site. Often times they would visit different pages and feel they they are discourage with the topics or the level of difficulty. There was a request to come up with ways to allow learners to feel empowered to learn through the guidance of Oppia. The solution was to have quick start links for the learner to not have to explore too far to start a lesson. And If they feel that they want to start exactly where they feel need help, the solution is to take a quick quiz to determine the starting point.
Quick starts for learners
Currently this project is being tested on the test server. I will take part as a tester to ensure product quality and consistent is maintained. I will continue to gather more user feedback to validate designs and iterating on the point of entry at the Community Library page and classroom page. Conduct usability test with learners to gain data points regarding tasked based navigations.
Next steps
This project was quite different from previous projects, where my starting point is a PRD which had very descriptive outlines on which page needed problem solving and exploration.
I realized that I did not need to go through a full design process because I am adding to an existing design. I will proceed with a usability test with the learner group to understand how my design solution fares with the learner’s use case.
Given this project has shorter than expected timeline, I had to complete the project with the best solution in the timeframe and keeping in mind that I will go back to re-iterate after we gain more data points.