Solidify artistic direction (ASAP)

[lottiecoxon]

After a discussion with James H a couple of weeks ago I began working on some conceptual work on how the site could look if we went in different directions. I think that we should discuss these ideas and solidify a direction to move towards as soon as possible.

[lottiecoxon]

Some examples of tech illustrations that do it well

Hasura

Sentry

[lottiecoxon]

Ideas

3D hedgehog in space

DARK

LIGHT

Abstract blobs + tech

Bright + Technical

[lottiecoxon]

Merging new ideas with current design

aka quick face lift

[lottiecoxon]

Mascots

Hedgehog

Space

• I was thinking something along these lines
• PROS looks fun + could have some groovy 3D animation
• CONS would take a while to produce and hard to quickly push out for blog posts + ads

Office hogs

• similar style to Hasura -2D illustrations paired with 3D raised screens -PROS I love them, give off a chilled vibe + super easy to churn out quickly and have them acting out anything + everything -CONS would need to make sure they don't turn too cute or childish. Also still haven't quite nailed style of them yet (need a day or two)

Shapes

• These weird guys are still very much in a beginning draft stage BUT I think they have potential. Made from the 3 different shapes found within the logo they grow legs and little eyes, I was thinking it could be interesting for these three to be characters while also turning into icons and graphics using the same 3 shapes.
• PROS unique and different, and above all simple
• CONS could look childish very easily and as mentioned earlier still in a very early stage of development.

Summary

Obviously the illustrations aren't 100% yet as these things take time to perfect, but to have some opinions on what people are drawn to and pushed away from would be a great help to me understanding in which direction to go.

thoughts

• Moving away from Osiris for titles and replacing it with SK Curiosity
• Keeping Osiris for buttons only
• potentially moving away from the space theme and focusing on the product + maybe a mascot (hedgehog)
• dare I say it... going to the light side?

[tiina303]

I like the dark background (ideally the user can choose their preference). I like the small office hedgehogs.

[joethreepwood]

Please no to the abstract shapes approach. I feel quite strongly that our design language should communicate something about our vision or company and 'amorphous blobs' feels safe, but doesn't really say much. The only teams I've ever seen to choose them have been those which have defaulted to them based on design fatigue.

I like the office hogs! And the space theme is cool though I am curious why we use that as a theme?

https://user-images.githubusercontent.com/65415371/127842015-8c7f6b0c-8d33-4e8e-9df2-c933ef08fa8a.png

I'm not a fan of this central discover-test-etc visual. The message it gives to me is that PostHog delivers a sort of meandering, long-winded path through these points? Which is basically the opposite of what we want to say.

Also agree with @tiina303 that I prefer the dark background.

One other point: Something that it feels like we're missing at the moment is any animation or sense of movement. I think it would be good to see how we could incorporate that, even if it's as simple as some product gifs.

[liyiy]

I'm in love with the office hogs !! +1

[jamesefhawkins]

Thoughts - all subjective though so ignore if you wish!

• 3d space hedgehog looks scary and childish at the same time

• I like the quick facelift - it's simpler and thus less likely for us all to dislike it in 3 months time. Generally, the much simpler diagrams I think are better (meaning:noise ratio is better!)

