Improve navigation and discoverability

[paolodamico]

Is your feature request related to a problem?

Through numerous customer interviews we now know there seems to be a bit of an issue with our current navigation, in which a) users find it a bit hard to reach the features they need or b) users are unaware of other features/capabilities of PostHog. This design proposal attempts to tackle that. Also attempting to balance the need to make all features easily discoverable to the problem of having so much stuff that it's overwhelming for new users.

Aside from the above, this design also introduces full support for multiple projects and multiple organizations.

Release plan. As this is a particularly intensive change (from a UX perspective), I'm thinking that we can release in the following manner:

1. Multiple feedback rounds (this thread).
2. Initial implementation (very intense UX change, but fortunately it will likely not require a huge code change).
3. Beta testing with select power users (do usability tests and get qualitative feedback from them).
4. Phased release with feature flags (quantitative impact).
5. Full release.

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

[jamesefhawkins]

Apologies for the slow feedback. Mini retro - there is a lot going on here, I should have just chunked my thoughts to get some out faster. Previously, I also wouldn't have anticipated you getting this done as I hadn't seen it as a part of your role to design the product this much, so I think I was reticent to put the time into QA'ing this properly due to concerns it'd never be implemented. I should have spoken up!

First impressions

I like the style. The larger graphics and reduced text in the navigation feels simpler and more focussed on the tool's functionality versus wordy-tiered menus that require more mental effort to process.

Palette

Whilst the sidebar feels on brand, the greys used differ and somehow feel a little softer than our typical style:

Could we fit better with the range of colors here? (I'm not convinced the existing palette will suit the app well here, but we could add to this more empathetically)

Fonts

These are different to the website and brand. Is there any reason not to use Gosha Sans for the headers?

If so, I'd push for Helvetica Neue given that's used for smaller headers on the website.

Icons

1 - the plane for retention seems particularly weird
2 - feature flags as a magic wand I think is also a bit weird.
3 - toolbar icon looks a little fussy, but not a big deal at all though

I think overall, the icons are a little bland but are passable - I suspect Lottie could work magic here.

Language

You've switched from 'People' to 'Persons'. I just really appreciated this change even though it's tiny, given that persons is better for a precise set of things.

Functionality

Actions and events and tags

The objective of this redesign is to increase retention by decreasing actions complexity. Here, I feel we have increased complexity by having actions, events AND tags.

• I believe these are the 3 key benefits of actions that we should be pushing: a) allows grouping multiple events (and of different types) with complex queries; b) helps clean and standardize data (fix typos, if the product or data changes, ...); and c) it works retroactively (huge aha moment, from a customer call).

Above is from #1755. I agree strongly with the benefits of actions here and that they're something we must retain, but I think all of these would be achieved through events with tags, as follows:

• allows grouping of multiple events - if multiple events have the same tag, they are grouped
• helps clean and standardize data - tags can achieve this as well as actions
• it works retroactively - if a tag comes from ie clicking on an element, then it would also apply retroactively to achieve this moment

I think this then frees you to call them 'events' which is an industry standard term. I would remove 'Live' from the sidebar and would replace with 'Events', with it as a list like:

Some_event | tag 1, tag 2, tag 3
Some_other_event | tag 2, tag 5

Tags layout

The instructions struck me as 'outsized' compared to the other places we give instructions. ie perhaps a small icon next to the header on every page requiring instructions would be more consistent. The explanation itself I think is good.

I would envisage the content of this page to be a list of all tags being used in practise and some ability to create a new tag which looks like it hasn't be prototyped yet?

Org / profile menu

I think it's a great thing to encourage people to carry one profile with them for a variety of reasons that I don't think are fruitful to debate here. I like the work to make the UX support this. There are a couple of things I'd change:

The user profile has a company 'PostHog, Inc' listed and two organizations. This is so you can switch organizations. I therefore think it makes more sense to have the organization as the "main" thing showing, then the username underneath. If the username is big, as you currently have, with small text as the organization name, it implies the organization is fixed, which it isn't.

I'd additionally add the global email used by the user added under their username.

The profile menu struck me as a little messy, but easy to solve:

• greyed out email above logout can go if you put this under the username
• we have two navigation elements but one as a button 'Organization settings' and one as a link 'Manage billing'. This would make me unclear if billing sits at org level or not (which it should). I'd suggest we remove the billing link entirely and this would sit in the organization's settings page.

[lottiecoxon]

This is some great feedback

First: I agree that the font's on the dashboard should share some Gosha Sans and Helvetica Neue !

Second: For the icons, we have three options, the first being the general icon aesthetic, e.g. the simple line vectors that have only one colour. The second option would be this type of icon-

Or the last option, following the route of these icons on the careers page-

My only worry with the more colourful options would be that these could be distracting and make the page too loud.

Concerning the tag alterations in the sidebar I may need to discuss with you about technical side of what this means as I am unsure and don't want to edit things without knowing what they do. But I agree with the concept of taking out some of the side panel options.

