Project overview
I redesigned and also developed a WordPress site with custom functionality in order to support The East Cut's efforts to raise awareness about their services, and also in service of the neighborhood's attractive features — particularly their many privately owned public spaces.
The East Cut is a community benefit district located in the northeastern district of San Francisco. They rely on donations from residents and business to keep the neighborhood clean and safe.
Design Goals
This is a great client. They really trusted me to take the lead on design direction while also providing valuable feedback along the way. Here’s what they needed:
- Leverage COLLINS' branding which is just outstanding. This was the primary inspiration for all CSS code.
- Tell the story of the great work they do: cleaning up trash, removing graffiti, homeless welfare checks, and various safety initiatives.
- Showcase the vast and unique public spaces available.
- Allow users to submit a request for assistance with a cleanliness or safety issue
- Simplified navigation for users to find important information such as community meetings, COVID-19 resources, or news about urban development projects.
Visual Design
The client and myself are both very happy with the look and feel we've established for the website — both mobile and desktop versions.
Open Space module
Utilization of CSS grid turned out to be a beautiful design choice for showcasing open space photography.
Functionality
This project is more than a redesign, it also serves as a functional web application that scales elegantly as more content is added. From animations that highlight the work of the street services team to the interactive open space map, this was a carefully crafted solution and the client can control everything conveniently within WordPress.
Open Space + Google Maps API
Below is a screenshot of the maps UI I built, which is a split screen / two-way dialogue between the Google Maps UI and Wordpress custom posts.
Street Services statistics widget
Below is a GIF depicting the widget I built that showcases how much work the Street Services team does to keep the neighborhood safe and clean. I have an animated stats sticker in addition to an interactive before/after UI that shows graffiti being cleaned.
Content Management
Giving the client the keys to drive the website is crucial for the overall success of the project. So, on top of the design work itself, there was a bit of strategy involved to determine the best way possible to use WordPress and custom functionality within WordPress to allow for this control in a user-friendly way.
Open spaces
Client can easily add and edit all open spaces within Wordpress.
Service stats
The client can easily add monthly service statistics to WordPress. Then in the code, I calculate totals based on monthly inputs and display a widget on the front-end.
Meetings
I gave the client a nice easy way to manage meetings, providing custom fields for date, time, Zoom link, agenda, and even an "add to calendar" link.
