Episode Transcript

Ethan:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week folks, well, how ya like them apples, we’ve got an amazing guest for you. We have Lauren Lockwood, who comes to us from the City of Boston. Lauren, thanks so much for joining us.

Lauren:

Thanks for having me.

Karen:

But before we get started, let me jump in and say a few words about our sponsor, GatherContent. I am personally genuinely excited that they are sponsoring our little podcast here, because I think that GatherContent is really a fantastic product. If you know anything about the editorial process that goes into a large-scale redesign, you know that you’re going to wind up wrangling all sorts of content and all kinds of stakeholders. I think that when you’re going responsive, the editorial and the migration process is actually one of the most difficult parts of it. So GatherContent makes that collaboration and getting approval for your revised content much easier. They give you some simple workflows and structured templates. It’s so much better than that big pile of Word documents and Excel spreadsheets and that email that you can’t find. The tools you’re using today just aren’t very good. So, what’s even better is that GatherContent offers an API that will take that work out of your system and directly into a prototype, or into your CMS. So, managing the editorial processes in a responsive redesign is hard enough, so make your team’s life easier with GatherContent. Go to gathercontent.com and find out how this content collaboration tool can help you plan, organize, and produce your web content.

Ethan:

Nice, thanks Karen, and thanks GatherContent. So Lauren, before we dive into learning a little bit more about the newly responsive pilot.boston.gov, maybe you could tell me a little bit about what you do at the City of Boston?

Lauren:

Sure. So, at the City of Boston I’m the chief digital officer, which was a role created by the current mayor, Mayor Walsh, and that’s really to get a lot of our digital assets rowing in the same direction. So, things like social media, apps, and the website all speaking the same language, if you will, or under the same strategic umbrella.

The point of the redesign was to bridge that gap between making a lot of information nominally available like we do now in the current website, and making it more accessible for all of our users.

Ethan:

That’s great. Maybe you could tell me a little bit more about the newly responsive Boston.gov. Specifically, I’d love to know about why you decided to go responsive. What were some of those early discussions with the leadership in the city, and were there any concerns or discussions that came up about responsive design as a methodology?

Lauren:

Just backing up a little bit, the whole reason to redesign the website was because we really believe that there’s a difference between making information available and truly accessible. And so, the point of the redesign was to bridge that gap between making a lot of information nominally available like we do now in the current website, and making it more accessible for all of our users.

And, as I know you are all well aware, a huge audience that we have not been serving well is our mobile users. That’s everything from users who are on the go at Starbucks and want to pay a parking ticket, but it’s also people who use their mobile devices as their primary means for getting on the internet, so for everything from looking up information to applying for jobs. So, mobile was a huge priority going into the redesign for us and it’s something you can see from not just the mobile responsiveness in the technology but also the designs themselves.

If you’re looking up your license plate because you received a notice that your car got towed, or you went outside and your car wasn’t there, clearly we need to make that page mobile responsive.

Karen:

Let me follow up on what you just said there where you commented on the needs of the mobile user. I’m always fascinated by how different organizations conceive of what do they think a mobile user is, and is that different from a desktop user? How did you make those decisions for Boston.gov?

Lauren:

That’s a great question. When we started off this process, we went in with the understanding of very open-minded about who our users are, and so we actually worked with a firm called IDEO to help us interview a wide variety of users from across the city to better understand how they access the city’s website and what they’re using it for. And we discovered a lot of things through that process, and that’s where that broad range of users comes from—it is people who are on the go, but it’s also people who are sitting at home potentially and accessing things on their mobile device.

The things that we’re trying to get at are, you know, what state of mind you’re in when you’re accessing a piece of information, and also what device are you using it on. So, for example, if you’re looking up your license plate because you received a notice that your car got towed, or you went outside and your car wasn’t there, clearly we need to make that page mobile responsive, because if you’re on the go when you’re looking up that information, it’s incredibly important that that web form is available to you on your device. Traditionally, people who are on their desktops we’ve found tend to be at work, and so that’s also really important information too, that may be really important for our business users who are thinking about starting a business. So maybe we’re able to unpack more information to them on a desktop version, but at the minimum, everything should be available on that mobile device.

We have rolled it out with just four pages. To put that in context: our current website has over 10,000. This is clearly not a complete website, but we wanted to introduce some of these new concepts on a rolling basis.

Ethan:

Lauren, I’d love to hear a little bit more about how you scoped this responsive redesign. I’ve got the new site up on my browser right now actually, and it’s beautifully done. But I noticed how prominent these three main topics are. Was that like a key area of interest? I mean, were these like the primary pages that you wanted to take responsive? Maybe just tell me a little bit more about how you got your arms around the size of this redesign.

