Fairlearn Redesign: Illustrations

[nessamilan]

Discussion thread to vet and discuss themes to be illustrated on the new Fairlearn site:

• General themes
• Sociotechnical concepts
• Specific examples for use cases / real world scenarios
• More...

[nessamilan]

Kickoff Discussion (2/2/21)

Key Takeaways

1. We want keep the idea of people/humans as the core of the illustration language. This may also include:

   • abstractions that imply human interactions or people
   • meaningful embellishments and data graphics (can be symbolic, don’t have to be literal)


2. Consensus that we want to be inclusive, representing both the human involvement with Fairlearn, and those who are eventually impacted (downstream) by the decisions made with Fairlearn.

Fairlearn.org - Current Homepage Graphics

What we like:

Human presence

Inclusion of a disabled person

Notion of analytics / human decision making

What we don’t like/previously known issues:

Not inclusive in terms of skin tone/race

Feels white collar: people look similar and therefore do not represent a broad range of people and physical attributes (ethnicities, physical sizes, clothing, and other features)

Analytics/data graphics don’t make sense

Posturing of certain characters comes off as passive and inappropriate

Illustrative Concepts

Sociotechnical concept is misunderstood how can this be represented better? Brainstormed ideas:

• Harms to people
• Human in the loop
• Charts + people in the loop that are making decisions, data is representing people
• Themes might be general or scenario-based/real world examples, i.e.:
  • Quality of service
  • Banking
  • Police services

https://weallcount.com/

Example with illustrations and graphical elements we liked

• Relationship between illustrations and simple, clear messaging are strong
• A wide range of people are represented, both literally and more abstractly in terms of physical attributes
• Some people groups tell a story (“Community build resource” img, “Ally” img) while others are more decorative and playful (“Data” img)
• Human theme carries throughout without always using people
  • Hands used in logo and elsewhere interacting with objects
  • Fingerprints
  • Environments
  • Objects that imply strong human interaction, i.e.:
    • stethoscopes
    • pencil + paper charts
    • building equipment
    • lunch trays (group training/workshops)
• Representational graphics for data are purposeful and in most cases closely tied to human elements. Article images feature this nicely:
  • Yes! You Can Average Averages
  • Algos Don’t Do Anything
  • Maps for Equity
  • Why Big Data Needs Small Data

[nessamilan]

Placement for Illustrations

Proto

Illustration placeholders are indicated by the pink boxes in these wireframes:

https://www.figma.com/file/Okm1DcKItqUAWRDWFUlJ7n/?node-id=2%3A2

Pages

Homepage

Learn landing page*

Community landing page (embellishments)

Get started*

*Templates were reviewed but reviewers agreed to explore new concepts for "learn" and "getting started" pages. This does NOT impact illustration work to date

[nessamilan]

APRIL-JUNE 2021 UPDATES

Over the last few months we've reviewed illustrations with stakeholders of Fairlearn, volunteers on the community calls, and internal Diversity & Inclusion groups at Microsoft.

April: Moodboards

MSFT_Fairlearn-MoodBoards_Styleframes_V1D.pptx

---

May: V1 Explorations

MSFT_Fairlearn_Styleframes_V2.pptx

“In the room” we did not have a diverse group: female to male ratio was way off, and a majority of the group was white. We also didn’t have anyone representing LGBTQ. We came to the consensus that this will need a much broader audience review. We added 2 variations to review with a broader audience: Fairlearn Illustrations V2.pptx

Key Takeaways

• Prefer for realistic skin tones, and stylized details (not as extreme as slide 3)
• Represent wider group of ethnicities
• Balance of cultural attributes within each character
• Continue to review iterations with wider audiences

From Microsoft internal D&I groups:

• Preference is realistic skin tones, and less stereotypical shades. In the context of BAM, “blacks have a wide spectrum of tones” that can be explored. If more than one person of the same ethnicity is shown, change it up.
• If detail is included, make sure it’s accurate. Example: if you draw a black woman’s hair, make sure the curl shapes, volume, etc. is realistic.
• Feels like some of the characters are “too western” or “too ethnic”. Prefer a balance within the same character.
• Strongly feel those from other MS locations, i.e. China, India should review for additional feedback. Believe that each culture will have detailed feedback for their ethnicities
• Think the only way to achieve what we want to achieve is to allow open source community to swap variants given their use-case context. If a data scientist is pitching to use Fairlearn in their workplace, to a particular audience, they may want to swap out characters more representative of their culture, i.e. if they want to be less US centric.

Next Steps
Overall the preference was to move towards a playful style to include the following:

• more realistic/detailed features (see example 3 above)
• broader representation: ethnicities, attributes, abilities
• represent people how they really are in their environment including modern clothing, natural poses, and the diverse range of other visual attributes

---

June: Sketches

MSR FairLearn_Layout Skeleton and Character Designs.pdf

Explorations based on a "starter" matrix of possibilities recommended by Fairlearn leaders and community:

5 character ethnicities

Black, African American, or African Ancestry
Middle Eastern or North African Ancestry
Asian: East, South, or Southeast Ancestry
Latinx or Hispanic or Hispanic Ancestry
Pacific Islander

• Optional: White or European Ancestry

2-3 variations for each character

Gender: male, female, non-binary
Skin tones: shade options per culture
Body type: height, weight, shape
Abilities: hearing aid, wheelchair, pregnancy, broken leg, etc.
Age: no children, range of adults
Dresswear: balance cultural wear and general wear within the same character: i.e. hijab or African headdress with a modern outfit.

Additional references:

https://apastyle.apa.org/style-grammar-guidelines/bias-free-language/racial-ethnic-minorities
https://apastyle.apa.org/style-grammar-guidelines/bias-free-language
https://www.blackillustrations.com/illustrations/the-office-hustle-illustration-pack-official
https://www.blackillustrations.com/illustrations/the-remote-work-illustration-pack
https://www.blackillustrations.com/illustrations/life-is-good-illustration-pack

[nessamilan]

OCTOBER 2021 UPDATES

Considering all review cycles and feedback to date, new illustrations are available for community review. Microsoft's Inclusive Photography collection was referenced for inspiration to select a final set of representative characters. Examples in context shown here:
ms_Fairlearn_Homepage.pdf

V1 Illustrations and color palette explorations:

Questions to Reviewers

1. Scene composition: do the scenes accurately reflect the content?

“[Person A] shouldn’t hold a phone, maybe they hold [ABC]”
“We should include remote workers. Can we show someone in a video call?”
“There are too many devices”
“Characters are reflecting data scientist interactions more than the end receiver of Fairlearn’s benefit. We need to recalibrate”

2. Are there any other objects or symbols that represent Fairlearn better than what you see? For example, light bulb in image 2, screen content on image 3 and 4, folder in image 5. In previous sketches we had code symbols as decorative elements.
3. Subjective opinions on style? (i.e., too cartoony, exaggerated, not enough detail, etc.)
4. Color palette preference (subjective)?

[nessamilan]

NOVEMBER 2021: Illustration Review - Final for V1 set

@MiroDudik @mmadaio @LeJit @hildeweerts @adrinjalali @lisavibanez @riedgar-ms @romanlutz and anyone else from the Fairlearn community!

Feedback requested in this discussion by end of day Tuesday Nov 30. This is the final review for our V1 set of illustrations that will go live with the new website. Feedback given after November 31 should be shared here, for future illustration volunteers! The more, the better!

ms_Fairlearn_All-Page-Templates.pdf
Can you spot our new mascot? :)

1. Please vote on your color palette of preference (please disregard UI theming at this stage):

   • Blue palette: reinvigorates the familiar Fairlearn brand color with bold, brighter colors, a dynamic range from blue to teal, and classic neutral grays and blacks
   • Alternative palette: showcases a sophisticated real-world vibe with a soft palette of complimentary colors from blue-gray to peach

2. What do folks think about the Homepage graphics in Getting Started and the Case Study sections? Do they read clearly and relevant? Are there other ideas that may resonate stronger with our audience?

