Episode Transcript

Karen:

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

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, we’re about ready to take off and travel around the world. We are so excited to have Becca Jenkins from the U.S. Department of State here to talk about the U.S. mission website platform. Becca, thank you so much for joining us.

Becca:

Thank you so much for having me.

Ethan:

But before we dive in, I’d like to take a moment to mention our sponsor, GatherContent. They’re a wonderful content collaboration platform that helps teams plan, organize and produce all of their web content in one place. We’re excited to have them as a sponsor, as they want to make collaboration easy. GatherContent lets you centralize your editorial process, allowing your team members to easily edit and approve content: they offer simple workflows and structured templates, leaving off the mess of mailing tons of Word documents around.

What’s more, GatherContent’s designed a powerful API, allowing you to take your content wherever it’s needed: whether it’s publishing to your CMS, or pulled into an in-browser prototype, or directly into your application. If you’re looking to make your website responsive, you might give GatherContent a look. Check them out today at gathercontent.com.

Karen:

So, what I would love to hear about is maybe just an introduction from you. Give us a little bit about your background, what you do at the Department of State, and tell us a little bit about what the U.S. mission website platform is.

Becca:

So I am a digital project manager here at the Department of State, and I’ve been with the digital team for about seven years. I’ve worked both on internal-facing platforms and publication websites. Most recently, I’ve been managing the U.S. mission platform modernization, and that means moving from 450 forward-facing websites to a smaller footprint. We’re currently migrating to the WordPress platform and moving our 450 websites to a consolidated footprint. So, we’re going to be migrating to about 195 websites from our current model, and that’s just to basically change the model from one website per country to one website per building, and we’re actually consolidating further to remove our duplication with languages. So, for a case like Kazakhstan, we currently have six websites, one for our embassy, one for our consulate, in English and two other languages, Kazakh and Russian. So, again, it’s going to dramatically reduce our footprint to help us better manage our systems, and it’s going to be much easier for our content managers in the field to have one CMS platform for updating their content and their messaging.

We had a very large footprint of 450 desktop websites. Moving to a mobile platform as well, that doubled that footprint, so it was just a lot to manage from Washington.

Karen:

Well that is just music to my ears. So, I’d be very curious, as you’re talking about consolidating and reducing your footprint, how did the conversation around responsive web design enter into the mix? Like, was it an easy sell because you would have been able to just manage a single website for each of these entities? Or did you have to convince people that responsive was the right way to go?

Becca:

No, I’d say it was a very easy sell. Actually, previously we had both a mobile platform and a desktop platform, and so I think we found already—again, we had a very large footprint of 450 desktop websites. Moving to a mobile platform as well, that doubled that footprint, so it was just a lot to manage from Washington.

Frankly, the look and feel, it was great when we launched it, but it had diminishing returns as time passed, we found that it just wasn’t… we weren’t able to adapt it at the speed that we would’ve wanted to. So, moving to responsive, it was just kind of a no-brainer and everyone I think instantly understood it and was amenable to that.

We do have a large mobile footprint already, it’s about thirty percent mobile and then another about seven percent tablet.

Ethan:

Well, as the guy who coined the term, that is incredibly exciting to hear, Becca. One thing I’d be curious about though, when you’re moving from a mobile platform and a desktop platform to one unified approach, sometimes that teases up different questions of what a mobile user wants or what a desktop user wants, and as you’re designing for a truly global audience for all these different websites, how does the U.S. State Department tend to think about the needs of the mobile user or the desktop user? Do they need access to similar information, or are they somehow different?

Becca:

Yeah, no, that’s a great question. Looking at our traffic, we do have a large mobile footprint already, it’s about thirty percent mobile and then another about seven percent tablet, so we do have an increasing mobile footprint.

That being said, we do have a lot of processes that just realistically, at least at this point, are going to happen on desktop. Applying for a visa, renewing a passport, these are time-intensive processes that require having paperwork on hand. So at this point, I think we would expect that that kind of process is always going to be happening on a desktop, so the desktop is still very critical for us.

