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, well, we are positively bounding with joy at the fact that we are speaking with both Geoffrey Daniel and Steve Fisher who are here to tell us about the City of Surrey website. Welcome, guys.

Steve:

Thanks. Happy to be here.

Geoffrey:

Same. Thank you.

We found, not too long ago, that our users were choosing to use mobile far more than desktop versions.

Ethan:

So Geoffrey, Steve, could you guys tell us a little bit about what you do and how responsive design has been playing into it recently? Geoffrey, why don’t you go first.

Geoffrey:

Certainly. So we found, not too long ago, that our users were choosing to use mobile far more than desktop versions. We have a very young city; the average age fluctuates between nineteen to twenty-three-years-old. And, as one might expect, a lot of those users use iPads, mobile devices, and we just felt like we weren’t keeping pace without an actual responsive website.

Ethan:

And Steve, what about you? Where do you come in in all of this?

Steve:

Well, I’ve been working with Geoffrey and his team at the City of Surrey off and on on contracts to help them with their website since 2010. But I really got significantly involved when they reached out and said, “Hey, we have all these people coming to our site that need to access it on mobile devices and it really isn’t friendly for them.” You know, it worked… but not the way that they wanted it to. And so in 2012 and ‘13, that’s when we jumped in to help refresh their site to make it responsive.

We used “mobile” as sort of a “gateway drug” to people understanding what responsive truly was and what it truly meant.

Ethan:

That’s great. Geoffrey, I’d be interested to hear, as you guys were planning to kick off this responsive redesign, how did you convince your stakeholders to actually go responsive? And I’d be really curious to hear if there were any concerns or questions around that buzzword, “responsive,” that kind of keeps floating around. Was anybody concerned about investing that as a strategy?

Geoffrey:

So, the way we sort of got around that—and that’s actually a very good question—is using the term “mobile-friendly.” The idea of responsive was a term that people just didn’t understand within the city, so we had to sell it as a mobile project. We used “mobile” as sort of a “gateway drug” to people understanding what responsive truly was and what it truly meant, and that sizing down for screens was just the first step in having great user experience patterns.

People were really just looking for the same content and to be able to accomplish the same tasks on any device. But more and more people in the city of Surrey have mobile devices over standard desktop computers.

Karen:

Can you talk to me about how, within the City of Surrey, you talked about the difference between mobile users and desktop users? Did you think that people needed different things on different devices?

Geoffrey:

That’s another good question. What we found was we actually put devices in people’s hands. In many cases, many of our senior management hadn’t really thought about what a mobile experience was. So when you put the website in front of them in a screen format that wasn’t really built for it and asked them to find certain things, you’d find them sort of pinching and zooming and the frustration was evident within two-three minutes of using that experience. It was really just a process of getting them to understand “Oh, this isn’t optimal, and I can’t do anything quickly, and I feel handicapped by my device, one that I use more often than I use my desktop.”

Steve:

You know, it was also pretty interesting—and I think this is true of any municipal site out there, because cities are like a mile wide and an inch deep, they provide all the services to all the people, is kind of what it’s like, and so it’s just such a wide range of things. But they’re trying to accomplish the same things across a mobile device and the desktop is what we were finding, with a few exceptions here and there. So if they’re reporting a problem, let’s say, “Hey, there’s a pothole in the street in front of me right here,” that could be a little bit different on the mobile device as opposed to a desktop because they can geolocate, they can do certain things, and they were starting to have those expectations set on other apps and websites that they were using. And so we would see that. But for the most part, I’d say, Karen, that people were really just looking for the same content and to be able to accomplish the same tasks on any device. But more and more people in the city of Surrey have mobile devices over standard desktop computers.

A lot of people want the Superman project, where it has all the superpowers and it’s going to work out perfectly. But what we needed here was Batman, where everything was exploding around us but we worked it out as we went along.

Ethan:

