openfoodfoundation / sib-discovery-components

Development and application of Startin'Blox Discovery components, initial use in Discover Regenerative www.regenerative.org.au
2 stars 0 forks source link

Compile List of Proposed Modification to Simplified Components #66

Open David-OFN-CA opened 2 months ago

David-OFN-CA commented 2 months ago

OFN Canada team to review simplified SIB directory components and link to annotated figma designs, detailing proposed modifications.

David-OFN-CA commented 1 month ago

@RebeccaOFN when you get a chance this is where we should uplaod the Figma designs you are preparing

RebeccaOFN commented 1 month ago

Sorry for the delay. Here is the annotated design. Let me know if this is enough to understand our requested modifications, or if you need anything else (note that it's a prototype link but doesn't have functioning prototype elements). Home page Producer page

karlafalk commented 1 month ago

Hi @mkllnk Just flagging here the Producer page https://www.figma.com/proto/tg4fv1yC8vXx57GRtKQ72B/Waterloo?node-id=4-230&t=4Eu1cq48faTzUBIu-1 design we were looking on feedback about. What changes would be possible?

We are basically looking for a simpler version of the Producer pages than is currently used for the AUS Discover Regen. Would it be possible to modify the wordpress code to have things display as per the design mockup?

It seems like the original Airtable base had space for 3 different wholesale URLs with labels. So presumably we could use these fields modified for our project. So if we have a producer that does Buy Local, Volunteer Local, Donate Local, then could 3 different call to action buttons be displayed linked to different urls?

Image

mkllnk commented 1 month ago

What changes would be possible?

From my end:

David-OFN-CA commented 3 weeks ago

@mkllnk Just a quick update on this point: we decided that we will need to re-arranging sections and definitely move the about-section up to the top, in order to make this a fit for the needs of our partners. So I went ahead and got a quote from SiB, as I am getting a bit cocnerned about time as our deadline is end of September.

SiB rates were very reasonable so we are moving forward on forking the profile component. Let us know if you want to be involved in discussion with SiB. We’ll of course keep tracking progress on this github project and will loop in the SiB dev here, once we know who we are working with.

Additionally, I think we may have to fork the main directory component as well, in order to modify the design to include the toggle switch for “buy local, donate local” to the top of the display? again, if you have any concerns to flag on this, or have other approaches to suggest, let me know

@kirstenalarsen - just pinging you on this update too, to keep you in the loop - let me know if you have concerns / suggestions on the approach. cheers all!

karlafalk commented 2 weeks ago

I have put together these screenshots with an itemized list of the changes we are looking for with the forked components for the Waterloo Project.

For the Home Page/Main Directory:

Screenshot 2024-07-08 at 2 55 42 PM

1) Change the ‘Assurance’ filter menu from dropdown menu to toggle menu across the top with 4 options (Eat Local, Donate Local, Volunteer Local, Show All). 2) Remove the Indigenous Flag 3) Is it possible/how much work is required (?) to change the ‘Produce types’ filter menu from a) a dropdown menu to a listview menu displayed on the left with an ‘Any’ option? (see this figma design). b) single-select to multi-select menu? What would the limit be to the number of categories we can have here? At the very least, if none of these changes are possible, we would need to change the label ‘Produce types’ to ‘Category’.
4) Can we remove the state and state code fields from displaying? 5) What are the default sort options? Right now appears to be sorting Z to A. Preference would be for sort A to Z.

For the Producer Page:

Screenshot 2024-07-08 at 3 17 38 PM

1) Move the About Us section to the top of the page and have it display below the Producer Name (with City) and logo image. This involves removing the state and state code fields, the Short description, ‘Learn More about us’ link, all info about Assurance Partners, and About Us heading. See this figma design.(Note: we want to keep the 'Useful links' section).
2) Add Phone: xxxxx and Email: xxxx below the address info of the Location section. 3) Change the Heading ‘HOW TO BUY’ to ‘HOW TO SUPPORT’ 4) Remove ‘WHOLESALE’ and ‘FEATURED’ headings. Have the text here display all the way across the page. Remove the ‘Connect with Producer’ button. 5) Have 3 call to actions here possible that go across the page in 3 columns. (Not all producers will have all 3 options, many will likely have just one). Highlight the call to actions with green blocks around them using the project colour scheme [(inserted] below) (note: these are not active buttons). Include the ‘Visit Website’ link below each green block, as per original SiB.
6) Remove the entire ‘Connect with Producer’ section.

Screenshot 2024-06-28 155602

Louiscsn commented 2 weeks ago