Then we also have a large number of global users who might not have access to a desktop computer at home, so we have a lot of people who are visiting some of our satellite spaces around the world or using internet cafés, that’s still a large amount of our traffic, I would say, so we need to basically accommodate both of these things.

For mobile, I think when we think about it, we see that as an increasing opportunity for social-optimized content, for content to engage end users with news, with statements, with policy information. And then for the desktop, I think that’s where we think about some of the services that the State Department always has to provide and that are critical to our mission—so, again, things like visas and passports. So, there’s really a space for both and we do accommodate both.

We surveyed our end users; we have about 1,400 web managers around the world, and we surveyed our users to see who would be interested in piloting with us.

Karen:

I’m always curious when I hear about these large-scale replatformings. How do you think about rolling something like this out? Like how did you stage the different entities or different countries that you were going to roll it out to?

Becca:

Yeah, great question. So, we did it on a volunteer basis. It started actually a little over a year ago, we surveyed our end users; we have about 1,400 web managers around the world, and we surveyed our users to see who would be interested in piloting with us. So we reached out to this group and they became our early adopters, and these are our forward-thinking posts that are already kind of on the leading edge of technology and who are willing to kind of work with us in an agile manner to help us iterate, to give us feedback, and to be our guinea pigs on the new platform. So, once we had those early adopters selected, we worked very closely with them to talk about their needs, to get their buy-in, and they really were who we used to pilot this approach.

Currently we have three four websites live [New Zealand; South Africa; Samoa; Czech Republic]. Again, three down, 195 to go for this project. So for 2015, it’s all volunteer basis, we’re doing it on a first come, first serve, based on interest, just because so much work has to happen both on our part and our web manager’s part. Our aim is to be done with the entire migration by the end of 2016.

We wanted to see what was driving people to these websites and what the top tasks were, so we could have that top task information very prominent on mobile.

Ethan:

Becca, maybe you could tell me a little bit more about those first three websites. Specifically, when you’re taking an existing digital property and making it responsive, how do you make decisions about what to keep and what to get rid of when you’re translating it into a responsive design? And how do you make decisions about what to prioritize on each screen?

Becca:

Well, like a lot of redesign projects, we started by looking at the data. We wanted to see what was driving people to these websites and what the top tasks were, and that was what we used to drive the look and feel both for desktop but especially for responsive, so we could have that top task information very prominent on mobile. Things like the visa process, our citizens services, which is our mission critical content, and things like jobs, connecting people to job information at the embassy, those were things we knew that we wanted front and center. And then, in addition to that, again, just the more socially optimized content. So we wanted it to be a mix between, again, kind of the process and the top tasks. Then also our public diplomacy content, which is our policy content, making sure that that’s more visible and available to our end users.

Karen:

Talk to me a little bit about the changes that you’re making on the back end. So, you mentioned that you’re moving over to WordPress. How does this responsive redesign intersect with some of the changes that you might have to make to the content or to the way that the content management system is set up and works?

Becca:

Yeah, so the platform that we’re moving from was an open source platform, but again, it didn’t have a responsive element. So we selected a very lightweight theme in WordPress to kind of use as our framework, and then we built on it from there. We had consultations very early on with the Government Digital Service in the UK, which they’re kind of forward-leaning on this, and they gave us the advice early on to kind of start with our core needs and build on the platform from there. So, again, we built a framework that was already responsive and just let that be our guide, and then we’ve used plugins from WordPress to, again, further customize it based on our requirements and our user needs.

One of the other things we did early on in the design process was we looked at our peer sites, we wanted to see what other governments were doing, what other websites in our vertical were doing, and what looked successful to us.

Ethan:

Becca, tell me a little bit more about that design process. Was it really kind of prototype-focused or were you still using some traditional design applications and tools to actually establish the visual language for the new responsive sites and share it with your stakeholders?

