Session recording UI in PostHog 3000

[corywatilo]

Narrated demo

→ Watch on Loom (4 min)

TL;DW (too long, didn't watch)

Screenshots

Playlist pane open

Playlist pane closed

Right pane open

Both panes open

Notes

• List of recordings opens in a collapsible side pane. (This would be a consistent pattern for all apps.)
• Recordings open in a new tab
• You'd be able to open additional (contextual) panes, and we'd have a different set of defaults depending on the tab's context. Example for recordings: other panes we might support could be a) Geo (a map of the user's IP), b) Console, c) Events, d) Network and you could drag from the sidebar to main column and vice versa
• We could show an actual browser around the recording that actually matches the user's OS/browser, making it feel real. (Also allow the PostHog user to tab between multiple tabs if the session occurred over multiple tabs.)
• Stretch goal: If we detect the main column is just too narrow for any real usefulness (knowing when both left and right panes are open), we could choose to stack columns, which will double as being great for responsiveness.

[lottiecoxon]

Discussion for a later date, but food for thought - how do we plan to merge Website branding (light) with PostHog 3000 (dark).

Obviously, I think we would all be keen to avoid a total rebrand for sake of consistency with customers. The designs for PostHog 3000 are less in keeping with the website branding (maybe this is early stage with little branding input yet and if so take what I'm saying with a pinch of salt).

My suggestions would be:

• introducing a dark and light mode using the colour tones we have on the web- tan/charcoal etc
• incorporating similar icons/ corner bevels and box sizes from the app into the website

Basically I just want us to find a happy lineage between the two .

[andyvan-ph]

Random thoughts:

• Maybe it's more obvious to you because you're designing it / have been living with this concept for a while, but it doesn't seem super intuitive to me that clicking on the 'Recordings' button in the sidebar would close the playlist view. Maybe that pane needs its own little '🆇' close button?

• I'd be in favour of automatically opening the first recording in the list when you first enter session recordings, so the player loads immediately rather than requiring you to click on a playlist item first.

• I like the icons denoting browser, device type etc. appearing in the playlist. I wouldn't want to lose those.

• Love the idea of adding the browser wrapper and page URL. Very neat.

• I think we should avoid putting 'share' and 'save' buttons behind a '...' menu where possible. They ought to be high visibility features.

[corywatilo]

but it doesn't seem super intuitive to me that clicking on the 'Recordings' button in the sidebar would close the playlist view

This is a convention I stole from VS Code, so hopefully not totally unintuitive to our ICP!

I like the icons denoting browser, device type etc. appearing in the playlist

I think this could be a display configuration option. Though I'd question the actual usefulness in that column – and you can always filter down to specific browsers/OS anyway.

The rest of the feedback I don't have strong feelings against.

[corywatilo]

This mock adds the right sidebar pane, showing the product manual. It would automatically open to the relevant section based on what you're viewing.

It also demonstrates some automatic responsiveness, and how things would stack at narrow widths.

Here's showing the pane opening/closing.

cc @pjhul @lharries as we've been talking about this

[mariusandra]

I like the icons denoting browser, device type etc. appearing in the playlist

I think this could be a display configuration option. Though I'd question the actual usefulness in that column – and you can always filter down to specific browsers/OS anyway.

This is something a lot of users have asked for, and that I've personally found to be very practical.

Just three icons in the left list, next to "45:58", 1) flag for the country, 2) icon for the browser, 3) icon if it's a phone, a tablet or a laptop... would give SO much information for anyone actually browsing the list.

Someone will implement it based on user feedback whether you want it or not, so best design for it 🤣

[Twixes]

We already have that exact feature in the recordings list @mariusandra.

[mariusandra]

Yup, but not on the ~mock~ design.