Redesign people box on homepage

[xmatthewx]

Let's move toward something that feels like currently spotlighted people, rather than an evergreen collage.

• Could be similar to an earlier design, showing 2-4.
• Could just display name or title
• Could have context: "Advancing privacy" rather than just members in general

Not require, but nice to have: "See more members like these advancing privacy"

"Amy, CEO at Sprocket Factory"

[taisdesouzalessa]

@xmatthewx @hannahkane @sabrinang

Here are the options for this page:

• Option 1 LINK In this case I suggest we change the Projects' section too to align with the People's section treatment.

• Option 2 LINK For Option 2 I think if we just use "See more members like these advancing privacy" it may give the impression that those members are just related to the issue. To solve that, I suggest we show different issues and members each time the page loads. Prototype (reload the page to see members and issues changing): http://www.taislessa.com/mozilla/bkg-image/people-prototype.html PS: If we go with this option, I would like to reduce the margin top a bit to bring those above the fold so the change is more visible.

Please let me know your thoughts on those.

[xmatthewx]

These look great and are nearly done. Let's discuss at the end of stand up.

[sabrinang]

I like the streamlined structure, having less copy on the people and how projects mirror this featured structure in Option 1. This seems more flexible for mobile and maybe this structure avoids having text saved on images themselves and can have the text overlaying it for accessibility purposes.

I also like the concept of showcasing different issues and set of members in Option 2 when the page is reloaded perhaps projects can also be showcasing sets (example: mozfest, games etc.)

[taisdesouzalessa]

Thanks for the input here!

There is a new iteration on this page after I got feedback from Matthew:

https://invis.io/ZJ9YTAGEA#/226387325_Home_Page-Peoplev3

@xmatthewx - I think your suggestion of fading the people behind the box worked well here. It is an elegant solution for showing a variety of people without making the page look busy.

Let me know your thoughts on it.

[xmatthewx]

This is looking great. I propose that we reduce the copy in the box above the button and then share with Mark/Chris for feedback.

@KevZawacki – what do you think of this phrase above the button?

[KevZawacki]

@xmatthewx Looks fantastic! Might tighten the copy to: "Meet leaders with a shared mission"

[xmatthewx]

Great thanks.

@taisdesouzalessa – let's draft up a couple of options for how this appears on small screens. Since the box & button will be pushed down, a single row of small photos is probably best. I'm unsure.

[taisdesouzalessa]

@xmatthewx here are the mockups, updated:

DESKTOP: https://invis.io/ZJ9YTAGEA#/226387325_Home_Page-Peoplev3

MOBILE: https://invis.io/ZKAIKN1MN#/226606259_MOBILE-HomePage-V3 For mobile, I suggest we just display only 2 cards so the small copy of their roles is still readable.

[xmatthewx]

Looks good. Let's see what we hear back from Mark/Chris before we move onto implementation.

[taisdesouzalessa]

Based on our conversation today, here are 3 iterations of this screen:

Comments: I prefer the original (1) because it looks more complete to me - the whole last picture is fading and since it is cut on the right side, it gives a sense that there is more to see. The (2) makes me feel weird because we just see half of a person's face and that really bothers me (people tend to look at other people's eyes). The (3) is a bit better but I feel it gets too empty on the right side.

@xmatthewx @sabrinang @hannahkane let me know what you think of those options and what is your preference.

[xmatthewx]

I agree with the right edge. Of these 3, I also prefer the original. I do wonder if the left could start at higher opacity and work toward the left edge you have in the original option.

[hannahkane]

FWIW, I much prefer the original option.

[taisdesouzalessa]

@xmatthewx not sure I understood what you meant. I did 2 iterations based on my understanding. If none of them is what you meant we can sync tomorrow and I can create a new mockup:

[xmatthewx]

You did lots of good tests. I think i'm proposing something slightly different. invision live share keeps crashing on me. So i will try this: thumbs up = good, don't change. curious face = something new we might try.

note: I like the opacity on the right edge of the original. I'm guessed it's 20% in my note on the mockup. I realize now it's probably higher. I'm not suggesting you change that.

[taisdesouzalessa]

@xmatthewx thanks for the diagram. Here is the new version, based on your suggestion:

I like the fact the last 2 pictures gradually fade, looks nice.

[xmatthewx]

if you like it, i like it. good to go.

[taisdesouzalessa]

@xmatthewx here is this component together with the latest changes we made in the page: DESKTOP MOBILE

Is this feature ready to build (People component only)? Should I create a ticket for engineers?

[hannahkane]

Updating estimate based on April 10 estimate that includes new changes from exec team + estimate for both design and engineering.

[xmatthewx]

Request is to 1) change header and change button, removing other text; 2) test a fade/crop on both sides. No need to change people cards themselves, unless there are engineering concerns.

[taisdesouzalessa]

