Creating an iconic Boston.gov
We’ve talked a lot about the new look and feel of Boston.gov — we even made our brand guidelines public. Today, we’re diving into a small but important aspect of the new site: our icons.
Admittedly, we were a bit all over the place on the old site with our icons. Instead of one cohesive voice, we let departments do their own thing, and it made for a weird experience. Without consistency, it was confusing to try to figure out if the information you were getting actually came from the City of Boston.
With the new Boston.gov, we stepped up our game. You’ll find close to 300 custom icons across the site, including on department pages and on our homepage. Even with these tiny icons, we made sure to stick to our strategic principles. We want to look warm but official, creating an environment that makes you want to click around and explore our site.
Through icons, we’re able to communicate meaning across languages. Along with helping you navigate the site, our icons also add a bit of personality to Boston.gov.
Experiential icons
One of the main types of icons you’ll run across on Boston.gov are “experiential” icons. These bold line icons are used for specific actions a citizen may want to take, like paying a parking ticket or registering to vote.
Experiential icons also give us a chance to add a little humor and a personal touch to our work. They are built using three-pixel width strokes and usually (but not always) have hard edges.
Department icons
As part of the rebranding of Boston.gov, we gave departments their own icons for the site. You can see each of these “departmental” icons on our department directory. These icons are meant to indicate deeper content, or may just point you to a specific department page. They are in no way meant to replace current departmental marks and logos. They are a wayfinding tool for people to see which department created a piece of content on Boston.gov.
These icons are simpler and made of solid shapes so that they can easily be recognized by a repeat user. They are filled with Charles River Blue and given a bold underline with Freedom Trail Red. Wondering just what “Freedom Trail Red” and “Charles River Blue” mean? Learn more about our colors.
Other icons on Boston.gov
You’ll also find small, circular icons on our place profiles, but really, they can be used wherever they're needed. For these inline icons, we are using a similar style to our social media icons. They are surrounded by a three pixel circle and filled with Charles River Blue. They’re used to describe the features of a place. You can see great examples of inline icons in the sidebars of the Boston Centers for Youth & Family community center pages (scroll a bit down the page).
An icon case study
The inspiration for icons comes from a lot of places. For the Landmarks Commission icon above, our team first researched landmarks around the City. We pulled from pinterest, google image searches, and our own knowledge. We quickly settled on Trinity Church in Copley Square as the basis for our design. Why Trinity? With a project like Boston.gov, it’s helpful to design one icon for multiple uses. We chose Trinity because, aside from Landmarks, it could represent churches, public spaces, old buildings, and more.
We also felt that Trinity would be easily recognized by non-English speakers. More than 140 languages are spoken in Boston. About 34% of residents in the City speak another language. This, of course, doesn’t count the many tourists who visit Boston each year. Icons like Trinity Church attract the eye but also give a person a general sense of what information they’re going to. This helps us — in a small way — break down language barriers on Boston.gov.
What’s the best way to test anything? Put it out in the world and see what people say. When our team showed this icon to members of the public, they quickly identified what it was, and what it could represent. At that point, we knew we had a winner. During the launch of Boston.gov, we created close to 300 icons in just a few months. Despite that tight deadline, we still tested our icons with actual people to make sure we weren’t designing in a vacuum.
Icons might not seem like a big deal, but they are an easy aspect of a site to get wrong. We plan to grow and expand our icons over time as we add new content and topics to the site. By using icons with a similar look and feel, we hope to cut out the confusion, and surprise and delight you with our style decisions.
The ultimate goal is for you to enjoy your time on Boston.gov, and to feel like you’re using a website built by humans, for humans.
