Search Page Design (UX)

[ihorng]

Dependency

• Search result page - Lu's design #285
• Search result page - Jen's design #289

Overview

We need to design a search page with filters so that a user (potential volunteer) can easily find a volunteer opportunity that fits their skills or aspirations.

Action items

• Ideate in hi-fi
• Present to design team
• Iterate
• Present to all team
• Iterate to design final
• Handoff to Devs

Resources/Instructions

Requirements

[ihorng]

Based on the discussion that we had in the team meeting on Tuesday 8/24, I've assigned Jen (UX Designer), Ingrid (UX Designer), and Patty (UX Researcher) under the search page task.

[sharadgaurav7]

@jenchuu , please refer to issue #52 . We should either modify this issue to be more detailed on the specifics, or use the issue #52

[jenchuu]

@sharadgaurav7 edited this further.

[jenchuu]

V2 Search page designs (Figma)

@graceerya and I created limited and full view search results page:

• Subcategories by CoP for Roles filter
• Disclaimer copy on Limited view TBD
• Meeting Time filter TBD (dependent upon requirements from PMs and Bonnie)
• 4 project card options

Open to feedback at our next meeting.

[sharadgaurav7]

@jenchuu , we left the following comments on the figma file for the Search Page design:

Product Team’s comments 1/16


• Change “Start Onboarding..” to “Attend Onboarding”

• We would sugegst we have one page design for the 
limited page and the Full View page. In the limited page, the 
project details, and “join us on Slack” will be masked/redacted.
Once someone logs back in with their credentials, the same 
masked/redacted info will be visible. 
This way we just design one page!




Project card design Must Haves:

• Role Name
• Role Overview
• Responsibilities & requirements
• Meeting Times
• and other tags from the filter options, such as Technology area
• REDACTED if Not logged in
a. Project Name
b. Project Overview
c. “Join us on Slack”

We can have a quick chat on slack if you need any clarifications. Please let us know if there's anything else that is blocking you on the Search Page Design
Thanks












[jenchuu]

@sharadgaurav7 @sdimran

@graceerya and I have made the changes per your comments above and designs are ready for feedback:
V3 Search page designs (Figma)

[eva32lee]

We iterated upon our design based on feedback we received in a previous team meeting as well as preliminary user testing conducted with @janzenmolina.

In order to clarify that

a) Listed technologies/languages are not required, but will be practiced
b) All roles (besides developers) do not necessarily utilize technologies and skills

we combined technologies and languages into a more general "skills" headline, and added a tooltip informing prospective volunteers that skills aren't required, but can be beneficial to know beforehand

[eva32lee]

We made changes to the mobile version mirroring those of desktop, including:

• combining languages and technologies into a more general "skills" section
• adding a tooltip to indicate that skills are not required but preferred

[fenglugithub]

Based on team feedback, will working on the followings:

• Simplify the information on search cards
• Make filter one line on the top

Open to feedback at our next meeting

[sdimran]

@fenglugithub i like the design here with the filters up top and quick view cards on the side.

Questions:

1. is the right side view locked to the page when a user scrolls on the left side to view other roles?
2. is there any value in having role descriptions in every smaller card if we will be showing it in the larger card? most roles would have the same description (front end dev on one project will be the same description as a front end dev on another project) although the exact responsibilities would differ. for a potential volunteer the experience level and meeting times should be the most relevant information in a quick glance as if they don't line up, the role description will not have much impact. they would find more value in having instead the "skills you will learn" section in the quick view instead. can we see this left side card view without the role overview to better condense the information and one view with the "skills you will develop" instead?
3. for the filters on the top, if i click the availability filter will there be a modal that pops up as an overlay on the screen or is it a drop down into the full calendar view? if it is the former should there be a "+" sign rather than a downwards arrow?

Thanks!

[jenchuu]

@fenglugithub and I worked on search page designs.

Below are my ideations for filters on side version:
Option 1 shows selected filters as chips on top left side.
Option 2 shows selected filters as number badges in each filter section.

Below are my ideations for filter "badges":
Option 1 shows white number in blue circle badge.
Option 2 shows blue number in parentheses.

Below are my ideations for Roles filter when opened:
Option 1 shows list of checkboxes for all roles.
Option 2 shows modal window with role chips (same UI from Qualifier page).

[jenchuu]

The designers met on Sunday and had a great discussion.
We decided to combine Lu and my designs somewhat: we will have filters on TOP with MODAL (pop up) window when user clicks on a filter.

We are working on combining the design.

Next step for us:
split up designing what the other open filters will look like.

@sdimran Can you confirm the filters for the LIMITED search results page? is it:

• Roles
• Availability
• Experience Level
• Technologies
• Program Area (***Is this one necessary? What does this even entail?)

[jenchuu]

Per team leads monthly discussion, cut info shown in open role card... Definitely show:

• Skills you'll develop
• Mandatory meeting times

[fenglugithub]

@fenglugithub i like the design here with the filters up top and quick view cards on the side.

