Lesson Search & Search bar navigation pattern

[rfinch11]

Platform Oppia Web

Describe the request Develop a consistent search navigation pattern and functionality for lesson searches.

Context for the request The core functionality of the search bar is to quickly find a specific lesson or category of lesson that is otherwise not easily browsable. Having multiple filters (language, category) on the search bar component makes it more confusing to use the core search feature. I'm suggesting that we remove the category and language menu options in the search bar, and instead move them to the results page as filters rather than menus.

We've recently approved a new search UI for the search results page in project #29.

Issue #29 Project description: Learners and teachers have difficulties finding the right lesson that fits their/the students level and need with current lesson search experience. This PRD proposes improvements for the learners’ and teachers’ lesson search experience

The new UI can be found here ((see "update after user report" section) https://www.figma.com/file/1Rosc1GnZhmwaKYPifH19w/Lessons-Search-Improvement?type=design&node-id=1506%3A17268&mode=design&t=tGxWmlLTuttyapXE-1

User Research Plan

The goal is to make sure the search bar on the classroom page entry point and the community library search bar matches the design and behavior of the redesigned search bar on the search results page.

**Update 11/29/2023 Due to open items remaining on Issue #29, it is now merged with Issue #85.

Link to PRD Please link to the PRD here.

Information about deadlines/priorities If this feature is time-sensitive, please explain why. If applicable, please also provide the deadline for when the full design (including text content) needs to be completed by.

DESIGN APPROVAL CHECKLIST

• [x] UX Design approved
• [x] UX Writing approved
• [x] 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 (it's enough to have one signoff from each of UXD, UXW and PM):

• LaCE projects: @ConorMack / @liwei899 (UXD), @jikim322 / @kmuir1991 (UXW), @seanlip (PM)

[rfinch11]

Just realized there is already a completed design project for fixing search. I'll leave this issue up for now in case it's helpful context.

[seanlip]

Hi @rfinch11 -- thanks for filing this. I think we can treat it as separate from the existing search issue, if we think about that issue as "fix the design of the search results page" and this issue as "fix the design of the search bar at the bottom of the classroom page".

Some thoughts on reading the issue more carefully -- items 2 and 3 are technical bugs. Could you please file separate issues for them on our tech repo so that they can be fixed? https://github.com/oppia/oppia/issues Also we could potentially file item 5 there as well since it's easy enough to remove that; this could replace item 3.

I don't think we should do item 1, because on the classroom page we want the "curated lesson" experience to be more prominent than the "search the community library of lessons that haven't been vetted". Can we drop that from this issue and revisit it when we have more lessons in the classroom such that searching within the classroom becomes more necessary? I think this point also ties in well with another planned improvement we have to include "curriculum mapping" labels for the math classroom lessons.

With these adjustments I think this can end up being a nice introductory design issue since the only remaining thing to tackle would be item 4. (Though, if you have an idea for that, feel free to file an issue on the tech repo with the desired design and then we can close this one.)

Thanks!

[rfinch11]

@seanlip My understanding is that project #29 does address all 5 issues reported here (see "update after user report" section). If there are implementation issues with the proposed solution in this figma file (https://www.figma.com/file/1Rosc1GnZhmwaKYPifH19w/Lessons-Search-Improvement?type=design&node-id=1506%3A17268&mode=design&t=tGxWmlLTuttyapXE-1) then we can break these apart into separate issues.

[seanlip]

@rfinch11 Er, are you sure about that? The Figma file you point to describes the search page (i.e. the page you end up at after you click the search button in your screenshot above) but it does not describe the "classroom page entry point" that your screenshot above shows. That's why I think these are two different things (which can actually be tackled independently).

[rfinch11]

Ahh you're right. It's the right pattern, but wrong page. I'll separate the issue and reference this solve to make sure it is consistent with the updates to search on the results page.

[seanlip]

OK, sounds good. Thanks!

[seanlip]

Hi @rfinch11 -- just following up on this (as part of design board triaging). Would it be possible to address it and then close this issue? Thanks!

[rfinch11]

Just split out the two bugs and filed as separate issues. I also removed issue #1 per your comment and issue #4 because it will be solved by this revised issue.

[rfinch11]

@ConorMack FYI on new project for us to track

[seanlip]

Thanks @rfinch11!

One question -- we also have a search bar here: https://www.oppia.org/community-library . Should similar changes be applied to it?

[rfinch11]

@seanlip yes good call - should we treat this as a separate project or is it ok to add the community library page as a destination for this project?

[seanlip]

What would the design of the search bar on the community library page look like?

If it'll be the same as this, OK to put in the same issue.

If it'll be different, let's have a separate issue.

[rfinch11]

Yes, it would be the same. I'll merge that in too.

[S4v8n]

project notes merge from Lesson Search - issue #29:

sept 9 2022 - RioChan Posted: A clickable file is created but still has minor technical issues that need to work on

oct 4 2022 - RioChan The fully clickable file passed to my PM(May)

Apr 8 2023 - RioChan Contacted Julia about the front page redesign feedback Made the decisions on the front page and the search filter with PM (May)

Jun 9 2023 - JiKim For UXW there's just one outstanding item about the label for the search bar on the desktop version. We made some notes but weren't sure if any additional changes were going to be made. I'll leave a comment in Figma.

Jul 10 2023 - Rfinch @jikim322 I just replied in figma with my thoughts about the label. If you are Ok with the recommendation, then can you sign off on the project? Otherwise let's discuss further.

Jul 10 2023 - JiKim Comment makes sense! UXW approved

Jul 25 2023 - Seanlip @RioChanHY I just did the product review, sorry it took a while. There are a couple of comments on the mocks that still need to be addressed. Could you please address them?

Also, would it be possible to make a separate page in the Figma file with just the final mocks for developers? That way, I can point them to that page and they won't be confused about what to look at.

Thanks!

jul 25 2023 - Seanlip @RioChanHY @rfinch11 @ConorMack -- moving back to "in progress", please move this back to "Handed off to PM" once the mocks are finalized. Thanks!)

Nov 26 2023 - Seanlip Hi @ConorMack, I'm about to file this on the technical GitHub, but I don't understand why this was moved back to the "Handed off to PM" board. The relevant mocks to hand off are supposed to be the ones in the "Update after user report", but there are open comments there that are not addressed. So I am sending it back to the design team.

@RioChanHY @roxanashirazi Would you be able to take a look and address the final comments, please?

Also, @RioChanHY, could you please put the final implementable design in its own page in the Figma file so that developers know which one to follow on?

/cc @liwei899 too in case she can help with this, and @S4v8n since he's working on a related project and it might perhaps make sense to merge both of them instead. Thanks!

Nov 27 2023 - S4v8n @seanlip Let me know if you want me to merge the two projects together. I think it makes sense to merge them. :)