Lauren:

We wanted to roll this out in stages. In the past, the way website redesigns have gone is that a group of people go behind closed doors—with the help of design firms, of course—but rethink the website, introduce a new one a couple years later potentially, with a fully-done website, and we wanted to get away from that process. I am firmly of the mind that a website should be a living and breathing thing, constantly improving, and so we wanted to roll the website out that way.

We have rolled it out with just four pages. To put that in context: our current website has over 10,000. This is clearly not a complete website, but we wanted to introduce some of these new concepts on a rolling basis to try to suss out what works for people and what doesn’t.

And so, “topics” is a new way of organizing information that is in some ways department-agnostic. So whereas users would’ve had to go to multiple departments to find information that they’re looking for with respect to something like having a car in the city, we are instead packaging that in one place so users instead don’t have to know the departments to go to to get that information. So, the reason why we’re focusing on these three is they are recurring themes for us, but also they were pain points for people where they involve multiple departments and it’s a way of really illustrating what we’re doing with topics, to lay it out this way.

Now in the future, we’ll obviously have many, many more topics, and the beauty about them as well is that they don’t have to be mutually exclusive. You can have information about paying your excise tax, for example—that could be on a topic for having a car in the city, it could also be on a topic for paying taxes. So, we’ll be growing out this list over time, but this pilot is a way for us to just introduce new concepts to the public and take their temperature on them.

We believe so strongly these content experts in each of our departments are really the lifeblood of the website, so it’s crucially important that they are owners of their content.

Karen:

I’m always interested in how the rollout process, especially for a large civic website—like the conversation like Ethan and I had with the City of Surrey—I think that that really intersects hugely with your editorial process, that you have to take into account all of the different content managers, all the people across all of these different departments that are responsible for creating or managing or editing their content. Can you talk a little bit about your future plans for the rollout and how you’re going to bring these content managers into the mix?

Lauren:

Absolutely. So, we believe so strongly these content experts in each of our departments are really the lifeblood of the website, so it’s crucially important that they are owners of their content and we are just sort of, on the digital team, enablers of helping them get that information to the public.

We actually held recently a kickoff meeting with them to kickoff the process of going through all their content, helping them rewrite it, and put it into a new format. Because while we have made a lot of look and feel changes to the website, a big thing that we’ve also done has been to change the way that we talk to residents. What we’ve heard from so many people was a cynicism around what we do and how the language that we were using wasn’t very accessible, and so with this redesign we’re hoping to bring a more human, warm tone to the way we talk and also an effort to use plain language rather than acronyms or legalese. And so, we’ll be hosting writing workshops for our content liaisons across the city, just trying to make sure that we’re a resource to everybody rather than somebody who’s coming heavy-handed with a style guide or anything like that. And so, really we’re hoping to just improve the tools that each of our content contributors uses to get their information online.

We will be in a place in the spring to bring our content contributors onto that CMS and they will need to, for a number of months, be putting information into the new CMS and into the old CMS while we maintain the current city’s website.

Karen:

Well let me follow right up on that and ask a little bit more about the tools that those teams will be using. I know you’re partnering with Acquia, so I’m going to make the very reasonable conclusion that you’re implementing Drupal. Can you talk a little bit about the changes or the implementation of the content management system?

Lauren:

Absolutely. We’re moving away from a CMS called SDL Tridion. The changes that we’re making to Drupal I think are very exciting for our content managers. Tridion has been difficult for many to adopt and we made the decision to go with Drupal over the summer and we haven’t looked back. We are working with Acquia to implement a new CMS, and while we don’t have that fully built out yet, we will be in a place in the spring to bring our content contributors onto that CMS and they will need to, for a number of months, be putting information into the new CMS and into the old CMS while we maintain the current city’s website. So there’s an unfortunate overlap there, but I think that we all are excited about this new technology and what it allows us to do in the future. So, yeah, it’s a very powerful back-end and it’s something that we’re really excited about.

Karen:

So if you can tell from this interview so far, topics like how you roll out a responsive redesign or how you get all of your content owners on board with the changes that they’ll have to make to their content, even how you have to make changes to your content management system are all parts of a responsive redesign that you might not necessarily think are at the heart of going responsive, but they are. So if you’re struggling with these issues, Ethan and I have a workshop that your organization might be interested in taking. So, we cover topics like rollout and strategy, and how you should think about your content, and Ethan also talks about some of the design and development challenges.

Lauren:

That’s terrific. It’s definitely a problem we’ve run into, and we have brought a content strategist on board because one of the biggest challenges we’ll run into is, for example, how long a block of text is. While that may render well or sort of okay on a desktop version of a website, it really is difficult to find information on a web version if tools and resources are buried underneath a block of text. So, that’s just one example of a way that we’re having to sort of hit the reset button with content.

One really great example was spending a morning with our call center, and just seeing the way that the call operators look at the website and navigate to get answers for people on the phones.

Ethan:

Well, that’s great to hear. To anyone who might be listening today, just to kind of circle back, we love giving these workshops internally, just to give you a bit more of a holistic view of what we offer and what you’re going to expect in your responsive redesign. So if your company needs a little help going responsive, drop Karen and I a line at responsivewebdesign.com/workshop. We’d love to hear from you.

Lauren, I’d love to hear a little bit more about the design process. Could you tell me just a little bit more about how you partnered with IDEO to really visualize this responsive redesign? Were you reviewing mock-ups of this new layout? Were you looking at prototypes on a hand-held device? Just tell me a little bit more about how that started.

Lauren:

IDEO was a fantastic partner, so I’ll just start there. We, again, started with no preconceived notions. We went in to ask ourselves, what is the point of the city’s website? Should we be providing only resources? Should we be a place for people to get engaged? Should we just get out of the way?

And so, we went in open-minded, we met with many users as a starting point, both inside city hall and outside city hall. I think one really great example was spending a morning with our call center, and just seeing the way that the call operators look at the website and navigate to get answers for people on the phones. And so, there were a lot of really instructive interviews that we had, and then out of that process we developed a set of guiding principles, which we actually go into in detail on our blog, next.boston.gov, we have more information there. But we distilled a set of guiding principles then to help guide the development of the rest of the website and the prototypes.

As a living and breathing thing, this website will need to be maintained and grow with our team internally here.

From there, we worked with IDEO, they presented to us a number of different brand concepts as well as mock-ups for actual pages, and then from there we began refining and trying to figure out which pieces of which of the concepts worked well and which ones didn’t, and then eventually we arrived at the look and feel you see here on the website.

They also went further and mocked up many page templates and page components that you don’t yet see on the website but that we are, behind the scenes, testing with users now. So, there are things that you’ll see grow onto this pilot site over time. But they really—while they were helping us interview users and design iteratively, the important thing is that we were only engaged with them for a number of months, and in that time you could only build parts of the website. As a living and breathing thing, this website will need to be maintained and grow with our team internally here. And so, a big piece of that time with IDEO was really teaching our team how to “fish” in a sense, that going down the road we can develop these topics and we can develop new experiences online for people without that oversight from IDEO.

Ethan:

If I could just follow up on that for a second, Lauren, just to connect that with a thread you mentioned earlier about making information accessible. What I like about that path is, you know, moving from talking about aesthetics to actually being able to hold the site in your hand, one thing that a lot of organizations struggle with is making that shift from aesthetics to usability, and performance is a big part of that. Was the speed of this new responsive site something that was ever discussed while you were designing it?

Lauren:

You mean speed in the sense of load times?

One piece that we hear a lot or that we need to think a lot about for mobile users is not just speed, but also data usage.

Ethan:

Yeah, kind of. You know, just how quickly you can make this information accessible to different network speeds, to different devices.

Lauren:

Yep, absolutely. So, that’s a great point. One piece of feedback actually we received shortly after launching—it’s interesting that you mention this—was just that. One piece that we hear a lot or that we need to think a lot about for mobile users is not just speed, but also data usage. So, when I mentioned groups of users, where their primary access of internet is through their phones, a lot of times that’s because they’re using data, not necessarily a WiFi connection. And so, we do have to be very cognizant about, for example, the size of the photos on our web pages. And so we’ll be looking through different strategies to reduce those sort of large files and the complication of our apps that we interface with so that, just out of respect for those users and making sure that we’re not using up more of their data or their time than we need to.

If somebody in city hall thinks that this button should be blue, that counts as one vote, and every user gets a vote, and we have to respect what’s most useful to our larger base of users.

Karen:

Let me ask how you managed reviews with the rest of the organization. As you are working with outside agencies, but as you’re working with all kinds of people, I would imagine, across the City of Boston, how do you show them work in progress? How do you get all of your stakeholders to review and approve the work that you’re discussing?

Lauren:

That’s a great question. So we did have a number of meetings internally with mock-ups to show them what we were working on. But before we did that, I think the most important piece was really to introduce this idea of having a truly user-centered website, and what that means is that if somebody in city hall thinks that this button should be blue, that counts as one vote, and every user gets a vote, and we have to respect what’s most useful to our larger base of users. And so, we really worked hard to instill this idea that the design of the website would be inherently very user-centric, and so any sorts of design opinions or things like that would be, in essence, trumped by, you know, any overwhelming feelings from the public. So, that I think helped lay the groundwork for what we were collecting feedback on and what we weren’t collecting feedback on.