I’d be really curious to hear, as you guys were about to kick this project off, how did you actually scope it? How do you plan something like a big responsive redesign? I’d be really interested to hear too, since this has launched, since Surrey.ca is out there, has that changed the way you think about planning subsequent responsive projects?

Steve:

Well, I’ll jump in here because I was part of the team that helped provide the response to say, “Hey, here’s what we think we need to do and what it’s going to cost.” But it was also this unique thing in that we needed to do it in two phases. The first phase was this design strategy research and content strategy project, and then the second phase was implementation, testing, and launch. But the first phase, where we were doing all of this research design and everything, I think was two and a half months. We had a very, very compressed timeline, partially to do with how budgets work and when the initiative needed to be out there, because the city of Surrey was actually moving—physically moving—its city hall across the city, which meant that a lot of its IT infrastructure things really couldn’t handle a project during a certain period of time. So we had this hard deadline that was because of a physical location move.

But what we did and what we committed to the Surrey team—well, actually, we committed to this together I’d say—is that these are the things we believe we need to do. So, we need to make sure we understand your content, where it is, its quality, what your vision is, your business goals, all those things. But we need to have flexibility within the project to just bust it up, to say, “Well, you know what? We discovered we don’t need to know this, or you’ve actually already done it over here.” So, I like to describe it as a lot of people want the Superman project, where it has all the superpowers and it’s going to work out perfectly. But what we really did and what we needed here was Batman, where everything was exploding around us but we worked it out as we went along.

So a lot of the activities that we thought we needed to do, like a really clear writing guide, things like that, were actually already done by someone at the City of Surrey, and so we would shift efforts to do things like, “Let’s focus more on governance then, because you don’t have a clear governance model. Let’s go out and do some card sorting with iPads on the streets and go to bus stops, to pools.” I actually stood in a pool once holding an iPad as people were card sorting, which made me a little nervous because it wasn’t my iPad…

We’ve actually been dedicating time to bringing about a responsive pattern library that’s allowing a lot of that development to happen a little bit faster now.

Karen:

That is hilarious. Can you talk about how that scoping model fed into a rollout plan for how you released this to the public? So Steve, you said you’ve been working with them since 2010. How did you decide to roll out the responsive redesign? Did you roll it out in stages? How have you tweaked things as you’ve progressed over the years?

Steve:

Sure. Well, I’ll start into that and then it’d be great if Geoffrey could kind of finish it. So initially, all that there was scope and time for was the website itself, and I should say most of the website itself. Now, the technical team that was rolling it out ran into a few issues with some of the implementation, and so those have been smoothed out since then as time has gone along.

But there are also twenty-seven web apps—we’ll call them—that basically weren’t touched, and certain forms and things that we just couldn’t get to in time to actually launch this out. So that was communicated as best as possible, but since that time there’s been subsequent efforts and projects that allow us to actually go back and say, “Okay, we’ve got these twenty-seven apps. Do we need twenty-seven? Do they all need to be responsive? Are some standalone?” and all of that. So, we’ve actually been dedicating time to working those in and bringing about a responsive pattern library that’s allowing a lot of that development to happen a little bit faster now, because we made some mistakes along the way and we’ve learned from those as the site has continued to live on, so to speak.

But Geoffrey, how about you share your perspective from the City of Surrey’s team and the launch and how that was communicated.

Geoffrey:

I certainly can. The way we saw it was sort of the start of this work. So Surrey.ca became our best practice model for how we should try to tackle these kind of projects going forward. But also, because of some of the mistakes we made along the way, we started to tailor a responsive project to the project itself. So whether it’s an application or our special events site, making them responsive isn’t the utmost goal—making them responsive is the starting place. “What else does this particular project need?” or “How does it need to live to make it useful for the public?”

So, for example, if we’re doing a responsive project for a Canada Day site site, what are the audiences there? What are they looking for? How do they want to consume that information? That’s part of our process for making all of our websites or applications responsive.

It started to change how the City of Surrey departments communicated.

Steve:

