Website UX uplift

[Misjohns]

Quickly improve the UX of the InstructLab website.

• Add masthead with logo and navigational links
• Add a scroll indicator (arrow) encouraging users to scroll
• Make Sign up the primary action
• Reduce size of the footer

[joesepi]

tagging @instructlab/website-maintainers

[mairin]

Hey @Misjohns This is beautifully presented and well-organized, thank you!

Some feedback:

• I wouldn't say "sign in with github" especially as the primary call-to-action, because that assumes an account. Not everybody will (or should) have a GitHub account to be able to try out the software. The primary call-to-action really should evolve to installing the software and pointing to the research paper, with contributing a strong secondary level call-to-action.
• The reference to the paper, this being an AI project, needs to stay. It appears to have been pulled.
• Installing the software should set expectations clearly about supported platforms.
• Footer resize is a good call
• There's some incorrect info in the middle section but when I went to poke at it to correct I didn't have the time to figure out how to fix. (It references only skills, but knowledge is also a component.)

[Misjohns]

@mairin Sounds like we still need the multiple calls to action.

1. "Get started with InstructLab" <https://github.com/instructlab/instructlab/blob/main/README.md>
2. "Learn about LAB: Large-scale alignment for Chatbots" <https://arxiv.org/abs/2403.01081>
3. "Contribute to the Community" <https://github.com/instructlab>

I can ask our content folks to word-smith the button labels but I think it's helpful to include the title of the article. LMKWYT

Eventually, the content section could include a "Getting Started with InstructLab" section that provides more details around supported platforms, etc. before the user clicks the install link, especially when the GUI version is available.

[mairin]

@Misjohns

Sounds good. I don't necessarily think we need to include the paper title, could just be read our paper. TBH I've seen other AI projects do similarly to that (might be helpful do a quick competitive anlaysis to verify)

We do have getting started with instructlab video assets that might be great to link up or even embed - we have this playlist here from Red Hat:
https://www.youtube.com/watch?v=snMUJGXozec&list=PLbMP1JcGBmSE4IskF2Ya-OGrF6TLLVi-H

And we have these from the upstream community:
https://www.youtube.com/watch?v=rEC-Z21al20
https://www.youtube.com/watch?v=FK9_o_NFVzk

[Misjohns]

@mairin @joesepi @cybette Updated design for review:

[mairin]

@Misjohns Sweet! A couple pieces of feedback:

• I'd make a hierarchy with the CTAs. With the visual of your mockup I'm thinking the primary thing is to get people started, so maybe that should be the primary (maybe on a top row? I defer to your judgment on the gestalt here) and then the other two (read the paper, join the community) should be secondary (maybe a second row, and outline buttons instead of filled? again defer to your judgement)

• Any way to work in the video content via a hero block similar to the join the community block on bottom?

[Misjohns]

@mairin Should the Getting started... CTA at top of page drop users down to this new section of the videos?

[Misjohns]

@mairin Is this closer to what you were wanting?

[Misjohns]

@mairin @joesepi @cybette, please let me know if we want any other items addressed in the update.

[mairin]

A few items:

• I'm not sold on the logo being in inverse on the main hero of its public website. Would it be possible to put it in a circular badge format with a white background?
• What is driving the video playlist? Is it keyed off of a youtube playlist? Do you have a component in mind for this?
• The license should be in the footer (CC-BY-4.0 We also need "Sponsored by Red Hat"

[Misjohns]

@mairin Here are a few options for updating the top portion of the site. Please let me know your preference.