Responsive Web Design · Community · Non-Profit · Rapid Prototype
In the 1950s, amid America's freeway construction zeitgeist, a colossal steel structure carved its way through San Francisco. It brought with it shadows, pollution, and noise; leaving preexisting communities in disarray. The Central Freeway was born.
In 1989, the Loma Prieta earthquake damaged the northern section of the Central Freeway. Seizing the opportunity to correct an urban planning failure, the city demolished the damaged portion and replaced the area with a lush tree-lined promenade with vibrant park spaces, breathing new life into the area and benefiting the surrounding communities immeasurably.
Today, the southern portion of the freeway remains. In sharp contrast to its former self to the north, this area remains trapped in blight.
Navigating through Homepage to Vision to History pages
THE CHALLENGE
Throughout my career, I've had the opportunity to contribute to a diverse array of public works projects, specifically focusing on the redesign of open spaces. These public works initiatives are fundamentally geared towards serving and benefiting the broader community. Their objectives encompass a wide range of essential functions, including enhancing recreation opportunities and promoting overall health and safety.
While I have a deep passion for these projects, it's no surprise that the bureaucratic processes governing them can be intricate and sluggish in gaining momentum. In the case of the northern half of the Central Freeway, a devastating earthquake served as a catalyst, expediting the need for a redesign. In the absence of such a catastrophic event, the Vision Blvd campaign aspires to harness sufficient community support to propel this monumental public works endeavor forward.
This comes at great timing. On February 28, 2023, U.S. Transportation Secretary Pete Buttigieg unveiled a groundbreaking initiative – the Reconnecting Communities Pilot Program. This unprecedented program is set to allocate $185 million in grant awards for 45 projects. The primary goal is to restore connectivity in communities that are burdened by historical transportation infrastructure decisions.
In May 2023, I assumed the leadership role in the design process and collaborated closely with Praveen Naga, along with a team of eight participants directly affiliated with the campaign and deeply engaged community members. This esteemed group included the founder and co-founder of Vision Blvd, as well as the director of GrowSF.
My responsibility within this collaborative effort was to enhance the online presence of Vision Blvd, transforming it into a more effective tool for public outreach.
KICKOFF
Existing website
This undertaking went beyond the scope of simply making a better looking website. The ultimate measure of success centered around creating a more effective tool to bolster public support to propel progress. By viewing the website as a tool to do so, the objectives were 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 socio-cultural barriers that have hindered Vision Blvd's progress.
COMMUNITY MEMBERS MATTER THE MOST
Upon closer examination, it became evident that the community comprised two distinct groups: long-term residents, with a legacy of over two decades, and relatively recent residents. The duration of their residence significantly influenced their unique outlooks and perspectives on the neighborhood.
Long-term residents exhibit a deeper emotional connection to their neighborhoods, often intertwined with cultural and historical attachments. Conversely, newcomers might offer a fresh and different perspective on the community.
Gabriela, a longtime neighborhood resident, holds mixed feelings about the freeway removal, particularly concerning its potential impact on gentrification and the displacement of longstanding residents.
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, any community opposition appeared counterintuitive – if communities were negatively impacted by the aftermath of the Central Freeway– severed neighborhoods, air pollution, noise, and blocked sunlight – wouldn't they be overjoyed by any plan to demolish it? However, considering the historical absence of community-based decision-making in the 1950s, it now became clear why Vision Blvd faced criticism, specifically about diversity within the leadership. It's not so much that opponents like Calle 24 and the American Indian Cultural District want the Central Freeway to remain. They questioned if the campaign truly represents the impacted communities and if it genuinely includes marginalized voices. Regardless of leadership's good intentions, the optics of three white men spearheading an initiative to again change marginalized neighborhoods hasn't been well-received. It became clear- developing a more diverse constituency of support is vital to the success of Vision Blvd.
Aside from identity politics, the campaign faces additional challenges, including concerns related to feasibility and livability. Questions arose about the potential impact of eliminating the final mile of the Central Freeway on traffic patterns. This particular section of freeway is heavily relied upon by residents on the west side.
There were also considerations about how this change might affect property prices, rental rates, and overall housing affordability in the area. Furthermore, there were misunderstandings within the community regarding Vision Blvd's decision-making process, leading to apprehensions that choices had already 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.
-Conversely, Railpath lagged in terms of interactivity and engagement.
-Additionally, the High Line's depth and complexity of information could potentially overwhelm users.
Railpath- historical context
Rail Park- interactive map
High Line- user engagement
I extracted valuable insights on shaping the strategy for Vision Blvd, although the campaign is not as advanced as Railpath, the Rail Park, and the High Line. Three overarching objectives surfaced, all with a shared emphasis on promoting community involvement:
Up to date information
Increase user interaction
Generously integrate calls to action
THE GAME PLAN
Following the interviews and the comparison of grassroots efforts, I brainstormed strategies for expanding and cultivating a more diverse constituency. To tackle this challenge effectively, I divided the creative constraints exercise into three distinct categories:
From there, I created a hierarchy of needs framework to structure my approach to improving Vision Blvd's website. Based on the creative constraints exercise, I came up with three action item categories containing six actionable items in total. With six broad goals working together, I felt confident that we could grow and develop 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.
Influenced by the founders deep understanding and involvement in the Central Freeway, certain components of Vision Blvd became obscured to ordinary readers due to technical language. The objective of the website revamp was to clarify matters through improved text organization and enhanced supporting visuals, all while maintaining a user-friendly tone, improving accessibility to a more diverse audience.
PRODUCT DEVELOPMENT
The initial logo design faced issues with scalability and lost clarity when resized or used in monochromatic settings. To address this, I proposed a simplification of the logo, which involved the removal of the skyline, horizon, and sun elements.
My inspiration for this simplification stemmed from personal experiences at movie theaters, particularly when observing the Focus Features logo. In that logo, the letter "O" in "Focus" serves a dual purpose—it not only spells out the word but also adds visual interest and aligns with the meaning of the word itself. Considering that Vision Blvd also contains an "O," it sparked the idea of utilizing the circular geometry in a distinctive manner to reinforce the word "Vision."
Determining the ideal color scheme was an iterative process. The original five-color palette lacked hierarchy and looked elementary as a result. The goal was to minimize the color scheme to one primary, one secondary, and one neutral. The original intent was to incorporate a warm primary tone to convey a sense of welcome. I experimented with orange but found it too attention-grabbing and bold. So I turned to green because of its association with growth and sustainability. While less assertive, it didn't quite align with the project's essence.
Original color scheme
First attempt
Second attempt
I conducted a reevaluation of the organization's core values and distilled a concise list of essential values important to garnering community support:
Trust
Reliability
Professionalism
The organization's values suggested the use of the color blue. Following several iterations with different shades, I ultimately settled on a versatile navy hue.
Nonetheless, I remained committed to conveying warmth and friendliness. To achieve this, I ventured to the opposite side of the color wheel for the secondary color. I opted for a subtle coral hue, which expressed vibrancy and creativity. Together, navy blue and coral effectively conveyed the combined emotive qualities I envisioned from the outset.
FROM PROTOTYPE TO FINAL PRODUCT
Once the prototype was complete, a moderated usability test took place with five participants who live in the neighborhood. To observe user navigation, 4 tasks were assigned, and observations were 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 are collaborating with San Francisco residents, as well as city and state agencies to make Vision Blvd a reality as soon as possible—not ten or twenty years down the road. The time is now to remove the Central Freeway, and show the world that San Francisco is serious about doing its part to create 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 the creation of equitable spaces for public and private use, I would love to see this campaign fully realized.
During the redevelopment of this website, my options were limited to utilizing pre-existing images and videos of the Central Freeway. Given greater resources, I would have eagerly included a compelling ground-level video that showcased the urban challenges posed by the Central Freeway.
Furthermore, it would be beneficial to conduct interviews with additional traffic and environmental engineers, as well as community members representing various cultural districts, including those within coalitions currently opposing the campaign. This would have provided a more comprehensive understanding of various perspectives.
