Screenshot of DistrictBuilder marketing website.

Brand and website redesign for a free, open source redistricting tool that recently underwent a significant rebuild and product launch.

Contributions

Logo, identity, marketing strategy, website design and development

Organization

Azavea

Background

Azavea aimed to democratize the process of “redistricting”: a process in which states redraw districts across the U.S. Redistricting has vast implications on various aspects of our country’s democracy, including representation, voting, and funding. To help make the process more transparent and accessible to the people whom it most affects, Azavea launched a refresh of a product it had first launched ten years ago: DistrictBuilder.

DistrictBuilder is a free and open source app that allows advocacy organizations, journalists, and concerned citizens to redraw districts in a user-friendly web application, thereby allowing them to make informed suggestions to politicians. As a part of the product redesign, I worked on a refresh of the existing brand, which had been designed during the first launch and was showing its age.

The old DistrictBuilder logo.

Understanding the redistricting space

Before I began taking a look at DistrictBuilder’s brand and visual design, I evaluated existing tools of a similar nature. My goal was to better understand how other products were marketing themselves, and what types of imagery, color, and symbology is common.

There were a few patterns I noticed. Unsurprisingly, most of the available brands use blue as a primary color, some leaning into the political colors of both red and blue.

Logo redesign

Upon taking this project, I originally considered redesigning the mark. Ultimately, I realized that there was enough brand recognition of DistrictBuilder within this space that it made more sense to focus on making visual refinements to the existing mark and logotype.

All told, I made several key changes to the logo:

Introduced blue and red into the mark

Though political gerrymandering is a huge concern in redistricting, it is not the only consideration. Additionally, DistrictBuilder is currently only built for use in the United States but it is possible to expand its use to other countries that undergo the redistricting process. As a result, the original design team appears to decided against using U.S. flag colors in the logomark.

However, I felt strongly that this decision appears to hurt the brand more than it helps, as the colors lacked meaning. People tend to associate politics with redistricting and the census, and though this is not all that redistricting is about, I felt that we could get this across through our messaging rather than the logo itself. I also developed a brand architecture that could take in differen countries, should DistrictBuilder expand past use in the United States:

Imagined DistrictBuilder sub-brands for other countries it could be used in.

Mark refinements

I retained the “builder” brick reference, and simply refined the shape by recreating it overtop of a grid. I also rounded the corners slightly to make it look more modern and less sharp on screens. Both of these changes also ensured that the mark looked consistent and legible at smaller sizes, which was not true of the previous mark.

New typeface and color palette

Finally, I choose the New Frank typeface for the logotype. New Frank has a large font family and has an understated design that I felt would offer DistrictBuilder more refinement than its previous logotype. I also developed a fuller color scheme for UI and collateral applications.

  • New Frank typeface in various weights
  • Color palette.
  • Screenshot of the application.

New Frank in various weights, color palette, and a screenshot showing how I applied both to the application.

Marketing website

All of this was applied to the application and DistrictBuilder marketing website, the latter of which required a full overhaul. Working with my marketing colleagues, I focused on ensuring that this new web page would appeal to our target audience. Knowing that this is a niche web application, we also needed to explain how DistrictBuilder helps combat gerrymandering.

  • Desktop and mobile views of DistrictBuilder’s homepage and contact page.
  • Desktop view of DistrictBuilder’s homepage hero.

Create an account on DistrictBuilder to try out redrawing districts.