The instructions I am utterly confused by as I actually can't pin point where they are (that is probably me being a little tech blind)

And finally the profile menu I can change asap !

[lottiecoxon]

Are these the instructions you were talking about? @jamesefhawkins

[lottiecoxon]

Also what size is this dashboard supposed to be?
Comparing it to a generic desktop size its looking very small - and therefore all the text looks massive even though its 12-16 px in size- I assume the dashboard should be for desktop sizes not this smaller one?

[mariusandra]

Hey @lottiecoxon , apologies if I'm out the loop and didn't see some non-github discussions... but this issue was about the sidebar and other navigation improvements, not dashboards? I might be missing something :)

Dashboard colors seem to be discussed here: #1763 (comment)

[lottiecoxon]

Oh opps - I assumed because James had included screenshots from the dashboard redesign I assumed it was what we were discussing! Happy to move my comments over to the other ticket, but some of the comments are related to icons, type and layout so I shall keep those here for now

[paolodamico]

Thanks for the feedback @jamesefhawkins, super helpful! As discussed, I'll address these changes (the profile bar, fonts, colors, language, ...) after #1755 (I'll keep everyone posted here), as we need to ship only one of these changes at a time to reliably measure the impact, and the actions stuff is more likely to have the biggest impact.

@lottiecoxon regarding dashboard colors I agree with @mariusandra that it's better to keep the conversation in #1763. As for the icons, I like the styling of the new careers page but they should definitely be monochromatic. We can use a combination of library icons and custom made (especially for features like retention, actions or feature flags that it's harder to find a well-suited already existing icon). It'd be super useful to get your help on the icons and the tags/actions example section.

Finally regarding the size of the canvases don't worry about it, the screens are indeed meant for regular desktop sizes but I find it easier to design with larger constraints, so basically they'll just resize appropriately based on our current font sizes.

[Twixes]

My honest gripe with this design: it doesn't exactly look coherent and modern to me. The shadows are a bit random, rounding applied liberally, overall I don't feel like elements fit each other. Again, just my opinion, but I'd shoot for something cleaner (linked my proposal on Slack before, just as possible inspiration).

[paolodamico]

Thanks for the feedback @Twixes, definitely fair. Honestly this is a more about the UX impact than the UI, and I think that's where the most positive impact for this will come from. The shadows are not indeed standardized because to my knowledge we don't have a standard yet (other than Ant's, which we'd use for the implementation). To be honest I'm not a fan of this rounding either but it's what we use throughout the app (through Ant).

Other than those specific points, I think UI will come to more subjective points, I'm definitely very keen on discussing changes to it, we should only make sure we keep the same elements throughout the website and docs too.

[lottiecoxon]

@paolodamico before I get started making these up - are the general concepts good or bad? Be honest as I would like to have these designs done asap

[paolodamico]

Thanks @lottiecoxon! Hope we can get feedback from everyone else too. Sorry for the weird order.

• For events I like the last one best but I'm still unsure if this is the best option for events.
• For feature flags maybe have two different flags and even a way to distinguish them?
• Toolbar I might consider something less generic that we might reuse as the toolbar "logo" (something in between what we currently have with the PH logo and the generic tool icons).
• I visually like the actions icon. I don't think it's great at conveying what actions are, but also I cannot thing of a better alternative.
• I like the concept for retention!

[yakkomajuri]

As a general rule of thumb, I'm in favor of keeping these as simple as possible.

That means e.g. for the retention magnet we don't need the little bolt, maybe just the magnet.

Everything looks good to me with the exception of events (too crowded), and maybe the toolbar. The toolbar incites a feel of "settings" to me, which is not something I want to click.

[jamesefhawkins]

• I think the last events one looks too much like the way a database is often represented. It's close but not quite the same thing. Sorry that I'm struggling to come up with an alternative concept.
• Toolbar looks like a settings page
• Agree with comments above elsewhere

[paolodamico]

Ton of updates on this, opening for another round of feedback.

• Please review fully updated design on Figma.
• Navigation docs posthog.com#501 has been updated too with the new proposed navigation items (particularly based on Plugins #1828, Organization<>Team<>User structure (closes #1540) #1562, System Status page and API (#1812). #1875). Please note the design does NOT reflect the actual items for the sidebar. As the design will not be kept up to date, it's better to keep this info in our docs. Please share any feedback related to the actual items on the referenced issue.
• Icons are placeholders too while we have the finalized versions (see discussion above).

Changelog

• Addresses feedback (from this thread) from @jamesefhawkins & @lottiecoxon.
• UI style changed significantly based on input from @Twixes & @EDsCODE to be more on brand (and hopefully be more sleek and retro.). Huge shout out here to the amazing input from both, super helpful!
• Sidebar now reflects options from Discussion: Sidebar options #1898 where we now have 3 versions (large screen for ~15" screens & above, desktop for tablets & computers up to 15", and mobile. Note the breakpoints are vaguely defined here pending tests on actual devices.

Sneak peak 👇

Open discussion

