Finalize the splash page redesign

[seanlip]

Platform
Oppia Web

Describe the request

We conducted a redesign of the splash page some time ago -- see these mocks (second column from left): https://www.figma.com/file/YWe7SqfUVjxlJLKTUn0UZa/Project-2?type=design&node-id=6050-159194&mode=design&t=v3mhfxAkI0l9V53z-0. Note that these mocks have not been implemented yet.

However, in the interim, we received feedback on the current https://www.oppia.org splash page (note: you must be logged-out to see it) in an Oct 2024 user study that suggests that the experience is not great for learners. The aim of this issue is to go through the feedback and ensure that the new splash page design (above) addresses it. If not, we should update that design so that we can implement a version of the new splash page that properly addresses all the feedback.

Note that a fair amount of the feedback is UXW-related, so it would be a good idea for UXW to take a look at this as well. Again, please note that the version to audit for implementation is the Figma file, although the feedback below pertains to https://www.oppia.org

Important: We should ensure that the updated splash page works well on mobile, tablet and desktop devices.

Here is the list of feedback we've received:

• The learner wasn’t sure initially about what oppia was about. I asked him to scroll down a bit, then when he got to “our benefits” with the image and numericals, he then said “is this a maths app”
• Initially, the learner wasn’t sure what oppia was about. She wasn’t sure what to do nor how to navigate on the website. Learner needed help to get to the lessons on the website. It seemed to be difficult for her to find the lessons from the homepage for the first time. Learner was stuck. She stayed put on the page and kept reading every single thing on the homepage, until I assisted.
• Navigating the platform was a bit challenging for student WB-OO-1, who had little or no exposure to the use of a website, especially signing in to save his lessons. Despite being on the website, he wasn’t sure if he was supposed to click on “Browse our lessons” or “Access the Android app” until he was told to proceed to browse our lessons, which is intended for the web version. With this, voice prompts could help such students in that category.Aside from this, the website or lessons were not difficult to navigate.
• Learners had a neutral reaction to the splash page content. Suggest making the website more animated, interactive and colorful for the students to grab their full attention to the website

Here are some suggestions from the research team. You do not need to follow these suggestions, but they might provide some ideas for further consideration:

• The landing page could have the “numericals" and image first. It is currently ok for those accessing the website with a laptop or bigger screens. But for learners making use of a phone, it is confusing. Especially if a kid isn’t inquisitive enough to scroll down. And without scrolling down, he might not be sure of what the platform is about.
• A short, colorful animated video or GIF that can immediately show what Oppia is and how it works.
• The phrases can also be simplified by replacing phrases like "Engaging and effective quality education for all" with simpler sentences such as "Fun and easy learning for everyone."
• A more playful visual, like a cartoon character pointing to the buttons "Explore Oppia Classrooms" and "Access the Android App" would grab a learner’s attention. What if the headline is changed to "Learn and Have Fun!"?
• Lesson tab should be part of the homepage.
• Also, clear action words will be great (for example “create account” “click here to start”)
• A welcome prompt could make it more welcoming for learners to know what to expect and do. More like adding a ‘tour guide demo’ to the landing page.
• Moving arrows example like this one: https://www.canva.com/design/DAGTkUQbahY/9vJAeGePj-l3QnQgWV4NrQ/view?utm_content=DAGTkUQbahY&utm_campaign=share_your_design&utm_medium=link&utm_source=shareyourdesignpanel

Context for the request

This is a request for a review (and, if necessary, update) to the existing splash page redesign, so that it can be implemented.

UXR success criteria

Learners should understand what the site is about, and be able to figure out how to start their first lesson without needing any prompting.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• UX Design approved (Android mocks should include dark mode)
• UX Writing approved
• Product approved

For a design project to be completed, it needs approval from UXD, UXW and PM. Please tag the following reviewers when your project is ready (at least one reviewer for each of the bullet points below):

• UXD: @rflore / @S4v8n
• UXW: @ccc253 / @tamiorendain
• PM: @seanlip