Flowchart/diagram of PostHog features

[lottiecoxon]

A simplified and clear flowchart explaining what PostHog does, to help outline to clients what features they could use to grow/flourish

[lottiecoxon]

Snow Plow Analytics example

[lottiecoxon]

more inspiration for this project

![Uploading Screenshot 2020-11-24 at 15.26.37.png…]()

[lottiecoxon]

[lottiecoxon]

Is it too much with adding in where the information comes from?

[lottiecoxon]

@jamesefhawkins

[lottiecoxon]

[lottiecoxon]

[lottiecoxon]

[lottiecoxon]

With or without text accommpaniments

[lottiecoxon]

[lottiecoxon]

or just text within boxes, as visuals/ icons could be distracting?

[paolodamico]

• IMO the overall layout is a bit confusing because the concept of what's on dashboards is almost the same as to what is on the front-end visualizations section. Further, not sure if everything can be counted as visualizations (e.g. feature flags or plugins).
  • Related to the above, I also think is important to add plugins to the general ingestion flow, as plugins may alter events before they're stored.
  • I would also consider switching this to something more like the flow of events, like adding the database where events are stored, and then showing that events can be exported to other warehouses or data lakes.
• In terms of visuals, I like the second option, visual icons with text accompaniments as I believe this could be the most visually attractive but also clear.

[lottiecoxon]

This is great feedback, one favour I may ask is could you (or someone who understands this a little better than I) put this into a kind of order for me or have a quick call walking me through the process, I feel that my limited knowledge of the whole process of the product is holding me back a bit.

[lottiecoxon]

Maybe if we separated Visualisations into two groups: dashboard and features? or is that too confusing still?

[lottiecoxon]

[paolodamico]

Great stuff @lottiecoxon! Looks a lot more accurate IMO, just a couple of things that still confused me a bit (but I might be missing the intent here, perhaps is better to check with @yakkomajuri too),

• I think that with "Cloud" & "Servers" we're trying to show that you can have either option, but as this is an exclusive or option, it's a bit confusing to see two separate blocks for this (unless the blocks are intended for something else).
• I think the "Libraries" and "Auto-capture" pieces should go in the sources of data section, not after the data ingestion.

Not confusing, more of a general comment. Still unsure what the plans are for the last column of the diagram, but depending on that it might make sense to consider grouping all visualization/analysis features in a single section (i.e. in my mind "Dashboards" is just one way to use the data, and as useful/important as session recording, or retention, or ...)

Hope this feedback is helpful.

[lottiecoxon]

This feedback is very helpful, but I have made a lot more progress (with the help of Yakko) on Figma, I will link you in slack so you can see what progress was made last week! @paolodamico

[lottiecoxon]

Feedback from Yakko

My first attempt, with accompanying colour variations

Development

I didn't like the multicoloured backgrounds so I moved onto experimenting with coloured nodes instead.

Experimented with a darker background to make the node colour pop

Added some stylistic shapes and shadows to add some character into the diagram

After discussion with Yakko, we thought it best to add in illustrations to help explain the diagram further.

Conclusion

I am not in love with the illustrated version, I personally think the best version of this diagram was the stylised text and shape version, but I do understand that the visuals will probably be a great help for those clients who do not have a heavy technical background.

In my opinion, to move forward with this is going back to the drawing board, taking elements of the stylised version and the colour it had, and trying to merge this with some illustrations that fit our branding.

[lottiecoxon]

[lottiecoxon]

[lottiecoxon]

I personally like these designs more but I am aware that they may be a tad too playful (I will add in some text but you get the gist)

[yakkomajuri]

Originally I thought the section dividers would work well but now I'm not too sure. If we add titles though that might make more sense.

Anyway, about the latest design:

1. I still would want some sort of indication of in and out on the plugins section (not the burger chain)
2. I don't think the databases should be merged into one pic, gives the wrong idea. Just the logos there should be fine, or a simple db illustration with the logos
3. For the visualization part (top, last section), we could try to show a heatmap or session recording?

[lottiecoxon]

[jamesefhawkins]

Thanks for the iteration here. Overall this is starting to be a little too complex was my first reaction.

No illustrations

The point of this is to make it easier to understand what we do. I'd suggest we focus on getting the structure / text in place first, then work out how to make it visually nice.

Distinction between graphs + other stuff

