Design and development
Designing and developing for more equitable access starts with an awareness of the power imbalances between ourselves and the people we serve.
Accessibility
Accessibility means designing for people with a wide range of abilities so that they have equitable access to the tools and resources we provide. All people we serve should have an inclusive experience, including those with visual, auditory, physical, cognitive, and other impairments.
There are federal requirements around accessibility that we as a federal agency are required to meet. The revised Section 508 standards of 2018 in effect state that all electronic content should conform to WCAG 2.0 AA guidelines. As such, we design, build, test, and remediate to conform to those standards.
If you’re building web or print products:
- Read our accessibility guidelines before you begin the design process.
- Audit your product for Section 508 compliance before it is launched.
Access
Providing equitable access to web-based products means building with an eye towards the needs of people who rely on smaller or older devices and/or those using low-bandwidth networks. As of August 2022, more than half of all visitors to the CFPB’s website use a mobile device. The ratio is even higher for our Spanish-language content, where three-quarters of visitors use a mobile device. Also consider the 25% of Americans who do not have high-speed internet access at home.
Ensure you’re taking the steps below:
Design and research from a mobile-first standpoint.
Designing to a limited screen size helps to force prioritization of the most important features needed to accomplish the goals of your product, and encourages the development of a leaner product. In contrast, designing desktop-first may lead to the development of multiple features without hierarchy or prioritization, which may not be usable at mobile scale.
Optimize code for the best possible performance.
Code should be as lightweight as possible. Evaluate your product for performance factors, such as first contentful paint, first meaningful paint, and speed index. Use one of the many free automated tools available to analyze speed, performance, and quality.
Working mobile-first and optimizing for performance and accessibility has SEO benefits as well. The most frequently-used search engines have moved to favoring mobile friendly sites and accessible features.
FURTHER READING
Read the Pew Research Center’s fact sheet on internet and broadband usage (April 2021)
Inclusive imagery
Be thoughtfully inclusive about how you represent people in photography and illustration. This goes beyond showing a wide range of ethnicities and abilities in a single visual product. Careful thought must be put into who is shown, in what context, and how they are represented.
Take these steps whether you’re casting a video, creating illustrations of people, choosing stock photography, or something else.
Uncover your own assumptions and biases.
If you haven’t already, take steps to uncover the assumptions and biases you hold, and to raise awareness of the needs of communities and groups that are different from yourself and your team, by running through the frames of reference exercise.
Understand the group you’re representing and trying to reach.
If there is a specific group you’re trying to reach and that you plan to represent in your product, do your research so that you’re aware of any sensitivities. Investigate their historic and current relationship to the government and their relationship to the topic you’re representing. There may be negative connotations or associations that you’re not aware of when you represent a specific group in a specific situation.
Make sure that any representations of people experiencing a difficult or undesirable situation do not reinforce existing negative stereotypes.
Examine potential hazards and harms.
Run through the hazards and harms that could occur as a result of your deliverable. In particular, be on the lookout for any representations that might perpetuate such hazards as racial profiling, enshrined status quo and power structures, and systemic bias.
Hazards and harms
In a Medium article from 2019, the design researcher and author Erika Hall suggests annotating wireframes with hazards and harms. The concept is similar to occupational safety maps that annotate floor plans with specific physical, chemical, and electrical hazards.
As an example of how this might work, an abuser could use a searchable database containing personally-identifiable information to find the location of a victim. The hazards of this database could include data misuse and targeted abuse. The harms stemming from these hazards could include fear, anxiety, and potentially physical danger.
Identifying hazards and harms in advance enables us to build in solutions at the outset to mitigate against their occurrence.
ACTIVITY
Hazard mapping
Adapted from 18F’s presentation on equity-centered design and research.
As you create your designs, try this mapping activity to identify potential hazards and harms that could result from the work you and your team are planning to do. Plan for how you’ll mitigate them.
- On a wireframe, map out any potential hazards and describe how the design will mitigate those hazards.
- When conducting interviews, ask how people might be harmed by this system or how someone might use the system to cause harm.
- When creating a journey map, add a row for potential hazards associated with the moments or decisions in the journey.
Here is a starter list of potential hazards to consider:
- Data theft
- Data misuse
- Overcollection of data
- Opaque algorithms
- Privacy breach
- Digital redlining
- Harassment
- Targeted abuse
- Attention hijacking
- Inaccessibility
- Widespread misinformation
- System outage
- Enshrined status quo or power structures
- Power imbalance
- Discrimination
- Deadnaming
- Dehumanization
- Intimidation
- Entrapment
- Abandonment
- Displacement
- Systemic bias
- Oppression
- Racial profiling
- Co-optation
- Exploitation
- Deception
- Triggering topics
- Exclusion
- Disregard
Hazards can cause a wide range of harms. These harms can include:
- Fear and anxiety
- Depression
- Anger
- Shame
- Diminished confidence
- Re-traumatization
- Isolation
- Exhaustion
- Misinformation
- Invisibility
- Reduced influence
- Misrepresentation
- Diminished freedom or autonomy
- Diminished access
- Damaged reputation
- Legal or financial penalties
- Loss of employment or housing
- Environmental damage
- Physical danger