Questions:

1. is the right side view locked to the page when a user scrolls on the left side to view other roles?
2. is there any value in having role descriptions in every smaller card if we will be showing it in the larger card? most roles would have the same description (front end dev on one project will be the same description as a front end dev on another project) although the exact responsibilities would differ. for a potential volunteer the experience level and meeting times should be the most relevant information in a quick glance as if they don't line up, the role description will not have much impact. they would find more value in having instead the "skills you will learn" section in the quick view instead. can we see this left side card view without the role overview to better condense the information and one view with the "skills you will develop" instead?
3. for the filters on the top, if i click the availability filter will there be a modal that pops up as an overlay on the screen or is it a drop down into the full calendar view? if it is the former should there be a "+" sign rather than a downwards arrow?

Thanks!

Thanks @sdimran
Here are the answers:

1. Yes. The right side view locked to the page when a user scrolls on the left side. If the user click the other role card on the left side. then the right side page changed accordingly.
2. That’s a good point! @jenchuu and I are working on simplified version for the smaller card. I agree the description show on both cards unnecessary and not efficiency for a quick glance. Will condense the information here and have “skills you will develop” instead.
3. Thanks for bring that up. We are working on the availability and the other filters on Top with pop up window.

Thanks!

[jenchuu]

Updated Roles filter when open:

• Changed view of multi-select chips to differentiate it from the single-select chips: added checkmark icon in front
  Roles open filter

[jenchuu]

Ideations for Experience Level filter when open:
Based on our UXD meeting yesterday, we are leaning towards one of the last 2 options.
Experience Level open filter

[jenchuu]

Ideations for the Small role card options (small cards on left side):
We're trying to condense the info down even further than this. Will explore more ideas.
Small role card options

[fenglugithub]

Ideations for the full card on the right side.
We are trying to add icons and organize the hierarchy of content.
Will place with the content hierarchy more and have the text/color styles and icon library consistent.

Full card options

[fenglugithub]

Ideations for Availability filter when open.
Referred to Qualifier page, we are working on the calendar in popup window.
Based on the meeting discussion, will condense the vertical space of the calendar and explore how that looks.

Availability filter when open

[fenglugithub]

Ideations for full card designs.
Based on our UX meeting, we may explore more for version B (the one in the middle).

Full card options

[fenglugithub]

Updated Availability filter based on our pervious discussion.
Condense the vertical space of the calendar and make it less scroll.

Availability filter when open

[sdimran]

Updated Availability filter based on our pervious discussion. Condense the vertical space of the calendar and make it less scroll.

Availability filter when open

i like this view @fenglugithub great work! @jenchuu @Aveline-art were there any result from your discussions from this past week around the sticky day row at the top of the calendar?

[sdimran]

Ideations for full card designs. Based on our UX meeting, we may explore more for version B (the one in the middle).

Full card options

@fenglugithub @jenchuu for view C i do like the icons we are using for each of the categories. Also hoping to get your thoughts on this perspective but we should be displaying the most important information at the beginning of the full card view which I think in this case would be the responsibilities (since we already show the mandatory meeting times in the preview on the left we can move this down in the list). can we order the information displayed in the following order of priority :

1. overview
2. responsibilities
3. skills you'll develop
4. mandatory meeting times
5. experience level

if you have suggestions otherwise please let me know!

[fenglugithub]

@jenchuu and I worked on the search page designs. We made iterations for both cards (smaller cards on the left side and full cards on the right ) and adjusted spacing for the layouts.

Search Page V10

Below is our design iteration A

• We edited full card designs and played with icons, header with important info.
• We edited smaller cards with less info, filter chips with selected/unselected state

Below is our design iteration B

• We edited full card designs, played with less info in the header and moved button to the bottom.
• We edited smaller cards with more info.

[fenglugithub]

Based on UX meeting feedback, @jenchuu and I worked on an Ideation for search page to show the top portion of large card is sticky when user scrolling. Below is our design iteration
Search Page V10

• Full view for the large card

• 1024px height view, when user scrolling:

[fenglugithub]

@jenchuu and I worked on Search Page filters. We made 2 iterations for the filter menu and the detailed subpages.

Search Page Filters

Below is our design iteration A

• We edited All Filters to More Filters in the menu.

• When user click more filters, it will take to Program Areas and Languages/Technologies popup window for details.

Below is our design iteration B

• We edited the filter menu and keep all the filters showing separately. Users could scroll right and left to explore.

• We made two variations for the detailed subpages for the filter.

  1. Chips to show the options

2. Check-box to show the options

Based on our UX meeting feedbacks, we will work on the following:

• Organize the chips in detailed page, try alphabetical order，or any better grouping/categories for the chips.
• Add Apply/Confirm button at the bottom of each filter.
• Add shadow or blur to the Filter menu to make the scroll transition looks smoothers.

[jenchuu]

Handed off these to Devs:

[jenchuu]

**May need to reopen and change due to changing requirements for Skills which may affect Languages/technologies.