Nov 27 2023 - Seanlip Yup, let's please merge them. Thanks!

[seanlip]

Hi @S4v8n, thanks for merging the issues!

Just a note, in the Figma file for this project, please could you have a single "page" for handoff that contains all the mocks-to-be-implemented (and only those mocks) for both this issue and #29? That way, we can avoid confusing the developers with incomplete or extraneous stuff.

Thanks!

[S4v8n]

No problem, will do.

[seanlip]

Hi @ConorMack @kmuir1991 @liwei899 None of the checkboxes in the first comment are ticked. Has this actually been approved by design and UXW leads?

Moving back to "design lead approval" status, please send back to PM only after we have UXD/UXW approvals. Thanks,

[liwei899]

Hi @ConorMack @kmuir1991 @liwei899 None of the checkboxes in the first comment are ticked. Has this actually been approved by design and UXW leads?

Moving back to "design lead approval" status, please send back to PM only after we have UXD/UXW approvals. Thanks,

Kurin email Conor and me before and both of us approved the design. Just checked off the first row.

[kmuir1991]

@seanlip I went through and reviewed. There are quite a few spots that need copy corrections. Not 100% sure who owns the file but those should be implemented before it's handed off to you.

[liwei899]

Hi Kate, Kurin is the designer assigned to this project. Feel free to reach out to him.

