SAFE STREETS
TOMPKINS
2024- 2025

https://safestreetstompkins.com/

SAFE STREETS
TOMPKINS
2024- 2025

https://safestreetstompkins.com/

client
Tompkins County, Ithaca-Tompkins County Transportation Council (ITCTC),
New York State Department of Transportation (NYSDOT)


tools used

Design: Figma, Adobe Illustrator, Adobe InDesign, Adobe PhotoShop


Development: HTML, CSS, JavaScript, Statamic, Laravel Valet, PrePros, HighCharts


Deployment/Management: GitHub, DigitalOcean, Ploi

Overview

Tompkins County came to Cambridge Systematics with the plans of creating a website with the purpose of informing local residents about the then-upcoming Safe Streets 4 All (SS4A) Joint Safety Action Plan. The SS4A Safety Action Plan The plan was developed as a way to address the region’s costly motor vehicle crashes and reduce motor related injuries and fatalities. The website would be developed in tandem with Camsys consultants working on the safety action plan and include content from the plan, interactive data visualization elements, and a survey to collect user responses. 

I was assigned as the sole developer and designer for this project, making a majority of the creative and technical decisions.

Tompkins County came to Cambridge Systematics with the plans of creating a website with the purpose of informing local residents about the then-upcoming Safe Streets 4 All (SS4A) Joint Safety Action Plan. The SS4A Safety Action Plan The plan was developed as a way to address the region’s costly motor vehicle crashes and reduce motor related injuries and fatalities. The website would be developed in tandem with Camsys consultants working on the safety action plan and include content from the plan, interactive data visualization elements, and a survey to collect user responses. 

I was assigned as the sole developer and designer for this project, making a majority of the creative and technical decisions.

Website


Role

⚈Wireframe

After collaborating with the client and our consultants, we ultimately ended up with an initial wireframe for a 4-page website: a Home Page, Project Materials, and Map page.

The Home page would include a text section describing the Safety Action Plan, an announcements section, a graphic-heavy callout section with statistics on motor vehicle fatalities, and an interactive graphs section. 

The Project Material page would include .PDFs and other files for visitors to download and view pertaining to the Safety Action Plan.

The Map page would contain an interactive dashboard created in Microsoft PowerBI.

⚈Design

The client requested that we develop a new set of branding guidelines not only for the website, but for the entire SS4A Joint Safety Action Plan. Tompkins County did not have any initial requests for specifications so we had full liberty to develop the initial branding. A series of color palettes, graphics, and logos were developed that would not only be used for the website, but also for the full-length report that it complimented.

Colors

Retaining the color of Tompkins County blue from their website, we provided the client with a choice of 2 color palettes. 

Inspired by the colors of the autumn leaves Upstate New York is known for, we chose a tangerine, dark orange, and pastel green to make up the primary colors for the Safe Streets Tompkins brand.

Initial proposed color palettes showing a contrasting darker and lighter version.
The client ultimately selected the latter lighter and vibrant palette.

Tompkins Blue

Tompkins Blue

Tangerine

Tangerine

Dark
Orange

Dark Orange

Pastel
Green

Pastel Green

Brownish
Purple

Brownish Purple

Playfulness

We chose to approach with a tone of playfulness, opting to use hand drawn icons, cartoon graphics, an emphasis on softer, rounded corners rather than sharp edges and a bright color palette.

Safe Street Tompkins logos, stacked and horizontal versions

Safe Street Tompkins logos,
stacked and horizontal versions

Samples of graphical elements used throughout the website and report

Safe Street Tompkins logos,
stacked and horizontal versions

Chart outlining the schedule of municipal meetings within Tompkins County used in the report

Chart outlining the schedule of municipal meetings within
Tompkins County used in the report

Safe Street Tompkins logos,
stacked and horizontal versions

Early Designs

Early Designs

In the early stages of designing the site, I analyzed how other information-focused and educational websites structured their layouts. A common pattern was the use of a persistent sidebar, giving users constant access to the main navigation. However, while this approach works well for content-heavy platforms, the content provided by our client suggested that the final site would have a relatively low page count.

Early prototypes of the website's layout

