CONFAB 2019 | Plain language & simple design: How civic designers are building a better digital government for the people

Though it may come as a surprise, there is a growing community in the federal government making more inclusive, accessible, and user-focused digital services for the public. While many in the industry opt for new and fancy design trends, when it comes to effective design, simple experiences and plain language consistently serve people better.

Aviva, a human-centered and visual designer at 18F, will dive into the world of civic tech inside the federal government, speak on the imperative working relationship between content and visual designers, and share lessons learned from breaking through bureaucracy to plant seeds of real change within the government.

In the full speaking presentation you will learn:
- Insights from prioritizing users and inclusivity in an organization more widely known for frustrating, rather than positive, interactions
- Lessons for close collaboration between content and visual design on human-centered teams, from the perspective of a visual designer
- How to work with a design system to balance consistency and familiarity, while maintaining personality and a specific editorial style, with examples from the US Web Design System.

Transcript

1. Plain language & simple design: How civic designers are building a better digital government for the people
2. Hi! I’m Aviva Oskow. User centered & visual designer at 18F Working to improve the user experience of the federal government Based in NYC, originally from MN
3. Who are you? Content designers? Visual designers? UX designers? Non-designers? Civic design or technology?
4. Today we are talking about: Design trends & the civic sphere Primer for user centered design in the federal government Examples of visual + content design working together successfully on user centered teams How design systems, documentation & guidance help us do our work together better
5. Let’s talk about 2019 web design trends! #innovation
6. Let’s talk about 2019 web design trends! #innovation ...otherwise known as: what’s the best at selling stuff these days.
8. GRAPHICS • Vibrant color palettes & gradients • 3-dimensional illustration • Surreal/abstract design • Mobile animation & cursor design, micro interactions • Video backgrounds • Playful illustration styles • More data visualizations TYPE • Large text • Variable Fonts • Serifs & retro styles • Text instead of images LAYOUT • One page scrolls • Overlapping images & graphics • More white space • Non-traditional scrolling • Broken grid/asymmetrical layouts • Mobile first STRATEGY & PRACTICES • Emotional Design • Diversity & representation • Collaborative design & code tools • Writing for UX • Design systems* • Accessibility* * Only mentioned in one article
9. Now let’s talk about design in the government.
10. Yes, it exists! Now let’s talk about design in the government.
11. Which of these translate well to civic web design?
12. GRAPHICS • Vibrant color palettes & gradients • 3-dimensional illustration • Surreal/abstract design • Mobile animation & cursor design, micro interactions • Video backgrounds • Playful illustration styles • More data visualizations TYPE • Large text • Variable Fonts • Serifs & retro styles • Text instead of images LAYOUT • One page scrolls • Overlapping images & graphics • More white space • Non-traditional scrolling • Broken grid / asymmetrical layouts • Mobile first STRATEGY & PRACTICES • Emotional Design • Diversity & representation • Collaborative design & code tools • Writing for UX • Design systems* • Accessibility* * Only mentioned in one article
13. GRAPHICS • Vibrant color palettes & gradients • 3-dimensional illustration • Surreal/abstract design • Mobile animation & cursor design, micro interactions • Video backgrounds • Playful illustration styles • More data visualizations TYPE • Large text • Variable Fonts • Serifs & retro styles • Text instead of images LAYOUT • One page scrolls • Overlapping images & graphics • More white space • Non-traditional scrolling • Broken grid / asymmetrical layouts • Mobile first STRATEGY & PRACTICES • Emotional Design • Diversity & representation • Collaborative design & code tools • Writing for UX • Design systems* • Accessibility* * Only mentioned in one article
14. What do these ones have in common?
15. • Writing for UX • Emotional Design • More data visualizations* • One page scrolls* • Mobile first* • Large text • Mobile first • Diversity & representation • Variable Fonts • White space • Collaborative design & code tools *Caveat: When it makes sense for our users • Design systems User centered Function > fashion alone
16. • Writing for UX • Emotional Design • More data visualizations* • One page scrolls* • Mobile first* • Accessibility • Large text • White space • Diversity & representation • Variable Fonts • White space • Collaborative design & code tools • Design systems *Caveat: When it makes sense for our users User centered Function > fashion alone Accessible
17. • Writing for UX • Emotional Design • More data visualizations* • One page scrolls* • Mobile first* • Accessibility • Large text • White space • Diversity & representation • Variable Fonts • Collaborative design & code tools • Design systems *Caveat: When it makes sense for our users User centered Function > fashion alone Accessible Reusable & built to adapt
18. So...does that mean government websites should be all function and no flavor?
19. Is this functional? How about now?
20. Does this work? Can we prove it?
21. Function is intrinsically tied to form—and form includes how it looks and reads and interacts.
22. Simple design ≠ bland
23. Simple design Simple design ≠ bland ≠ old
24. Simple design Simple design Accessible design ≠ bland ≠ old ≠ ugly
25. Simple design Simple design Accessible design Reusable features ≠ bland ≠ old ≠ ugly ≠ never unique
26. Simple design Simple design Accessible design Reusable features User centered ≠ bland ≠ old ≠ ugly ≠ never unique = the right design comes from understanding the content users need.
27. Government services should reside at the intersection of functionality and positive user experience, which usually means easy to understand and looks nice* too.
28. Government services should reside at the intersection of functionality and positive user experience, which usually means easy to understand and looks nice* too.
29. * “Nice” design is relative— it is inextricably linked to user, technological, and organizational needs. Design should solve a problem.
30. Why is designing for the government different?
31. Because laws! (For good reasons) Americans With Disabilities Act (ADA) Section 508, Rehabilitation Act Plain Writing Act 21st Century Integrated Digital Experience Act (IDEA)
32. *ALL the people Government services should serve the people*—easy to use, accessible to people with of varying abilities, and actually work.
33. From analytics.usa.gov There were 3.61 billion visits to U.S. government websites over the past 90 days.
34. 18F is a user centered* design and technology agency for the U.S. government, inside the government. *Work iteratively, design for real people, and build in the open.
35. making crime data from the FBI more open and digital for the public Crime Data Explorer creating one clear pathway to submit Freedom of Information Act requests FOIA.gov redesigning the civil rights complaint process Civil Rights Complaint Portal moving towards a one sign-in experience for all gov services Login.gov making it easier for states to get healthcare funding from the federal government Centers for Medicare & Medicaid rethinking how the Federal Election Commission interacts with the public digitally FEC.gov On projects like
36. Let’s talk about User centered visual & content design in the government
37. First, let’s get visual, visual
38. As a visual designer, my role is… to focus on the front- facing interactions between the user and our product. I craft a look and feel that visually communicates the right messages and information to our users. Problem solving!
40. (Not going to explain content design to content designers at a content conference)
41. We both get a head start making things plain & simple
42. The US Web Design System (USWDS) Design guidelines and code to help agencies quickly create trustworthy, accessible, and consistent digital government services. Plainlanguage.gov Explain the law and requirements, provide writing guidelines and examples, share training and resources
44. A starting place: Typography Page layouts Buttons styles Form field interactions UI interactions
45. , in practice
46. User centered visual & content design tips Key takeaways from examples
47. Improving the process for making Freedom of Information Act (FOIA) requests.
48. Improving the process for making Freedom of Information Act (FOIA) requests. FOIA is the most important law we have for government transparency, but it is a notoriously slow, cumbersome, and mysterious process for users. 2016 mandated that one FOIA request collection point for all agencies be created.
49. Found the most common pain points Knowing which agency to request and their unique requirements is confusing Long response times, general distrust of the process Knowing if the desired information already exists elsewhere Connecting hundreds of different IT systems is hard and overwhelming First, we listened: Agency FOIA officers Journalists Lawyers Students Transparency advocates
50. Determining what the users need/want both drives the content and visual design This way, one discipline isn’t holding more weight, you are working towards the same goals Research is the key to iterative, user centered design 1
51. DISCOVER Stakeholder & user interviews Cognitive walkthrough Contextual inquiry Design studio, dot voting DECIDE Affinity diagramming Comparative analysis Journey mapping Personas Go to https://methods.18f.gov/ for more Initial research/ testing can include
52. Through feedback from users and stakeholders, we heard they wanted an experience that was helpful, engaging, and non-intimidating I [want to] easily figure out how to make a FOIA request” - User interview We want to draw people in and feel like they can easily get the answer to their questions” The current homepage looks really data-oriented, [but] once the portal is up, the data should be de-emphasized and the learning should be the focus” - Stakeholder interview “ “ “
53. Create shared design principles to guide problem solving Through synthesizing what we heard from users and stakeholders, we determined that the new FOIA experience should be: Trustworthy Clear Official Open Transparent 2
54. Content strategy Make complicated legal process easy to understand Less about the law, more about what they need to do Show dedication to transparency through helpful text and guidance Visual strategy Start with existing branding and update to the US Web Design System to build consistency Utilize brighter blues, more sans-serif type, and more approachable imagery to create a visual voice that matches the design principles Utilize icons to familiarize certain types of helpful content
57. Ask the lawyers lots of questions, and push back when they say they don’t think something can be simplified. It usually can be. But! If something is truly too complicated to break down while keeping concise, tell your users that. Maybe [...] suggest actually speaking to a human if they still have questions.” -Ryan Sibley, Content Designer on the FOIA project “
58. Talk about your working style and the tools/mediums you want to work in I like creating first drafts in text editors or google docs. Aviva was cool with that and we’d work together to understand how I thought the content should be treated on the page.” - Ryan Sibley Be flexible, but focus on communicating ideas and needs to one another Pair as often as possible Remember, you’re a team! Set up working norms for smoother collaboration “ 3
59. From wireframes to full blown mockups and live code It can go either way—sometimes the design drives first, or sometimes an outline or specific content needs a visual treatment We leave room for the other to add their piece We use multi-disciplinary critique Create joint prototypes for both content and interactions 4
60. When it came to testing the form, the content designer worked with the partner to determine what fields were the most common/necessary. I took the first pass at laying that out in a user-friendly way, based on the USWDS form fields. We tested each version with users, keeping what worked and adding what they needed.
61. Be flexible—do what’s right for the project, not just what a process dictates. Sometimes content takes the first step, but a layout can inform the content first too.
62. Crafting interview guides Switch leading & notetaking in usability sessions Co-leading workshops with clients Co-work on synthesis and crafting next steps Prioritize doing the research / testing together 5
63. MAKE Prototyping Wireframing VALIDATE Usability testing Visual preference testing Multivariate testing Go to https://methods.18f.gov/ for more Research / testing at this stage can include
64. Ended with a form that guides users through the steps, with tips and relevant content included along the way. Build confidence in the dedication to transparency.
65. Build confidence in the dedication to transparency. Walk the walk.
66. Content & visual co-led an in-person workshop for the information hierarchy and site architecture
67. Base the experience on what people want to accomplish here, rather than how DOJ thinks they should explain the law. Appeal to experienced and new users. Lead people to the new tool (digital form) but make sure they know what they are getting themselves into.
68. (Flash charts that people can’t see anymore)
69. Base the experience on what people need to accomplish.
70. Use simple, action oriented headlines. Explain complicated legal process in terms people can understand. Use icons to help familiarize actions.
71. Use action oriented headlines. Iconography can help familiarize and guide.
72. A dynamic glossary tool can help with terms people need extra guidance on. Visually call out helpful interactions (underlines, icons)
73. Dynamic glossary tool helps people define without taking them out of the experience flow. You can use this open source tool!
74. Dynamic search: an interaction people are used to. Include the relevant content people are looking for right away.
75. It’s ok to replicate patterns people are used too—as long as they are experiences people like! Aka don’t fix what’s not broken.
76. 1 2 3 4 5 Recap Research is the key to iterative, user centered design Create shared design principles to guide problem solving Set up working norms for smoother collaboration Create joint prototypes for both content and interactions Prioritize doing the research / testing together
77. Opening the FBI’s crime data (+ their first open source project)
78. Opening the FBI’s crime data (+ their first open source project) For more than 80 years, the FBI has collected nationwide crime data, but while the data has always been publicly available via static reports, previously there was no way to interact with the data except through the yearly PDF data releases. The Crime Data Explorer (CDE) was the first attempt to build a web platform for the public to interact with the data in a user focused way.
79. Different users need different things: experts want data downloads, novices want to explore and visualize, journalists and students could use both Be open and clear about the limitations, caveats, and changes Make the data approachable and accessible—be able to filter it in relevant ways Be sensitive to the trauma in communities from crime and found... First, we listened: FBI stakeholders & staff Data scientists Law enforcement Criminal justice advocates Students Journalists Members of the public
80. “Friendly & modern” “Editorial & authoritative” “Technical, minimalistic, and serious” While we worked together with the partner and users to find the right voice, visual explorations helped us narrow down the principles.
81. Visual explorations can help define the content voice and tone with partners.
82. Created shared design principles to guide our problem solving Show me the way and let me explore Put everything in context Make it relevant to me Let me participate
83. Content strategy The voice should sound like the real people working with the data at the FBI: approachable, conversational, engaged, informative, honest Put context in plain view Update out of touch descriptions related to ethnicity, race, gender People-friendly robo-text Visual strategy Balance needs of deviating from existing FBI and DOJ styles by appealing to the public, but still feel connected to their mission Find a style that feels modern and approachable, but authoritative Data visualizations and charts that are clear but hold complex information, finding the right places for heavy content
84. Examples of conversational content: “Use” instead of “utilize” “People” instead of “persons” “Ethnicity” instead of “ethnic origin”
85. To figure out what content should live where, what was useful to people, and the best ways to present it, we jointly made lots of prototypes. Starting out with sketches, then using the USWDS styles for prototyping, and eventually crafting our own visual brand once the content was closer.
86. Prototypes of varying fidelity can give you the answers you need.
87. If the editorial voice was approachable, conversational, engaged, informative, honest—then we needed to strike a visual balance of serious and authoritative, but approachable and interactive too. It couldn’t be too bright, happy, or “appy” but we also didn’t want to be too intense or scare people away (despite the sensitive content).
88. Balance the competing needs of your design and voice. You won’t know ‘til you try.
89. Conducted a visual audit to compare data-heavy interactive apps and websites, award-winning data journalism, other crime statistics projects, and current FBI data sites.
90. Choose visualizations that actually read—not just look flashy People-friendly robo text
91. The ones that worked (Usability testing every 2 weeks)
92. Just ‘cause its a visual, doesn’t mean it reads. Not all charts are equal and not all data should be a chart.
93. Ended up with: site architecture that meets a range of user needs
94. Create different experience pathways for varied users. It is possible to meet the needs of vastly different users, even in an MVP.
95. Dealing with sensitive content
96. Keep empathizing. It’s easier than you think to become desensitized.
97. Be open and clear about the limitations, caveats. Use your opportunities and power to craft a responsible narrative.
98. “The data found on the Crime Data Explorer represents reported crime, and is not an exhaustive report of all crime that occurs. It’s important to consider the various factors that lead to crime activity and crime reporting in a community before interpreting the data. Without these considerations the available data can be deceiving. Factors to consider include population size and density, economic conditions, employment rates, prosecutorial, judicial, and correctional policies, administrative and investigative emphases of law enforcement, citizens’ attitudes toward crime and policing, and the effective strength of the police force.” Maybe the most profound piece of content on the CDE:
99. Recognize that your work has consequences. Use your opportunities and power to craft a responsible narrative.
101. How do we keep track of all of it?
102. How does it live on past us?
103. What should be consistent? What can be unique?
104. Design systems, documentation & guidance
105. We need to speak the same language! A common system for design and code Shared methodologies for user centered design Shared design principles Documentation of how we’ve done it and guides for doing it again
106. The US Web Design System The USWDS provides design guidelines and code to help agencies quickly create trustworthy, accessible, and consistent digital government services.
110. Templates & reusable design elements Accordion Alert Button Footer Form controls Form templates Grid Header Icons Search Side navigation Table Tag Typography Typesetting Flex Opacity Order Shadow Spacing units
111. Personality can vary through tonal shifts: Colors, images, content
112. Plainlanguage.gov The home for understanding how to write accessibility for the government—or anywhere. Explain the law and requirements, provide writing guidelines and examples, share training and resources
113. The 18F Methods A collection of activities and practices for doing human centered design. Simplified instructions help other organizations and federal offices adopt these practices into their own projects. They were made for digital services, but can be adapted to non-technical design projects. methods.18f.gov
114. Content Guide A new home for understanding how to write accessibility for the government—or anywhere. Explain the law and requirements, provide writing guidelines and examples, share training and resources content-guide.18f.gov
115. Accessibility for Teams A ‘quick-start’ guide for embedding accessibility and inclusive design practices into a team’s workflow. Provides an overview and framework for how to approach accessibility from your discipline and human understand of why it’s all important. accessibility.digital.gov
116. Other federal civic tech friends!
117. In conclusion
118. Research is the key to iterative, user centered design Create shared design principles to guide problem solving Set up working norms for smoother collaboration Create joint prototypes for both content and interactions Prioritize doing the research / testing together 1 2 3 4 5 Recap
119. Resources 18F Method Cards A collection of tools to bring human-centered design into your project. 18F Guides Repository for best practices across our teams. US Web Design System Design and build fast, accessible, mobile-friendly government websites backed by user research. Plainlanguage.gov Laws and guidelines for plain language writing
120. Special thanks Ryan Sibley Content Designer on FOIA Nicole Fenton Content Designer on Crime Data Explorer Other 18F team members Cordelia Yu, Ron Bronson, Austin Hernandez, and my whole critique group
121. Questions? Thank you! aviva.oskow@gsa.gov 18f.gsa.gov | avivaoskow.com