Increasing inclusion and challenging bias for a nonprofit

SFBikeCoalitionLogo.png
SFBC_BMP_Hero.jpg
 

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

Gradient

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.

UseVDia2.png

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:

 

HeuristicExistTagsLayout.jpg

Existing site homepage

HeuristicTag1.jpg

Page and content types could clearly be delineated by: 'content', 'events', and 'join'.

HeuristicTag2.jpg

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)

HeuristicTag3.jpg

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.

HeuristicAnalysis.png

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.

TimeofDayUseAna.png

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.

SiteIAandUse.png

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

SFBCWebSurvey.png
Gradient

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.

cruiser.jpeg

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

trouringbike.jpeg

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

MicroOther.jpg

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

Gradient

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.

SFBCMassingLayouts.jpg

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.

SFBCLoFi.jpg

Wireframe diagrams to test navigation and inform hierarchy and style of information

Gradient

Delivered Solution

SFBCfinal.jpg

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.

ExistSFBC.png

Eye Tracking testing on the existing page generated an unfocused and even eye movement.

NewSFBC.png

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

Gradient

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. 

Gradient

Take Action

Get connected

View the next project

200608_HF_Hero_Moc_edited.jpg

Resolving a lack of trust in the roommate search using a map-based coliving platform and integrated chat app

homefinder.com - Speculative academic project

Customer-facing, map-based, integrated chat