Students aren't sure what to do when they finish a lesson

[seanlip]

Platform Oppia Android

Describe the request We've received some feedback that learners aren't sure what to do after finishing an exploration. We should try to ensure that the "next steps" are always clear, e.g. by connecting learners directly to the revision cards or the next lesson when they finish the corresponding lesson. Some direct feedback we've received:

• It will be great and less confusing if the revision tab can be located at the end of each chapter within a topic.
• Give the option to continue learning at the end of each chapter. "Continue learning" should automatically take you to chapter 2 without having to return to the home screen. Instead of return to topic , the button should read “Next chapter” to move forward.

We might also want to consider letting students know, during onboarding (or during the lesson), that they can look at the revision cards if they are stuck and then go back to the lesson without losing progress.

Context for the request

This is a modification to the existing flow. It aims to make it clearer for the learner what to do when getting to the end of a lesson.

This is also an issue on Web, but that has been solved by @juliafalarini in these mocks: https://www.figma.com/file/YWe7SqfUVjxlJLKTUn0UZa/Project-2?type=design&node-id=6050-159194&mode=design . For Android, I would suggest doing something similar (but taking into account that practice questions are not supported on Android yet).

UXR Success criteria

• On finishing a lesson, students should be able to do any of the following, with knowledge of what the corresponding buttons lead to:
  • Navigate directly to the revision tab
  • Start the next chapter

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• [ ] UX Design approved (Android mocks should include dark mode)
• [ ] UX Writing approved
• [ ] Design Systems Team approved
• [ ] Product approved

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

• UXD: @GlowWindow (for Android projects)
• UXW: @stepmalt
• Design systems: @qluuu / @celestinetales
• PM: @seanlip

[Ashita-Modi]

https://www.figma.com/file/GNCMqrn6y0uKSs5xttnALt/Lesson-Flow_Oppia?type=design&node-id=53%3A35&mode=design&t=zW7uwb0hk8XApKor-1

Finalized design solution for this particular task, this needs to be turned into Hi-fi screens using the current design system. Detailed notes and specifications are in the figma file.

[seanlip]

Deassigning @Ashita-Modi for now. This project is open for others to take up.

[lmahon90]

Found the mobile version of the design solution: https://www.figma.com/design/YWe7SqfUVjxlJLKTUn0UZa/Project-2?node-id=6877-360204&t=HgCFHxiu8Qgyslat-1

[lmahon90]

I've been working on the hi-fi screens of the current state. I'm missing quite a bit of content on the lesson pages. Hoping to find that from the UXW team, but I can't find any corresponding documentation. I also need several illustrations that I can't track down.

[seanlip]

@lmahon90 Just wanted to say thanks for the update. Do you have all the resources you need, now (per recent discussion on chat)?

[lmahon90]

@seanlip Unfortunately copying the images from the link you gave me [(https://www.oppia.org/explore/K645IfRNzpKy?story_url_fragment=jaimes-adventures-in-arcade&topic_url_fragment=place-values&classroom_url_fragment=math&node_id=node_1) ] is giving me an SVG file which comes out really grainy--I've tried downloading the file but I can't change the file type. I'll use the images as placeholders for now. If there's a master file of images & illustrations, I would prefer that.

[seanlip]

@lmahon90 Could you please give more details on what environment the file is grainy in? SVG files are vector graphics files and should therefore have "infinite" precision, so something is unexpected here. If you could send @ashley-ya and me the file in question by email together with the steps to reproduce the "graininess" issue, that could be helpful too.

Thanks!

[lmahon90]

The images that I got from https://www.oppia.org/learn/math/place-values/revision were giving me some issues. When I copied these over and then pasted into my Figma file, they came out a bit grainy. Here are some examples from my figma file https://www.figma.com/design/0hf44RuBpKeLxM54n0qqRe/Oppia-%5B%2398-What-to-Do-When-Learners-Finish-a-Lesson%5D?node-id=5013-7659&t=LjKJODYrBkWopwJW-4 (under pages>March 2024 Hi-Fi & Current State>Current State Hi-Fi)

[lmahon90]

https://www.figma.com/design/0hf44RuBpKeLxM54n0qqRe/Oppia-%5B%2398-What-to-Do-When-Learners-Finish-a-Lesson%5D?node-id=3001-111249&t=fJwVZdehwhnXKmAn-1

Here's my latest mock for the last page of a lesson--there are 3 options for the design. I'm leaning towards option 3.

[ashley-ya]

@lmahon90 I like how the grid button pattern could distribute CTA importance! Do you think we will run into issues with a back button displayed on both on the top left corner of the screen and in the grid?

[lmahon90]

@ashley-ya I discussed this with @seanlip at the last meeting: I'm going to revise it to make sure that the current 'previous' back arrow CTA doesn't get eliminated with this new design: I'll post an update soon.

[lmahon90]

Here's my 3 hi-fi prototypes: [Flow 1] [Flow 2] [Flow 3]

Here are the 3 design options that I revised (to make sure there's still a back arrow to signify that the user can access the previous screen):

Let me know what you think @seanlip & @ashley-ya.

I won't have time unfortunately to create my research study request by the time I leave town. That is the next step--my idea is to do a test on the current state vs the 3 new designs.

[seanlip]

Thanks @lmahon90! I think we can test these.

One thing that makes me a bit uncertain is the "previous screen" button being different in each of these iterations compared to all the existing cards of the lesson. Would you be able to try a fourth design where the "previous screen" button looks the same (the "Next lesson" button could still be longer and blue) so that we can keep the familiarity of the learner with the existing back arrow? So something like:

• Top row: back arrow (not labelled) and blue forward button (indicating Next Lesson)
• Below that: "Other things you can do" -- Home/Practice

Thanks!