Redesign splash page

[AkashPaloju]

Overview

1. This PR fixes or fixes part of [Feature Request]: Redesign the splash page #19214
2. This PR does the following: Redesigns the splash page.

Essential Checklist

Please follow the instructions for making a code change.

• I have linked the issue that this PR fixes in the "Development" section of the sidebar.
• I have checked the "Files Changed" tab and confirmed that the changes are what I want to make.
• I have written tests for my code.
• The PR title starts with "Fix #bugnum: " or "Fix part of #bugnum: ...", followed by a short, clear summary of the changes.
• I have assigned the correct reviewers to this PR (or will leave a comment with the phrase "@{{reviewer_username}} PTAL" if I can't assign them directly).

Proof that changes are correct

Desktop & Mobile devices

splash-revisions.webm

Hover effects
splash-hover-effects.webm

Lighthouse tests in a11y

Screencast.from.23-04-24.10.45.31.PM.IST.webm

RTL Layout:
Screencast from 23-04-24 10:43:28 PM IST.webm

Slow Network:

Screencast.from.23-04-24.10.51.37.PM.IST.webm

PR Pointers

• Never force push! If you do, your PR will be closed.
• To reply to reviewers, follow these instructions: https://github.com/oppia/oppia/wiki/Make-a-pull-request#step-5-address-review-comments-until-all-reviewers-approve
• Some e2e tests are flaky, and can fail for reasons unrelated to your PR. We are working on fixing this, but in the meantime, if you need to restart the tests, please check the "If your build fails" wiki page.
• See the Code Owner's wiki page for what code owners will expect.

[oppiabot]

Hi @AkashPaloju please assign the required reviewer(s) for this PR. Thanks!

[AkashPaloju]

I will assign the reviewers once all tests are passed. Thanks!

[AkashPaloju]

Current Status: Waiting for reply on this query before the 'a11y' commit

[seanlip]

@AkashPaloju I've replied to the query. Are you planning to finish this PR?

Please also note that your CI checks are failing.

[seanlip]

Also, one note -- where possible, try to optimize the image sizes, especially for the larger files. Thanks!

[seanlip]

Thanks @AkashPaloju, I am also adding the design leads for a review of the video!

[S4v8n]

Hi,
Great work so far!
Here are some revisions for the splash page.

Web version:

1. "Learn through story.." title is missing white background for all three versions (see figma file for reference.)
2. Set 295px widths for all subtext under title "Fun free", "Learn by yourself" , " Diversity of subjects"
3. set 289px widths for body text "Oppia's classroom" and "Community lessons"
4. Community lessons title and button should be Dark Orange color #B25239 (for all three versions -web, mobile, tablet)
5. set 682px width for body text - "Have your own account"
6. Set 478px width body text - "For parents"
7. set 456px width body text - "For volunteers"

Mobile version:

1. missing white background "Learn through story..."
2. CTA buttons not centered especially "Start learning" and "Or create an account"
3. Double check fonts are Capriola font, size 16 for title, Roboto font regular size 13 for body text - "Fun free", Learn by yourself", "Diversity of subjects" Also make sure spacing between title and body text is 8px, it currently too much space.

Tablet version:

1. missing white background "Learn through story..."
2. Set 543px width for body text - "Have your own account"
3. set 467px width for body text - "For teachers"
4. set 415px width for body text - "For parents"
5. set 447px width for body text - "For volunteers"

Thank you for your great work!

[rflore]

Hi Team,

For Web:
Header, Body Text, & CTA: "Learn through story based lessons"; The left margin is 89px, while the others are at 88px. Please update.
Header: "Have your own account"; The video shows a smaller left margin, please update to 88px.

Kurin has done a great job capturing most of the changes needed, especially the mobile CTA alignments issues. No other issues on my end.

Nice work all!

[AkashPaloju]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.

In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28
2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.

Best, kurin

Thanks @S4v8n , I will do the remaining changes but I won't be to do the white background thing for the curved shapes given my ongoing GSoC period with Oppia.

[S4v8n]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.
In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28
2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.
Best, kurin

Thanks @S4v8n , I will do the remaing changes but I won't be to do the white background thing for the curved shapes given my ongoing GSoC period with Oppia.

Sounds good @AkashPaloju, Thanks for the response.

[nikitaevg]

Thanks!

[oppiabot]

Unassigning @nikitaevg since they have already approved the PR.

[oppiabot]

Hi @AkashPaloju, this PR is ready to be merged. Please address any remaining comments prior to merging, and feel free to ask someone to merge your PR once the CI checks pass and you're happy with it. Thanks!

[stepmalt]

The time stamps here are for the first video on this page:

Learn anything, anywhere with Oppia—your free educational platform.

At 0:07 — having your *own account. And add a line break before Through our Learner Groups.

0:10: Oppia is a non-profit project built by volunteers from around the world. We always need more people to create, improve and translate lessons, contribute graphics, and more!

Also only capitalize Subscribe in Subscribe to our newsletter at the bottom.

Since we are moving away from title case, don’t capitalize Teachers or Parents in the header for “For Teachers” and “For Parents”


Also, there’s not consistency with these buttons. Are we doing title case in buttons? I thought we weren’t, but I’m unsure. @seanlip

[AkashPaloju]

Hi, @S4v8n, @rflore , Thanks for your feedback, I have addressed the comments Could you PTAL at the updated videos ? Thanks!

Hi Akash, thank you for the latest video update. The desktop version looks better. There are couple things I noticed.

In Desktop version:

1. The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28
2. Also are you able to apply the white background to have the curved shapes? see image below. If you are able to do it, there are two other areas that have the curve shapes on page. this would need to be applied to all screen versions.

One small thing I notice in the Mobile portrait mode.

• in section that starts with " Learn more about Oppia", the subtext font looks bigger than the title font.

• The titles "Learn by yourself" and the all titles should be in Capriola regular font, font size: 16, the subtext should be Roboto regular font, font size: 13.

Thank you again for your work. It is looking great.

Best, kurin

Hi @S4v8n ,
Reply for 'The first line "Learn anything through story based-lessons!" title should be across the page, font size: 28'
In this figma file given in the issue thread, in web version, the title is not across the page - fontsize-32px, the styles you are saying are for the tablet landscape mode. Also the text is 'Learn through story based-lessons!'.
So should I stick with that or change them as you said ?, Thanks!

[AkashPaloju]

@S4v8n , @stepmalt , Could you PTAL at the updated videos. Thanks!

[S4v8n]

@S4v8n , @stepmalt , Could you PTAL at the updated videos. Thanks!

Hi Akash,

Thank you for the latest changes. Here are my comments. These are smaller things I noticed that more spacing related.

Web:

1. you do not need to change the text format for "Learn through story based..." , please keep it how you have currently have it.
2. In Oppia classroom and Community lessons: spacing between graphic image ->subtext -> button, should be 24px. Please verify spacing.
3. "Having your account.." the subtext has a single word on the last line, please adjust to have it on the 2nd line. As a rule we should not have single word on a line, it must be two or more. (there will other areas that need to be updated as well)
4. "For teachers" - 24px spacing between graphics / subtext/ button
5. "For volunteers" - single word "more!" needs to be adjust to the 3rd line. Spacing 24px graphics/subtext/ button

Mobile
6. "What does Oppia have to offer.." - Verify the text is Capriola , weight 400, 20px, and separated into two lines. it currently looks smaller
7. Oppia classroom - spacing 16px - between graphics/subtext/ button
8. Community lessons - move "50+" to be with languages on the 3rd line. Spacing 16px -graphics/text/ button
9. For parents - "feature" need to be on the 4th line
10. For volunteer - text need to be below the Oppia graphic and above the button

Tablet
11. "anywhere" need to be on 2nd line.
12. Oppia classroom and Community lessons - spacing 24px - graphics/ subtext/ button
13. For teachers, "Through our learners sentence, should not have a break, it should continue on the same line a previous sentence. spacing 24px -graphics/ subtext/ button
14. For parents, "feature" need to be on the 3rd line with sentence, spacing 24px
15. For volunteers, spacing 24px

Thank you again for your work, it is looking really good.

Best,
Kurin

[AkashPaloju]

@S4v8n , I have addressed your comments and verified things you said, PTAL at the updated video. Thanks!

[S4v8n]

@S4v8n , I have addressed your comments and verified things you said, PTAL at the updated video. Thanks!

@AkashPaloju looks good! Thanks for the quick turn around. I have no further comments.

[AkashPaloju]

@seanlip Reviewers and Designers have approved the changes and all tests are passed. Please add this to Merge queue. Thanks!

[seanlip]

Hi @AkashPaloju, sorry for the last minute notes, but since this is going to get launched once it's merged I thought I'd better do a quick pass through the text. In some cases we are promising things that are not live yet. Could you please make the following changes and file an issue to revert them once the relevant functionality for learner groups and multiple classrooms is in place?

• "use to learn anything, anywhere" --> "use to learn key skills, anywhere".
• Drop "Through our Learner Groups feature you can assign lessons and follow your student's progress." under "For teachers".
• Drop "You can also see your child's progress through our Learner Group feature" under "For parents"

Also, some general textual updates (that can be permanent):

• "Diversity of subjects" --> "Diverse subjects"
• "lessons of multiple subjects" --> "lessons in multiple subjects"
• "volunteers all over the world in 50+ languages" --> "volunteers all over the world"
• Having your own account --> "Have your own account"
• "having your account" --> "creating your account"
• Drop "ad-free" from "For parents"

Also @stepmalt, re consistency of button text, that's up to the UXW team. Could you please confirm what the current style guide recommendation is?

Finally @AkashPaloju Can you put these changes behind a feature flag so we can do A/B experiments on the splash pages? I think that would help us gain confidence in the new page before fully launching it.

Thanks! (And sorry for the late response.)

[seanlip]

Thanks @AkashPaloju for the PR, sorry for my late reply on it.

I was thinking more about the launch for this and I realized that it would probably be good to ensure that the design actually works well, so I suggest that we do a 50% feature rollout for this since we now have the functionality to do so.

(Note that for the other static pages you're doing though, I think we can definitely just go ahead with those changes since the current pages have clearer deficiencies. But for the splash page I think it is worth doing this since we still have traffic from the current page, and also this -- i.e. A/B tests -- is the sort of thing we should probably get some experience doing. PTAL at the changes suggested and let me know if you think that any of them would be difficult to do, I know the system reasonably well and can probably advise. Thanks!)

[seanlip]

@AkashPaloju I don't think legacy GA works any more, we should remove it. Let's use the non-legacy version of this instead.

Also could you please add another parameter along with the events common to both pages that allows us to pass along the value of the feature flag? Then we can roll this out at 50% and see how the click rates compare between the two.

[seanlip]

Hi @AkashPaloju -- would it be possible to make a splash-page-one.component.html and a splash-page-two.component.html, then use a feature flag value to ng-if between those? That way we can get some validation of this page before we launch it fully, so that we can make sure it is better than the current one.

We can keep that running for a couple months and then analyze the results at the end to decide which version to go with finally. OK for both these pages to use the same JS component if that makes things easier, and OK for these pages to contain duplicate code if needed since we're going to drop one anyway.

[oppiabot]

Hi, @AkashPaloju, the LGTM Label has been removed because the changes were requested on this PR. Thanks!.

[AkashPaloju]

Hi @AkashPaloju, sorry for the last minute notes, but since this is going to get launched once it's merged I thought I'd better do a quick pass through the text. In some cases we are promising things that are not live yet. Could you please make the following changes and file an issue to revert them once the relevant functionality for learner groups and multiple classrooms is in place?

• "use to learn anything, anywhere" --> "use to learn key skills, anywhere".
• Drop "Through our Learner Groups feature you can assign lessons and follow your student's progress." under "For teachers".
• Drop "You can also see your child's progress through our Learner Group feature" under "For parents"

Also, some general textual updates (that can be permanent):

• "Diversity of subjects" --> "Diverse subjects"
• "lessons of multiple subjects" --> "lessons in multiple subjects"
• "volunteers all over the world in 50+ languages" --> "volunteers all over the world"
• Having your own account --> "Have your own account"
• "having your account" --> "creating your account"
• Drop "ad-free" from "For parents"

Also @stepmalt, re consistency of button text, that's up to the UXW team. Could you please confirm what the current style guide recommendation is?

Finally @AkashPaloju Can you put these changes behind a feature flag so we can do A/B experiments on the splash pages? I think that would help us gain confidence in the new page before fully launching it.

Thanks! (And sorry for the late response.)

I understood that the primary thing we need to do is (pls tell me if I am wrong) :

1. Create a feature flag for the new splash page feature
2. If the feature flag is enabled we need to show users the 'new splash page' else we need show the 'old splash page'
   The A/B testing you mentioned -- Here 'A' is new splash-page , 'B' is old splash page right ?

Thanks!

[seanlip]

Yes, that's all 100% correct. Thanks for checking!