@xmatthewx I was wondering if you know which people will be featured in this box. For now I will be using placeholders.

[taisdesouzalessa]

@xmatthewx here are the iterations on this feature. I had a talk with @gvn and he gave me more context on the technical challenges that the previous solution presented. For these new versions I am using: squared pictures (as we have in the People page - to keep the same proportions) and the copy outside the picture to avoid text being in a fixed height component

V1

I am not sure this version works. I find that left and right fading gives the impression the component is carousel which can be misleading. I also feel that this solution may represent some challenges in terms of responsive design and implementation.

V2

The one side fade worked well in the previous proposal, when we had a white card on top that would treat the fade as background. The one side fading doesn't make sense without the card so my suggestion is to remove it.

V3

The gray in the background highlights the component, making the feature people more prominent and distinctive from the rest of the interface (I think once we give an aesthetic pass later on, we could add some texture in the flat gray background).

[gvn]

I'd still like to avoid the text fade, but other than that these options all will work much better with variable content. 👍

(V2 is my fave aesthetically FWIW!)

[taisdesouzalessa]

As per conversation with @xmatthewx here are the revised proposals of the component:

V1:

V2:

[taisdesouzalessa]

@xmatthewx here are the revised versions:

V1 - with fade and tweaks:

V2:

[xmatthewx]

v2 is approved as our direction over v1.

New request:

• Can we add social links below role? Will be busy, but sends a good signal to visitors and people featured.
• Relabel the button to "Meet more Leaders"

[gvn]

Can we remove the fade on the role?

[taisdesouzalessa]

Here are the options, with some considerations:

V1:

V2 (without fade/with social media):

As Matthew mentioned, I also find it is busy. I think it distracts the audience from the goal of clicking to see more people.

V3 (without fade):

I don't mind the versions without fade but my main worry is that if the titles get too long, they will push the button further down, making it seems lost and out of context. The fade offers the audience only enough glimpse on these people, motivating them to visit the "People" page.

Here is a version with a hypothetical long title:

That being said, I feel long titles will be uncommon (is this correct?). If this is true I am good without fading. If it is not true, I recommend fading.

[sabrinang]

Some thoughts on this @taisdesouzalessa: I like the simplicity of having no social icons and it feels more like a glimpse at the network (rather than heavily focusing on who the 4 actually are). I also like the fade to keep text visually consistent to frame the "meet more leaders" CTA.

[xmatthewx]

Including the social icons is important. A) It tells visitors that this site is a place where they can connect with real people, awesome people. B) It tells leaders that we aren't just borrowing their face and title for our benefit, but we are helping to amplify their work, elevating their standing on twitter etc.

We could mute the social icons a little as medium-to-dark-gray to reduce visual busyness.

I am fine with or without the fade. I don't see a technical blocker. I also don't think it's critical for design. Uniformity can hamper readability for the sake of aesthetics (consider justified text over ragged right). Various heights on this content adds visual texture that actually catches the eye and pulls it into the content. When I look at V1, I glance across everything and only catch a word or two from all the descriptions. When I look at V2, my eye bounces around and catches a couple words from each person. In both cases, my eye finishes on Meet More, but in the second case I have a better idea of what that button will lead me to find.

[taisdesouzalessa]

I haven't thought about the scenario B, thanks for the perspective here, Matthew. I think it is very valid.

I would like to use grey for the icons here so the interface gets cleaner and the primary focus is the button that leads to People's page. I'll do the mockup and post here.

About the fade, I feel that if we are adding the social icons we have to go with the complete information. If users have the opportunity to connect with real people from the home page it makes sense we provide as much info as we can. I would keep an eye for the descriptions though because long ones will push the button "meet more leaders" away from content, which makes the information seem disconnected.

[taisdesouzalessa]

Here are the latest iterations for this page.

DESKTOP:

---

MOBILE:

[mmmavis]

@xmatthewx how do we decide who to show on the people box on the homepage? If we are filtering by the featured flag, what do we do if there are more than 4 featured people in the database? Do we show them all?

@gvn @alanmoo I'm looking at fetch-json.js and I'm not sure if the featured=True param works at all (for "people" and "news"). It seems like the api doesn't support filtering by featured yet?

[xmatthewx]

The CMS supports sorting, so you should be able to grab the first 4 entries. Even better if you can grab the first 4 with featured true.

Featured entries are the big boxes on the People page with more details button. Non-featured people are still served up to the page, smaller boxes. Filtering by featured might be useful, but if you need to do that in the component, probably okay for now.

[mmmavis]

@xmatthewx ah now I see we are doing client side filtering for the People page. I'll let @gvn and @alanmoo decide if we need to update the endpoints in fetch-json.js then.

[alanmoo]

I'd say "client" side filtering is fine for now, since it only happens at build time, not end user render time.