Mockup app interface in new retro style

[timgl]

@lottiecoxon It'd be very interesting to see the PostHog interface (probably a dashboard) done in the new retro style. The content should probably remain the same, but the colours etc could have that print-y retro feel that the new website has.

[lottiecoxon]

[mariusandra]

Hi! Overall it already looks more polished and with a more distinctive feel than the current dashboard.

There are some usability things that I can immediately point out though:

• There's not enough space inside the boxes for the graph element. The graphs can get pretty visually heavy and if there's more space to show the data, the better. The current dashboard items seem to be at the limit of what's visually still ok regarding the spacing and what can cram as much information there as possible.
• The text in the menu is a bit hard to read? I think the grey grid clashes with the white text a bit. The grey should blend in to the blue more?

And for a more general point.

The entire app.posthog.com interface needs a good overhaul... and modernisation to our new brand identity.

We are using something called Ant Design for our user interface. That's the library that gives us the design and interaction for all the buttons, text fields, menus, dropdowns, etc.

If we change any of those elements (e.g. the color and shape of the buttons for example), then it's best to make the change so that every button everywhere in the app changes. Like for example we won't just change the sidebar for the dashboard page and leave it looking the same elsewhere.

Ant design allows some level of customisation with the design of the elements, so it's worth having a look through it.

Taking that into account:

• I'm not too convinced of the buttons. They are cool and really go well with the retro style, but seeing buttons with such strong shadows everywhere in the interface might be too much?

[jamesefhawkins]

My immediate reaction was that this is cool, matches the new design but perhaps is a tiny bit too stylized. I'm very curious what others think as that's an entirely subjective point of view.

• the shadows for the dashboards are unusual... is the goal to make these look like mini monitors? I'm a bit conscious they take up quite a lot of space and perhaps make it feel too stylized. Does it look any good without them?
• the textured background behind the left hand menu makes the readibility slightly worse - could we reduce the contrast between two shades of blue so it's more subtle? I'd be curious to see what this looks like without the texture too.
• 'New features' in green looks mismatched. Maybe an alert icon, or something else should go there.
• Should the 'lottie@posthog.com' should become a mini profile image instead (we don't have the ability to edit/upload images yet, but perhaps a blank placeholder face image would reduce the amount of text-heavy buttons at the top right for now?)

[lottiecoxon]

This is really great feedback Marius, I will take that into account and make some edits!

James - I will try it without all the extra shadows (may have got carried away) and textures - I tried just adding noise but the plugin on Figma doesn't work for me- could someone else maybe give it a go? Hence why I went for the half tone pattern that is a little more contrasting. I also like the idea of a mini profile in the top corner! will give that a go now.

[lottiecoxon]

[EDsCODE]

this is a solid application of the brand colors into the interface! the one line I would point out is designing with a balance between beautiful vs usable. For example, referring to the first mockup with the shadows on the dashboard items, I think this gives the whole page a really intriguing effect because it looks like the items are holes in the page which i personally find pretty fun. But even if they're cool what might happen is that the designs get exhausting to look at/interact with. if I'm visiting this dashboard multiple times everyday, i would need the interface to be more pragmatic. The novelty of a caved in dashboard item might wear off very quickly.

this is partially the reason why most widely used/available apps never really have UIs like those you might find on dribbble (which are really awesome to look at imo but maybe not particularly awesome to use).

I think this applies to several of the comments above: the aggressive shadows on the buttons and the gridlines on the sidebar sell the retro style very directly at the cost of usability/repeatability (ref: gridlines make text difficult to read, deep button shadows will require a press animation that could start to feel cheesy especially if someone is pressing it often).

in any case, I think this is definitely the right direction with colors and vibe and we'll just have to make sure the details still give way for functionality. once again, just an armchair designer thoughts!

[Twixes]

This last one's elegant, although IMO we should

• drop the shadows altogether,
• have the profile icon a bit more in line with the rest of the buttons,
• make the sidebar bolder color-wise to match the bold logo.

[yakkomajuri]

I think we've moved this discussion to other places where it's more relevant.

Feel free to reopen if I'm wrong.