PostHog Team Page Redesign

[lottiecoxon]

'We want to make it more welcoming and fun and sort of embracing the quirkiness factor'

Ideas put forward- add in illustrations of the team (avoid cute) but could be a unique way to show our quirkiness.

Potential style influences:

(Please ignore the title of the second set of illustrations - the colours are fun)

[lottiecoxon]

Website Example Research

So I have done some research on some very avant guard websites (mostly creative agencies) to give us some bold inspiration for our teams page.

1.

So this example uses illustrated characters to represent their team- this could work well for us as we are never all going to be in one place (for camera purposes), but this style makes it seem childish so we would need to avoid this.

2.

This example is much more abstract but I like the interactive nature of it. I also like how each person is not only represented as an individual but also who works with who in their various teams. -Something to think about.

3.

Simple illustrated faces, gives a more creative and laid back approach to the team page.

4.

These guys went for a range of different angles from photography to illustration - it feels subtly fun

6.

Fish finger is a fun website, with each employee has its own character in a setting - it's a big job but I love the animation on it.

7.

This concept is very sweet, but we would have to factor out the photography for illustration. This could give us a unique character profile of our team.

[embishh]

These inspiration sources are so good! And I agree with your comments –– I don't think no.1 from the post 2 is the vibe, too childish. I don't love the pixelated look of no.4 from post 1 either, because it's kind of hard to look at (not so pixel-y as to be 8-bit inspired, but also not clear...)

Also agree that illustrations are probably our best bet to look cohesive without standardized photos. I'm a huge fan of the colors in no.1, post 1.

Fishfinger is so cool! I think the animation is out of scope here but I was picturing maybe that sort of character-building concept. As in, the illustration incorporates biographical elements or artifacts from life (which is also the concept in no.7, but I'm thinking worked into like a character illustration).

So combined: something like a cartoon version of each team member holding/incoporating a significant thing or two, like idk a trumpet or a wine glass or whatever you're into?

[embishh]

Examples of some characters with hobbies or accessories or something:

1.

2. Of course not this childish, but I like the shoulders-up perspective

3. In general, I feel like the idea of illustrating some life detail or hobby could also add more visual movement to the page bc they aren't just static headshots & it shares about the team's lives

4. Some more stylized face inspo

[lottiecoxon]

Styles to AVOID

We want to separate ourselves from the rest

But

I do really like the fourth image you put forward.

And

I like the general concept for the team page, I will mock up some ideas today!

[lottiecoxon]

The body part I still don't have down yet - but this is my first attempt at @jamesefhawkins Debating putting in our PH colours to see if that brings out something more stylised and unique

[embishh]

Sorry, I should have been clearer that those first 3 were really for communicating the concept and not the style : ) Definitely on board with avoiding the typical aesthetic!

I like the James attempt! Especially the highlights/shadows.

Think it's a good call to just play around (whether that's with colors, poses, backgrounds?) until something feels the right amount of unique. An idea: some PH colors with maybe a couple complementary additions? My instinct would be to apply PH colors to clothes or accessory objects, but introduce some highlight/shadow colors that are a lil different like some greens or muted pink tones?

[lottiecoxon]

I tried this as well - I agree I will play around with a variety of styles until we find something we like

[embishh]

The eye color, & color palette overall here, are :100:

[lottiecoxon]

would anyone be against 8 bit portraits? I am aware that this art style isn't currently on the website... but it could be, and I feel that introducing some illustrations with 8 bit could be super retro and unique

[lottiecoxon]

I know this isn't me - but I drew a random face of the internet and I think this way of drawing our team gives it a nostalgic and professional feel - comparing this style to the others makes the other drawings look a little childish??

[lottiecoxon]

For comparison ^

[mariusandra]

Lottie's nostalgic look reminds me of this awesome game: https://thimbleweedpark.com/ - it's recent, yet tries to look like an old 90s adventure game.

[lottiecoxon]

To help it tie in with the rest of the website I could tie it in with the illustrations we already have going? Like this for example:

[embishh]

Agree that the retro-inspired 8-bit look ends up somehow more sophisticated, maybe because it's more unique(?) and facilitates introducing more colors in sort of an impressionistic way

[jamesefhawkins]

Agreed with 8 bit style. Challenge is to match it properly as you state LottieWe are 80s inspired to remind people of when they first used a computer and this does that really well!

[fuziontech]

100% on the retro 8-bit style. I love that. Also goes well with our pseudo retro styling for the webpage.

[lottiecoxon]

[embishh]

These are looking so good! I think on the Yakko one (and probably as a general rule for all), adding a white highlight pixel to the eyes would be nice even if it's not apparent in the original photo. Without any white/cream, the eyes look ever-so-slightly possessed 🙃

[lottiecoxon]

omg so true - I will give yakko's portrait some life

[lottiecoxon]

omg so true - I will give yakko's portrait some life

[embishh]

Scrolling is easier to implement than "read more" bc of some markdown annoyances (details in the PR). I tried it out and I actually like it more.

Especially if we move all bios to the left & all photos to the right (or vice versa), we enable a smoother user experience: someone reading only needs to keep scrolling with their mouse over one side of the screen, instead of having to click a bunch of buttons to collapse/expand sections.

What it looks like:

[lottiecoxon]

Slight Tweaks!

From the most recent PR of the Team Page there have been a few issues I have found that need addressing asap, I also think that the bold Gosha Sans is too loud in the bold? May be an idea to make the font regular..?

Also the images of the team need to be sized to all be exactly the same so we don't look like we haven't noticed this issue- It looks bad!!

Last thing- Is it possible to edit the scroll bar on each persons profile, it feels too dominant next to the text and the image, maybe making it thinner or less opaque could help?

[yakkomajuri]

It was redesigned. New issues can be opened for the tweaks.