Bridge The Bay

 
Overview

Educational website tackling gentrification in the Bay Area from all sides

Type

Passion project

Role

Interaction designer

UX writer

Visual designer

Tools

Adobe XD

InVision Freehand

Wix

Platform

Web

Timeframe

5 weeks

The Problem

 

Gentrification in the Bay Area has become a divisive and seemingly insurmountable issue.

My teammate Ariane and I were both born and raised here, and we've witnessed the evolution of the Bay Area firsthand.  Gentrification is an obvious buzzword when talking about the changing dynamics here, but in spite of being locals, we didn’t have a great idea of what it really was or what we could do about it.

Defining Users

 

We made our target audience recent transplants (<10 years) and long-time residents (>10 years).

We initially didn’t want to be location-specific, but we only had a month to work on the project.  So we decided to narrow our scope and to keep a local focus, knowing there are a lot of factors specific to the Bay Area to tackle.  

Research

 

The existing resources in this space had lots of good information, but it was generally too academic and/or unengaging.

      Only a couple websites specifically focused on the Bay Area 

      Very esoteric and inaccessible academic language throughout 

      The most successful resources had a clear purpose and integrated visuals 

      An overwhelming amount of info with no clearly recommended user flow 

 

We knew we were far from the first to tackle this issue, so we made it a priority to understand and not undermine the work that had already been done.  After doing extensive research on the history of gentrification and organizations dealing with it, I conducted an analysis of the “competition.” I found…

 

There was clearly an opportunity for an informational, yet simple and accessible, website with an engaging user experience.  With hindsight, we would have focused more on the mobile experience to make the site accessible on any device.

Interviews

 

We hit some snags – we weren't seeing a pattern.

At this point, we started to form our own assumptions but knew we needed to talk to experts and real users.  We luckily were able to talk to 3 subject matter experts (academics + activists), who helped us realize…

There’s a lot of gray area.

 

     Neither SME agreed on a definition for gentrification, but both stressed that it was         not inevitable 

     Though they had different ideas about solutions (most revolved around policy), both     agreed it was important to stay hyperlocal and personal 

     There have been different waves of gentrification in the Bay, and even in the current     waves, it’s not as simple as blaming the tech industry 

Snag time.  We got through 8 user interviews, split between our two demographics, but were seeing no discernible patterns.  So we decided to keep interviewing users until we were confident we had enough data points, ultimately conducting 15 user interviews overall.   And after some affinity diagramming, we thought we had a solid problem statement.

Synthesis

 

We realized we were imposing the needs and solutions we wanted to see, and pivoted our goal actual user needs - empathy and connection.

Our problem statement started here:

 

The Bay Area resident needs a way to learn more about how gentrification affects the Bay Area because gentrification as a concept is overwhelming and there are no digestible resources online.

 

However, we found ourselves struggling through personas and journey maps, and realized we needed to go back to the drawing board:

After taking a more critical eye to our interviews, we realized that most users did feel that gentrification was inevitable, and many expressed frustration that they weren’t able to connect with the “other side.”  With this in mind, we iterated on the problem statement:

The disconnected Bay Area resident needs a way to foster connection and create empathy because they feel that gentrification is inevitable and want to know how they can best operate within it.

 

 

Now I had actual user needs and users to design for.  I created personas for both our long-time resident and recent transplant to help inform our decisions moving forward.

Ideation

 

I ideated concepts for the main user flow,  with a focus on the content , story, and interactivity for the user.

Seeing how delicate of a subject we were dealing with in our interviews, we surmised the success of our designs would be heavily dependent on the way content and information was presented.   We created a content map with all the points we wanted each section to hit, and I wrote out all of our copy.

After ideating a few different ideas using 'paper' prototypes in InVision Freehand, we settled on making the main user flow a scrolling, museum-like experience to promote interactivity and to engage the user and keep them on the page.  I then created wireframes to better visualize what this experience would look like.

We opted for a scrolling experience to put the user in control.

03_gentrification_pro_–_1.png

Every screen is light on text so they're easier to digest.

04_impacts_deliver – 1.png

Videos serving as a relatable way to convey tough points.

Prototyping & Testing

 

Testing with our prototype showed that users were impressed, but often got bored or confused.

I prototyped in Adobe XD, using microinteractions to capture the dynamic feel we wanted.

We tested the prototype on 5 users, with the goal of testing usability vis-à-vis how people navigated through each screen and reacted to the copy.  The results showed…

     40% of users were able to read more info about a period in our timeline 

     100% of users were able to select their neighborhood

     60% of users were able to find a specific event 

     100% of users were able to find an organization 

   ‣  100% of users were able to find a case study  

?

These data points, as well as observing the users’ frequent confusion or occasional boredom as they scrolled, helped us decide our next steps before the final iteration.

 

  1. Reduce density of the history section, make it skippable

  2. Don’t rely on the happy path, cut down overall runtime

  3. Clarify navigation overall, use copy as breadcrumbs

  4. Ensure everything that seems clickable is clickable

  5. Simplify the “Choose Neighborhood” flow

Visual Design

 

We worked fast to implement changes and create a visually designed prototype.

We were hoping to do one more round of testing before we created mockups, but due to time constraints had to settle for baking our iterations into the final mockups.  Initially going for a MUNI-inspired color palette, I chose a dark and minimal color palette to emphasize the “museum” feel and keep focus on the copy.

Quick and dirty color palette iterations.

We lost a lot of users here, so inserted a button to "Skip the history."

03_gentrification_pro_–_2.jpg

The pink and white against the black draw attention to the copy/content.

08_tranistion_neighborhood – 7.jpg

Clear and simple literal calls to action.

neighborhood screen

Leading to a hyperlocal flow about a users' actual neighborhood.

 

Nothing was going to come easy, so after false starts with different prototyping tools, I decided to use Wix to create a live prototype that would simulate our end product as best as possible.  You can view it here:

BTB walkthrough.gif

If this were a platform we were to continue to explore, it would definitely be a non-profit entity, so there would be no 'business' metrics to measure success.  However, ideally we would be monitoring analytics like bounce rates, clickthrough on CTAs, and how users were finding the site to determine what was working and what wasn't.

Thus far with the prototype, 73 out of 74 visits of have been from desktop, which validated our push to design for desktop first.  And even though the newsletter on the site isn't built, we've still had 36 signups, which has been encouraging.

Lessons Learned

 

Think big, but work small.  🙇🏻‍♂️

In hindsight, I can see this was a massive undertaking - both tackling gentrification and creating the designs.  I’m proud of what we did, but in the future, I will ensure that tough conversations are had about realistic scope & feasibility before pen is even put to paper.

Be willling and ready to adapt.  🧐

I often let biases, asssumptions, and ambition get in the way of smart and achievable design decisions.  Things aren’t always going to go plan, and I have to be ready to make a left turn if the constraints, context, or mistakes require a course correction.

Optimize user interview scripts.  📋

                                                                 (if interviews are possible)

A lot of the groundwork for us having to re-do work is that our interview script was not focused, and we didn’t clearly define what we wanted to find out.  I learned a lot about how to create scripts and conduct interviews, which I have since been able to put to use.

With more time, I would have done...

...so many more things.  Additional research, testing, fact checking, collaboration with more organizations, and building the site out to be fully responsive.  Along the way, we were constantly asked when the site would be live, and since we have the domain, this is definitely something I’d love to revisit.  Gentrification isn’t going away, and we need to “bridge the bay” (sorry) if we want to keep our community Golden.

🙏🏼

"Bridge The Bay" logo by Adam Whitcroft

Illustrations by Pablo Stanley

Get in touch!

View live prototype

Go to link