Loading...
Top

PeopleForBikes City Ratings

Advanced data visualization site for the world's leading bicycle advocacy group.
Case Study
Category
Website
Client
PeopleForBikes
Prev
Next

THOR works with People For Bikes on numerous custom online projects every year. City Ratings is one of the most ambitious projects we've undertaken with them.

PeopleForBikes, the leading bicycling advocacy organization in the United States, presented THOR with an ambitious task: rethink, rebuild, and redesign their vast data-centric City Ratings website to include a complete overhaul of the underlying ratings system itself. As is often the case, the projects with the biggest challenges often deliver the greatest rewards. 

Challenges

The project presented a number of unique challenges:

  • How to build a visually engaging experience that can be replicated and applied to hundreds of cities while keeping site performance fast and ongoing maintenance reasonable?
  • How to manage data. Does a formatted dataset that receives an annual refresh make sense in a database or as a series of flat files?
  • How to give users context for comparative city ranking. And more importantly - how to convert users to advocates for improving cycling in their communities.

On the technical side, problems were prevalent. The previous site was built upon a functionally deficient WordPress instance that blocked users from even the most basic function of searching for their city. Comparisons between cities did not work with certain pairings. Design language on the site was out of step with the modern direction that THOR developed for the PeopleForBikes on their main website the prior year. Above all of these issues, the city ratings themselves presented underwhelming results. Taken as a whole, these issues limited enthusiasm to share the work and in turn to support the advocacy work at the core of PeopleForBikes’ mission.

Examples of the dynamic City Ratings site design.
The City Ratings site combines dynamic design with advanced database-centric architecture.

Building for Speed

THOR was presented with a greenfield opportunity to remake the site from the ground up. Our first task was to select a technology stack that would better suit the ambitions of this project. With data visualization and speed as top priorities, we recommended Next.js. We had used the tool for the main PeopleForBikes site rebuild in 2020 so it was only natural to build upon that success and reuse many of the React components from that project.

More importantly, the key feature of the React-based framework that makes it ideal for data-heavy applications is that it natively allows for server-side rendered applications. Next sites ingest all their data and render pages before they get requested, so sites can be dynamically updated by administrators and statically served to users without costly database requests. This frees computing resources in user's browsers and reduces the size of the files being served, making Next sites lightning quick. 

A Database or Not?

Our next task was to make sense of the large, public dataset that quantifies the ease (or difficulty) of using a bicycle in a given city. 

Each City Ratings city gets graded according to a set of technical criteria PeopleForBikes has developed alongside a community survey that polls individual cyclists. The summary score ends up being a weighted average of the two scores. Beneath this score is a layer of metadata that provides a significant level of logic to interpret.

A single entry, in this case Provincetown, MA - the best city for bikes in the US, looks like this:

An example of the actual metadata for a sample city.
Each of over 1000 cities has a complex underlying metadata layer.

Our first instinct was to build out a schema that accurately represented all the metadata, and use a Database-as-a-Service provider (Fauna) for the hosting. But as the project evolved we discovered the that the PeopleForBikes talented Local Innovation team was a valuable resource for refining the City Ratings dataset. This shifted our approach to the data model to a flat file solution as we started designing out the new site. Since this site's data is updated annually, in a single update, it removes the need for iterative adjustments throughout the year. 

THOR built a series of data normalization functions that used Python, the preferred language of data engineers at PeopleForBikes, to standardize changes to the dataset. We normalized the keys in the dataset, made sure all the numbers are integers, and output a JSON formatted set that natively works with Javascript-heavy Next.js.

A neat feature of the normalization script is its modularity: it can be run outside of the website as an extension of the existing data pipeline, or it can be run inside of the application. This gives the data team easy access for updating the site without the need for outside developers. 

Sample page views of filtering and how-to sections of the City Ratings site.
The City Ratings site was built to provide clear and relevant data to visitors.

Visualizing Great Biking

The design of the City Ratings site is a terrific blending of custom elements and template oriented content delivery. During our integrated design and development process [THOR digital process link], we worked diligently to create a framework that is dynamic in appearance and appropriate to communication goals. The entire design draws from a well constructed CMS and database centric content well. 

Our design process began with architecture that sought to identify utilitarian functions, top-tier messaging, and data driven resources. From there we developed a system of components that could be replicated across every city in the dataset. Each city received multiple treatments including an image-driven narrative approach for use as a case study and a full-page visualization deep dive data synopsis. The iterative process involved a tight design and development partnership that worked to fine tune the approach in an effort to create the most useful and inspiring graphics for visitors to the site.

The site is rooted in the design language we have developed for all PeopleForBikes branded sites. We began our process by identifying all of the elements that can be handled in a 1 to 1 manner by existing components in our design library. We then branched out to create new components that extended the brand and provided the custom design that a project such as this demands. In the instance of City Ratings we extended the component library to include a wide range of data visualizations, a new global reach initiative, numerous how-to tutorials, and a series of highly evolved search functions. 

A View From Above 

A hallmark of THOR's work is a focus on great imagery. Be it via custom photography or by curating stock images, we accentuate the core message of each unique brand with dynamic visuals. 

Some projects however, like City Ratings, demand more creative imagery solutions. In a data heavy project such as this we couldn’t expect to select individual images for thousands of different cities across the world and then dynamically serve those images to each corresponding city. The logistics would prove impossible for maintenance. Instead, we landed on the idea of using satellite imagery to visualize each city in a uniform way that gives users a familiar touchpoint for their city while emphasizing the analytical nature of the City Ratings project. 

The question became, how can we actually build this? How can we automate it? THOR evaluated Google Maps, as a potential option, but their licensing proved onerous. Washington, D.C. firm Mapbox turned out to have a great solution in their Static Image API. With their generous free-tier and high performance instructure, we implemented the satellite images for each city by leveraging the latitude and longitude coordinates in our dataset. The result is not only 100% appropriate to the subject matter and unique to each city page, but also automated and scalable for years to come. 

An isolated view of a city page header showcasing aerial view photography.
All of the content in the individual cities design is dynamically generated.
More Works

Other Case Studies

Aerospace America
National Investor Relations Institute

Schedule a consultation

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.