Increasing inclusion and challenging bias for a nonprofit
The problem centered on two specific initiatives from both the business and user perspective; those were increasing signups and addressing a lack of representation for nonwhite San Franciscans.
The solutions involved developing the hierarchy and focus of messaging on the homepage and amplifying marginalized voices on the platform. Special care was taken to check bias of myself as the designer. The result was a revamped homepage, information architecture, and UI aligned with marketing and brand stakeholders.
I personally saught this project out as a volunteer arrangement to impact a cause I hold dear: urban mobility for everyone.
Who
www.sfbike.org
When
2020 - Spanning 5-weeks across research and design
Team
Design and research team of one. Engaged marketing and non-profit stakeholders
Role
UX /UI Designer, UX Researcher, Client POC; Created all graphics you see here
Research Insights
Research Process
Defining the right problem
Both the coalition and I went into this knowing there was progress to be made, but not yet sure where what it would look like. From the coalition side, it was an opportunity to revamp graphics and increase diversity.
From my perspective, It was a chance to gain deep research from a vast membership organization, and get serious about where my own biases lay. I set about finding the problem by:
1) Talking with the coalition marketing and engagement teams over weekly meetings,
2) Created an existing member survey, and
3) Reached out to non-members outside the primary ethnic makeup of the organization.
I found our stakeholders and their needs were related in a balanced fashion
To see why the current site wasn't meeting these objectives, I set out on a three-pronged approach, heuristic analysis, user survey (sent to over 10k people), and Google Analytics analysis.
Research Findings
Figuring out this dense site via heuristics analysis
There is a lot of content on this site, it is like a ball of yarn, multiple strands connect various areas, and users are overloaded with content. Three broad findings:
Existing site homepage
Page and content types could clearly be delineated by: 'content', 'events', and 'join'.
Above the fold carousel was stealing the most important real estate for a shifting message of current news (later survey and analytics would show this to not be important information)
Prioritization and hierarchy of information and call to action(s) (CTAs), forms and swag store are not part of the site graphic and use conventions.
These are important because they showed me how to later condense the menu items, how to simplify the page layout through prioritization, and what to look for in the analytics to confirm priorities.
The following chart was created in Airtable to create a fast recording of industry-standard navigational and experience graphic practices based on a rubric I defined. The key was being able to use it as a communication tool with community and organization stakeholders.
Heuristics analysis stakeholder communication tool
Research Findings
Using analytics data to confirm my understanding
To confirm assumptions made in the heuristic analysis, I turned to Google Analytics and reviewed the previous 12 months of data. Primary goals were to confirm the priorities of information and include COVID-19 data. Key findings:
1) Most people view the page at noon on Tuesday
(right after the weekly email newsletter is sent out) engagement through this nudge is key in getting visitors and then membership. How might we increase engagement knowing this? It led me to the email and Social media CTA position change and priority on the page later in the design process.
Peak visits follow the arrival of the weekly email newsletter
2) The most important pages were about resources
(how to bike and get around) and current initiatives. Membership volunteering and events were low interaction pages. These 'resources' pages are a higher priority for engagement and making the site useful. These elements could be grouped and brought above the fold on the main page in later stages of the design process.
Diagramming the existing information architecture and page view rank to affirm future information organization
Research Findings
Reaching non-existing users via survey to confirm assumptions and confront bias
Whom am I designing for?
Personas
Bringing deeper understanding of site users without the assumptions of race and gender
After defining the problem, and the existing state of the site and it’s interaction, I set out to develop user personas based on client input to challenge our assumptions about users. Note race, age and other assumptive demographics are not present here. These personas will help drive the project in the future.
It was imperative to use personas in the process as a way to explore whom we've designed for and whom we're leaving out. This is an evolving process, but in order to check assumptions, the following were key attributes of the personas generated thus far:
1) They are non-gendered and race-less to remove unconscious assumptions we all bring to the table when hearing the traditional characteristics of a persona.
2) Leverage the benefit of biking style as a way to evoke emotion and needs without socioeconomic assumptions, this is also closely related to the transit 'job to be done' and their needs as they relate to cycling.
3) At least one needed to represent nontraditional site users and those they are not yet members of the coalition (and may not even know it exists) as they are stakeholders just the same.
The Family Utility Rider
Stake
SF Resident and frequent rider, cycling is a primary mode of transit
Goals
Comes to the site to stay up to date on street improvements
Feelings
Highly engaged and wants their voice heard
Influences
Word of mouth and local politics
Membership
Long time member
SF Hill Dweller and Nonmember
Stake
Underrepresented community and beyond the reach of available Muni or BART
Goals
Getting to work, or working via bike. Needing access to transit beyond a personal vehicle
Feelings
Needs to feel representation for their community and at a minimum equitability in access to transit, needs to feel like they have safe and reliable transportation
Influences
Social media, access to work
Membership
Not a member, and likely not aware of the impact of the Coalition or benefits
Micromobility Riders and Urban Evangelists
Stake
There is a symbiotic relationship to be had in our streets
Goals
Increased safety of alternative modes of transit
Feelings
"I don’t need to be a coalition member to benefit from them, may not live in SF"
Influences
Donations, their own organizations' agendas, their own community
Membership
Not a member, but wants to access and coordinate with coalition members
Solution Ideation
Design Iteration
Expanding and communicating solution ideas via lofi block diagrams
Expanding the options for how to get the right amount of information above the fold (in the first visible area of the landing page) meant experimenting with block diagrams to put important information in various combinations. The following four screens show different options for the broad massing of the homepage layout.
Massing diagrams to test information placement above the fold on the homepage
Design Focusing
Refering back to research and simplifying the page
The previous iterations still had too much information on the page and were an artifact of the previous site design. by referring back to the survey research and main site goals, I was able to refine the layout to prioritize only the membership information, call to action, and resources.
The following two screens are options for potential refinement.
Wireframe diagrams to test navigation and inform hierarchy and style of information
Delivered Solution
Why this is an improvement
Eye Tracking testing as one means to confirm improvements
Proven through eye-tracking and the resultant heat maps, we can see a more focused user on the key goals for the page as defined in the customer interviews and as supported by the Google analytics and survey data.
The existing page generated an unfocused and even eye movement. The new design created a classic "F" pattern and more intense focus on the intended CTAs and most important information for users.
Eye Tracking testing on the existing page generated an unfocused and even eye movement.
Eye Tracking testing on the new design created a classic "F" pattern and more intense focus on the intended CTAs and most important information for users
What I learned, and
How I Challenged Diversity Biases
Learnings and next steps
What is yet to be done
Analytics were powerful in supporting decisions to reduce complex content. My biases and assumptions are deep and unconscious. This project is on the roadmap for the bike coalition. Next priorities:
1) Expanding hi fi prototyping and restructuring the information architecture of the other pages,
2) Holding listening sessions for driving further engagement from communities outside the current membership composition.
Confronting bias process
Confronting designer bias is not a one time exercise.
My method for confronting bias in this project was based on "Another Lens - A research kit for conscientious creatives" by News Deeply and Airbnb (questions as put forth in Article) This meant self-questioning and reflection in three key realms of the design process:
Balance my bias
Q: "What’s here that I designed for me? What’s here that I designed for other people?"
A: I thought a lot about the analytics and what others were coming here for as opposed to myself, but challenging the analytics as representative of only the current user base is key; what are other unrepresented users needing?
Consider the opposite
Q: "Who might disagree with what I’m designing?"
A: This led me to ask who is not yet represented in the data and feedback and begin outreach to nonmembers, especially those of marginalized and underrepresented populations. The future outreach and research with these groups as this project progresses will be important.
Embrace a growth mindset
Q: "What am I challenging as I create this?"
A: Assumptions about who cycles in SF, and why they want to be members of an organization like this. Also, the site doesn't need to be a repository of information, but rather could be a source for diverse perspectives by implementing a member spotlight to amplify marginalized voices.
