Improve design of the As funder/As recipient cards on the Org page

ThreeSixtyGiving / grantnav

This is a web based search tool for data in the 360 giving data format.

http://grantnav.threesixtygiving.org/

Other

9 stars 5 forks source link

Improve design of the As funder/As recipient cards on the Org page #826

Closed mariongalley closed 2 years ago

mariongalley commented 2 years ago

The overview stats are a bit hard to read as there's a value then the label below, and they're in 3 columns with a lot of white space.

Not sure what's the best way to improve the design, it might be easier if they were just in list form i.e.

[label] : [value]
[label] : [value]
[label] : [value]

Or possibly in a table similar to the GrantNav search summary table

mariongalley commented 2 years ago

At minimum, we need to change the labels to not be below the number they are labelling, as this is quite difficult to read.
Suggest removing Smallest Amount as it is sometimes misleading (£0, negative values) and not all that useful as long as you have the max and average

mariongalley commented 2 years ago

Styling of the "open in GrantNav" button should be similar to the buttons in Insights and the Data Quality Tool, and look similar to the button on the Funder/Recipient Search pages.

michaelwood commented 2 years ago

I've done quite a bit of tidying up of this page as well as moving labels around, justifying all the content, using some more of the existing design paradigms and fixing buttons. Preview on dev site: http://grantnav.360dev1.vs.mythic-beasts.com/org/GB-CHC-1087053

Hopefully this is the direction to go in in terms of rationalising the design, and the approach I can take with other new pages.

(the before screenshot Screenshot 2022-03-16 at 19-05-59 360Giving GrantNav )

michaelwood commented 2 years ago

Suggest removing Smallest Amount as it is sometimes misleading (£0, negative values) and not all that useful as long as you have the max and average

wrg to this suggestion. We had a discussion previously about negative values and decided it was important to display the data as-is. This also makes it a consistent approach with whatever tool/method the user is viewing the data with.

mariongalley commented 2 years ago

Thanks for this - I definitely think it looks better. Could we get rid of the "Smallest Amount" fields for each currency please?

mariongalley commented 2 years ago

I think the "Explore Grants" buttons should be above the Recipients/Funders tables respectively as that is the authoritative list of Grants for that org.

michaelwood commented 2 years ago

Removed smallest amount
Added Explore grants button to be above tables

mariongalley commented 2 years ago

@michaelwood Shall we close this ticket if all the issues within are addressed and raise new tickets for any design feedback from this upcoming round of testing?

michaelwood commented 2 years ago

@michaelwood Shall we close this ticket if all the issues within are addressed and raise new tickets for any design feedback from this upcoming round of testing?

Yep I think so