Yeah. A really neat thing that came out of this that I don’t know if any of us really expected—we maybe should have expected this—was when the team was working on a lot of the content strategy and understanding how the different departments should be communicating through web governance and through the workflow. And as that training happened within the City of Surrey, these different departments started to see “Oh, we should be talking about these things. Oh, we should be doing that,” and they started to take notice of some of the research techniques that the web team at the City of Surrey were embarking on and using for this project, where they were going out and talking to real people more and more often, and not doing this really long, onerous user testing or user engagement, but more regularly just out talking to people, seeing “Okay, well how does this work for you? We’ve got a little responsive prototype. What do you think of this?” and setting out certain tasks in front of them. It started to change how the City of Surrey departments communicated.

I’d say—and Geoffrey, correct me if I’m wrong here because I don’t want to push this beyond what it really is—but I’d say at this point at the City of Surrey, I’m seeing them become more of a design and content-driven organization. When they think about anything that’s going online, they want to start with understanding what it is that their residents, their businesses within the city of Surrey or people coming to Surrey need. Which honestly is a big change from 2010, and it’s very exciting to have seen this progression. And it came out of this one responsive refresh that kind of felt rushed, but was kind of amazing at the same time.

The idea of actually asking our users what they want and how they want to consume it is now becoming sort of second nature to the way we do our business there.

Geoffrey:

I would wholeheartedly agree with that. The idea of actually asking our users what they want and how they want to consume it is now becoming sort of second nature to the way we do our business there. I remember a project that Steve worked on with us that was taking a look at some of our permitting applications. I could actually feel change happening when Steve was showing a video of someone interacting with an application. It’s one thing to see on a web forum or a piece of email feedback that someone did not like an experience, and it’s something completely different to watch somebody interact with something that you’re responsible for, that you had a hand in building, and then just looking frustrated and irritated and saying things along the lines of, “Well, it might just be better for me to come into city hall.” It’s become core to who we are now, around how we create these actual business practices online.

This responsive project led to this more human interaction for these builders that are stuck out in the building site, and so they don’t have to come to city hall as often once this project rolls out.

Steve:

That one was particularly an interesting and fun project. To give a bit more depth into what was happening there: I was out with a manager on a building site—so, they’re building a couple hundred townhomes—and we’re in this orange ATCO trailer in the scorching sun, and that’s his office, he’s out there all alone, and he’s trying to get all these different permits and access to different information. He couldn’t do it because he was on a BlackBerry 10… That’s right, we were in Canada. But no, he’s trying to use his BlackBerry, but it’s a newer BlackBerry that doesn’t work for the current permitting app, the native app that the City of Surrey had built and they just couldn’t quite keep it up to date, not because they didn’t want to but because they were trying to support different operating systems and it was just kind of this black box model where they couldn’t get access to everything from this third-party vendor. This guy just said, “You know, I can do this easier with people because there’s so many roadblocks here for me,” and he just sat back and started to open up.

So, while it was a responsive redesign project there, like these apps, what we really learned was, “Hey, they want this experience to be a lot more like it is in real life for them.” And so, we were able to start to roll that into that particular app and say, “Okay, let’s get rid of these roadblocks. Can we do this?” And again, these departments—plumbing, electrical, permitting, building request stuff—they’re all coming together to say, “Well, how can we do this? Can we?” So this responsive project led to this more human interaction for these builders that are stuck out in the building site, and so they don’t have to come to city hall as often once this project rolls out.

What we started to do was get people involved in more sketching sessions, some responsive content modeling, getting input from different departments early and often.

Ethan:

That is a wonderful story, Steve. Thanks for that. Let me drill into the design process a little bit for Surrey.ca. Has that changed, just generally speaking, as you’ve been doing more responsive work? How did you actually start circulating the designs with the city, how did you actually start showing them the work that you’re doing?

Steve:

Yeah, it definitely has changed. When I was involved early in 2010, I was working with a company called Yellow Pencil and was contracted to them, and that was more of a traditional workflow of saying, “Here’s this deliverable. Do you approve of the iterations?” and all of that. But at this point, what we started to do was get people involved in more sketching sessions, some responsive content modeling, getting input from different departments early and often. Initially, we were doing that so that we could do the project a bit quicker, but we just saw people starting to understand and get those a-ha moments faster.

Quicker involvement and quicker prototyping has really led us to better and better decision-making over time; it’s really helped us as a team.

And so now as we approach any project going forward, it really is that we’re trying to involve as many people as possible at the right time so they can jump in and say, “Hey, in day two of this responsive content modeling workshop that we’re doing, we’ll bring in the engineering department to spend an hour with us so they can give their input, see where we’ve gotten to, and help us find any gaps we might’ve missed.” And then they walk away having better understood both where we are in the process but where we’re headed in it, and so they have this buy-in moment.

We also do a lot more prototyping, like really use a grey box, maybe it’s done in Foundation, something like that, in-browser prototypes, just wireframes, hopefully with real content in them so that people can work through some tasks like, “How do I find the hours for city hall? How do I contact someone? How do I pay my dog license?” some of the cliché but often-done tasks on a municipal site. That quicker involvement and quicker prototyping has really led us to better and better decision-making over time; it’s really helped us as a team.

Geoffrey:

I’d also add that because of their involvement early and often, what you’ll get is more iterative design. Previously, often times we would build and then walk away from something, so it’d be five years before we touched an application or a website again. Now, it’s like, “Let’s take a look at this every year. Let’s touch base with our audiences to see what they’re getting out of it and make incremental improvements as opposed to starting from scratch each and every time.”

Steve:

Yeah. Well, even the name of the project back in 2012 when it started—it was a “responsive refresh.” We wanted to make it clear, “Hey, we’re not going to change everything about the site.” In fact, when people come to it we want them to feel like, “Oh yeah, I’m still in the City of Surrey’s website, but yeah, it works on my phone now. This is great!” And to get that mentality out there to the organization too, to the city, to say, “Hey, this is a living thing. We don’t need to treat it like we would something that is incredibly expensive to update all the time.” It might be expensive to do this, but it’s less so if we continue to make improvements along the way. It really is a better experience for everyone, including the people paying the bills, too.

Karen:

Steve, can you guess what I’m going to ask about? I’m going to ask about the content.

Steve:

Okay! I love talking about content. This is great!

Karen:

If I know anything about working on government projects, it’s that wrangling all of that content is one of the hardest tasks. Can you talk about how you manage that?

Steve:

Well, there was a good team working on that, so I don’t want to take credit for this. I was working with another content strategist, Alaine Mackenzie, who was working Yellow Pencil at the time. And of course the whole Surrey web team—but I think right now, Geoffrey correct me if I’m wrong on this, but you have 236 content authors for the City of Surrey…?

Geoffrey:

Yes.

It was great to have people who understand why content and context is so important. Unlike some other government websites, we were in a great place to communicate why good content is important.

Steve:

Yeah, that’s a lot. And they have close to that amount back then, just under 200, I believe. So, there is a lot of wrangling of people, let alone the content, and they had approximately 20,000 pages to take care of. So, Geoffrey and his team really dug in and I would say did the bulk of the work there, going through and working with the different content authors, stakeholders, and doing just a ton of work—I would say probably a couple month’s worth of overtime maybe—to really churn through all this content and look at it, rewrite a bunch of it, axe a ton of it. But a lot of that came out of us really understanding where the content was coming from and its quality. So, the inventory/audit. And then the gap analysis; to say, “Okay, well this is where we said you want to go as an organization, but here’s the state of your content right now,” and mapping that. It took a long time. But with a group of five or six of us really pulling together, it happened within the amount of time, and there was a lot of reduction to the content in good ways.