Becca:

Yeah, I would say it was a mix. So we looked at models; one of the other things we did early on in the design process was we looked at our peer sites, we wanted to see what other governments were doing, what other websites in our vertical were doing, and what looked successful to us, and we kind of started with that as our baseline. And then we did user testing, we did usability testing to see, again, looking at the data, looking at top tasks, to see if we were achieving our goals. So that was kind of how we started and then iterated based on what the data told us, so that was our model.

Karen:

I’m curious how a responsive process changes the way that you might review work in progress with the rest of the organization. So, I would imagine that across the State Department you have tons of people who might have to weigh in on these design decisions or on this new responsive site. How did you review things with people? How did you show them how the website was going to change?

Some of our stakeholders, they really respond best to things like mock-ups or wireframes. In terms of making it responsive, we always wanted to make sure that we were showing mobile mock-ups as well as tablet mock-ups, and desktop.

Becca:

First of all, I should say that that process hasn’t ended, that’s certainly something that’s continuous. I meet every week with stakeholders in Washington and the field. When we started this process, we always knew that this was going to be a work in progress, we didn’t want this to be a frozen moment in time, so it’s something that’s certainly been iterative.

Early on, I think what we find is that some of our stakeholders, they really respond best to things like mock-ups or wireframes. So, we shared wireframes and we shared mock-ups. In terms of making it responsive, we always wanted to make sure that we were showing mobile mock-ups as well as tablet mock-ups, and desktop, just, again, to give people a visual picture, because we just found that that really was necessary to make people kind of understand our vision, and we kind of took it from there.

One of the things we learned early on is that we were prepared to be wrong, we were prepared to have our assumptions overturned and make changes accordingly.

Ethan:

Becca, I’d be curious, as you were effectively defining a visual framework that could be rolled out across all these sites, I’m curious that as you were working on converting more of them over to the mission website platform, how do you identify things that need to be rolled back into the global framework, these sort of one-off things that might have some value to other stakeholders? How does that process work?

Becca:

Yeah, absolutely. So, we have a pretty robust backlog of requests, and those come from all corners. So they come from our end users, they come from our stakeholders in Washington, and then again, just from the data. Things like our passport section that we had kind of a hypothesis about how we wanted that to work. Once we started executing our websites, we immediately got feedback from our users in the field, our web managers in the field, saying that they thought there were better ways to do that.

We entertain every suggestion that comes in and we kind of crowdsource it. We have a digital community of practice that we’re using kind of as our—again, to be our early adopters, to give us our feedback—and based on what they tell us, we prioritize that in our backlog and we work to schedule it. So again, I think one of the things we learned early on is that we were prepared to be wrong, we were prepared to have our assumptions overturned and make changes accordingly. So, we’re always doing that, and we’ve let both the data and the feedback that we’ve gotten be our guide for that.

Karen:

Let me ask kind of a related question there, which is how did you manage the QA process for a rollout of this magnitude or a platform of this magnitude? One of the things that Ethan and I hear from a lot of people is that the QA process for a responsive project can be more time-consuming or more difficult as you’re accounting for all of these different form factors. Did you run into challenges there?

Becca:

Again, it’s something that we still work on all the time and it’s always constantly evolving. It is more time-consuming. What we did is we looked at our analytics to kind of see what the top mobile platforms were and the top tablet platforms are, and we just kind of prioritize based on that, to test. We have a group of on-site testers and they evaluate on all these different browsers and platforms to ensure that it works. So, yes, I mean it’s more time-consuming, but it’s something that we were very committed to because we wanted this to be something that would be optimized on mobile and on tablet because of the improvement, because of the traffic we’re seeing there. And yeah, it’s something that we built into the planning from day one and we’ve been acting accordingly.

[Performance] is something that internal stakeholders in Washington always are also very concerned about, and we take that very seriously.

Ethan:

One thing I’d love to hear a little bit more about is performance, because aesthetics and layout are one thing, but obviously the U.S. Department of State is designing for a truly global audience in disparate parts of the world, under various network conditions. Was that a design consideration at all, and how did you actually talk about performance internally?

Becca:

Yes, absolutely, that was another thing that we asked early on in the process of our early adopters and just the field at large, is we asked them to run local performance tests and share that data with us to kind of dictate what our bandwidth considerations needed to be. I mean obviously we have anecdotal evidence that we always hear from the field, but we wanted some kind of concrete evidence about that. This is something that internal stakeholders in Washington always are also very concerned about, and we take that very seriously.

Again, early on in the process we were looking at some of these widely available commercial responsive themes, and what we decided early on is that they were just a little heavier than what we wanted. That’s why we kind of decided to go in the direction of a lightweight kind of starter theme, to just build from there so we weren’t overdeveloping on our platform, to keep it simple. And again, some of the kind of public diplomacy imagery that we wanted to promote on desktop, we just have scaled that down considerably on mobile to help with load times. So, we have made some considerations in the design just to improve the experience on mobile and to consider low-bandwidth areas.

Karen:

Let me ask sort of broadly, how do you think about measuring the success of this initiative, or measuring the success of this responsive redesign? Like, what sorts of metrics or data or other evaluation frameworks do you have in place?

I’ve been really clear with our end users in the field that this process is meant to improve your work day in and day out, and if we’re not doing that, I think we’re not doing our job.

Becca:

Metrics are something that we’re always working to improve, and it’s something that we’re starting to focus on quite a bit now that we have a few more websites out the door, now that we have three out the door. Again, when we started redesigning this website, we knew that we wanted to navigate people toward top priority tasks, but we also wanted to promote our more social content, we wanted to make this platform more socially optimized to encourage social sharing. Looking at the metrics, I think we’d like to see more sharing on Facebook, on Twitter, on our various properties that are in the field.

Part of the reason we consolidated is because we found that users were confused, visiting multiple different properties to find the content they needed. So we actually want to reduce clicks, looking at our processes for applying for the passport process, things like this, we’re looking to improve that experience all the time. So, looking at the data around these events, doing some event tracking so that we can see that people are successfully making it from point A to point B was really important.

Another thing we did early on was, in addition to talking to our content managers in the field, we also talked to the people who work day in and day out in our embassies, in our consular section. These are the people who see people coming in for U.S. citizens services, for visa renewals, and we called them and we asked them, “What are your main pain points? What kind of calls are you getting day in and day out? What emails are you fielding day in and day out?” One thing that we wanted to be sure about is, first of all, that we’re not increasing traffic to phone lines, in-the-door, email, but we also would like to see a reduction in some of that traffic. So, that’s something I think we still need to work out how to evaluate. But what I’ve been really clear about with our end users in the field is that this process is meant to improve your work day in and day out, and if we’re not doing that, I think we’re not doing our job. So, that’s something I’m aiming for, personally.

Ethan:

Becca, I’d love to hear a little bit more about what you personally have learned over the course of this responsive redesign. Is there anything that you’ve learned taking the U.S. mission website platform live, and if so, what would you share with our listeners?

Becca:

As I said early on, just being prepared and willing to be wrong, to let your end users be your guide. I think, like I said, one of the things I think that we assumed early on was that using one of the best-in-breed responsive themes would be a positive way to go—and it would’ve worked, it certainly is something we were pursuing for a long time, but the decision we made to kind of change directions, I think it was the right decision. We’re always getting our ideas tested and we’re willing to change them. So I think that that’s one piece of advice that I would share, is be willing to take chances and to iterate and improve it.

Karen:

Well I have to say Becca, this has been so interesting to hear about the work that you’re doing. I am really looking forward to seeing how this rollout continues to proceed and wish you luck with the rest of this process.

Becca:

Thank you so much. We’re looking forward to it as well.

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.