[CWM] Designs for the Search and Directory panels to be implemented in React

[lin-d-hop]

** Track under CWM project in clockify **

Description

Create new designs for Directory and search panels

• Use the existing panels as the basis.
• Spec out the requirements for each panel, aesthetic and functional, as they differ from the original designs. This should be fully captured in the comments added by @ColmDC in Overview doc
• Document the rationale behind any enhancements and omissions
• Create designs with the above points in mind, consider the supporting API data flows and the React/Redux stack being used.
• Submit designs for team review to ensure all requirements are met

Working Practice

This issue is to be worked on by @ms0ur1s
Marcel, what processes would support you to get regular accountability and feedback while you work on thsiis? Posting regular WIP updates in public channels?

Acceptance Criteria

• Full designs, including UX flows for interactive components, for the search and directory side panels of MM
• Documented list of changes (additions and omissions)

More Context

Overview doc
Timeline Planning doc

TODO

Add an estimate for this work before you begin :)

[ms0ur1s]

@lin-d-hop, thanks Lynne. 😁

An estimate of 4 days. I'm probably overestimating, but given my recent history I thought was probably safer.

[ms0ur1s]

@lin-d-hop, I also had a good meeting with @ColmDC this morning and we discussed time-boxing a couple of hours to research how other map applications implement information panels etc.

[ms0ur1s]

https://www.uk.coop/directory
https://coops4dev.coop/en/icadp

https://miro.com/app/board/uXjVKtn18ao=/

https://m3.material.io/components/side-sheets/overview

[ms0ur1s]

Desktop version 1
https://xd.adobe.com/view/6ccaab13-f506-49a2-b84a-1c8866433df7-3999/

Desktop version 2
https://xd.adobe.com/view/f984948b-5c42-45b1-8e20-b767d8ce753d-acd7/

Mobile version
https://xd.adobe.com/view/d7dd98f3-eb08-45f7-9b9d-4922bbce217b-828e/

The prototypes linked above are fully interactive as far as buttons and navigation go, but on the directory and search panels only the first option / drop-down is clickable and the first result on the search results panel - although if you click on a non interactive portion of an element, hints are provided by the way of highlighted clickable areas.

As usual you are also able to navigate screen by screen using the arrows below the presentation area. You will however encounter extra screens created for purpose of making the designs interactive.

Please leave feedback within #264 issue for consistencies sake.

A version including Colm's alternative (no map view) will be forthcoming.

[ms0ur1s]

• https://www.uk.coop/directory
• https://micdp.coops4dev.coop/projects?field_geographic_regions_target_id=68

[ms0ur1s]

No map view

I've added links below for the prototypes that include the no map view.

There is now a button positioned at the top right of the map to allow for switching between views and if you click on the 'List View' button you will be taken to the list view page.

Desktop version
Within the list view you can scroll to the bottom of the displayed items and if you click on first item a modal is displayed with the full details of the co-op. From within the modal you can view the co-ops position on the map or close the modal. You can also switch back between views.

Mobile version
The mobile version follows the search flow of the map version. As with the desktop version the list of items is scrollable and to view a co-op's full details you click on the first item. The full details pages is also scrollable and the buttons work as per the desktop version.

As per the previous iterations please add any comments to issue #264 for consistency.

Desktop version
https://xd.adobe.com/view/0f8c7d84-e063-4008-a2fb-c7e3b8580d07-5adf/

Mobile version
https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

[rogup]

These designs look great!

I have a few thoughts on the mobile designs:

On slide 14 of the mobile mockups, I was what does 'Displaying 4 -9 results' mean?

Also, I'm wondering if we need the results pane (slide 7) at all on mobile. It feels quite similar to the new List View, since both take up the whole screen anyway on mobile. What if performing a search whilst on map view just brought up the map showing all the markers that match the filter, then the user can switch to List View to see the results in text form (slide 14), with a button to switch back to Map View to see the markers again? And clicking 'search' could always go back to the search panel (slide 9).

