First draft of 18F Folks blog post

content/posts/2024-10-21-18f-folks.md

@@ -0,0 +1,135 @@
+---
+title: "18F Folks: Adopting a new illustration library"
+date: 2024-10-21
+authors:
+- 18F
+excerpt: "we've adopted a new illustration style to capture a broad spectrum
+of human experiences"
+image: /assets/blog/18f-folks/blog_banner.jpg
+image_alt: "An illustration of five diverse individuals"
+---
+
+Serving America’s diverse population is central to 18F’s mission. To help us
+further this effort, we’ve adopted a new illustration style to capture a broad
+spectrum of human experiences.
+
+Previously, we used Pablo Stanley’s <a
+href="https://blush.design/collections/rChdrB8vX8xQJunpDPp8/avatars">Avataaars</a>
+library to represent people.
+
+{% image "assets/blog/18f-folks/avataaar_sample.png" "Cartoon representations of three people in a simple, vector style that shows their faces and bust." %}
+
+While able to depict a range of skin tones and ages, the bust portraits
+ultimately proved limiting when trying to represent the vast collective of
+human experiences.
+
+Our new image style is based on Pablo Stanley’s open-source library <a
+href="https://www.openpeeps.com/">Open Peeps</a>. We call our version, which
+reflects the brand’s signature blue tones and flat forms, <em>18F Folks</em>.
+
+Now our graphics look like:
+
+{% image "assets/blog/18f-folks/slide0.png" "A presentation slide showcasing a cartoon of a woman in a wheelchair holding a microphone. The text next to her says Hear, hear! We're transitioning to 18F Folks for our illustration style." %}
+
+{% image "assets/blog/18f-folks/slide1.png" "A presentation slide with 3 vignettes of the same male in 18F Folks cartoon style. He progresses in expressions from happy, to confused, to frustrated.  Underneath each of his portrait is text as to questions or blockers he has through a generic user journey." %}
+
+With <em>18F Folks</em>, we’re able to construct vignettes of people interacting with
+each other and their environments. This helps us narrate stories about the
+world we want to build.
+
+<figure>
+
+{% image "assets/blog/18f-folks/dc-walking.png" "A cartoon vignette with two people walking, with government buildings and trees in the background" %}
+
+{% image "assets/blog/18f-folks/error.png" "A cartoon of a woman looking worried while holding a phone. A large phone is next to her, showing an X on the screen" %}
+
+{% image "assets/blog/18f-folks/us-map.png" "Two people standing in front of a map of the US. One person appears pregnant, the other has a prosthetic leg." %}
+  <figcaption>The illustration library can showcase diversity, connection, and context</figcaption>
+</figure>
+
+As a government agency, we use branding to inform and engage the public.
+Relationships emerge from the content we share. For instance, government
+agencies have reached out after reading this blog, asking how to emulate
+software systems and service processes. Something as basic as our illustration
+style impacts how our audience perceives us.
+
+Consider this simple presentation slide.
+
+{% image "assets/blog/18f-folks/slide-confused.png" "A presentation slide showing a list on the left of common timekeep mistakes. Next to the list is a shrugging woman in the style of 18F Folks cartoon." %}
+
+While the content presents a matter-of-fact list, the shrugging Peep conveys
+the body language equivalent of “I’m with you. This is confusing.” We opted
+for an illustration style that can cue understanding and trust—emotions more
+complex than the previous style would allow.
+
+Some organizations may delegate branding directives to a marketing team.  At
+18F, we leverage the combined strength of our multifaceted design team to
+bring ideas like <em>18F Folks</em> to life. Our content designer took inspiration from
+18F’s written tone to inform our selection criteria, emphasizing qualities
+like “welcoming” and “conversational.” Service designers conducted research to
+determine ideal use cases for illustrations. 
+
+The team then created a scorecard and conducted a comparative analysis of
+several illustration libraries. Open Peeps was selected as the basis of the
+<em>18F Folks</em> style because it balances professional with approachable.
+
+<figure>
+{% image "assets/blog/18f-folks/scorecard.png" "A spreadsheet grid. The left column has criteria such as open source, matches 18F's voice, etc. The following columns determine if different visual libraries meet the criteria.  Green, yellow, and red cells suggest if criteria are met or not." %}
+
+<figcaption>We created a scorecard to narrow down our options for an
+illustration library</figcaption>
+</figure>
+
+Product managers compiled a list of additional characteristics to make the 18F
+Folks library even more inclusive. Considerations included diverse religious
+dress, physical abilities, and body types.
+
+<figure>
+{% image "assets/blog/18f-folks/custom.png" "Two cartoon characters talking.  One wears a shirt with 18F, the other a shirt with a rainbow flag." %}
+
+{% image "assets/blog/18f-folks/custom2.png" "A pregnant woman stands next to a child in 18F Folks illustration style" %}
+
+<figcaption>
+We added custom shirts, a hearing aid, as well as a pregnant person and a
+child. This is just the start.
+</figcaption>
+</figure>
+
+On the surface, these depictions are simply bubbly cartoon characters. But we
+intentionally adopted an illustration style where more people can find
+themselves reflected in the content we share. When people can see themselves
+in media, they feel seen. That’s why it is so important for us to represent
+the diverse American public. We want every person to believe that they matter
+to us–that we are a government by the people, for the people. After all, good
+branding is the public celebration of a group's shared values.
+
+<figure>
+{% image "assets/blog/18f-folks/18f-design-custom-folk.png" "Several cartoon illustrations that staff have made of themselves in 18F Folk style." %}
+
+<figcaption>
+18F staff customizing their own Folk
+</figcaption>
+</figure>
+
+## Disclaimer of endorsement
+
+The GSA.gov website includes hypertext links, or pointers, to information
+created and maintained by other public and/or private organizations. We
+provide these links and pointers only for your information and convenience.
+When you select a link to an outside website, you are leaving the GSA.gov site
+and are subject to the privacy and security policies of the owners/sponsors of
+the outside website.
+
+- We do not control nor guarantee the accuracy, relevance, timeliness, or
+  completeness of information contained on a linked website.
+- We do not endorse the organizations sponsoring linked websites and we do not
+  endorse the views they express or the products/services they offer.
+- The content of external, non-Federal websites is not subject to Federal
+  information quality, privacy, security, and related guidelines.
+- We cannot authorize the use of copyrighted materials contained in linked
+  websites. Users must request such authorization from the sponsor of the linked
+  website.
+- We are not responsible for transmissions users receive from linked websites.
+- We do not guarantee that outside websites comply with Section 508
+  (accessibility requirements) of the Rehabilitation Act.
+