Now, I think the really important piece was getting people internally focused on this idea of topics and how to use them to make information more accessible to users. So, we got a lot of really helpful feedback from different departments when we talked about this concept, to help think about places where they interact with another department and it creates some friction or a pain point for users. So I think a perfect example is recently we talked to our bikes department, to our office of Boston bikes, and they said, “We get calls all the time from constituents saying, ‘There’s a pothole in the bike lane,’” and then they say, “But we don’t fill potholes, Public Works does.” And so that’s a perfect example of a time when a user gets torn between two different departments and they’re not sure where to go, and so these topics serve as great landing places for us to sort of heal those frictions between departments that had previously caused pain points for users.

I think there’s a lot of excitement around that, and there still is a lot of excitement I think as we go through this process of really migrating all this content and really rolling up our sleeves. We may hit more hurdles, but for now we’ve been able to use a lot of positive feedback about the design or the potential for where this website is headed to help drive a lot of that motivation to get their content on here in a way that’s useful for our residents.

Ethan:

Lauren, while you were talking about pain points, another one came to mind, which is a lot of organizations struggle with device QA and just testing a new responsive design, trying to figure out how you can actually provide support for not just the latest and greatest devices, including a whole bunch of mobile phones that might’ve been in the market place for a few years. Is that something that the City of Boston has had to deal with since Boston.gov has started to roll out?

Lauren:

Yes, and it’s a new thing for us. I’m not sure I’ve mentioned this, but our current website is not mobile responsive, and so it’s not something we had focused on previously, but now we always see emails from each other saying, “Hey, anybody have an Android we can try this on?” and it’s because we are wanting to make sure that everything is rendering properly in not just all the different browsers but the different devices, as well. So, it is something that we’re newly focused on and definitely something that we’ve not figured out yet. We’ll be looking to learn more about the different kinds of services that we’re able to do to help streamline that process.

On our current website, mobile traffic tends to hover around fifteen percent. We’ve been watching that closely with our new pilot website, and it’s been much closer to fifty percent.

Karen:

Let me ask a little bit more broadly about how you measure the success of this responsive implementation. Like, what kind of metrics or data are you looking at to evaluate the rollout, and is it different now that you have to take mobile and responsive into account?

Lauren:

Yeah, absolutely. So we’re in I think new territory as it relates to analytics. We obviously had Google Analytics on our current website, but it wasn’t a very useful starting place for us, and that’s because a lot of times there’s the sort of the “tail wagging the dog.” The website analytics pointed to things like food trucks as being one of the highest trafficked web pages on our site, which is good, it’s good information to know, but it may not be as a result of what people are needing information for from the City of Boston, but really what was made easily available to people or one page that we did well.

We are looking at a lot of the standard rates. Obviously we want to look at bounce rates and things like that, but I think one very instructive thing that we’ve seen so far is that on our current website, mobile traffic tends to hover around fifteen percent, which is extremely low, as you know, compared to other websites available online. So, we’ve been watching that closely with our new pilot website just to see where that’s come in, and it’s been much closer to fifty percent since we rolled this out, and part of that may be a difference in audience—people navigating to the current city website are a much broader audience than who’s visiting the pilot. But I think that’s a very instructive place to begin looking at how people are accessing the information.

Ethan:

Wow, I’ll say. Well, congratulations on those mobile numbers, that’s really fantastic. Well Lauren, before we actually end the interview, which has been wonderful, I’ve just got to ask, for our listeners who might be starting a responsive redesign today, is there one thing or a set of things that you’ve learned during this responsive implementation that you’d like to share with our listeners?

Lauren:

You know, I think the one thing that’s been really positive for us, and very helpful for us too, is to really get out there and ask people for their opinion. The feedback on the current city website that was really helpful to us is overwhelmingly we were told that the font was just too small, and so we made it almost comically large with this new website, and there will still be people I’m sure who will say it’s too big. But really listening to users, not just asking for that input, but closing the loop with people has been really helpful. It’s helped drive our roadmap for how we’re rolling this out, but then also there just seems to be a great outpouring of warmth toward us and also just respect for the work that we’re doing because we’re inviting people to join our process.

Karen:

Well Lauren, I really have to say thank you for taking the time to talk to me and Ethan. I’m pretty sure I can speak for Ethan here where I say that we’re both huge fans of the work that’s being done in the civic design space right now, and I think what you’re doing at Boston.gov is a fantastic example of that. So, thanks for sharing.

Lauren:

Great. Thanks for having me on.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast. And thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process today.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every episode at responsivewebdesign.com.

Thanks so much for listening, and we’ll be back next week.