well received @karlafalk , thanks! I'm coordinating with the developers, and we will iterate to address the remaining questions :-)

JbPasquier commented 1 week ago

Have 3 call to actions here possible that go across the page in 3 columns. (Not all producers will have all 3 options, many will likely have just one). Highlight the call to actions with green blocks around them using the project colour scheme [(inserted] below) (note: these are not active buttons). Include the ‘Visit Website’ link below each green block, as per original SiB.

Who will handle this change on your side? Can you provide me the field name that'll be used for these?

I guess the best approach would be a proper ldp:Container with a list of every links, this way a Producer could have 0...n links, it will adapt by itself. For each of them, I'll need a name and an url.

karlafalk commented 1 week ago

Who will handle this change on your side? Can you provide me the field name that'll be used for these?

I guess the best approach would be a proper ldp:Container with a list of every links, this way a Producer could have 0...n links, it will adapt by itself. For each of them, I'll need a name and an url.

@JbPasquier We thought we could adapt the fields that are already in the AUS SiB and workflows. They appear like this in Airtable:

Screenshot 2024-07-15 at 9 54 15 AM

So basically a field for each label (Buy Local, Volunteer Local or Donate Local) and a corresponding field for the respective url.

These seem to get displayed with the label and url on the current AUS directory if the field 'Wholesale enquiry preference' has 'Direct online purchase' selected.

Would this work in terms of the structure you suggested above?

JbPasquier commented 1 week ago

Thanks. Sure, that's fine, let's re-use these.

Louiscsn commented 1 week ago

hello @karlafalk

I just had a meeting with @JbPasquier , we have a couple of questions for you with respect to the specs:

"Remove the Indigenous Flag" => only the flag, not the filter. Right?

"Is it possible/how much work is required (?) to change the ‘Produce types’ filter menu from a) a dropdown menu to a listview menu displayed on the left with an ‘Any’ option?" => the amount of work needed for this would exceed the current budget. Our estimate was based on a mockup where filters where hidden (cf. here). If you still aim for having filters and would like to proceed with extra developments, we can have a call to refine your needs and share with you past reflections from OFN Australia?

"What are the default sort options? Right now appears to be sorting Z to A. Preference would be for sort A to Z." We can use any data for setting default sort options. Do I understand that you'd like to sort the list out of the project name?

As for the colors: how should we use them? :-) the interface is currently set with the color green, we understand you'd like it to be replaced with red (BB2028)? Maybe the buttons' colors should also be changed? If you can guide us, that would be helpful

Thanks!

karlafalk commented 1 week ago

Hello @JbPasquier @Louiscsn

Thanks for your questions.

"Remove the Indigenous Flag" => only the flag, not the filter. Right?

Yes, we just want to remove the flag, NOT the filter.

"Is it possible/how much work is required (?) to change the ‘Produce types’ filter menu from a) a dropdown menu to a listview menu displayed on the left with an ‘Any’ option?" => the amount of work needed for this would exceed the current budget. Our estimate was based on a mockup where filters where hidden (cf. here). If you still aim for having filters and would like to proceed with extra developments, we can have a call to refine your needs and share with you past reflections from OFN Australia?

Ok that is understandable. We weren't sure what would be involved. I am not sure if we have extra funds in the budget to do this or would want to just leave as per the original scope. @David-OFN-CA would be able to answer that.

"What are the default sort options? Right now appears to be sorting Z to A. Preference would be for sort A to Z." We can use any data for setting default sort options. Do I understand that you'd like to sort the list out of the project name?

Yes, I think we would like the list to be sorted by the Enterprise/Organization name, A to Z. @David-OFN-CA may have other thoughts on this as well.

As for the colors: how should we use them? :-) the interface is currently set with the color green, we understand you'd like it to be replaced with red (BB2028)? Maybe the buttons' colors should also be changed? If you can guide us, that would be helpful

I think we mostly wanted the labels (Buy Local, Volunteer Local, Donate Local) above the weblinks in the How to Support section (Producer Page) to be in coloured green (74903C) blocks. I am not sure about the colour scheme for the rest of the elements and will have to get back to you about that. @David-OFN-CA @RebeccaOFN may have thoughts on this.

Thanks! Please let us know if you have followup or additional questions.

Louiscsn commented 1 week ago

Notes following today's conversation with @David-OFN-CA :

@JbPasquier tells us if there is a limit to the number of filters we can integrate in the menu on the left

@David-OFN-CA updates us tomorrow

RebeccaOFN commented 3 days ago

@JbPasquier @Louiscsn , just sharing our updated Figma designs with the proposed changes incorporated. Directory Profile Page