• I want to push back a bit on the suggestion of having the company name be the main element on the top bar (as shown below), based on the following: a) it's more intuitive to have the name at the top (e.g. Google/Gmail, Segment, Stripe, ...); b) multiple orgs won't be applicable to most users; c) at this point it'll be hard to get users to upload the logo for their company and using a placeholder seems a bit confusing. POV @jamesefhawkins ?

[lottiecoxon]

Great feedback guys- could someone better explain to me what an event is? is it the data collected from the path that a user takes through the app/product... OR is it instead one click equals one event? I feel that the issue with these icons is my misunderstanding of the terms

[lottiecoxon]

Feedback please!

[paolodamico]

• Like retention & feature flags! Maybe feature flags could be crossed instead of together? Not sure.
• If we're going to start using general filled icon style in the sidebar (which I'm 100% for) I'd go with option A for actions.
• For events I think the first one is too convoluted. I like the second option but I get this feeling that it might mean something else already elsewhere

[lottiecoxon]

Thoughts?

Just realised that the magnet could be made smaller and chubbier so I will get on that now.

Toolbar icon redesign

[lottiecoxon]

The colours are inspired by the classic PostHog logo, and done in the 8 bit style, personally I think these are very fun, but unsure if they are too distracting - happy to do them in a more toned down monotone. Let me know chaps

[paolodamico]

They look so cool as standalone icons but I'm thinking that more monotone would be better for this use case. Also, I know this is just an experiment but I'm concerned about how this style of icons will look with the rest of the app using Ant's (might just be a matter of trying it out)

[lottiecoxon]

How is this more monotone version? or are the jagged edges still too distracting?

[mariusandra]

I think this is in the "uncanny valley" territory, where it might just feel like it's a bunch of non-retina gifs as icons from 5-10 years ago. So it's retro, but not retro enough to be oldschool cool 🤷

[lottiecoxon]

Tough but fair - I love the concept of them but without the colour they just look a little glitchy :'(

[mariusandra]

We could definitely try the colorful ones in an app... and if not directly, then behind an 🥚. Now we just need any version implemented to see how it feels like in action and iterate from there.

[yakkomajuri]

Direct feedback on my end is that I personally am not a fan of the pixelated/8-bit icons. The actual icons themselves I think are good though.

Final comment would be that with this black and white design (not sure if it will stay that way or not), the feature flags remind me of a race. I'd consider having one flag only.

[jamesefhawkins]

remind me of a race

I now can't un-see this, so I agree with this.

uncanny valley

Agree that the 8bit style in black/white looks like just some low res icons, which is sad so I'd be a thumbs down for this approach. I adore the colourful ones in isolation, but they are certainly unusual in an app - perhaps they'd be a little distracting in a way that'd detract from their usability.

I wonder if we could take inspiration from the first icons I ever used, which give me warm and fuzzy feelings, so taking what we have above and toning down the color scheme somehow?

Or perhaps making them more similar to the earliest mass popularity computer systems?

Both of above may just come across as "too styled". The challenge is doing it in a very lightweight, non-distracting way.

@yakkomajuri could you expand on what you don't like about them? Is it the combo of unusual design and colors that is too much, is 8-bit overdone, something else?

[paolodamico]

I think that for the sake of moving this along we could use the "modern" ones or not sure @lottiecoxon if you want to try @jamesefhawkins's suggestions first? I'm also down for @mariusandra's suggestion of putting the colorful ones as an Easter egg, we could even test the icons with a handful of users behind a feature flag as they're already done anyways.

[lottiecoxon]

I like the fuzzy warm windows icons - but won't they distract too much ? I tried to keep icons as simple as poss in this 8bit style. I would be up for feature flagging both styles (clean vector and 8bit) to see what works best - and if its not very useable -maybe an easter 🥚 could be a fun way to incorporate them/ or put them on some perch as they are cool

[yakkomajuri]

I like the idea of the feature flag from @paolodamico.

@jamesefhawkins In my case, it's really just a personal preference. I'm just not a fan of the "pixelated" look - it triggers PTSD with flashbacks to outdated uni software professors are adamant on using.

While many of us associate the look with "gaming golden days" and things, it just reminds me of software I didn't like.

But again, it's important to note that this is indeed a strong personal bias that I have. I also am a big fan of the spirit - I like that we try to be different instead of looking like every other startup.

[lottiecoxon]

Comparison

From original to 8 bit to redesigned vectors

Thoughts?

[paolodamico]

Love option 3! For the toolbar, maybe I would remove the squiggly line on the magnifying glass. Maybe do a horizontal funnel icon for "Funnels" (better represents funnels, plus we can keep the vertical version to mean filter).

Any additional thoughts @EDsCODE @jamesefhawkins @Twixes @yakkomajuri ?

[EDsCODE]

I also like the 3rd one! Agree with @paolodamico's comments.

Small comment: Is the person's icon crooked? (the neckline seems crooked to me) If it's meant to be, then it should be accented/made more prominent. It confused me a bit