• I think this page has the most potential, although we should put more thought into the content (I'd want to get across you can self host this much much sooner). I see the downside of the dark scheme is that it's hard to make the page feel "deep" with shadows, so mixing some dark and light areas could allow this nicely

  

• Worried a dark mode design that's either purple or blue will look like our competitors as they all make heavy use of that palette. For example - abstract blobs + tech above I think is too generic looking even if it's slick. Maybe if we pick "dark mode" we should go all in with black or very close to it?

• I quite like the hedgehog cartoons - don't think they're quite perfect... maybe it's the white face on a white background that doesn't quite work. Could we pick funky colors perhaps instead of the realistic ones?

[lottiecoxon]

This is just a sketch but you get the idea?

[tiina303]

I like the latest all black one 👍 For highlighting the private cloud earlier/more visibly (which I believe is important as one of our main distinguishing factors): Perhaps one of the 5 gray things (or add a 6th) could explicitly say self hosting. Alternatively maybe we can have a picture show that somehow (I imagine some servers, one of which with our icon surrounded by a (fire)wall - that can then have a wire directly to the hog sitting behind a laptop looking at funnels).

[corywatilo]

Let's go with a two-phased approach:

1. Simplify what we currently have

Our styles have evolved on every new page we've built out. The plan was to roll out the latest on a new page, then update the other pages to match, buuut we haven't completely kept up. As a result, we have 4-5 main pages that look related, but don't exactly match.

In this first round, let's get us to a more consistent state with our existing color palette, but removing some of the space theme. We can use the new Handbook designs for reference.

A partial list of changes:

• [x] Use a new global font (Circular Std)
• [x] Eliminate the use of Osiris (title font), SK Curiosity (body font), and also Gosha Sans if we still have it in there (logo font)
• [ ] Remove swoopy lines, embellishments, shapes and gradients from Pricing, Product, Careers, etc
• [ ] Eliminate angled buttons (except for header, hero - need to think through these more)
• [ ] Eliminate most of space

Getting the information architecture right is the most important thing. Let's get things into a simple, consistent state before we do anything dramatic like changing our palette...

2. Go bold

We'll likely do something dramatic here (black and white page, cool graphics, etc - more like a rebrand). But we have a little time to figure this out.

---

I'll likely take a stab at most of step 1 since we don't have mocks and it will take a bit of experimentation.

[joethreepwood]

Small note and I think Cory's two-phased approach makes sense, but: can we avoid having white text on a black background if we do go with a dark aesthetic?

I don't have any design-related pushback to it, but it will make the copy and content a problem. White text on a black background is generally read about 25-50% slower than other copy styles and is a big trigger for people with astigmatism and vision issues. It can be mitigated by changing some of the spacing or tweaking the contrast between the two, but in general it's a style we should probably avoid unless we have a strong reason not to.

[lottiecoxon]

After some scribbling and modelling in 3D I have come to a decision. Thinking we keep Office hogs as blog only and then the 3D type models (which will be much more shiny and finished), will be for product related imagery on the website. As always I will need some time to create some content so keep your eyes peeled.

[jamesefhawkins]

I adore the black version

[lottiecoxon]

Some ideas for an animated hero explaining what PostHog does here would love some thoughts

[corywatilo]

WIP of a new website UI

This is pre-@lottiecoxon, so I’m mostly focused on overall layouts, text styles, some messaging, and general awesomeness. Translation: graphics will come later, and should really make this thing pop.

I'm continue to work through these a little more, and then @lottiecoxon can come along and help with some awesome graphics and viz as time allows.

-> Figma prototype (5 screens)

As you’re clicking through and have feedback, feel free to use Figma commenting to let me know things you’re digging and things you’re not. (You’ll also need to Hide Figma UI in order to click the links at the top: Cmd + \)

Things to note

Homepage

• For the hero, we could do an animated thing to fill the viewport (showing the pillars of what we do), or we could keep it simple. In this example, I’m dropping in a live “chart” that you could scrub through. could show actual stats for various metrics. TBD, and definitely open to suggestions.
• The section in black needs a lot of work, and would benefit by loading animations and animated visualizations, but we can work our way there.
• Export to data warehouse graphic - we could have some fun here.
• Not gonna lie, I’m absolutely digging the footer (and I think @jamesefhawkins will enjoy it too).

Customers

• This is an early draft of a future page (#1707) but in this updated UI. I'm also proposing a top-level nav item for this, as I think we'll have enough to fill this up soon enough and make it an enticing page to visit.

Docs

• Right now this is just a dropdown, currently activated on click in this mock, demonstrating what one of our mega nav menus might look like. (Go back home to access other pages.)

Blog

• This is the updated layout being implemented in the current design in #1748.

Company (Handbook article example)

Note: This takes you straight into an article view. I don't have the index page mocked up yet.

• I had some fun with this one, including the sticky Handbook header with an improved breadcrumb, next/previous links at the top, and article numbers, to emulate having page/chapter numbers in a book. These are the only visual changes from the current Handbook design @smallbrownbike is implementing in #1729.
• I also have a random block in this article to show what pasting a component into an article might look like, if we ever want to do something like this. (Example: this Deployment options block came straight out of the Docs nav menu, so this shows it being plopped straight into an article. I can see this being useful...)

[leggetter]

@corywatilo you previously spoke about, or asked the question, "what's our command line demo from the homepage?"

I wonder if we could have a kind-of debug mode or see how it works option that brings up a console or makes the UI react to user interactions. So, as the user clicks and navigates you can see those events in the console and the UI briefly shows the user interaction?

How could it work? Some custom JS to update the UI and for the console like functionality. We could hook into PostHog.js debugging for the event functionality/logging.

[corywatilo]

kind-of debug mode

@leggetter I like this! Let's brainstorm on this a bit. Will mull it over.

[corywatilo]

Big update on the homepage, both design-wise and messaging. (There are a lot of places for @lottiecoxon art in here!)

I've also updated most of the pages on our site to match the new look. (The goal was to visualize what a "simple" reskin would look like, aside from the homepage which got a lot more love.)

Figma prototype

(You can now click Product, Pricing, Docs, and Login)

Feedback on a specific piece in one of the mocks? Use Figma comments. Generic feedback? Reply here.

Homepage concept

[corywatilo]

Also added a Team page to scale with our growing team and if you click on @jamesefhawkins, you'll see a profile detail pane open.

[joethreepwood]

I like that! Though it does feel like the pixel-art headshot style is being increasingly left behind.

[lottiecoxon]

Joe you are right on the money 🤑 - I was speaking to Cory about this on Wednesday - will be cooking up a new idea for team photos over the next week 📷

[joethreepwood]

@corywatilo - I've been through the Figmas and added some copy tweaks based on comments in https://github.com/PostHog/company-internal/issues/393

Let me know if there's a way you'd prefer to collaborate on the copy for these or if there's an updated Figma etc I should be looking at.

[corywatilo]

New homepage draft

This version largely focused on updating the messaging to match our latest direction, and getting matching visuals in place.

See the Figma

Incorporating office hogs

Hero

I threw in a few hogs here. We could expand upon this (full background) or keep it relatively simple (might be better).

Scattered throughout the page/site

Main product feature slider

Until we update the UI throughout the app, we can stick with fewer screenshots of our more fully fleshed out features.

Clicking the next arrow would advance a slide (between Funnels, Trends, Session recordings, Feature flags). Clicking a feature name would advance you to that specific slide.

I/O

Draft of all the data we can ingest, connecting to PostHog, then a data warehouse for export.

[corywatilo]

Here's an update to the Careers page to go along with the whole vibe. @lottiecoxon Could use some graphics in the top section if you dig it!

[tiina303]

❤️ event pipelines update & quit writing SQL (edit: moved comments to figma)

[lottiecoxon]

I vote we close this as per offsite feedback this issue is long and (personally) has been solved