New Homepage design

[kaleygel]

Redesign the homepage to support our Manifest(o) stance and better communicate Datum's Why.

Copy doc with sections and content is here: https://docs.google.com/document/d/1UIJV-ffpYLR_JaXu6cTEi8uAYvDMazRNxQDH2ALByzg/edit?tab=t.0

Goal: aim to publish this with the newly reimagined navigation drop downs.

[olliemiller]

@kaleygel @jacobsmith928 First concepts - dialing up the boldness, size and simplicity to make a compelling story

Homepage - xl 1 Muted

Homepage - xl 2 More zing

[olliemiller]

I'm wondering if we could tighten / shorten the content further? I don't want to take anything valuable away but my sense is that it feels quite lengthy. If we were to be really ruthless, what would we take away? I wonder how the content would look if we were to set a pretend time constraint on it - e.g. 30 seconds to get our message across.

[kaleygel]

Hey @olliemiller ! Looking good! I made some comments in Figma directly, but think a conversation would likely be helpful (happily we have one already scheduled for tomorrow!)

Overall the more muted approach is generally the right direction, but we may want to consider pulling back on the illustrations, and brightening up the space as a whole. Our illus tend to lean towards the darker moodier side, vs a brighter, more open palette.

Beyond what I marked up in figma, I wonder if we can find creative ways to condense some of the content - we still seem to be erring towards narrow / longer content columns and sectioning out the content. As this is intended to be more manifesto less traditional homepage copy, I'm curious what we can do to play with content positioning and typography, to make the content itself stand out more. Think more Increment or editorial and less traditional homepage ?

[olliemiller]

Hey @jacobsmith928 @kaleygel!

I've worked up another version of the homepage. It leans into the manifesto styling. Might seem quite dry as you browse but I think we can counteract the simplicity with a few well crafted/subtle animations and scroll events to keep the user engaged. Here's the design:

Homepage manifesto styled

Ideas I'd like to explore for animation:

• Header: subtle animation of the fizz darting between different combos of the stars - a bit like neural pathways
• Header: subtle cursor change to an animating fizz - that drops sparks as you move around the screen
• Manifesto content: each section could build out as you reach it (text types, 3 themes build in)
• Manifesto content: side titles stay sticky (a bit like we've done on changelog)

[kaleygel]

Thanks @olliemiller !

I'm not sure I'm in love with the side titles - it feels a bit too rigid to me ; I'd prefer we lean in to more typography, color, and callouts like we discussed yesterday– more organic, less formally structured. The boxes between 02 and 03 also contribute to this sense of rigidity IMO.

I do think the animation and section build idea could really help however. I am wondering if there's a way to infuse more personality with text (different sizes, font types, and color) to encourage readership. Unfortunately I don't think where we are yet is quite there. The trends boxes and the 5 "beliefs" for instance to me feel like a way we could lean more visual and creative and less structured.

What is working for me: the bright, single color (lighter) background & fuller utilization of space. I also love how you've incorporated Jacob & Zac's signatures - nice touch!

[olliemiller]

@kaleygel @jacobsmith928

Couple of homepage options. Pretty similar in style but one leans a bit more into the playful code aesthetic - utilising a font called 'Menlo' to give it terminal/coder vibes.

As we talked about, as a first pass I've created a version that works without any build animations. I think a couple of simple section builds and the text typing out as the user scrolls would really make it sing. I'd Love to go there if/when we have time.

Homepage option 1
Homepage option 2

[olliemiller]

oops - I've just realised these don't include the video 😅. I'll have a think about a neat spot for that.

[olliemiller]

Version with Video

[jacobsmith928]

@olliemiller great!

Left you some content comments in Figma.

[olliemiller]

@jacobsmith928 @kaleygel sorry for all the overload of versions. Here's an alternative - in an attempt to simplify, I've standardised type styles for body copy, and titles and use colour to give variation to the page. I think it helps.

Homepage, simpler, with video