splash page redesign

[jameshadfield]

Progress

• Add sitemap to footer #868
• Make showcase expandable (merged prematurely, see #889) #878
• Use showcase on splash #901
• Add Nextclade section on splash #902
• Standardize casing of pathogen titles #917
• Splash page styling fixes #916
• Showcase refactor and additions #930
• Swap splash tiles to use viz screenshots #914
• Redesign showcase on splash #922
• Reorganize files related to splash #951
• Rearrange and update splash contents #952
• Show GitHub account avatar on community tiles #965
• Tweak splash styles #966
• Tweak footer styles #967
• Final considerations for splash page redesign #934

Initial issue text

why?

The current page is overly focused on surfacing builds and doesn't mention nextclade and requires reading the bottom of the page to learn about the bioinformatics tools etc. The layout of the builds makes it hard to surface recent builds because we have partitioned things into 5 sections with 2 tiles each, which both fails to give an overarching sense of importance and limits us to 2 tiles per section. Furthermore the current tile design doesn't provide any way to add contextual information about a build (i.e. a card is limited to a title).

aim

1. Expose a showcase selection of builds not partitioned by source/type, with an ordering which conveys how important we think each is. These don't have to be one build per pathogen, for instance for the current cattle-fly outbreak we may choose to expose a HA 2y build as well as the full genome build, and maybe even a tanglegram view.
2. Make it technically simple for us to update the showcase cards as needed. (Increasing the frequency of updates here is not only a technical problem, but we can ensure that it's simple to do.)
3. Surface relevant pages early on (e.g. nextclade, /pathogens, bioinformatics tools)

proposed changes

implementation details

Note that this is my attempt to improve the page without requiring major changes. Even if we implement the proposal as-is this shouldn't remove the appetite for future improvements. For non-mobile displays the overall proposed changes are limited to a few changes to the page layout, modifications to the <Cards> component to surface some more text, and exposing an easy way for us to update the showcase cards (YAML would be enough). Actual showcase contents can be done by others, as needed. Consideration for mobile displays is important and will require a little design work.

If anyone wants to do some UI work this would be an important change (IMO).

[jameshadfield]

@victorlin - let me know if you want to talk through any design decisions / ideas as you implement this.

[victorlin]

Thanks for solidifying the opportunity to work on this! I had some ideas here which I'll try to break down in the following comments.

[victorlin]

Re: 3x2 grid entries

There are two of these in your mockup:

1. Top of splash page
2. In footer ("quick links")

If I understand correctly, (2) is meant to stay in the footer and be present on every page, while (1) is only at the top of the splash page.

It's not clear to me how these are separated. For example, why have Nextclade in (1) and Auspice.us in (2)? Also, some are links while others aren't (unless I'm missing something for "About us" and "Open source tooling").

Idea: condense all links into a footer sitemap which seems to be a common web design pattern. Examples:

• https://pypi.org
• https://anaconda.org
• https://hub.docker.com
• https://github.blog
• https://vercel.com

Here's my take on it: #868

[victorlin]

Re: other stuff

I know you redesigned with minimal changes, but I wanted to try redesigning from scratch. Here it is: #869

In summary: I took your idea of the showcase, put it at the top, then made separate sections based on what I think are the different "types" of users we have.

I also tried to use more pictures and less words. Even though your redesign reduces the number of text blocks, I still think it's too much and no one is going to read everything. Maybe we'll settle on something in between.

Let me know what you think, maybe we can discuss sometime next week.

[jameshadfield]

I know you redesigned with minimal changes, but I wanted to try redesigning from scratch. Here it is: #869

Cool! Looking at this has made me realise we can separate out the parts here a bit more. Specifically,

1. The sitemap-like functionality (implemented in Add sitemap to footer #868)
2. The explanatory blocks (implemented as a 3x2 grid of text in my design)
3. A dataset/narrative showcase

I think the most important of these (by a long way) is no. 3. For that I think the important design aims are

• expose a small abstract for describing each card. I used a hover action to show this, but other options are possible.
• make it trivial for anyone to add new cards to the page
• don't restrict to a fixed set of cards. We can use wrapping or a carousel-like approach here.

[tsibley]

I still think [the amount of text is] too much and no one is going to read everything.

I'll be real sad if we end up with a front page for Nextstrain that looks nice but explains nothing. The trend in web design of making the front page one big (self) ad with no actual meaningful words on it is frustrating.

[victorlin]

I'll be real sad if we end up with a front page for Nextstrain that looks nice but explains nothing. The trend in web design of making the front page one big (self) ad with no actual meaningful words on it is frustrating.

What's wrong with being a big self ad? I can see how the current draft in #869 isn't helpful in conveying what everything is for people coming to the website for the first time. Open to suggestions. Would it be better if the short one-liners are expanded with more text? Or is the overall layout going in the wrong direction?

[victorlin]

I think the most important of these (by a long way) is no. 3

I'll look into adding a carousel to the showcase on /pathogens and reusing that for the splash page.

[tsibley]

What's wrong with being a big self ad?

Nothing per se, it's the follow on "with no actual meaningful words" part that's a problem. We should absolutely show off what Nextstrain has to offer, but we should also seek to explain what those things are, why they're important, and why you might care. Cutting those bits in favor of "more pictures and less words" leaving just a terse menu of offerings doesn't seem helpful to me.

I can see how the current draft in #869 isn't helpful in conveying what everything is for people coming to the website for the first time. Open to suggestions. Would it be better if the short one-liners are expanded with more text? Or is the overall layout going in the wrong direction?

Yes, keeping more of the text (or writing new text) that explains what Nextstrain is and what we do and why it's important. The layout is not the issue.

[trvrb]

It's not clear to me how these are separated. For example, why have Nextclade in (1) and Auspice.us in (2)? Also, some are links while others aren't (unless I'm missing something for "About us" and "Open source tooling").

Above-the-fold and below-the-fold distinction is pretty classic. I like highlighting particular things (like Nextclade), while not promoting other things like auspice.us to the same degree. I think I'm pretty happy with the 6 things highlighted at the very top.

Generally, I see 2 primary functions of the splash page:

1. New people who have never been here before land at nextstrain.org. This will often be because of some new outbreak. We want them to click on shiny tile and get to a shiny interactive tree rather than bouncing. They may come back and read text for context on the splash page or at https://docs.nextstrain.org/en/latest/learn/about.html. This was the original motivation of the big tiles near the top.
2. People who are regular uses land at nextstrain.org. They more-or-less know where they want to get to, but just need handy links to do so. These users will sometimes be going to particular datasets, but will sometimes be going to clades.nextstrain.org and sometimes the documentation, etc... Handy linkouts with the right prioritization serves these users. And particularly, a "showcase" that is regularly updated to surface new analyses would benefit these users (who might not be otherwise aware of new pathogen, etc...)

[victorlin]

Re: @jameshadfield's ideas to surface more info (abstract, source, type). Logically, it comes down to two options:

1. Surface the info within each card. Cards are already cramped with long names, so this would require making the cards bigger.
2. Surface the info outside of the card. This would require rethinking the overall design of the Showcase component which is currently set to an expandable list of cards.

(1) would be easiest to implement but has cons. For example, displaying an abstract on hover is easy to implement, but this doesn't benefit mobile users where hover isn't possible. Maybe that's an acceptable trade-off, or we force two taps on mobile to achieve the current effect (one to display the info from desktop hover, another to navigate to the resource)?

UPDATE: using (1) in #922

[victorlin]

Splash page now looks like this: