GHG Landing Page

[aboydnw]

Description

The GHG team received some direction from HQ on the landing page. They specifically pointed to this page as inspiration. some specific notes on direction they gave us:

1. They want to choose a visually interested picture for the banner. They have some ideas on which image to choose, and will provide it to us. Ideally, this would be a gif (is that possible in the banner?)
2. They want to have some "buckets" at the top of the page that outline the 3 major areas within GHG. These would directly correlate to data stories or other content in GHG
3. They like the idea of showing some sort of feed of recent or notable content
4. Another idea from Manil was to show some analytics or metrics of some kind.

We walked through the current VEDA landing page to show the three bubbles we have at the top and the Featured Discoveries widget. We also looked at the horizontal scroll bar in the Data Catalog as a reference. Then we looked at the remaining images & content on the VEDA landing page. They liked all of these as options and now want to show something similar on the GHG landing page. They anticipate if we use the same components and update the content, that this will be close enough to what HQ is asking for that we can a) use these widgets for the beta release and b) spark some ideas from them on the actual content.

So, Deborah will be providing some content (words & images) to use in this first test. Then, the ask is for us to replicate what we have in VEDA on the GHG dashboard with this updated content.

Note: for things like the Featured Discoveries section that relies on content elsewhere in the dashboard, Deborah said she is okay if we just include an image in place of the actual widget. Again, we're just looking for something quick as a catalyst for HQ to provide more content & direction.

Timing: IMPACT has a meeting with HQ the morning of Friday, August 11. They would like to have a demo link for this meeting. It does not have to be merged, netlify preview is okay.

[danielfdsilva]

@aboydnw Replicating the VEDA homepage is easy enough and we already have a featured stories widget that we can include. However, at the time of posting, there are no stories in GHG to feature.

Having a gif as background could work, but needs to be carefully chosen as to not impact the legibility of text

[aboydnw]

Okay good to know, thanks @danielfdsilva If we get content today/tomorrow, do you think this is something we could have ready by Friday?

[faustoperez]

Here's a mockup of the designs shared yesterday on the Slack Impact channel.

We decided to use just text for the GHG logo as a placeholder and feature the four agency logos more prominently.

[Jeanne-le-Roux]

I showed the design mockup to HQ this morning. They thought it looked great and we are good to move forward, but it was asked that we change the top image to the following one: https://svs.gsfc.nasa.gov/5115

The screen grab right at the beginning of the video is fine since it features the U.S.

We may also be asked to update the icons for the 3 focus areas to different images. I will keep you posted on any additional updates.

[Jeanne-le-Roux]

Another comment - the 3 icons for the focus areas will need to be larger in size. I'll get us a copy of the approved text so we can add that to the home page as well.

[faustoperez]

Thanks for the feedback @Jeanne-le-Roux, much appreciated, we'll send an updated version of the designs as soon as they're ready 👍

[Jeanne-le-Roux]

I've received some additional feedback. I'll try my best to summarize here but am also happy to tag up with someone to discuss:

• Request to increase the size of the 4 agency logos at the top (I didn't get specifics, just that they need to be "a bit bigger")

• For the 3 focus areas, as I already mentioned the icon/image sizes will need to be larger. These are also the images that have been selected for each: Anthropogenic GHG Emissions (Source: https://research.noaa.gov/tag/carbon-cycle/)

Natural GHG Sources and Sinks (source: https://www.fisheries.noaa.gov/feature-story/recommendations-reducing-wetland-loss-coastal-watersheds-united-states)

Large Methane Emission Events (source: https://www.nasa.gov/feature/jpl/methane-super-emitters-mapped-by-nasa-s-new-earth-space-mission)

• When clicking on the right arrow > next to each focus area, rather than have it link directly to a resource, have it open a small drop-down section where some info can be populated. Right now we want to highlight at least 2 resources for each focus area: 1) Link to the associated Data Story, 2) Link to sub-set of relevant datasets in the data catalog (can be done with 'Topic' filter). This can be done via some hyperlinked text. Let me know if this is feasible or if there are other suggestions on how to provide some additional info for each of the 3 focus areas on the home page when a user inspects it. If this isn't feasible, we may have to build 3 different sub-pages for each one that can be linked to.

• This leaves a question of what to do with the static image just to the right of the 3 focus areas. Right now it is a plume image, but since this is the same image to be used for the Large Methane Emission Events focus area icon, it will need to be swapped out. Could we possibly make this more dynamic to show a different image in this spot if the user clicks on one of the 3 options?

• There will be an overall GHG Center Data Story and we will have to feature this data story on the home page somehow. Let me know if you have recommendations on how to best highlight this Data Story (E.g. if the 3 focus areas already link to the data catalog, perhaps we could repurpose the blue "Browse the GHG Data Catalog" button. Open to other ideas though.)

• As a heads up we will probably be getting some feedback on the website footer. I think what you have for now is good (some text, agency logos, link to learn more & the various website components), but I wouldn't be surprised if we get asked to make some modifications. (see Digital.gov and USWDS Footer recommendations). Given the multi-agency nature of the project the guidance for just a single agency may not exactly apply. I imagine we'll have some leeway to update the footer throughout September as we get more official feedback.

I'm still waiting on an update on the exact draft text to provide on the home page. As soon as I get access to it I will post a google doc with the draft text.

[faustoperez]

Hi @Jeanne-le-Roux and thanks a lot for the feedback. We have updated the designs:

• Substituted the hero globe with the one you provided.
• Increased the size of the agency logos.
• Updated the 3 focus areas with larger images / removed the icons and the hover behaviour so it's a more standard approach to reduce interaction complexity.
• We have also updated the designs to a card layout that allows highlighting resources in each focus area.

We have in mind the coming changes to the texts, we can tackle that directly in code.

We're also aware that there will be feedback on the footer and we'll need to have a featured Data Story block. We suggest working on a design solution for those after this release when we get more official feedback.

Thank you, and have a nice week!

[Jeanne-le-Roux]

Thank you, this is looking great! The card layout is nice. We can continue to iterate on the footer. Also just a minor request to center the text just below the image (where it says 'Start exploring scientist-curated...')

Here's the doc with draft text for the home page.

Also just wanted to make sure the hub tab has been accounted for.

[j08lue]

PDF version of the revision

[j08lue]

Design update

We responded to the latest change requests and

1. Used the text from the document you pointed to, @Jeanne-le-Roux
2. Added two links to each card - clicking on the card will launch the story and each card has a link to the Data Catalog with the respective topic applied as filter.
3. Added a Hub link to the main nav
4. Changed the footer to match the "Slim Footer" style from the US Web Design System:
   1. NB: We chose the "Slim Footer" layout for now, because we do not have all the resources to populate the full footer (social media channels, newsletter, etc). We can add those and change to a wider layout once all of these details are available.

Most of this is at the time of writing already implemented in https://github.com/NASA-IMPACT/veda-config-ghg/pull/57 - see the preview here: https://deploy-preview-57--ghg-demo.netlify.app/

Missing / questions:

1. Update cards to link to the relevant data stories, once they are up.
2. Add link to the story about the GHG Center (NB: instead of using a "Data Story" for that content, we could also include it as a dedicated page, part of the About page, or so.)
3. What are the contact details (phone number and email) to put into the footer, @Jeanne-le-Roux?

Timeline

Our plan is to finalize the updates today and deploy tomorrow (Thursday) before ET noon, without any more bigger design / layout changes.

Text and content updates (like adding the stories etc) can be made before and then again up to the next release before Wednesday 6th of September.

[Jeanne-le-Roux]

@slesaad is working to add the draft Data Story content, hopefully we can push her updates soon so the data stories are accessible.

I believe the updated About page/partnership text (also in the doc) includes a link to the GHG data story. I like the way the story is being linked on the home page in the preview link. We are dealing with 2 'about' content pieces (about page and GHG center story), however they include different information and it would probably be overwhelming to have both on the same page. We can think about how to better present this post R1 when we consider the overall site design.

I'll have to get back to you on the contact info. As a heads up I will be off starting tomorrow (8/31 - 9/4) and @deborahUAH will be your main POC for anything home page related.

[Jeanne-le-Roux]

Also something I noticed - the very bottom of the footer currently hyperlinks to Earthdata.nasa.gov (where it says "By U.S. GHG Center on 2023 • v0.8.0"). This link needs to be removed.

[danielfdsilva]

@Jeanne-le-Roux link removed

[Jeanne-le-Roux]

We have Data Stories (/data insights) available now. Can these links be added to the home page in the cards for the 3 focus areas? Using text/linked stories below:

1. Read more about Anthropogenic GHG Emissions
2. Read more about Natural GHG Sources and Sinks
3. Read more about how Large Methane Emission Events are identified

[danielfdsilva]

@Jeanne-le-Roux Links added. Clicking on a card will now take the user to the corresponding story.

[Jeanne-le-Roux]

@danielfdsilva Thank you. There's also been a request to center the Welcome text just below the blue banner image.

[Jeanne-le-Roux]

@danielfdsilva & that the 'Hub' link open to a new tab

[Jeanne-le-Roux]

@danielfdsilva Apologies (this probably isn't the right ticket to request this) but there's also updated banner text for the data catalog tab and the data insights tab:

Data Catalog banner text: This dashboard is for exploring key datasets that provide insight into greenhouse gas sources, sinks, emissions, fluxes, and events

Data Insights banner text: Explore the guided narratives below to learn more about greenhouse gas measurement, changes over time, events and human-related causes and contributions

[j08lue]

I created a new ticket - easier for keeping track of what is done and what is not.