We've created a distinction between graphs and other stuff:

I'm not sure this split makes this easier to understand and it adds visual complexity.

Range of features

The range of feature icons could be reduced. Some of these ie 'sessions/paths' just aren't headline features.

I'd suggest we reduce this to:

• Session recordings
• Heatmaps
• Funnels
• Trends
• Retention
• Feature flags

Speech bubbles

I was curious what the intent here is:

Experimentation

We have created a separate illustration for this:

it feels inconsistent. We don't have experimentation functionality on top of feature flags, they're the same thing, so I'd drop this.

Plugins

This feels a little too cutesy (perhaps we should try just showing "all" events going through plugins versus "some" being routed that way) to simplify the diagram.

[yakkomajuri]

RE the feedback above from @jamesefhawkins

I'm ok with plugins being routed separately because that's what actually happens. Also, while we don't have plugins on Cloud, this might be misleading.

I would however have the plugin arrows in and out of the chord somehow. Now it looks like events go into the plugins and come out back into the pipeline (correct), but it doesn't portray the idea that we can get data out with them

[yakkomajuri]

Also, the databases look like a VCR to me

[lottiecoxon]

[lottiecoxon]

Structure wise does this work better? or would you like to see the plugins going separately out ?

[lottiecoxon]

[jamesefhawkins]

I think the one without plugins going separately out!

This is way easier to understand. I reckon we could drop the analysis box too to simplify further - given feature flags are experimentation. Just have all the features reading off the database ?

The one other thing is we have a bunch of libraries to capture events. Instead of front end and back end, We could have web, server, mobile, IOT, 3rd party - all of which stream events into PostHog (and autocapture is optional, and only applies to a subset of web). How would you most simply represent that?

Ps thanks for iterating so much here

[lottiecoxon]

[lottiecoxon]

[lottiecoxon]

[lottiecoxon]

Ideas for illustration

[lottiecoxon]

[timgl]

Looks good, couple of thoughts:

• I think arrows everywhere pointing right would be good to indicate the events are 'flowing' through the system.
• I like the icons but some (iOT, server, 3rd party, postgresql) look not quite as 8-bit-y as we'd like (and a bit generic).

[Twixes]

This is pretty sensible. I'd just suggest replacing the "3rd Party" caption with "Inbound Integrations" and putting an Outbound Integrations (which send events out to somewhere else as they come in) step alongside PostgreSQL and ClickHouse (but with that route not ending up in Analytics, just ending there, as that data is then out of PostHog).

[lottiecoxon]

@timgl Thank you for such quick feedback! Concerning the 4 icons that don't look quite right, I can redo them but I would like to ask what kind of imagery you would like for 3rd party, server and iOT? I think my lack of technical knowledge here is limiting my creative process. For PostgresQL I will redo it to look more 8 bit like.

Also taking in what Michael has said, would it be worth changing the layout @jamesefhawkins + @yakkomajuri I would like your input on this one.

[yakkomajuri]

There's already been a bit of feedback here. My thoughts:

• I'd still like a representation the idea of in and out at the plugin level (could be arrows)
  • This could be an alternative to address Michael's point
• I'm wondering if we can mess with the Postgres and CH logos like that
• The autocapture/web part feels a bit crowded/confusing

[lottiecoxon]

[jamesefhawkins]

The second of the latest round to me looks the clearest! Thanks Lottie for getting this through.

• Icons for web, server, mobile look a little complex - can we keep the 8-bit focussed but ie the mobile has a lot of detail.

Once above is done, we should get it into the home page layout to check colors etc :)

[jamesefhawkins]

@corywatilo this is the diagram mentioned above - if we could somehow get something like this into the homepage design neatly I think it could help make it feel more like a devtool from a user persona perspective

[corywatilo]

Yes this is awesome!

@lottiecoxon My only feedback would be... would it make sense to create a different icon for Heatmap? Love the campfire, but it puts my mind through a couple cycles vs something that resembles this

[corywatilo]

One other piece of feedback: We might need to consider flipping the orientation on this (horizontal to vertical). Will need to think about how it scales down on smaller screens and on mobile - might be better if the blocks can flex. Example: Analysis icons might need to flex into two rows instead of always staying in one row.

Let's circle back when we get to this section on the homepage.

[corywatilo]

Could be interesting to create a game-type map of this

via Dribbble