Finalize the design of the Topic Page

[juliafalarini]

Platform
Oppia Web

Describe the request
There are some items left over from the Topic Page Redesign initiated by @juliafalarini in #97. See these mocks for reference.

The aim of this issue is to update the Topic Page mocks to cover the issues below and any other unaddressed comments in the original mocks, so that we have a clear holistic idea of how the updated Topic Page should behave.

• [@luoyi99 -- Figma link] Add visual cues to guide learners to their next steps on the topic page (see this review comment; use these mocks as reference). The idea here is to provide a subtle prompt or some other method to help learners identify their next focus on the Topic Page. To achieve this, we need to consider various scenarios for their next steps, including:
  - When learners have previously started a lesson and are returning to resume it.
  - When learners have completed a lesson and should now commence practicing or studying it.
  - When learners have initiated the mastery of a skill and should complete it before progressing to the next lesson.
  - When learners have finished mastering a skill and should proceed to the next lesson or skill, especially if a lesson has introduced more than one skill.
  - When learners choose to only view the practice cards and when they opt to exclusively view the lesson cards.

• Add an easy link to the entire study material on the new Topic Page (see these mocks for reference). For context: in Redesign of Practice Session and Topic Page #97, we eliminated the top tab that separates content into lessons, reviews, and practice, as these were underutilized or entirely overlooked by users. Additionally, having this info in separate tabs did not allow students to correlate practices and skills with available lessons, making it unclear when they should review or practice these skills. In the revised information architecture, it was proposed that each skill be presented after completing the necessary "N" lessons to fully introduce that skill. This way, in one place, students could study and practice the newly learned skill from the lesson:

  

  However, the new IA doesn't have a way for students to easily study the entire topic material. This would involve adding a user story such as "As a learner, I need an easy link to the whole study material so that I can easily study this entire subject." We should design a solution for this that can be properly validated by users. Some prior exploration (not finished) has been done here.

• Create a pop-up window for completed lessons on the Topic page to let users choose to start over the lesson or review the lesson with correct answers. The window will pop up when users click on the "Review" button on completed lesson cards. If users choose to "start over", the lesson progress will return to zero, and users will not see previous answers when taking the lesson. If users choose to just "review", they will see all previous correct answers when going over pages in a lesson. (Originally filed as [Topic page] Add Pop-up Window for Choosing to Start Over or Review a Completed Lesson on Topic Page #92)

Additional information

Link to the PRD here.

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, 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: @rflore / @S4v8n
• UXW: @ccc253 / @tamiorendain
• PM: @seanlip

[tamiorendain]

Hi @luoyi99 and @rflore, did a quick UXW review of the research and made some comments. Mostly all suggestions that apply to each of the different versions. Happy to answer any questions or brainstorm wording if needed!

[seanlip]

Adding the usability testing results here for reference (thanks @luoyi99 for compiling these!)

Versions tested: the new design (Version A), Julia's redesign from project 3 (Version B), and our current website (Version C).

Key findings

Understanding the Page: Both versions A and B are clear and easy for users to understand, overall B > A > C
- Versions A & B: All participants understood the elements on the page well. However, one user in Version A expressed some confusion regarding the book and pencil icons.
- Version C: Out of 4 participants, 1 did not notice the practice and revision tab, and another did not understand the difference between lesson and practice.

Starting a New Lesson: A = B = C
- Participants across all versions were able to initiate a lesson quickly without issues.

Identifying the Current Lesson: A > B > C
- Version A: Performed the best with its progress bar around the icon and distinct color differences making it clearer than the others.
- Version B: Also performed well, though one participant suggested that completed lessons could be highlighted more clearly.
- Version C: Performed the worst, with only one user able to successfully identify the in-progress lesson.

Interacting with Lessons/Practices: C > B > A
- In Versions A and B, half of the users did not fully understand the function of the checkboxes, and a few rated this feature 4 or 5 in terms of difficulty.

Reviewing Previous Lessons: A = B > C
- Versions A & B: Users were able to revisit and review completed lessons effectively.
- Version C: Participants tended to use the practice and revision sections for their reviews.

@luoyi99's conclusions: Since the goal of our redesign was to make it easier for users to see their progress and navigate the page, based on the results of the usability testing, I would say that the redesign of Version A was successful. Next, I'll be improving the feature that lets users filter between lessons and practices, to clear up any confusion. I'll also work on finalizing the design details and work on dev notes.

[nancyluoy]

This study involved a total of 17 participants, with the distribution as follows: 8 tested version A, 5 tested version B, and 4 tested version C.

For a more detailed view of the research methodology, you can access the complete research plan here.

[davishedrick]

@luoyi99

Toggles

	Current	Revision	Reasoning
CTA	All	All activities	“All” even though it has the context of the other menu options, is a bit vague.
CTA	Lessons only	Lessons	Reduces congitive load by simplifying copy.
CTA	Practices only	Skill practice	Remove “only” see above. “Practices” while technically correct is a term that is awkward in English. Practice is normally just a verb.

Note: I realize this makes things a bit more complicated with the subtitle “5 Lessons, 3 practices.” which would become “5 Lessons, 3 skills practices.” Then we’re just in the same issue as before. Not sure if the practices need to be in the subtitle in the first place. Maybe Skills would be more relevant for the user, so: “5 lessons, 3 skills.” What do you think?

Study skills

	Current	Revision	Reasoning
CTA	Study Skills	Study skills	Sentence case.

Audio/text selection

I made a design suggestion to go along with the copy updates. I think this makes the interface the most usable at a glance. I referred to what other companies do in similar situations. Would love your opinion Yi!

	Current	Revision	Reasoning
CTA	Select text language	Body: Text / Dropdown: [Language]	This layout not only relieves the burden of a long text but allows users to see at a glance what language they chose.
CTA	Select voiceover language	Body: Audio / Dropdown: [Language]	Same reasoning as above.

 

 

[davishedrick]

Notes to myself:
-Yi included updates to designs at our weekly design meeting on this project
-She noted that the above design, while functional, was too long for smaller screen sizes.

Hi @luoyi99 Thanks for your update last night. I think the option I'm advocating for right now is to have the Text and Audio strings be constant and include buttons that have the language abbreviations (e.g. EN, FR). I made a dummy mock so you could have a basic visual, but I trust your vision to improve it.

Let me know your thoughts and if this option still wont fit the size requirements.