Epic - Information Architecture

[clarkus]

Is your feature request related to a problem?

This is an issue to track a few related issues that all tie back to information architecture.

Related issues Note there are probably more than this

• Merge settings pages? #4268
• Make saved reports a top-level feature #3408
• Make it easy to find "that specific visualization" #5118

Describe the solution you'd like

Generally, I think our navigation could be reorganized to give us more compartmentalization of the different hierarchies in the product:

• User and utility related items
• Organizational settings and billing
• Project navigation and settings

This would allow us to tailor each section to the needs for the current context, and to give a more prominent representation of the sense of place in the product. We could also have prominent create actions where applicable in the left project navigation.

See some concepts below

Describe alternatives you've considered

See the related issues. There are mid-steps in the navigation changes that could help us move intentionally towards a broader change to navigation. I have also considered not making any changes and instead waiting on more information before moving things around.

Thank you for your feature request – we love each and every one!

[alexkim205]

😍 This is a breath of fresh air! Something I couldn't get from the mockups and maybe you already had this in mind, but would the sections in the left project navigation be expandable? It would be pretty convenient to access a deeply nested page like the funnels insight page from another nested page, all from one spot.

[clarkus]

@alexkim205 I have an alternate version that handles that case. The tradeoff is that we don't have as much space for inline creation actions. This version has a global creation that could work, but might not be as discoverable.

[leggetter]

What may also be useful here - or at least help me/other noobs get our head around this and to go back to basics - is to understand the relationships between each of the pieces of information we have within PostHog. Something like a mindmap that visualizes the relationships, maybe?

For example:

• What does a Dashboard contain? How is that related to other items?
• What is an Insight? What are the different types of Insight? How does these relate to other items?
• ...

With this in mind, should the Information Architecture be organised to reflect the relationships between things?

[clarkus]

@leggetter, here's my general model for project features. Note that this is just how I am thinking about it and I might be missing some details. Feel free to correct or adjust this model based on your own understanding.

Persons interact with a product which has been instrumented via PostHog. Those interactions are grouped into contiguous sessions of activity. This activity generates events. Events can be classified as actions in PostHog to add meaning or to make collection simpler. Insights are the means for querying event and action data to produce visualizations that can then be assembled into dashboards to answer broader questions, or a theme of questions. Feature flags control what a person can access in the product. Plugins are used to automate or extend the functionality of PostHog. Annotations are a basic means of adding qualitative data to the event history.

There's a secondary layer, and that's really what this design is targeting. Users, Projects, and Organizations. Users are invited to PostHog via organizations. Billing and feature access is tied to an organization. Organizations can organize work into projects. Users have roles that limit their area of influence in the product.

In the IA design above, I am really trying to draw some territory boundaries between the constructs in that secondary layer. It makes it so that user roles and organization settings (global context) can influence and adjust other constructs lower down the decision chain. For example, a non-admin user shouldn't see admin-level controls (billing, role management, etc). This could also apply to project-level access. tl;dr - this reorganization makes it easier to adjust to the various contexts established by user roles, organization access to features, etc.

[leggetter]

That secondary layer is definitely easier to get my head around.

I find the first layer of persons, sessions, events, insights, dashboards etc. a bit harder to grok and thus harder to naturally put into an IA. But if this issue is focused on the secondary layer then I won't worry about it for the moment 😊

[liyiy]

This is definitely a more organized/refined view of our current layout and I love it. I do think it's starting to look a little bit like our competitors, possibly because it's more structured now? How can we maintain something design unique to this but that's also cleaner/more structured than what we had before? 😮 Or maybe that's just super difficult because of how much information we have to cram in the UI?

[clarkus]

This is definitely a more organized/refined view of our current layout and I love it. I do think it's starting to look a little bit like our competitors, possibly because it's more structured now? How can we maintain something design unique to this but that's also cleaner/more structured than what we had before? 😮 Or maybe that's just super difficult because of how much information we have to cram in the UI?

I think we can still layer in unique qualities or aesthetic treatments that give the product more character, but primarily I think it should be designed for user needs. A lot of these changes are based on current needs, but also based on how each area might change in the future.

Was there anything that stood out to you as in need of change? Or anything that could be more unique?

[paolodamico]

It's great that we're thinking about how to improve the product's IA & navigation. Taking a step back with what we're trying to accomplish here, I see one key change to serve this goal: having the project selector on the main nav bar instead of at the top. Makes a ton of sense because now all menu elements there are subordinated to the project.

• UI-wise, I'm not sure about having a wider menu that collapses. I'm personally not a fan of collapsing menus on desktop, they can become annoying because of multiple clicks (worse if you have collapsible items), but maybe it's a matter of trying.
• I'm not sure about having the UTC indicator there. The point of it is providing you with more info if you need it, but this seems to drive more attention to it.
• Some issues (mostly preexisting) with the right navigation: I no longer see my email address, the personal/org settings are still a bit hard to discover and it's not clear where to go for what. Lack of prominence for inviting team members was a problem in the past (not sure if it'll be an issue with this design).
• Love the breadcrumbs to add more clarity to the information hierarchy.
• Not sure about the footer, don't think it provides a ton of value and seems a bit "corporate-y" if that makes sense.
• I would suggest we keep designs outside the scope of the main navigation structure in a separate issue, but just providing some quick feedback here, the insight builder section is overwhelming, even more for new users. In addition, I think this will lose whatever small above-the-fold display we have.