3. Please share feedback on ANYTHING that comes to mind!

[adrinjalali]

I like the blue column, but I just like blue! I'm not a UX designer, I have no idea really. They all look good.

[hildeweerts]

1. I also like the blue column the most.

2. I really like the case study illustration! The "Get started" illustration might give the impression that Fairlearn is primarily a dashboard, even though we've actually removed the dashboard from the library. I'm also not 100% sure what is meant with pre-populated data (and why it is in an excel sheet, haha). It might make sense to add more 'code'-like visuals and remove the texts?

3. I've mentioned this a few times before, but in my view the diversity that is displayed feels a bit US-centric. I personally would have really liked to see some more North-African/Middle Eastern and (South-)Asian representation. I understand that at this point there is probably no time to add new characters and it is already much more diverse than many things on the internet! But I did want to mention it, in case we want to add additional illustrations in the future.

In what format will we get access to the illustrations? Perhaps we could create a separate repo in the Fairlearn organization with "corporate" identity materials that allows us to mix and match some of the common illustration components like the circles-background, characters, etc.?

PS. #bearlearn

[LeJit]

1. I like the blue column too. The brighter colors make the darker-skinned people stand out more against the background.

2. I agree with Hilde on the "Getting Started" illustration. I think the "Pre-populated data" and "Custom data" should be removed and the screen should be similar to what the guy in the "case study" section is looking at. We could potentially swap their screens and have the guy in the case study section look at a dashboard, and have the "getting started" section screen feature a code editor.

3. Bearlearn! Bearlearn! Bearlearn!

[MiroDudik]

1. I prefer the blue palette over grey+peach. However, while I generally like the blue palette and I like how it's reflected in illustrations, I think that the intensity of the cobalt blue background in "Improve fairness of AI systems" is too much. I find it overpowering to the point that I have a hard time paying attention to the text / illustration. (Secondarily, it seems to blend with the illustration--e.g., the blue jeans in the first illustration connect with the background. Not sure if it's intentional.) To a somewhat lesser extent, "Join the community" background also feels a bit too strong.

2. Agreed with others re. "Getting Started" illustration. I could see either going with something similar to the "case study" illustration, but it might also work to go back to something like the depiction of the Install button from Round 1.

[nessamilan]

Hi all!

Thank you so much for all this feedback! We collected it all, and iterated to address a few key takeways from your comments. Please let us know if there is anything glaring for the illustrations that we should address tomorrow, otherwise I think we've arrived at our V1! Thanks everyone for your continued engagement!

ms_Fairlearn_AllPages_V3b.pdf

• Representation for North African/Middle eastern ethnicities: we added a very cool character representing this group with modern everyday wear. Check out the Learn Page, pdf page The returned best_classifier  #3. All of our characters are super cool, I totally see all of them hanging out!!

• Unclear symbolism of Getting Started section's illustration: We removed labels and some of the granular details that didn't resonate, i.e. charts and graphs, folders, etc. The new approach nods to the terminal experience with a generalized documentation browser page that we hope is generally enough to scale the idea of getting started for the near future.

• Unanimous decision to go with blue: we are keeping the blue. The cobalt has been toned back as large section backgrounds, but we kept it in for UI and illustration/character accents.

NOTE: The background teal will be readdressed. As is, black text on this light teal does not pass accessibility. A bit of a bummer but we'll scale it back to be lighter.

.

[nessamilan]

DECEMBER 2021: V1 Illustrations delivered and ready!

@MiroDudik @mmadaio @LeJit @hildeweerts @adrinjalali @lisavibanez @riedgar-ms @romanlutz and all:
Great news! We have our first set of illustrations in-hand!

A new issue has been created with all assets attached:
#1002

I have not noted any theming/color updates as we have a few options to choose from — this can be finalized once we start the redesign. In the meantime, in the issue I've specified where we can place some of these assets on our existing homepage.

New color explorations:
ms_Fairlearn_Color Options_V3.pdf

Thanks all for the awesome feedback cycles to get us to our V1!