Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design new homepage Hero #1721

Closed
lottiecoxon opened this issue Aug 6, 2021 · 7 comments
Closed

Design new homepage Hero #1721

lottiecoxon opened this issue Aug 6, 2021 · 7 comments

Comments

@lottiecoxon
Copy link
Collaborator

3D new hero ideas

@lottiecoxon
Copy link
Collaborator Author

lottiecoxon commented Aug 6, 2021

Ideas

A

Linear flow from computer to each element of PostHog

Untitled_Artwork 326

B

Computer tilts to a platform with rising elements

Untitled_Artwork 327

C

ALTERNATIVE Computer tilts to a platform with rising elements

Untitled_Artwork 328

D

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

Untitled_Artwork 329

@jamesefhawkins
Copy link
Contributor

jamesefhawkins commented Aug 7, 2021

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
Copy link
Collaborator

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 changed the title Design new 3D Hero (art board) Design new homepage Hero Aug 23, 2021
@lottiecoxon
Copy link
Collaborator Author

Screenshot 2021-08-23 at 12 06 59

new hero concept

@lottiecoxon
Copy link
Collaborator Author

Untitled_Artwork.5.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
Copy link
Collaborator

Latest feedback is in Figma comments

@lottiecoxon
Copy link
Collaborator Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants