[Feature Request]: Redesign the splash page

[seanlip]

Is your feature request related to a problem? Please describe.

As part of a general project to improve the onboarding flow on the website, we would like to redesign the splash page to make it very clear:

• What Oppia is
• What we have to offer
• How learners can get started (i.e. Steps they need to take to start a lesson)

Describe the solution (or solutions) you'd like

The proposed new splash page is detailed in 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

Original PRD: https://docs.google.com/document/d/1r91ypya5HasdGsuLcuzt_utKik6xpIVe9koYGynl6kg/edit (this refers to the "splash page update" part of it).

Note that the resulting splash page should work well on both desktop and mobile.

Describe alternatives you've considered and rejected

No response

Additional context

This is filed based on the design issue here: https://github.com/oppia/design-team/issues/69

[seanlip]

Also /cc @juliafalarini, the designer for this project, who can answer questions if needed.

[AFZL210]

@juliafalarini Can you please confirm when we should show the language selector tooltip?

[AFZL210]

Update: Sorry for the delay. Will create a PR this week.

[juliafalarini]

@AFZL210 the details can be viewed on the prototype. Once they access the splash page, after 300ms we will show the tooltip. This tooltip will disappear after 8000ms. You can view all these details here

[yashwardhan-jyani]

Hey @juliafalarini , I had some questions -

1. Which page do the "Start teaching" and "Start exploring" button lead to in the teachers and parents section?

   Do they go to this page - https://www.oppiatestserver.org/creator-guidelines just like in the old splash page!

2. The text varies between web and tablet/mobile designs in some instances like-

• The first heading -

Web -

Tablet -

• The create account button -

Web -

Tablet -

Also, here is my work so far.. Please do tell what you think -

https://github.com/oppia/oppia/assets/100014271/d566c4e4-80cf-4ca0-9b9d-c8200f30c65c

[juliafalarini]

Hi @yashwardhan-jyani I have fix the issues directly in the file. Thanks!

[AkashPaloju]

hi @juliafalarini ! Could you please let me know if we can change the colors of the below elements for which the lighthouse accessibilty tests are failing because of low-contrast ratio ? These are the only buttons for which the test is failing, if we can address this , we can get 100 lighthouse score in a11y for the splash page. Thanks!

[seanlip]

@AkashPaloju Go ahead and make the fixes you need. Provide a comment here showing before/after fixes for what you changed, and leave comments on the mocks as well. Then we can merge this and make further changes if needed. Thanks!

[AkashPaloju]

hi @juliafalarini ! Could you please let me know if we can change the colors of the below elements for which the lighthouse accessibilty tests are failing because of low-contrast ratio ? These are the only buttons for which the test is failing, if we can address this , we can get 100 lighthouse score in a11y for the splash page. Thanks!

I have changed the colors as follows and got lighthouse score of 100.

splashlighthousetest.webm

Before After For this, I have used same colors which were used for the 'Classroom card' beside it.

Before After For this, I have used the primary-color - #00645c

Thanks!

[seanlip]

@AkashPaloju Thanks, I think the updated colours are fine. Can we get your PR merged?