And again, just establishing the governance for the site, because it kind of existed and it kind of didn’t before that project, and afterwards really understanding, “Okay, this is how we’re going to archive and when we’re going to archive things,” it made a big difference long term. One huge win during that time—although I think the search was implemented afterwards, like Google Search Appliance—but there was not great metadata, or in some cases no metadata, on content. But by the end of the project, I believe we had metadata on basically everything, and that’s a huge thanks to Geoffrey and his team. I think Alanna, who works with you Geoffrey, worked really hard on that.

There’s 150 different languages or dialects spoken in the city, or approximately that, and this a city of about 600,000 people. So, it’s a really diverse community.

Geoffrey:

Alanna was a great resource. It was great to have people who understand why content and context is so important. Unlike some other government websites, we were in a great place to communicate why good content is important and how we keep the standards up on that going forward. And just a slight correction: we don’t have metadata on everything but we’re getting much better.

Steve:

Aw, it is much better. You guys are doing great. An interesting thing about the city of Surrey—now, I know this from their school district, I don’t know this from Surrey.ca—but there’s 150 different languages or dialects spoken in the city, or approximately that, and this a city of about 600,000 people. So, it’s a really diverse community. A lot of people are immigrating there and English is not their first language—in fact, it may not even be their second language. And so, it’s a really compelling case to have as much plain language as possible, just a lot of clarity, and to remove jargon wherever you can so that a new business owner that has just moved to Canada, to the city of Surrey, could use Google Translate, which is what we implemented—well, I should say Yellow Pencil, the implementation company—did there. Of course, Google Translate learns over time and it gets a little better. But it’s literal, so the planner the language was, the better we saw that working. And so that was another selling point to really churn through and work on the content. But it was amazing to see how many people really contributed to that effort.

It’s been one of the best projects I’ve ever worked on, to be perfectly blunt.

Geoffrey:

It’s been one of the best projects I’ve ever worked on, to be perfectly blunt.

Steve:

[laughs] Woohoo!

Ethan:

That’s always nice to hear; that’s great. Since the website has launched, has there been anything that you’ve learned from that process, any part of the responsive design that once it was released you just sort of felt like it wasn’t performing as well as it should? What I’m really curious to hear is have there been any elements of the design that you’ve since reworked or just tweaked recently, and if so, why?

This is a credit to my team, was that the content was excellent. It was set up in such a way that it was truly accessible, it was easy to get through, easy to digest, and the navigation was set up beautifully.

Geoffrey:

Good question. The parts that we’ve tweaked recently have been for accessibility. The way that our website was set up, and as Steve sort of indicated, the process by it was built—it was built relatively quickly—so, we didn’t know how well we were faring in terms of accessibility. Obviously because we’re government, and just because we’re caring people, we wanted to know if we were meeting the needs of all of our audiences. We found, after completing an accessibility audit, some of the technology was letting us down. Certain things like tabbing through would return information or navigation that wasn’t a great experience.

But the one great thing was, and this is a credit to my team, was that the content was excellent. It was set up in such a way that it was truly accessible, it was easy to get through, easy to digest, and the navigation was set up beautifully. I am very, very proud of my team in that respect.

There’s a responsive pattern library now. It’s meant to be this big time saver but also to bring a better, more congruent experience all these different applications and the website.

Steve:

Yeah, there were, as we discovered, quite a few accessibility issues, like forms. Forms have been a thorn in the side of that website for… well, forever, maybe. [laughs] The CMS that they’re currently using and the form builder within it just is not accessible, it doesn’t work very well with responsive. And, of course, forms are pretty important to a lot of transactions. So, it’s exciting to have this accessibility project under our belt and say, “Okay, the City of Surrey is shooting for WCAG 2.0 AA standard,” because in Canada, at least in B.C., we don’t have laws around that yet, which I think is really odd for Canada. I’m a little bit disappointed. But that doesn’t mean we can’t strive for what we need to be doing. But yeah, there’s good stuff coming out of that.

