Design featured profile component

[xmatthewx]

Our people page includes basic profiles and a few featured profiles. Featured profiles also include an interaction to "see more". Let's design and discussion options.

[sabrinang]

Here are three versions of profile cards: 1) Simple - The main style of card we can use for bio (if we need to have a variation it can look like the version on the right, more of a list style) 2) Featured - This style can feature a quote as well as bio info. If the image is not optimal to be cropped rectangularly, there can be colour/pattern in that block (see right example) 3) Interactive - If there is a lot of content to showcase such as bullet points we can make a "double sided card" to feature more stuff

See the cards as a example collection below

[xmatthewx]

Thanks @sabrinang. Nice progess. A bunch of feedback below. I'd prefer to share over vidyo, but these seemed faster. Let's discuss anything that isn't clear or if you have a different perspective.

Simple

• The simple card looks really nice.
• Let's left align social icons. Centered is floating oddly.
• I'm curious about the landscape orientation (1b). It's less dense, which is good. Text column would sometimes extend below the photo, which is think is okay since background is white.

Featured quote card

• These don't emphasize the quote enough. Should really pull people into the words.
• Person on the right looks like they're on a popsicle stick. 😄 🍭 Yum.
• For color, can we try adding a bright accent instead a muted background? Feels muddy.

Interactive card

• On mobile, we can flip the card and extend its length. No problem.
• On desktop, we can't change size of the card. We'd have to do a light box (which can be annoying). Unless................

2 column layout

• It would be good to look at an example collection with 2 simple cards per row. A featured quote could occupy the whole row.
  • It might be the wrong answer, but 4 columns is very dense and we should test an alternative.
  • Also, featured cards could become taller after someone taps view more, without disrupting the layout.

[xmatthewx]

Let's discuss the design of this page before working on the next iteration.

[sabrinang]

Here are some iterations of cards I explored:

Here is a layout with 1 basic, list style cards and 2 types of full width cards (which can be used to accommodate oddly cropped photos or higher character count quotes):

[xmatthewx]

How are you feeling about this overall? I think it's great.

• I like the final mockup.
• I like the flexible featured card for long/short quotes
• I like the type/hierarchy, layout
• I like all the white (keeps focus on content, makes height flexible)
• I like the More details/See quote button and position. I worry that it's a bit hard to see, but I really like the layout. Can we try that with a bright color? It would call attention and distinguish it from our other headers that have a similar treatment. It could be blue, but I think other colors could be neat. What do you think?

[sabrinang]

I would keep the divider bar black and we can bring in colour in subtle ways but wouldn't go to crazy on the colour as the photos brings in in on this page

I think the blue version would make it seem most clickable and distinct from heading styles though

[xmatthewx]

I like the blue option. No need to go crazy, I just meant the button could be blue or green or orange or whatever. Black just doesn't seem like a button, especially attached to the bar above it. I also like how the green quotation mark adds a gentle splash to the page. Is both too much?

[xmatthewx]

Can we left align logo under picture? We aren't really using center alignment on the site elsewhere.

[sabrinang]

After doing some iterations on colour, I find they grey accents with blue button seems the most effective for hierarchy and it is not dependent on theme colour (example here is lime green): 1) grey accents + blue button 2) theme colour accent + blue button 3) theme colour accent + button with white text 4) theme colour accent + button with black text

Also exploring treatments for selected category states, I find that yellow provides good visual contrast and suggests it's a clickable element. These tags can be selected in multiples and when clicked again it is unselected. If all is unselected, it will default to "all" view.

I find that when it is in a black box it looks more like a heading and when just bold text it might not be enough contrast.

[taisdesouzalessa]

This page is now in InVision: https://invis.io/ZJ9YTAGEA#/216715363_People

Now that we have another treatment for cards, the animation that flips the card doesn't seem relevant anymore. I would like to suggest other type of animation (I will adjust the timing, just wanted to put a rough version here to see what you think). I like the animation in the blue box because it indicates to the user that the label has changed. I think it is a nice choreography...of course it works both ways, just showing one transition here.

[xmatthewx]

Nice all around. Feel really good about this page.

I think we are there enough to begin implementation. @gvn – content is in a spreadsheet: https://github.com/mozilla/network/issues/5#issuecomment-277844428. Matt/Christine offered to shorten some of the longer quotes. Other than that, everything in the sheet is approved and good to go. We can pull in quote edits later.

[prefontaine]

I'll go look at more quotes. Thing is some of the newer ones not approved yet. Please please please double-check that the approved column on the spreadsheet is filled out.

Re design. I LOVE IT. The only thing that is off for me is the LinkedIn and Twitter logos for each profile. Feels like they might need to be contained. Maybe using the /////// treatment?

[xmatthewx]

Thanks @prefontaine. I'll add a note to the comps. Closing this as done. We can file specific bits to follow up.