[ms0ur1s]

Thanks @rogup 😁.

On slide 14 of the mobile mockups, I was what does 'Displaying 4 -9 results' mean?

Sorry this wasn't clear. it's supposed to be an indicator of paging, there being 4 of the 9 results visible on that page. If you scroll to the bottom of the screen the pagination is visible.

Also, I'm wondering if we need the results pane (slide 7) at all on mobile. It feels quite similar to the new List View, since both take up the whole screen anyway on mobile. What if performing a search whilst on map view just brought up the map showing all the markers that match the filter, then the user can switch to List View to see the results in text form (slide 14), with a button to switch back to Map View to see the markers again? And clicking 'search' could always go back to the search panel (slide 9).

Sounds like good idea, I'll mock this up and update the mobile version this afternoon.

[ms0ur1s]

@rogup, I've update the below mobile prototype.

1. Follow the search screen flow using the map view
2. Chosen the country and apply filters
3. You arrive at a map populated with markers.
4. Here you can click on 'List View' and be taken to the results in list view
5. Or click on any marker and a pop-up will appear

https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

[wu-lee]

Agree, these look great, not much I can think of to add, currently. There may need to be space for a branding logo? (Current maps can have one, at least)

[rogup]

@rogup, I've update the below mobile prototype.

1. Follow the search screen flow using the map view
2. Chosen the country and apply filters
3. You arrive at a map populated with markers.
4. Here you can click on 'List View' and be taken to the results in list view
5. Or click on any marker and a pop-up will appear

https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

Cheers for this @ms0ur1s !

A few other things I was thinking (but you might have already thought about this or have a different opinion about whether it would be a good UX!):

• After doing a search and reaching slide 8, could clicking 'search' go back to slide 11 to perform a different search, with an option to clear existing filters?
• when clicking List View from slide 8 and reaching slide 16, it would be nice to be able to go back to the Map View - could there be the same buttons at the top of the screen to choose the view? And if the navigation tray at the bottom was still there, maybe there wouldn't need to be 'Clear Filters', since the user could go back to search to clear/alter them.
• Sometimes it's not clear how to get back to the map when on different screens. Do you think a 'map' navigation button at the bottom would be helpful? Or maybe when on the search/navigation/about pane, clicking search/navigation/about again could close the pane and return to the map

[ms0ur1s]

Agree, these look great, not much I can think of to add, currently. There may need to be space for a branding logo? (Current maps can have one, at least)

Thanks @wu-lee, I'll look to get this integrated.

[ms0ur1s]

A few other things I was thinking (but you might have already thought about this or have a different opinion about whether it would be a good UX!):
* After doing a search and reaching slide 8, could clicking 'search' go back to slide 11 to perform a different search, with an option to clear existing filters?
* when clicking List View from slide 8 and reaching slide 16, it would be nice to be able to go back to the Map View - could there be the same buttons at the top of the screen to choose the view? And if the navigation tray at the bottom was still there, maybe there wouldn't need to be 'Clear Filters', since the user could go back to search to clear/alter them.
* Sometimes it's not clear how to get back to the map when on different screens. Do you think a 'map' navigation button at the bottom would be helpful? Or maybe when on the search/navigation/about pane, clicking search/navigation/about again could close the pane and return to the map

Thanks @rogup, I'll have a look at these.

[ms0ur1s]

@rogup, great suggestions. Your changes are here:
https://xd.adobe.com/view/53d8a726-c336-4903-aaba-58ec3addac86-068b/

[rogup]

Thanks for updating, looks good!

[lin-d-hop]

Thanks all for the great back and forth. These designs are looking great.
With the new design issues created here I'm closing this one :)

[ms0ur1s]

Thanks all for the great back and forth. These designs are looking great. With the new design issues created here I'm closing this one :)

Thanks Lynne 😁

[ColmDC]

Should this ticket be closed? Should I put my comment about the desing in #272 ?