Design new homepage Hero

[lottiecoxon]

3D new hero ideas

[lottiecoxon]

Ideas

A

Linear flow from computer to each element of PostHog

B

Computer tilts to a platform with rising elements

C

ALTERNATIVE Computer tilts to a platform with rising elements

D

Computer swivels sideways and elements ooze out in a sideways flow chart

[jamesefhawkins]

I'm finding the shift from a realistic computer "oooh is this a very basic demo" to abstract somewhat frustrating (despite this looking really creative!) - I'd feel at first "great this will show me what it does" to "this is shiny but actually kind of disappointed it didn't help me understand"

if we want this to stay close to what the product does... Maybe we could do something that remains truer to the detail of the product ie:

• Strart with computer screen with PostHog open, 3d rotate it to the right as you have above "whoah this is going to be slick"
• Pop out close-to-real-life bits of the app - for example, show someone (i) setting up a funnel (ii) then clicking the drop off to watch session recordings of it (ii) then switching on a feature flag to see if they can improve it. I think we could do this in a way that doesn't show the entire posthog screen but pops out the relevant elements - just the funnel without the rest of the ap around it, just a feature flag switching from off to on, and so on

Disclaimer: above may be super noisy/annoying in practise, in which case we could simplify it to either a more basic animation fo the product in use or something quiet and abstract.

[corywatilo]

Love the concept!

After thinking through this a bit, I think it would be good to lean on one side or the other of:

1. Demonstrate what we do (analytics, session recording, feature flags, etc)
2. Show the problems we solve (data in -> a bunch of cool stuff -> data out)

While I love the abstract idea in these concepts, I'm worried we'll lose too much attention from our target audience by being too ambiguous in the visuals.

Two things we've tried to explain about PostHog succinctly:

1. Self-hosted analytics, and a whole lot more (previous iteration)
2. An end-to-end analytics system, spanning the entire data lifecycle (current)

With those general messages being the goals of what we're trying to communicate, I'm not sure if this does any better than what we have now (despite these being visually way cooler).

In #1612, I had floated an idea for visualizing our current 5-step solution suite. The reason I liked that concept is because it 1) covers the 5-step flow we have today, 2) allows for some visual creativity.

Bottom line: I don't want to lose the clarify we have with what we have now, which may be tricky because we're trying to inject art into what is currently mostly text.

Balancing the visuals with the message is tough, but if we re-focus on what we're trying to communicate, does that help us narrow it down how we can best visualize this?

[lottiecoxon]

[lottiecoxon]

https://user-images.githubusercontent.com/65415371/130448024-8ddbc333-8e96-43df-93e1-843817a19b13.mp4

This is a first draft of potential animation ideas for the hero- @corywatilo I am using this for reference- and will probably use the style above- But on reflection this is toooooooo long for a quick +subtle graphic so I will work on making it a lot shorter.

Thinking of using something like this for transitions.

[corywatilo]

Latest feedback is in Figma comments

[lottiecoxon]

Seeing as this has been figured out in Figma comments I am going to close this issue and label it as done