[paolodamico]

• One additional quick feedback. From a comment on a different issue, I just realized that the plus icons in the nav bar mean to actually create a new object. I actually got it confused with a collapsing mode, until I saw that description.

[clarkus]

UI-wise, I'm not sure about having a wider menu that collapses. I'm personally not a fan of collapsing menus on desktop, they can become annoying because of multiple clicks (worse if you have collapsible items), but maybe it's a matter of trying.

Doesn't have to collapse, but for users who are extra sensitive to having all the browser width, it could be enough to make pages adapt to their needs. I don't think it's critical at all. The more important thing is the relationship of the navigation to the current project / workspace.

I'm not sure about having the UTC indicator there. The point of it is providing you with more info if you need it, but this seems to drive more attention to it.

My thinking is that this is global context for the product. This might be too prominent, but it's a global context, so communicating it prominently felt right to me. It's also a representation of locale, which is mostly tied to the user, so placement in that area made sense. Any other ideas where it could go? I just don't think it makes sense in an insight chart... it's broader than that.

Some issues (mostly preexisting) with the right navigation: I no longer see my email address, the personal/org settings are still a bit hard to discover and it's not clear where to go for what. Lack of prominence for inviting team members was a problem in the past (not sure if it'll be an issue with this design).

I can spend some time on improving this. 👍

Not sure about the footer, don't think it provides a ton of value and seems a bit "corporate-y" if that makes sense.

Agreed it's not critical. It's mostly to expose some important things like the privacy policy and terms of use. I was also trying to think of a way to promote contributions or getting users to learn more about how PostHog is developed.

One additional quick feedback. From a comment on a different issue, I just realized that the plus icons in the nav bar mean to actually create a new object. I actually got it confused with a collapsing mode, until I saw that description.

Noted... I don't know that we need inline create actions here at all. The one exception is for insights because we have a prominent creation action for that now. This is entirely related to the changes at #3408.

[paolodamico]

All that makes sense to me. Re the UTC indicator I agree that's where it makes sense but we did receive the feedback in the past that it's too prominent (paraphrasing a user, it should be there if I need the details but most of the time I won't care about this and it can be distracting). One of the issues I see is that your configured timezone doesn't yet provide you all the flexibility you need.

Some options that come to mind: having the indicator inside the profile dropdown on the right, removing the "UTC" and just keeping the tooltip for information, having the UTC indicator only in insights page (it's almost only relevant here, even though it has a more global scope). I like the first option, but not sure how that would look.

[clarkus]

I think adding it to the user drop down makes sense. It's really illustrating the relationship between user locale / timezone and the product time. It makes sense to have it closely related to the user in that regard. I can work it into the menu along with the user email address and other items you mentioned above.

[clarkus]

Here's another idea. This breaks the menu into sections for the user account, current organization, and other organizations. This also includes timezone conversions and restores the user email. I don't really like the number of icons I'm using here... that's just my personal preference, though. Thoughts?

[clarkus]

Worked through a few iterations to simplify things and landed with this.

[paolodamico]

Really like this! The org icons also seem quite intuitive to help separate each section. My feedback:

• I would move the timezone section to the bottom as it could potentially be the least relevant section.
• I like "Other Organizations" better than "More Organizations"
• Can we somehow make invite more team members a bit more prominent than the rest of the buttons? This seemed to drive quite a bit of internal referrals in the past.

[clarkus]

Here's that feedback illustrated. I think those are good changes. Thoughts?

[corywatilo]

@clarkus recently shared some menu updates. It's really solid but some of the structure felt a little off, so I figured I'd try to propose some solutions in this wireframe conveniently pasted below. I'll also leave some comments in the Figma and specific elements which I've chosen to omit in this wire. (Take it or leave it!)

• Dashboards: I have a mental block on having Dashboards listed anywhere but at the top of the list. Dashboards are the things you always want to return to, so I see it being a weird convention not having it at the top of the list, especially since this is pretty standard with other web apps.
• Splitting features from management: This splits top-level app features from the stuff you don't need to deal with on a daily basis, once your environment is set up.
• Insights menu: Rather than just dumping users directly on a blank Trends screen (which I'd imagine we'd still do if you clicked directly on the Insights nav item), this could give quicker menu access to the various insights tools and also offer global access to saved insights and recently viewed insights.
• Personal preference but I do love me some top-level icons, so I included them here.

[posthog-contributions-bot]

This issue has 2074 words at 17 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]

There are a ton of updates available for this solution. The latest changes focus on announcing this updated navigation to users and giving them a short-term, temporary means of opting out until we finalize the changes. https://www.figma.com/file/NHPA2hVWwaKp4eTGWdigs9/Product-Concepts?node-id=481%3A1019

[mariusandra]

Can we now close this? There are still things we can do to improve various elements, but the overall IA seems to be in place.