Another thing too that has happened since then, and it hasn’t quite been rolled out yet but we’re testing certain parts of it, is there’s a responsive pattern library now. Because we would see that while the site was a good transition, because in 2010 the new visual identity for Surrey had just been established, so in 2012 they were just getting used to it I would say, and so moving the site into something that was a bit more in line with what you would see in the physical world around you was good for the responsive project. But now that we’re in 2015, we’re seeing that there’s these twenty-seven different apps out there, and they don’t always use the same design patterns. In fact, you may log in one way on one and a different way on another, or the date format might be different from one to the other, and that can be a bit frustrating to people trying to use these things.

So, we’re just about done putting out a pattern library where any developer third-party/in-house can look and say, “How do we do this type of form? How do we do buttons? What do we do if it’s a subscribe button vs. a different call to action, and how do those meet accessibility standards?” So, those two projects kind of merged at a nice time and we’re hopeful that will make a huge difference moving forward. We’re already starting to use pieces of it to test it throughout the site. But it’s meant to be this big time saver but also to bring a better, more congruent experience all these different applications and the website.

Do the pattern library first. Do it earlier.

Karen:

You guys have such fantastic perspective on how you roll out and manage and maintain a responsive design over several years. Do you have any advice for other organizations, maybe even other government organizations, that are interested in pursuing a responsive project? What would you tell them to do?

Steve:

I would say one thing is do the pattern library first. Do it earlier. But a big part of it is Canada’s going to change, there’s going to be laws about accessibility, and that really should have been a focus on the initial project, and it wasn’t. And the technology that they’re currently using is making that a little bit difficult in some places.

You need to have a great foundation of well-structured content, governance, and design patterns.

But I would think about some of those core “first things first” stuff, like understanding your vision, understanding your audiences, dig into your content models so you know the relationship between your content and how it’s going to work, and your governance early on, and think of it more as a living system and less of a design that you’re going to launch. Because really, the inception, those nine months let’s say, leading up to when the site launches is really just when we’re giving birth to it, and then hopefully that site lives a long life of iterations and improvements, that there’s not these big redesigns that are needed. But you need to have a great foundation of well-structured content, governance, and design patterns to get you to that point, at least that’s from my perspective.

Something we do now fundamentally is when we kick off projects like this, like a responsive project, we loop in the public to let them know that we’re listening and we want their feedback.

Geoffrey:

From my perspective, it’s the communications loops. I think if there was anything that provided or presented a challenge, it was not looping in our core business or not looping in our customers beforehand or early enough. The responsive project was great but it was done a little bit in isolation and was presented at the end without as much feedback as we likely should have gotten. So, you found yourself educating your partners both internally and externally at the end of the project as opposed to at the beginning of the project. Something we do now fundamentally is when we kick off projects like this, like a responsive project, we loop in the public to let them know that we’re listening and we want their feedback, and we loop in our partners in senior management and our business areas and units to let them know we’re also listening to them. It’s all an opportunity to grab feedback and grow the solutions we’re building for the city.

Steve:

Yeah, because right now we’re working on improving that together to lead to a bit more of a refresh to the site in the future. So, part of our project currently is to talk to approximately fifty internal and external stakeholders within the City of Surrey in one-on-one interviews. And it seems like a lot of time to commit to that—in fact, I had a colleague mention that and say, “Wow, how can that fit in?” But honestly, it helps the project so much in the future that we see it as a big time and money saver beyond than just the great part that it will actually create a better experience long term because the public and the internal stakeholders are informed and involved.

Ethan:

Well Geoffrey, Steve, this has been a fantastic half hour. Thank you so much for coming on the podcast and sharing a little bit about Surrey.ca. I know I’ve learned quite a bit from it.

Steve:

Oh, we’re happy to have come on. This is fantastic.

Geoffrey:

Absolutely. My pleasure.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

Ethan:

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We’re also planning to offer these workshops to the public, so please go to responsivewebdesign.com and let us know that you’re interested.

Karen:

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

Ethan:

Thanks again to our sponsor, Campaign Monitor, and we’ll be back next week.