Epic - Nail Seamless Analytics Experience

[mariusandra]

Expanding on this sprint planning comment

Nail Seamless Analytics Experience (Working title)

Owner: @Twixes

Why?

Why? Insights and dashboards are very sluggish and inconsistent to use. The app doesn't spark joy.

Goals

Goal 1: "It should be possible to go from a dashboard to an insight and back in 0.1 seconds"
Goal 2: TBD, working draft: "80% decrease in WTF/minute during usability surveys."

Steps

• P1, fix before other stuff. Persons modal loads forever on trends @mariusandra

• Finally release saved insights @mariusandra

• Implement the Information Architecture flow and refresh the look @Twixes

• Combine the UX of insights, saved insights and dashboards into a coherent whole @Twixes and @mariusandra

• Chart UX improvements:

  • Add all chart types with various states into storybook @mariusandra
  • Unify "not loaded" states amongst all charts
  • Don't show "No matching events" when never loaded anything yet
  • Add "area chart" and "percentage mode"

[paolodamico]

Love that you put this together @mariusandra! Happy to help with the IA refactor if needed.

Can you clarify Goal 2? Not really following.

[clarkus]

Can we include #6172 in our new chart options.

[clarkus]

Combine the UX of insights, saved insights and dashboards into a coherent whole @Twixes and @mariusandra

This is an ambitious undertaking. The insights UI is actively changing in other sprints as we consider taking this on. I think we should still go for it, I'm just calling it out as a complex problem. Please include me as you are able to - I have a lot of in-progress unification work that hasn't been shared too broadly, yet. You can see those at https://www.figma.com/file/9yWtngNb1AIuf6KmXaEPJA/?node-id=827%3A137854

[mariusandra]

@clarkus While slight UX changes can definitely be part of this (and you will be looped in, 100%), the bullet point was more to address the fluidity of navigating between the scenes. Not necessarily where the buttons to go between the scenes are, but to get rid of the loading indicators and make the experience fluid.

Not "the insight zooms in from a 3d cascading dashboard and then subtly tilt-shifts in a futuristic minority report UI way" fluid, but a snappy "everything is there instantly" fluid.

However, streamlining the UI and design between the pages is going to be a closely second undertaking, somewhat of an extension of the IA task.

@paolodamico we could definitely use input in metrifying this goal, and I'm also fine with skipping it. Basically the idea is that currently there are so many things that don't make sense in the overall flow between the pages, and we want to improve many of them. Things like "why the F does it load two times?", "why the F does it say I need to send events to PostHog when the chart just hasn't loaded yet?", "why the F is there a huge 'view' button, but I can't click on the insight title", etc. Browse the pages for 5min and count the "wtf/min".

[paolodamico]

That makes sense @mariusandra! In addition, @clarkus to make sure we achieve our goals, and we don't present a completely new product in a single release, I think we should only do the basic Information Architecture improvement standalone, and then work out improvements. Thoughts?

---

Re metrics. The kind of improvements we're looking at will be hard to quantify with anything other than usability tests, but a percentage change will be very hard to measure (what would our baseline be?). How about, "have a maximum of 3 WTFs in a single insight/dashboard session" (we can ofc run several sessions and average). I think this will really help push our quality forward.

[clarkus]

That makes sense @mariusandra! In addition, @clarkus to make sure we achieve our goals, and we don't present a completely new product in a single release, I think we should only do the basic Information Architecture improvement standalone, and then work out improvements. Thoughts?

@paolodamico do you think we should test some of the IA changes before committing? There's still a lot of in-progress feedback there. I think we can get the design locked down by mid-week. I think there are some good ideas in here, but it is a lot of change. Once we get this locked down, we should try to work on a communication plan for users. We will also need to look at our support documentation to ensure it still aligns to the latest IA changes.

[paolodamico]

