QA > Hierarchy of people's org, job title + issues unclear.

[flukeout]

Consider the following layout...

• It looks like there is an org and location (Hive / NY)
• Then we have key issue areas
• Then we have their actual job title and org below that.

Seems a bit strange. It also seems like the org they are in officially endorses those key issue areas.

Anyway, happy to brainstorm at some point, but wanted to point out this stuff as it seems a bit confusing.

I guess it makes these people seem like they have two different jobs and roles, only one of which lists the location.

[hannahkane]

Note from backlog grooming meeting: consider removing issue areas or adding context (e.g. "Issues Hillary cares about")

[hannahkane]

Estimate (8) is based largely on the conversations we expect we'll need, rather than the work itself which might be simple.

Also note, this is related to #410 as well as some pending changes from @jessevondoom.

[taisdesouzalessa]

Assigned this task to Sabrina: we talked and it seems to make more sense just one person takes care of the 2 changes in people's page :).

[sabrinang]

1 - consider removing internet health tags (initially these were included to provide context in which areas they care about and be sorted by but we do not have that functionality)

2 - make them look more like tags and have them be filterable (like in pulse)

3 - differentiate internet health tags by making them look like links and be interactive (sort by internet health issue). This was the initial intention with these tags but did not get implemented.

---

The information itself is a part of why this is confusing together as well. Information we have:

• Photo

• Name

• Contact link (Twitter or LinkedIn)

• Mozilla Network Affiliation

• Location (City, Country)

• Internet Health Tags

• Partner Org Logo

• 3 Bullet Bio (short summary); This often contains the Title 1/Org 1, Title 2/Org 2 or Other Affiliation

Extra Feature Card Content:

• Quote (134 characters max)
• Interview (see story engine)
• Projects (see pulse) related to issue https://github.com/mozilla/network/issues/410

The short biography section has additional titles, orgs, partners and roles outside of the network and may compete with the the Mozilla network affiliation right above. A reader might expect this description to unpack the network affiliation instead of describing what they do outside the network. We can consider labeling these sections so it has context to help understand this info and or the content itself.

[sabrinang]

@xmatthewx @taisdesouzalessa feedback or thoughts on this people layout or content?

[xmatthewx]

@sabrinang - I think you're right – moving Issues below would help a bunch. Also good to move partner logo back under thumbnail, now that we are no longer flipping the card.

• You have more contrast in type weight and color than we see on production. If we implement this for real, we might need to adjust more.
• Later, we can add real tags for filtering when we have more engineering time. For now, what about just listing them with "Interests: ..." like mockup?
• The two yellow spaces in screenshot below are different, but almost the same. Consider making the first smaller, second bigger. Your call.

Please note: I'm using Papyrus to make it crazy clear that I put zero minutes into typography and layout. Just a demo.

[sabrinang]

I iterated on the partner logo position and went back to pairing it with the short bio in grey since they are related and it provided context for the logo on both small/big cards. I used the list style of "Interests:" beneath but in the future we can use tags when we have more engineer time. I also adjusted the spacing so the sections are grouped and more defined.

Here are more examples:

As for the contrast in type weight and color, in sketch we have the same type styling classes as we do in production but it is a browser rendering issue overall that is making it look chunkier and I am using Zilla in the mockup rather than Arvo seen on production for headings. We can file a separate issue for font smoothing (@taisdesouzalessa shared a useful read about it with me). See without / with font smoothing:

[sabrinang]

@xmatthewx feedback?

[hannahkane]

hey @sabrinang - I just wanted to weigh in briefly here. I really like the new treatments for the interest areas. I think both the interim and the long-term solutions are upgrades from what we currently have.

I think we still haven't addressed parts of the original comment. Pairing the Mozilla role and the location is confusing. I think it might be better to include their location after their professional affiliation. (So, in the case of Karolina, it would say, "Policy and Advocacy Associate, IFLA; The Hague, Netherlands".)

I also wonder if we could do more to explain the fields, especially the Mozilla role ("Copyright Partner"), which I think is the least self-explanatory. Maybe a field label, or an icon?

[xmatthewx]

Thanks @hannahkane. This all makes sense. @sabrinang - you've done well. There's a lot of different info to organize. This isn't easy.

• An icon next to location could be cool.
• Labeling Role might help too as Hannah suggests.

Also: I think we can greatly improve the content/copy used to describe roles. Some are totally unclear people who aren't insiders. https://github.com/mozilla/network/issues/521

[sabrinang]

@hannahkane I iterated on a few options from the feedback:

• relocated location to the bottom near “interests” so it is more separate from role and adding mozilla wordmark as a label for role (may be redundant in some cases if users type Mozilla in their network role already)

• including labels “network role”, “location”, “Affiliation” <— “Affiliation” label may not work since some examples use they grey text to describe their network role (like in the feature card example below). This section is not used consistently to use a clear label.

• including icons for role (mozilla m) and location (map marker or globe icon in last example)

Thanks for filing the content issue @xmatthewx as this ticket is heavily tied to how we write/gather the descriptions itself and it will help inform what content goes in the grey text/short bio area that may cause the most confusion.

[hannahkane]

Thanks, @sabrinang, for the speedy iterations.

I really like the icon versions. I think the map marker is super clear. I'm not sure the "m" will be a perfectly intuitive indicator of the Mozilla role, but I think that can be largely addressed through the content itself, and I think it's preferable to trying to give the field a name.

Will comment on the content questions in the other ticket shortly.

@xmatthewx or @jessevondoom or @taisdesouzalessa - do any of you have opinions on the above?

[taisdesouzalessa]

I agree the icons work great there :). Easy to scan and find the info at a glance. I prefer the icons than the labels. I agree the "m" can be a bit confusing, although once the user gets one, they get all the cases.

I was wondering if we could always add Mozilla in the relationship with us?

For instance, we have "Mozilla Science Fellow" for Teon Brooks, couldn't we have "Mozilla Open Web Fellow" for Éireann Leverett instead of just "Open Web Fellow"? And Mozilla Copyright Partner for Karolina Andersdotter? And Mozilla Staff instead of only "Staff"? I think it is something we could solve in the content side as well. We could keep the "M" as icon and also make clearer in the copy their relationship with Mozilla.

[hannahkane]

@taisdesouzalessa - added your comments to the doc where we're discussing standardizing the roles.

@sabrinang - let's go with the icon treatment, and assume we're going to solve the Mozilla relationship through the content strategy.

[jessevondoom]

I'll +1 the icons. Karolina's profile feels far more parse-able now and I think it works. By itself the icons don't scream "Mozilla relationship" but I think the icon plus the context combines to make it far clearer than it is now.

[xmatthewx]

I'll call this ready for engineering. @sabrinang plz add any info or files required. And let's open an engineering ticket....

edit: i dont think we need to wait for new roles language to build this.

[sabrinang]

engineering ticket opened here: https://github.com/mozilla/network/issues/565 - closing this ticket.