Responsive Web Design · Community · Non-Profit · Rapid Prototype
In the 1950s, during America’s freeway boom, the Central Freeway sliced through San Francisco, bringing shadows, pollution, and noise that disrupted existing communities. After the 1989 Loma Prieta earthquake damaged the northern section, the city took the chance to remove it, replacing it with a tree-lined promenade and vibrant parks that revitalized the area.
Today, however, the southern section remains, marked by blight in stark contrast to the transformed northern portion.
Navigating through Homepage to Vision to History pages
THE CHALLENGE
Throughout my career, I've contributed to various public works projects, focusing on redesigning open spaces to benefit the community. These initiatives aim to enhance recreation opportunities and promote health and safety.
While I am passionate about public works projects, the bureaucratic processes can be intricate and slow. The northern half of the Central Freeway was redesigned after a devastating earthquake served as a catalyst. In contrast, the Vision Blvd campaign seeks to build community support to advance this significant initiative without a catastrophe.
This effort is timely, as on February 28, 2023, U.S. Transportation Secretary Pete Buttigieg launched the Reconnecting Communities Pilot Program, which will allocate $185 million in grants for 45 projects aimed at restoring connectivity in communities affected by past transportation infrastructure decisions.
In May 2023, I took the lead in the design process, collaborating with Praveen Naga and a team of eight participants closely involved with the Vision Blvd campaign, including its founder, co-founder, and the director of GrowSF. My role was to enhance Vision Blvd's online presence, making it a more effective tool for public outreach.
KICKOFF
Existing website
This effort aimed to do more than just improve the website's aesthetics; the goal was to create an effective tool to strengthen public support for progress. With this perspective, the objectives became clear:
Foster Community Support
Eliminate Barriers
I conducted interviews with five key individuals who represent pivotal roles in this campaign effort:
Daniel Owens, Founder
Greg Riessen, Co-Founder
Jennifer Laska, Head of the Hayes Valley Neighborhood Association
Sienna Hernandez, Long-term Resident
Mark Blocksidge, Recent Resident
These interviews proved invaluable in uncovering community pain points and barriers that have hindered Vision Blvd's progress.
COMMUNITY MEMBERS MATTER THE MOST
Closer examination revealed two distinct community groups: long-term residents, with over two decades in the area, and newer residents. Their length of residence significantly shapes their perspectives.Long-term residents tend to have a deeper emotional connection, rooted in cultural and historical ties, while newcomers bring fresh perspectives to the community.
Gabriela, a longtime resident, has mixed feelings about the freeway removal, particularly regarding its potential effects on gentrification and the displacement of longtime community members.
As a new resident, Kevin holds an optimistic view, believing that the benefits of removing the Central Freeway outweigh any potential drawbacks.
THE DISCOVERY
Initially, community opposition to the freeway removal seemed counterintuitive, given the negative impacts of the Central Freeway—severed neighborhoods, pollution, noise, and blocked sunlight. However, the historical lack of community involvement in decision-making since the 1950s clarified the criticism of Vision Blvd, particularly regarding diversity in leadership. Opponents like Calle 24 and the American Indian Cultural District don't necessarily want the freeway to stay; they question whether the campaign truly represents impacted communities and includes marginalized voices. Thus, developing a more diverse support base is crucial for the success of Vision Blvd.
In addition to identity politics, the campaign faces challenges related to feasibility and livability. Concerns include how removing the final mile of the Central Freeway could impact traffic patterns, especially for west side residents who heavily rely on it.
There are also worries about potential effects on property prices, rental rates, and housing affordability. Additionally, misunderstandings about Vision Blvd's decision-making process have led to fears that choices may have been pre-determined without community input.
Detailed visuals from speculative work were posted on Vision Blvd's website, giving the impression of a formed design without community input.
DEEPER INSIGHTS
- Clear Navigation: All three websites exhibited user-friendly navigation.
- Responsive Design: They were optimized for various devices, ensuring accessibility.
- Effective Visuals: Each site effectively employed visuals to engage users.
- Rail Park and the High Line excelled in rich content, interactive features, and user engagement. Rail Park offered an interactive map, while the High Line provided extensive visitor resources.
- Railpath lagged in interactivity and engagement.
- The High Line's depth of information could potentially overwhelm users.
Railpath- historical context
Rail Park- interactive map
High Line- user engagement
I gathered valuable insights to shape Vision Blvd's strategy, even though the campaign isn't as advanced as Railpath, the Rail Park, and the High Line. Three main objectives emerged, all focused on promoting community involvement:
Up to date information
Increase user interaction
Generously integrate calls to action
THE GAME PLAN
After the interviews and comparison of grassroots efforts, I brainstormed strategies to expand and cultivate a more diverse constituency. To address this challenge, I organized the creative constraints exercise into three categories:
I developed a hierarchy of needs framework to guide improvements for Vision Blvd's website. Based on the creative constraints exercise, I identified three action item categories with six actionable items. With these six goals aligned, I felt confident in our ability to grow and cultivate a more diverse constituency.
Action item categories:
What to add
What to acknowledge
What to advocate
HOW WE GOT THERE
The preexisting site contained five main sections- Home, The Vision, About, Contact and News. Based on our hierarchy of needs, I created a new framework that emphasized culture, collaboration and community involvement.
The founders' deep knowledge of the Central Freeway led to technical language in Vision Blvd that obscured key components for ordinary readers. The website revamp aimed to clarify this through better text organization and improved visuals while maintaining a user-friendly tone to enhance accessibility for a more diverse audience.
PRODUCT DEVELOPMENT
The initial logo design struggled with scalability and lost clarity when resized or viewed in monochrome. To resolve this, I proposed simplifying the logo by removing the skyline, horizon, and sun elements.
My inspiration came from the Focus Features logo, where the letter "O" serves both as a letter and a visual element. This prompted me to consider using the circular geometry of the "O" in "Vision" to reinforce the brand's identity while enhancing visual interest.
Selecting the ideal color scheme was an iterative process. The original five-color palette lacked hierarchy and appeared simplistic. The goal was to refine it to one primary, one secondary, and one neutral color. Initially, I aimed for a warm primary tone to convey welcome, experimenting with orange, but found it too bold. I then considered green for its associations with growth and sustainability; however, it didn't fully capture the project's essence.
Original color scheme
First attempt
Second attempt
I reevaluated the organization's core values and distilled a concise list of essential values crucial for garnering community support:
Trust
Reliability
Professionalism
The organization's values indicated a preference for the color blue, leading me to settle on a versatile navy hue after several iterations. To convey warmth and friendliness, I chose a subtle coral as the secondary color, reflecting vibrancy and creativity. Together, navy blue and coral successfully captured the emotive qualities I aimed for from the beginning.
FROM PROTOTYPE TO FINAL PRODUCT
Once the prototype was complete, I conducted a moderated usability test with five neighborhood participants. They were assigned four tasks, and their navigation was closely observed and documented.
1. Learn about the eight addressed main concerns
2. See what events are taking place
3. Sign up for Vision Blvd's newsletter
4. Write to Vision Blvd how you would like to help
KEY IMPROVEMENTS
Before
After
IMMEDIATE SIGN UP
At the top of the homepage, a clear call to action prompts visitors to sign up for the newsletter, replacing the previous vague "Join the Vision" CTA.
Before
After
CAPTIVATING HEADINGS
Every main page features a relatable visual heading to engage visitors. The script header is substituted with a straightforward sans serif typeface for a more professional appearance.
Before
After
history + timeline
The previous timeline was linked from the history page and could be easily lost. The updated timeline is visually condensed and directly accessible from the history page.
Before
After
NEWSLETTER ACCESS
The contact form was enhanced by promptly displaying email contact information and providing visitors the choice to subscribe to the newsletter. An external privacy policy link has been included.
The design
We're working with San Francisco residents and city and state agencies to make Vision Blvd a reality now—not in ten or twenty years. It's time to remove the Central Freeway and show San Francisco's commitment to a safe, livable, functional, and beautiful city for all.
Navigating through Events to Team to Contact Form
FINAL THOUGHTS
As someone passionate about urban revitalization and creating equitable public and private spaces, I would love to see this campaign fully realized. During the website redevelopment, I relied on existing images and videos of the Central Freeway. With more resources, I would have included a compelling ground-level video showcasing the urban challenges posed by the freeway.
Additionally, interviewing more traffic and environmental engineers, as well as community members from cultural districts—including coalition members opposing the campaign—would provide a more comprehensive understanding of different perspectives.