Best Liwei

On Mon, 29 Jan 2024 at 18:20, Kate Muir @.***> wrote:

@seanlip https://github.com/seanlip I went through and reviewed. There are quite a few spots that need copy corrections. Not 100% sure who owns the file but those should be implemented before it's handed off to you.

— Reply to this email directly, view it on GitHub https://github.com/oppia/design-team/issues/85#issuecomment-1915943895, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBMC6ISHNRXXONGAWWAW5FLYRBKH5AVCNFSM6AAAAAAZSDGLHCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJVHE2DGOBZGU . You are receiving this because you were mentioned.Message ID: @.***>

[kmuir1991]

@S4v8n Hi Kurin! This project has a few copy adjustments that need to be made before I can approve it for handoff. I made comments in the latest Figma file. Can you please implement those? And feel free to reach out if you have any questions, thank you!

[S4v8n]

@kmuir1991 Hi Kate, I am looking at the Figma file for this project and do not see your comments on them. I did, however see your comments on the other project I am working on #109.

For context of the project, I am updating the search bar in the Community Library web page, and also the Math Classroom web page. The design of the search bar was approved and carried over from another project #29. There were no copy to write for what I was working on. I am happy to implement any fixes prior to moving forward.

Here's the Figma file for this project, https://www.figma.com/file/jV6rP1PrpxSgMOPmA7Zkgr/Oppia-Lesson-Search-and-Search-Bar-Navigation-Pattern-Web-Mobile-Mocks?type=design&node-id=147%3A3166&mode=design&t=SuR3923VTZIcRmQE-1

[kmuir1991]

@S4v8n Gotcha, sorry about that. I'm fighting a fever at the moment and might just be confusing the projects I've left comments on today XD

So just to be clear, the figma you've linked above is the one that needs review before UXW can approve it for handoff?

[S4v8n]

@kmuir1991 That's correct. Sorry to hear you are not feeling well. Hope you feel better soon. :)

[S4v8n]

Hi Sean and Kate,

I have implemented changes to the figma file based on feedback from Kate, named "Rev.2". Please review and let me know if there are other revisions needed.

figma file https://www.figma.com/file/jV6rP1PrpxSgMOPmA7Zkgr/Oppia-Lesson-Search-and-Search-Bar-Navigation-Pattern-Web-Mobile-Mocks?type=design&node-id=196%3A2275&mode=design&t=z2epOApBign7WgKM-1

Best, Kurin

On Mon, Jan 29, 2024 at 7:56 PM Kate Muir @.***> wrote:

@S4v8n https://github.com/S4v8n Gotcha, sorry about that. I'm fighting a fever at the moment and might just be confusing the projects I've left comments on today XD

So just to be clear, the figma you've linked above is the one that needs review before UXW can approve it for handoff?

— Reply to this email directly, view it on GitHub https://github.com/oppia/design-team/issues/85#issuecomment-1916028254, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBNBQYGYESREUNLQNEI4PJTYRBVNRAVCNFSM6AAAAAAZSDGLHCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJWGAZDQMRVGQ . You are receiving this because you were mentioned.Message ID: @.***>

[kmuir1991]

Hi @S4v8n

Looks good to me! Thanks for making those changes

[S4v8n]

Hi @kmuir1991

Great! Can you check off the UX Writing Approved box on this project from Github, and let @seanlip know it's ready for next steps?

Thanks Kate!

Best, Kurin

[kmuir1991]

@S4v8n done

[seanlip]

This is approved and has been filed as https://github.com/oppia/oppia/issues/19763 on the dev team's repo. Thanks @S4v8n for all your help with this proejct!