Chiqui Esteban heads a talented crew at The Boston Globe, creating a stream of great news graphics. Two forces jump to the surface when talking with Esteban. One, the lasting impact of the Globe’s much-heralded 2011 site redesign — a change that brought device-agnostic site design to the top of the news design conversation. This means interactives need to be built in a way that scale and places a batch of challenges for how to handle complex data in an ever-skinnier interface. The other force is the Globe’s readership, one Esteban describes as very well educated and especially so in science and medicine. This puts a premium on being able to explain complex topics in a clear way that doesn’t compromise too much on the complexity of that kind of topic. Here is a quick tour through some of the Globe’s recent work.
The package on the new Boston Mayor’s appointments in print was designed as a circular network.
SND: The interactive and print approaches to Mayor Walsh’s new city hall are quite different. Tell me a little about how you came to those two methods of showing the mayor’s network of appointees?
The interactive version necessitated designing the information in a linear way.
Esteban: One of the things we must think first when we do graphics for the Globe is that they have to work on every device. That’s why we have responsive design. And work doesn’t mean just technically work, it means work as a narrative. So we have to think about the best way to represent the information on all different devices. For print, static and with a big size, the concentric circles seemed the best approach to show the different levels of responsibility in the new City Hall. Online, that formula would have not worked, because the information could not have been seen complete at first glance, so the best way to explain the different steps was one-by-one, from top to bottom. The idea is the same, but the way of representing it had to be different because of the nature of how people are going to consume the information. While we use size, color and other factors to give the reader a path to guide them through the graphic, online those factors are different.
The tablet and phone widths narrowed the linear flow to fit the device screen.
SND: Organizing the data by appointment-type and city department gives the user a quick way to understand the new mayor’s world. Tell me a little bit about the idea for the graphic, how you got the data and how it came together?
Esteban: After 20 years with the same Mayor, Boston had a new name in the City Hall, so we knew we were going to have a lot of changes. We wanted to keep the reader in the loop on what was going on. Names started to pop out and we wanted to have some way to summarize which positions were appointed, which positions were still vacant, and who was reappointed. So we got an appointment to talk to Dan Koh, the new Chief of Staff. He explained to me and two metro reporters, Andrew Ryan and Meghan Irons, all the changes he could tell us at the moment and clarified our doubts. With the help and knowledge of the local politics from Andrew and Meghan, I started working on the chart. We waited a bit until we had a few more appointments in key areas that gave us a more complete picture of the new structure. We published the graphic on the Metro front of the Sunday paper.
The most stylish Bostonians was built around a series of fun portraits — each person shot in two positions.
SND: The changing portraits for the most stylish Bostonians are really fun. When you hover over each person the second post is displayed. There is a little user reward when they roll over a person and see the pose change and yet another when they click through to the information on each person. Really fun, how did that package come together?
When you hover over each person the second post is displayed.
Esteban: Alexa McMahon, our BostonGlobe.com Arts producer told me the new issue of the “Most Stylish Bostonians,” a yearly special section, was coming together and she was wondering if we could do something for the site to present the featured people. I started thinking about what we could do, since there is not much information common to all and the only important thing was how they dressed and who they were. Talking with Alexa she told me that the photo shoot was yet do be done, so if I needed something from it, I could ask for it. So that’s when I had the idea. We asked our great photographer Dina Rudick to take at least two photographs of each of the “awarded” Bostonians.
Clicking further on each person brings up a profile.
One posing and the other doing something crazy like jumping, raising a hand. The photos she got were just what we needed and much of the good of this graphic comes from that amazing work. After that, the execution was easy. I prepared several versions, as the BostonGlobe.com editor, Jason Tuohey, wanted to use it directly in the frontpage. Everything had to be responsive, but we did a short version with just some of the people for the main homepage and the lifestyle section.
When the style package hits its breaks for phone and tablet width the Bostonians shuffle over.
SND: Talk a little about how you think about that type of interactive project in a responsive sense. I was wondering what would happen and I chuckled when I narrowed the browser and the people nudged over. Elegant solution!
Esteban: Working responsive means that many times we work with groups of blocks that stack in different ways depending on the width. In this case that was even easier, because each person was a different block that could work individually, so we can stack them and break them wherever we considered it was necessary.
How an implanted defibrillator works
SND: Tell me about the two medical graphics — the implantable defibrillator and the bionic ankle. Both seem to be great subjects, ripe for visual explanation, but beyond that your staff is able to use clear, well-edited visuals and language to explain. Tell me a bit about how you chose how to illustrate and break down these two subjects?
Esteban: We are lucky to have people in the team that are also talented illustrators, like James Abundis, who did the defibrillator graphic; and good designers, as Luke Knox, who did the bionic ankle piece. As I mentioned, space in the Globe is precious, and the readers are very well educated, particularly in science and technology, having the MIT and Harvard in the area. So our graphics have to be very well edited to be able to be completely rigorous and accurate in a limited space.
For the defibrillator graphic, James had to explain how this defibrillator works and how it can be a problem: once you put it, you can’t legally remove it, so if a person suffers innumerable heart problems, the defibrillator will keep them alive, no matter the desires of the patient. So he needed to explain how the heart works to be able to explain how the defibrillator works and highlight the problem. So it was step-by-step information, calling attention in a particular step and a sidebar with the other big difference, the incision needed to implant it. James then did a great job with the visuals and the structure.
Diagram of “bionic” ankle.
For the bionic ankle, Luke had very clear than the most important thing was to show the movement. Easy online, but hard in print. He came with the frame-by-frame solution. Then, the crucial information was to explain the spring that does this work, o he used a bit more space to explain its structure.
The diagram of the Panama Canal touched on many aspects.
SND: The Sunday business diagram on the Panama Canal has a ton of great explanatory layers. How did you come up with the approach to compare the size of the locks to Boston landmarks? And lastly, the graphic does a ton of work in a relatively small space. How did you decide which elements to keep in there and which to pitch?
Esteban: Thanks! That kind of comparisons is something I liked since I started in graphics, I remember all those kid of comparisons from the early 2000’s editions of Malofiej. And I have been using them since. They are very useful to make people understand sizes with something they know. In many cases people compares with whales and things like that (I’ve done that also), but I don’t know how many Bostonians have ever seen a complete whale out of water. But I do know that a very very high percentage if not all have seen the Old State House.
On how to decide which elements to keep in, that was easy. Once we have all the information, we started thinking what should be in there and what was accessory. Once we decided the key elements (having in mind that the space in the Globe is precious) we though in the disposition and the right sizing of each piece. It was for the Business front, so we know we could use more space than usually. Once we had something drafted we proposed the idea to design and it worked with the designers, so all great!
Choosing the right projection proved the key to this inventive travel map.
SND: And finally, the travel section map that shows concentric distances from Logan — what a cool idea! Is that a regular feature or was this a one-time thing? How did the idea and concept come about?
Esteban: David Butler is an ace with maps. He knew the easy solution was to show the map, the points, and lines from Boston, but he didn’t want to do that, the lines were useless and he was not comfortable with a projection that would show cities from Asia very far from Boston just because we could not have a sphere on print. He also didn’t want to cut Eurasia. So he looked for the perfect projection and he was able to create one using QGis with Boston as the center, and then plot the points. That was a great solution. So far we have just used it in that occasion, but I guess we will use it again if we need to.