Design QA

[cgcarter25]

It's looking sooooo good! These are all pretty small I hope, but let me know if anything is too much or you have questions

Landing page

• [ ] Can we bump the weight down of the header a tad so the question is only on 2 lines
• [x] globally, let's change the header question to "Which crops have the most potential in a changing climate?" (instead of "what"
• [x] VACs pop up design has been updated in mocks

Crop cards

• [x] Border radius of crop cards should be 12 px
• [x] Possible to make the order dropdown work sans medium font instead of arial?
• [x] labels of crops on cards should be same opacity as when hovered (looks completely solid when not hovered?)
• [x] If possible, it'd be great if we could get the link copied validation in there... It would make the button interaction so much more worth it, but get if it's too much of a stretch

Specific crop

• [x] Let’s make the minimap half the size
• [x] 12 px padding on either side of “back” button, feels cramped rn
• [x] Half the amount of space between header and side panel/add layer button
• [ ] Add layer button should be slightly wider than the zoom in/out
• [x] Don’t gray out the plus or minus on the zoom button when it’s disabled
• [x] Header should be on a slightly faded opacity like the mini map/side panel
• [x] Need legend
• [x] Let’s do no background for “add layer” hover text and change to the gray color
• [x] Add “zoom to region” hover text like in mocks to mini map

side panel

• [x] Align the crop name and carrot to the left/right sides of line
• [x] The crop dropdown is very large in font size for me
• [x] Can we make it so you can hover anywhere of the segments of the radar chart to get the info (so if it’s a value of 1 for example it’s easier to hover, or if the benchmark has a large value you can hover that)
• [x] Can we make the benchmark crop stroke in the radar chart the same gray in the legend
• [x] Let’s make the more info button on scenarios medium font size
• [x] Border radius of climate change buttons should be 8 px
• [x] "Low emissions" and "high emissions" down to 18px font size and change to “Low emissions (SSP126)” and “High emssions (SSP370)”
• [x] Can the climate change scenario take up the full height of the line chart when you hover on the description since it’s so close anyways?
• [x] Added info buttons/pop ups for radar and line charts to designs
• [x] If possible could we collapse the mapbox info and show on hover like how UCSF Health Atlas does on the bottom of the map? If not, is it possible to style it with light text on a dark background so it fades into the map more?

Mobile

• [x] The mobile VACS description is abbreviated for mobile "Vision for Adapted Crops and Soils (VACS) addresses food security in Africa by developing and mobilizing investment in resilient, nutritious indigenous crops suited to the changing climate. Keep reading"
• [x] If I tap on the video part of the screen, the video pauses and I get some controls on the background, possible to remove?

crop cards

• [x] Can the "which crops have the most potential..." be heavy weight, and have a bit more space between it and the link page (I imagine bumping the weigth will drop "potential" down to the second line and that will solve itself
• [x] make it so no crop cards are default selected (one gets the blue stroked like it's being hovered when I load the page)
• [x] I like how you did filter button, can you make it 150% of the size?
• [x] For the filter crops page, can we add a drop shadow to the pop up (box-shadow: 0px 0px 20px 0px rgba(255, 254, 254, 0.10);)
• [x] possible to make the order by dropdown text larger? closer to the low emissions/high emissions text size if possible?

one crop

• [ ] Can we zoom the map out so you can see the edges of the globe when it first loads?
• [x] Add legend
• [x] Same deal with the heavy weight question as called out in the crop cards
• [x] added mocks/question marks for emissions scenarios and yield ratio

[mwbernard]

@cgcarter25 thanks a ton, will get to these asap. One thing we might need to take a hit on is the crop dropdown font size... chrome doesn't let you change that independently from the size it appears on screen. On other browsers it will be smaller. With limited time frame I don't want to implement a custom dropdown, especially with doing mobile. It would also be an accessibility hit because the default dropdown is handled differently on different devices.

[mwbernard]

Actually might be able to do something here^

[mwbernard]

@cgcarter25 Got through basically all of this! a couple notes on ones I left out for now

• for the header text in the opener, the font you gave me doesn't have variable weight so I'm just using the bold version for this. And the number of lines depends a lot on window size so I don't think we should necessarily adjust it for that reason. If you have thoughts about the way the page adjusts to window resizing lmk and that behavior can be adjusted
• the layer button is a little finicky because its a menu opener - its giving me slightly different rendering in different browsers.... feels good enough to me for now
• I added the link copied message, can adjust timing and stuff if you'd like when you see it
• Changing the min and max zoom for the map based on mobile requires some javascript, which is different from how we've done the rest of the mobile implementation... I'd prefer to hold off on that for the minute if you don't mind. We can look into it later if you feel strongly

Otherwise I think its looking really good. Gonna ask for a quick review on this because I've changed so much stuff, but will merge in the morning once kelsey/brels looks over it