Safe Street Tompkins logos,
stacked and horizontal versions

Ultimately, we chose a classic top navigation bar that remains fixed at the top of the page. This allowed us to highlight a scenic background image featuring the blue skies and landscape of Ithaca, New York. The concept drew inspiration from an earlier project I did that used a rich blue gradient to emphasize natural scenery and the surrounding city.

⚈Development

⚈Development

After the designers were approved by the clients, we moved on to development. The site was developed in the Statamic content management system. 

Statamic

Statamic is a modern, flat-file and Laravel-powered content management system designed for developers who want the flexibility of a custom application with the usability of a CMS. Statamic is our preferred CMS because of it’s lightweightedness, developer support, and the ability to scale up if needed.

Component-based Templating

Statamic uses the Antlers templating engine, enabling reusable UI components, dynamic content rendering. Features such as Blueprints, Fields, and Collections allow customizable templates for both the front-end and CMS which provides straightforward usability even for users that are unfamiliar with editing web content. 

Statamic uses the Antlers templating engine, enabling reusable UI components, dynamic content rendering. Features such as Blueprints, Fields, and Collections allow customizable templates for both the front-end and CMS which provides straightforward usability even for users that are unfamiliar with editing web content. 

Flat-Files

Data in statamic is stored in flat YAML files rather than a traditional database, making it simple to transfer over to clients when it is time to perform a site handover. Another advantage of flat files is the ability to use Git-based version control, workbranches, and deployment.

Data in statamic is stored in flat YAML files rather than a traditional database, making it simple to transfer over to clients when it is time to perform a site handover. Another advantage of flat files is the ability to use Git-based version control, workbranches, and deployment.

Content Management System

Initially, the plan was for Camsys to manage and update the site’s content after launch, with long-term ownership eventually transitioning to Tompkins County. To support contributors who might not have extensive web experience, implementing a CMS that would make content editing straightforward and intuitive. Using Statamic’s Blueprint and Fieldset tools, we were able to precisely define which elements of the site could be edited, giving contributors the flexibility they needed while maintaining design consistency and reliability.

Initially, the plan was for Camsys to manage and update the site’s content after launch, with long-term ownership eventually transitioning to Tompkins County. To support contributors who might not have extensive web experience, implementing a CMS that would make content editing straightforward and intuitive. Using Statamic’s Blueprint and Fieldset tools, we were able to precisely define which elements of the site could be edited, giving contributors the flexibility they needed while maintaining design consistency and reliability.

Accessibility and Responsiveness

Accessibility/
Responsiveness

As a web developer, ensuring responsiveness and accessibility is always a top priority. Safe Streets Tompkins' website layout adapts seamlessly to all screen sizes, and the top navigation bar adjusts automatically across industry-standard mobile, tablet, and desktop breakpoints. Together, these considerations ensure that the website remains fully accessible and easy to use for anyone, regardless of their device or browser.

Desktop layout

Tablet layout

Mobile layout featuring a sticky top navigation with a hamburger menu

Mobile layout featuring a sticky top navigation
with a hamburger menu

Data Visualization

Accessibility/
Responsiveness

The client requested a dashboard to illustrate the declining rate of motor vehicle fatalities and serious injuries in Tompkins County over recent years. To highlight these trends and enable meaningful comparison against Upstate New York, New York State, and national averages, I developed a set of line and bar combination charts using Highcharts.js. Highcharts was selected over our usual Chart.js framework due to its enhanced feature set, greater interactivity, and advanced configuration options, while still providing the same customizability and maintaining strong cross-platform accessibility.

Charts Section

Interactive Features

⚈Deployment

⚈Deployment

The Safe Streets Tompkins site is hosted on Camsys’s DigitalOcean server. In conjunction with Ploi, a server management software, the connection to the site’s GitHub repository was seamless. We initially set up a staging site for the client to review before publishing it for public access. We set the staging up in a way where any change made to the repository will automatically be reflected on the staging site, where the live site will require changes to be published manually. After purchasing the safestreetstompkins.com domain on SquareSpace Domains, we were able to successfully deploy the website for the public to access and continuously monitor and diagnose any potential problems that may arise.