Re @clarkus. I think the best approach here would be to build the design we have (almost) finalized. I'm worried it'll be hard to get actionable feedback just from Figma (as it's mostly a visual change and you feel the real impact when using it).

• With the design built we can run some usability sessions.
• I also propose instead of feature flagging this, we give the option to users to opt in/out of the new design and share feedback (like more mature products do), and then after a couple of weeks and more detailed iteration we can release.

Also pinging @Twixes here for input on the approach above, as it'll definitely have some technical implications keeping both versions.

[clarkus]

@leggetter brought up a need today in figma about making dashboards easier to find. We solved this in the saved insights work, but haven't really done much to bring dashboards up to the same level of "easy to find". As part of this work, can we tack a simple keyword search on the dashboard listing page? It can literally be the same component used to find insights.

[clarkus]

I also propose instead of feature flagging this, we give the option to users to opt in/out of the new design and share feedback (like more mature products do), and then after a couple of weeks and more detailed iteration we can release.

Cool I can put together a few quick prompts that encourage users to opt into the new design, but still makes it easy to opt out if there is an issue. Will continue on that in the main figma for the IA work. 👍

[mariusandra]

Things identified for "saved insights" to spark joy.

Card view saved insights

• Load issue on card view
• Clicking on saved insights card title opens it a new tab
• Get rid of view button in card view
• Show up to 2 cards side by side on most resolutions (3 cards only > 1600px)
• Funnels look terrible in card view
• UI of collapsible menu (rounding, padding)
• Error / empty states don’t fit (funnels)

List view saved insights

• Add debounce to search
• New insight dropdown overflows page (adjust UI)
• Icon doesn’t change on sorting and wrong icon; no icon on created by
• Type of insight on list
• Three dots on row is on the created by column
• (On three dot menu) Dashboard list is not sorted alphabetically 
• Dashboard list should have a fixed height and then you scroll within the view removed entirely until we get support for insights on multiple dashboards
• Last modified (time ago) / maybe time conversion?
• Missing profile picture for team members (and on filters)
• Change url of /saved_insights to /insights
• Another different empty state
• Make new insight dropdown two-part: default open + dropdown.

General

• Empty states are different for everything

New Insight

• Saved success toast overlays on stuff
• Can’t go to the view button
• Discard changes / cancel
• Save/edit button is not properly aligned (extra margin)
• Lower emphasis to the title (size, weight)
• Change the numbering (either autoincrement, random words, smart naming, …)
• Save and … (keep editing, add to dashboard)
• Tooltip hovering is clunky, it doesn’t move very smoothly, sometimes it disappears depending on how you move the mouse.

Insight table on Insights

• Column width adjustable so you can see all details
• Labels, click inline on the table to change series name.

View mode

• Long titles or long descriptions, the edit button gets placed at a weird position
• Interval is disabled in view insight but the rest is enabled
• On view insight maybe clicking on the insight label gives you the description? (i.e. event, filters, …)

Dashboards

• Remove view button on dashboard item
• Update the UI to match saved insights

[clarkus]

@mariusandra worth considering #6668 as part of this effort? Tooltips can be pretty critical to validating the insight is done and ready to be saved.

[mariusandra]

Yes, that's exactly the type of "annoying, usually not important enough though rather quick to fix" usability issue that we should fix as part of this initiative.

Other tasks such as:

• UX around saving insights to dashboard feels clunky #6176
• Remove Insights History #6478
• Insights pie chart totals display only the total of the shown breakdown values #5696
• UX: Merging sessions insights into trends #4348
• Revamp pie chart UI for Insights #4403 (@clarkus remember this? :D)
• Decouple insights components from URL #4329

.... may or may not also be part of the next release, depends on how far we'll get in the next 2 days, how much muscle we'll have for the next sprint, and what will still need to be done. The list above is just taken from searching "insight" in issues, not a definite list of priorities.

Please keep the issues coming that you think make sense to be here. I'll aggregate a bunch more tomorrow. That's why I also posted the "saved insights" list here not under its own issue --> so we have one huge list of things to do in one place.

Goal 1 of this epic is almost done, goal 2 to decrease the "wtf/minute" count when using insights is still in progress and will continue next sprint under the proposal goal for next sprint of "Get the UX to a high quality state with new Information Architecture ready for Product Hunt Launch". The more we document the scope of the problem this week, the better we'll be able to solve it next week.

[mariusandra]

Turbo mode todo:

• I've gotten a ~3 times in turbo mode to a state where no insight loaded anymore, but couldn't reproduce it. This may or may not be an issue, and I'd like to hear from people who will use the flag if it is.
• Add a new feature flag, click back -> original list is not updated. Probably same for actions, etc. We could make another query to update the list if opening a page whose logic was already loaded.
• Sometimes when I open app, end up on the "new insight" page and click away before the insight loads, I'll be redirected back to the insight once it loads.
• Opening a path from a dashboard fails in turbo mode
• Fix the slowness with all our tables. Otherwise the events page really does not load "turbo" (Paths don't load in Turbo mode #6934 @pauldambra)
• Disconnect event table filters from controlling the URL via /*, move the URL control into the scene logics for the people, actions and events scenes that use these. Alternatively, implement a is not active scene escape hatch. (@pauldambra)

[paolodamico]

Another big improvement I think we should do here, when refreshing an insight if you're on "edit" mode you should stay in edit mode, it's very confusing to get taken to the view mode if you just refreshed (probably also because something went wrong).

[mariusandra]

Fixed another bunch of small things with saved insights. The big issues to tackle tomorrow are:

• Persist the view/edit mode toggle in the URL
• Improve the "save", "save and add to X", "save and go back", "cancel", etc buttons when editing an insight
• Scroll to top when opening a new page
• Put all chart types to storybook and make sure their empty states look similar
• The other listed UX issues with the saved insights and insights pages.
• /saved_insights -> /insights (can be done after we release the feature to make our life easier)

Postponed:

• Save an insight on more than one dashboard! Postponed: Clarify relationship between insights, dashboards and date filters #6712

[mariusandra]

Also, we might need to prioritise fixing our slow-loading tables as well: #5361

This is visible when you use turbo mode. Whenever you open a page that has a huge resizable table (events, feature flags, etc), the page takes a lot longer to load, compared to other pages with huge non-resizable tables.

There's something really inefficient happening with these tables and it should be at least looked at.

The video above is with a M1, and the problem is probably much worse for folks with less single-core performance.

[clarkus]

I'd vote for solving tables later. They're a critical component in the product and there isn't a ton of variation across instances. I am solidifying some component designs for these now. It might make for a great follow up issue to make tables awesome everywhere™.

[clarkus]

Related #6771

[posthog-contributions-bot]

This issue has 2012 words at 18 comments. Issues this long are hard to read or contribute to, and tend to take very long to reach a conclusion. Instead, why not:

1. Write some code and submit a pull request! Code wins arguments
2. Have a sync meeting to reach a conclusion
3. Create a Request for Comments and submit a PR with it to the meta repo or product internal repo

Is this issue intended to be sprawling? Consider adding label epic or sprint to indicate this.

[clarkus]

@mariusandra I found an issue with turbo mode. In some cases, depending on how you get to your target location in the product, you'll experience the top offset not being reset for the new context. An easy way to reproduce - go to the insights list page and scroll down to find a funnel in some form. Click on that and once the insight loads you'll see that you're already half way down the page looking at correlation features instead of the header of that insight. tl;dr - we should reset the top offset when navigating across features.

[mariusandra]

@clarkus that is fixed here: #6822

I guess this is also a new priority, since we don't want to give up the benefits we get with esbuild:

• Slowness loading pages with new esbuild #6821

[mariusandra]

@pauldambra

• open path from dashboard + back/forward with dashboard (Paths don't load in Turbo mode #6934 )
• fix events and persons table
• release table column config to everyone (remove the flag)

@mariusandra

• esbuild fails when any of the initial chunks are missing Preload chunks when loading scenes #6942
• esbuild load all chunks for scene Preload chunks when loading scenes #6942
• add paths to all logics Add paths to logics #6945
• Sometimes when I open app, end up on the "new insight" page and click away before the insight loads, I'll be redirected back to the insight once it loads. Change insight URL only if scene active #6993
• remove saved insights flag Release Saved Insights #6995
• fix insight urls
• put all chart types in storybook
• what to do with the funnel vertical breakdown flag?

@Twixes

• gray background from insights page Unify Insight page background/shadow/border style with rest of app #6943
• can't go to dashboard from insight
• tables everywhere.... Unify tables and "new" buttons #6710 Nail Tables (resizability, infinite scrolling, performance, expandability, and more) #5361
• breadcrumbs Breadcrumbs #6770
• modify action order: Modify action order for graph series in the query builder #6771
• better align site popover sidelinks?
• animate Popup (dis)appearance?
• add lettermark color palette?

Later / whoever:

• empty states everywhere
• paths with many that are modified "a few seconds ago" https://app.posthog.com/saved_insights?insightType=PATHS
• improve searchbar experience (e.g. search local page elements like feature flags... move dropdown into component from a modal, etc)

Even later:

• Tooltip hovering is clunky, it doesn’t move very smoothly, sometimes it disappears depending on how you move the mouse.
• Tooltip when two same events but different values.
• toolbar into a page?

Insight table:

• Column width adjustable so you can see all details
• Labels, click inline on the table to change series name.

[mariusandra]

We've done a lot of work on this front. Still remaining tasks:

• Insight URLs Insight URL cleanup #7201
• Tables Unify tables and "new" buttons #6710 Fresh table pilot #7103
• Add all charts to storybook Add a dashboard with all possible insight types into Storybook #7017
• ... and then unify their "empty" Standard empty states #7211
• ... and "loading" states.
• Clarify relationship between insights, dashboards and date filters #6712

What else is out there? What's outside the scope of this issue/epic? What falls under the IA epic? @Twixes @clarkus @paolodamico

• Leftover items from IA?
• Anything with shadows?
• Buttons?
• Searchbar?

[Twixes]

There's a few UX-y things that we could still do, not high priority but to be considered:

• Enhance top bar Search #7210
• TopBar doesn't always know when SideBar is hidden #7209
• Remember that announcement has been dismissed #7208
• Add entry/exit animation to Popup #7212
• Use breadcrumbs logic for tab title #7214
• Persist the lemonade sidebar's position #7090
• Lemonade sidebar different open/closed states depending on resolution #7091

[paolodamico]

• I'll do a full rundown of the app on Mon/Tue to see what else seems like a glaring issue / painful experience we should address (update coming here).
• Fwiw I would at least de-prioritize Add entry/exit animation to Popup #7212; Use breadcrumbs logic for tab title #7214 & maybe Persist the lemonade sidebar's position #7090 as there are workarounds and don't seem as critical as other stuff we could work on (e.g. insight URLs with project ID).

[paolodamico]

Alright, as agreed, did a full rundown and here's what I found. We may want to split some issues into their own scope:

High priority issues

• Searching events/actions is still cumbersome. I need to navigate between multiple tabs (which are now more because of groups), and even when searching exact event name matches, I don't get the most relevant result first (see recording below). Event filters: suggest properties that actually have data #4166
  
• Just opening an insight updates it's last modified timestamp, which is incorrect. In addition, I think having a last viewed insight would be quite useful.
• UX potential issue (@clarkus). It's not completely obvious that favorite insights are just for you. Because this is pretty much the only thing in the app that is not shared we may want to clarify this.
• The breadcrumb of "Insight" should show instead the name of the insight for consistency and avoiding confusion.
• The hover on the "new insight" button in saved insights looks awful (grayed out).
• Top search bar (command palette) does not have a cursor:pointer on hover.
• Insight card view is not great. Items can be super small, you can still hover and interact with them, which is strange. Should feel more like a screenshot, we shouldn't render the same graph but a version optimized for a small screen.
  • Three dots "..." menu has the same problem on UI (rounded borders, padding, hover behavior, ....).
• Dashboard grid (Dashboards discrete grid - consistent layout #4312) & dashboard colors (Dashboards color schemes #1763).
• Dashboard "..." menu has the same problem on UI (rounded borders, padding, hover behavior, ....).
• Create new dashboard shouldn't be a drawer. Perhaps a modal to set the name or even create it and use a random name like for insights. Thoughts @clarkus ?

Low priority issues

• UI of search bar in saved insights does not match design.
• Dropdown of "..." in saved insights doesn't have the proper UI (rounded borders, padding, hover behavior, ....)
• When opening a saved insight, the checkboxes in the table below are shown unchecked, yet all the series are shown (try this).
• Legend table renaming series. For consistency (the same way we have with dashboards) we should allow to edit name inline.

[clarkus]

One more potentially quick fix for this effort #7269

[paolodamico]

Another idea from watching recordings today. We currently sort the event/property list alphabetically but most of the stuff we show above the fold is not helpful (e.g. almost no one filters by Anon Distinct ID), instead we could sort based on relevancy (i.e. filters used most often)

[mariusandra]

Amazing list @paolodamico . These all sound like important things to work on. A few more issues that were just reported that fall under this umbrella:

• Insight refresh disabled state is misleading #7284
• Insight time selector resets are annoying #7285
• Support "Path cleaning rules" in trends & heatmaps #7288

Edit: also

• Funnels - person modal can't be opened #7275
• Inconsistent UI state, better renaming, action selector not working #7213
• Warn when leaving an insight with unsaved state #7121
• Cant add Pie Chart to dashboard on Formula and Breakdown-by #6602

[clarkus]

UX potential issue (@clarkus). It's not completely obvious that favorite insights are just for you. Because this is pretty much the only thing in the app that is not shared we may want to clarify this.

A simple change would be to modify the labels for favorites to specify "Your favorites" or "Add to your favorites" to better communicate the scope of favorites. @mariusandra

[paolodamico]

Split out the search bug into its own issue, #7368. Will update the board so we can use it to track this epic instead, as the myriad of comments have become to complex to handle here.

[paolodamico]

Alright, this issue was getting pretty unwieldy, so I created issues for outstanding things, added them to our board in a special column and we can now close this.