Launch Toolbar cleanup

[Twixes]

Changes

Slight Launch Toolbar button and modal style updates. Replaced color logo with a rocket icon to improve visual clarity and avoid logo duplication in the sidebar.

[mariusandra]

Hey, the colorful logo was put there on purpose to attract attention and to get people to click on it. Making it less flashy is fine I guess.

I also have one inline comment about the changes to HogIcon.

[mariusandra]

I don't have anything against these changes to HogIcon per se, but I'd like to add some context. The component was created with the following goals:

• Base class for everything logo-related in the interface, should be wrapped further if needed.
• Drop-in replacement for an antd icon
• Can be with or without the "PostHog" text (the plan was to abstract this further into a <HogLogo /> and use that instead of the logo svg from /frontend/public)
• Ability to change the colors at random, so we could animate it at will
• Ability to add a className for extra animation (e.g. set some css transitions)

I actually wanted to expand this and also make an animation where these three colored stripes move up and down in a wavy pattern, while the hedgehog moves to the right, making it look like he's walking.

The idea was to try if this could be a nice extra "on hover" animation for the toolbar button, which should also start using this icon as well instead of the HogLogo that it now uses.

I admit that the naming of the component doesn't hint at these "future goals".

[Twixes]

Ah, I see how it could be extended.
I believe we shouldn't use our logo as an antd icon though – icons illustrate a UX point, while the logo represents our brand. It should generally only be present as an icon in the website header, possibly footer. And maybe as large scale backdrop, like in the Launch Toolbar modal.
Logo colors also generally shouldn't be manipulated. As in either blue-red-yellow-black or grayscale. Animated stripes would be cool though.

[mariusandra]

We could take this thought experiment further and replace the logo on the toolbar button with rocket as well then :).
The look of the button was what this "logo icon" was trying to replicate. I also tried with a white background + border to make it look even more like the toolbar button, but that didn't look good.

(To be clear, I have nothing against the rocket and what you describe with icons vs logos makes total sense!)

Re: the colors, I didn't really think of making a green hedgehog (thought it might be cool on st patrick's day). The idea was more to quickly rotate the colors (blue replaces yellow, yellow replaces red, etc) and try another "hover" animation. Though, something like this should be done in CSS and not with react props.

I'm not sure how strict we are with the brand though. In all official communication of course... but I think the hedgehog is a playful character that wouldn't mind.

[Twixes]

Well, yeah, I'm not really sure how strict we are either. We should have a posthog.com/branding page for that, with guidelines plus materials in SVG/PNG/PDF (for our and media use). Some strictness might be good until then though.

How about this? I think it would actually look good, since it'd clearly represent the toolbar and wouldn't look like just an extra logo.

[mariusandra]

That does indeed clearly show what you're getting into!

The only things is that it makes this part of the sidebar looks rather unaligned:

I don't know if there's a good way to make this look nicer. I have two left hands when it comes to design :).

[Twixes]

Yeah, it's too wide. Actually it's misaligned in the current form (color logo without background) as well. It's just hard to see because the colors blend into the dark background. That's why I thought we should just stick to antd icons all the way in the sidebar.

[lottiecoxon]

I am unsure if I will ruffle any feathers here but I actually prefer the rocket for launch the toolbar, I think we could make it stand out more if it was a colour (orange/yellow). Plus I LOVE the idea of the hedgehog spikes moving to make it look like its walking - genius.

[mariusandra]

I had a call with a customer today and he couldn't tell what the "Launch Toolbar" button was... and thus never clicked it. I'm not sure what changes would facilitate that understanding.

Like I said before, I'm not against the rocket... but now I'm thinking we should even take a step back and do something completely different. I'm now thinking of a new "homepage" view that opens when you load the app, presenting the user with a few options that they can do in posthog. Options like:

• open your site and explore what your visitors do (plus screencast of someone using the heatmap)
• analyze your trends, analyze your user retention, etc (with some nice pictures of different graphs)
• see where your visitors drop off (funnels)
• create cohorts
• etc

This might be somewhat connected to the (stale?) #916 onboarding widget task.

[lottiecoxon]

I think that would be a really good way of letting people know what we can do from the get go, kind of a mini demo/taster of what you can do with PH. What kind of layout were you thinking? I can always have a go at researching and mock up something this week if you would like?

[mariusandra]

I was thinking of something like this:

(I have 2 left hands like I said above :D)

[jamesefhawkins]

I'm now thinking of a new "homepage" view that opens when you load the app, presenting the user with a few options that they can do in posthog

Thoughts from me as a user: I always feel like I should be able to click the posthog logo to go to some sort of homepage, but obviously there isn't one. That said, perhaps annoying not to have a couple of key graphs on the first page on login - ie when i first log in, what I want is immediately to see how many DAUs we had... so many apps I end up going to https://app.annoyinghomepageofapp.com/?showmesomethingicareabout=true to get around this.

I find deel (our contracting platform) do a nice job of giving me some basic handy intel AND making it easy to do what I need / learning what the product does:

[timgl]

Yep, combined with Insights History it could also show you your last visited graphs and dashboards. I like this idea a lot

[EDsCODE]

agree with the homepage above. without a coherent home page to land on, the app feels very unwelcoming. features are fairly powerful but it's definitely more of a "go figure it out" experience than a "let me help show you the way"

[Twixes]

I'd say we could merge this for now, and put a larger overhaul of feature discoverability on the roadmap for a bit later.

[mariusandra]

Hi @Twixes , what's the last status with this PR? Is it this screenshot:

I'd be fine with merging something like that.

However opening the PR locally I still see the rocket:

It looks like a bell to me now... and after having users explain on calls that they don't understand what the button does as it is now, I don't see how changing the logo to a rocket improves clarity in any way. It probably makes it worse.

...

Taking a step back, I think we have spent too much time in this PR trying to fix something that wasn't really broken... and then arguing about subjective things that have no clear answer. Good ideas came out of it (e.g. the homepage idea that should be specced out), so it's not time lost.

However without a clear issue to point to nor any clear UX feedback that was the target of these changes, this conversation felt really slow and vague.

So, I don't know. I wouldn't merge in the rocket, as it doesn't improve anything IMO.

[Twixes]

There are a few modal fixes in here as well, so I can revert the button to the current look or make it toolbar-like the way I showed before. Which would be better?

[mariusandra]

Let's make it more toolbar-like and run with that for a week to see how that feels and how it will evolve.
It should at least signal the intent of the "button" better, which is what we need.

[mariusandra]

Totally off topic again... 😄

What about later adding something like this:

Basically this 200KB gif (or something better) in a Tooltip:

The same could be done for all other menu items as well?

To be really fancy and 💯 💪 , we could even render tiny versions of the pinned dashboards in tiny preview windows. 🤩

[Twixes]

This looks pretty good actually, I think. Toolbar scaled down 1:2.

[Twixes]

I feel like such a tooltip would be too loaded. Maybe just a quick explanation of what the Toolbar can do, with a "See what it can do for you" type link to a page showing such animated examples.

[mariusandra]

Good for me to merge!

Re: tooltips - yeah, you're probably right, it's a bit too much and such effects will probably get annoying after the first few times.