MozillaFoundation / foundation.mozilla.org

Mozilla Foundation website
https://foundation.mozilla.org
Mozilla Public License 2.0
389 stars 153 forks source link

Redesign people box on homepage #226

Closed xmatthewx closed 7 years ago

xmatthewx commented 7 years ago

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

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

"Amy, CEO at Sprocket Factory"

screen shot 2017-04-19 at 4 18 51 pm
taisdesouzalessa commented 7 years ago

@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 commented 7 years ago

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

sabrinang commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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?

people-featured

KevZawacki commented 7 years ago

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

xmatthewx commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

taisdesouzalessa commented 7 years ago

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

people-hp

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 commented 7 years ago

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 commented 7 years ago

FWIW, I much prefer the original option.

taisdesouzalessa commented 7 years ago

@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: people-hp2

xmatthewx commented 7 years ago

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.

people-box-feedback

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 commented 7 years ago

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

screen shot 2017-04-05 at 4 27 32 pm

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

xmatthewx commented 7 years ago

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

taisdesouzalessa commented 7 years ago

@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 commented 7 years ago

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

xmatthewx commented 7 years ago

people-feature-box

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 commented 7 years ago

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

taisdesouzalessa commented 7 years ago

@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

image

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

image

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

image

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 commented 7 years ago

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 commented 7 years ago

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

V1:

image

V2:

image
taisdesouzalessa commented 7 years ago

@xmatthewx here are the revised versions:

V1 - with fade and tweaks:

image

V2:

image
xmatthewx commented 7 years ago

v2 is approved as our direction over v1.

New request:

gvn commented 7 years ago

Can we remove the fade on the role?

taisdesouzalessa commented 7 years ago

Here are the options, with some considerations:

V1:

image

V2 (without fade/with social media):

image

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):

image

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:

image

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Here are the latest iterations for this page.

DESKTOP:

image

MOBILE:

image
mmmavis commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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