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, frankly we couldn’t be more excited to be speaking with Nicole Kroger and Jeff Webster, who are coming at us from the Cincinnati Art Museum. Nicole, Jeff, thanks so much for joining us.

Nicole:

Glad to be here.

Jeff:

Yeah, same.

Karen:

But before we get on with it, I’d like to welcome back our sponsor, Gather Content. I’m thrilled that they’ll be sponsoring this podcast for the rest of the year. I recommend Gather Content to my own clients who are going through a website redesign. Gather Content provides some much needed structure and editorial workflow to help manage a large-scale content creation process. Because Gather Content works with so many organizations going through a website redesign, they have unique insight into how content fits into a web project. And because they are such great people, they wrote down their advice for you! They’ve put together a 41-page guide to Content Strategy for Website Projects. Head on over to gathercontent.com/RWD to read their advice or download a PDF to share with your team. Thanks, Gather Content!

Ethan:

So, before we dive into the interview, maybe the two of you could tell us a little bit about what you do and what your involvement with the Cincinnati Art Museum’s redesign was.

Nicole:

Sure. I’m Nicole Kroger, I’m the web and digital media manager here at the Cincinnati Art Museum. So, I’ve been in this position for about two years now, it was a new position when I took over, so I manage our website projects as well as our digital asset management system. So, one of the first things when I came into the position that I wanted to do was investigate some new website options; our site had been out of date for some time now and everything. So, it just took getting everyone on board and then we were linked up with Sanger & Eby, where Jeff is from, and began the process I believe last summer for a full website redesign. And Jeff’s been the main contact for us from there, so I’ll let him go ahead and talk from his side.

Jeff:

That is a good segue. I am Jeff Webster, and as Nicole mentioned, I am a web developer at Sanger & Eby LLC, we’re a strategic design firm based out of Cincinnati; I make all kinds of responsive websites basically every day at my job there. Working with CAM was a great thing to do, it was an awesome perk of my job I considered it, because it’s a local attraction, it’s a local piece of history; it was just a really cool piece of Cincinnati culture that I was glad to help out with.

Making it responsive just kind of seemed like a no-brainer once we started delving into the differences between each of them and just the flexibility of being able to make sure the content is available.

Ethan:

That sounds marvelous. Nicole, I’d love to hear a little bit about the early days of the redesign. Specifically, how did CAM make that decision to go responsive? Were there any discussions that you needed to have with your stakeholders at the museum? Were there any difficult questions that came up about whether or not responsive design was the right way to go? Just tell us a little bit more about how you got started.

Nicole:

Sure, sure. So our previous site was not responsive, it was a static site, and we had a lot of troubles with it, just the design of it. Basically, we took a look at how many of our users were using mobile or tablet devices, and in 2013 I think about thirty percent of our users were mobile or tablet, and at the beginning of 2016 that number was up to like forty-five percent of our visitors to our website, so it increased dramatically over the course of just two years or so. So we were realizing how difficult it was to use our site on those devices.

It wasn’t really a huge question for our stakeholders. Actually, one of our board members went to our director and was like, “Yeah, this isn’t working. We really need to focus on this,” so we already had that buy-in from our stakeholders who were starting to realize how much we needed this for our visitors. There was some discussion in the early stages of whether we do a mobile site, an app, or a responsive design, and it really just seemed like responsive was the way to go, making sure that all of our content was available to visitors regardless of the device they were using.

We have a lot of students who use our website for research purposes. So a lot of students and educators use desktop versions when they’re in the classroom or working on projects, but when you come into the museum and are walking around and want more information on a particular work of art or more information just about the museum in general, they need to be able to have that access in the galleries as well. So, making it responsive just kind of seemed like a no-brainer once we started delving into the differences between each of them and just the flexibility of being able to make sure the content is available. So, Sanger & Eby made that really easy for us.

Making sure that everyone had access to the information on our site—first and foremost—was our priority, and then we can kind of grow and develop from there.

Karen:

Sometimes we hear from guests that as they’re working through those discussions around should it be an app, should it be a mobile site, that particularly when there is a real mobile context, there is sometimes a desire to treat that like it’s a different experience. So, you have researchers that are working on their desktop computers and then you have people who are using their mobile devices in the museum, and those are thought of as being very different scenarios. Can you talk about how you discussed that and why you concluded that a responsive site that delivered the same experience for everybody was the right way to go?

Nicole:

Sure. I mean, we’re still looking into some more digital technologies for in-gallery use, such as apps or digital wayfinding, that kind of thing, but getting our website on board and updated was kind of our first step towards investigating other digital opportunities. So, making sure that everyone had access to the information on our site—first and foremost—was our priority, and then we can kind of grow and develop from there and do either an app-based technology or digital wayfinding within the galleries, we can explore that later. But it was kind of making sure that we had that strong foundation with our website, because our website is the face of the art museum, that’s the first thing that people find when they’re searching for our site on Google or wherever, or if they’re new to the city and are looking for attractions within the city, they’re going to find our website before they find other digital engagement opportunities. So making sure that first line of interaction, regardless of device, that was really important to us.

Once you get into the habit of doing it responsively, it’s not a hassle at all in terms of increasing scope or anything like that.

Karen:

Another question I’m always interested in hearing a little bit about is how you scope a project of this magnitude. So Jeff, maybe it’d be interesting to hear you talk about your relationship with the Cincinnati Art Museum and how you planned out the process that you were going to go through. Like, how did you figure out what you had to do, and how long it would take, and how much it would cost?

Jeff:

First off, it made it easy that CAM was definitely not our first responsive website, so we kind of had a pretty good idea on how to scope things on the extra bit of work that goes into designing and the conversations between designers and developers for what the design entails.

Because we used Bootstrap for the Cincinnati Art Museum website, so just informing the designers on, “Hey, if you design it this way, this is how the site’s going to behave as you change resolutions from desktop to mobile.” The site as it’s designed is not specific for any device width or anything like that, it’s across basically every resolution you could possibly use. So, informing the designers how to design, so at your 768 pixels wide, or you’re 1024 pixels wide, or something weird like 800 pixels wide—informing the designers how the site is going to behave as the site shrinks and grows in your browser was key, first.

Another big deal was how we were able to scope demos and proofs of concept for the Cincinnati Art Museum to look at. It’s easy to show desktop and mobile resolutions, but it’s a lot more difficult to kind of give the idea of what it’s going to look like on, say—like, I have an Android phone, it’s got a different resolution from an iPhone, has a different resolution from a tablet. Scoping for being able to communicate that to the client is also a big deal, and making sure that they get the feedback to us on the design, that is also something that we had to keep into consideration. However, like I said, it wasn’t really our first responsive redesign, so we had it pretty much in hand in terms of process. I’ve been at Sanger & Eby for two years and we’ve been doing it a lot longer than that, so we had all of the scoping ideas and the complications out of the way. So really, once you get into the habit of doing it responsively, it’s not a hassle at all in terms of increasing scope or anything like that.

You have to definitely be more iterative. Since there isn’t just one design per se, you have a way that things behave on different resolutions, you have to make sure that you get all of those in front of the client early and often.

Ethan:

Jeff, I’d like to hear a little bit more about how Sanger & Eby’s process might’ve changed since that first responsive project you worked on. What are some of the things you’ve learned as an agency when you’re partnering with clients like the Cincinnati Art Museum about how to talk about design with clients, or how to approach that process?

Jeff:

Oh, sure, yeah. First off, you have to definitely be more iterative. Since there isn’t just one design per se, you have a way that things behave on different resolutions, you have to make sure that you get all of those in front of the client early and often just to make sure that everybody’s on the same page and everybody’s happy with the work that has to be done and make sure that everybody is happy once the work is done.

Another thing you have to do is include development early as well with the design. So, you can be on the same page and the design isn’t over-promising anything or isn’t promising anything that is going to cause an increase in scope that would be unaccounted for just by talking between design and client.

Ethan:

Nice. And how does that change the way in which you’re actually showing designs to your clients? Have you found that your process has moved more toward a prototype-driven approach, or are you actually just showing mockups, or does it change depending on the conversation? Tell me a little bit more about how Nicole was interacting with the design during the CAM redesign.

Jeff:

Sure. I can’t actually remember if we had working mockups for this one. Do you know, Nicole?

Nicole:

I don’t think so. It was mostly the wireframes and mockups rather than a live prototype, I think, for the most part.

Jeff:

For the Cincinnati Art Museum, we didn’t do live working mockups, but that is something that we have started to do with clients that came after that. But yeah, for this project I guess it was just wireframes.

Unfortunately on the previous site, a lot of that content was getting lost, so moving to this responsive site allowed us to really highlight some of that information in better ways.

Karen:

How about I change gears a little bit here and ask if there were changes that you made to the content as you were going through this responsive redesign process. So, some organizations that we talk to say the content stays very much the same and it’s really about making a site that works on all devices. Other organizations take a redesign like this as the opportunity to tear it down to the ground level and really think differently about what they publish and why. How did you think about that?

Nicole:

We kind of met in the middle. We reused most of the content that we had on our previous site. Unfortunately on the previous site, a lot of that content was getting lost, so moving to this responsive site allowed us to really highlight some of that information in better ways. So we did have our marketing team go through and edit all of our content, but it stayed largely the same. We did have to rethink some of our pages, as far as the site goes, just because we had a lot of embedded pages and we were getting kind of lost in this spiral of subpage under subpage under subpage. So after talking with the team at Sanger & Eby, they really helped us to realize, just from a user experience standpoint, that we should really limit that number of subpages and the hierarchical levels that we had. So we really did kind of simplify our content and worked with some of the features like the accordion features in ways to reorganize our content that visitors can still access easily but allows us to still have that in-depth content that we wanted on the page.

Jeff:

Right, and I think a big improvement that we brought to the website was making it easier to find the relevant content. We figure out what the users actually want to see and make it easy to get there.

Nicole:

Yeah, we did some really extensive surveying, before we went into this project, with our members and staff and volunteers. We got hundreds of responses from people and we asked them what the main information was that they wanted. And as a response to that, we made that information more readily available directly from the home page. Things like our calendar, directions, hours, admission information—all of that has quick links from the home page and from a header on every content page, so really just making that information more accessible.

Karen:

Nicole, let me follow up on something that you mentioned at the start of the call, which is that you’re also responsible for a digital asset management system. Can you talk about if that had any role in this responsive redesign? One of the things that I talk to organizations about is the role of the DAM in helping to manage and serve responsive images.

Nicole:

Sure. Yeah, we work with Piction imaging systems. So, that was one of our basic things that we wanted to focus on, especially for our collections pages, so that we can pool all of the collections information directly from Piction and make it accessible on the site. So we were using Piction with our last site but we didn’t have a cohesive, regular updating of content occurring on the last website, so we worked with Jeff and are still working with Jeff to perfect that process. But some of the things that we had to consider are—our digital asset management system has a component where you can zoom in on artwork, which wasn’t really compatible with mobile devices. So we did have to disable that on mobile devices, which was something that we kind of struggled with, but we’re hoping that in future iterations of that feature we’ll be able to activate that on mobile devices as well. But we did kind of have to take those types of things into consideration with the collection and with the DAM service.

Jeff:

Right, it was a Flash component, so it wasn’t going to work on mobile devices.

Nicole:

Yeah, so hopefully they will make some updates to that soon.

Jeff:

Yeah.

Ethan:

Well that’s a nice segue into our next question, which is I’d like to hear a little bit more about how you performed the QA and testing process during the redesign. Specifically Jeff, how did you actually manage looking at this on different devices, testing the layout, and sort of actually making sure that it feels at home everywhere that CAM’s users would encounter it?

Jeff:

At the risk of sounding like an advertisement, we used browserstack.com and it was amazing; we use it for all of our websites, basically. It’s a website, a service that you can go in and I guess at the BrowserStack offices/warehouse or whatever they have, they have a bunch of devices of varying generations and varying operating systems that you can go in and not just emulate those devices, but you can actually use those devices remotely to view the website. So, it was easy to look at it on like a Kindle Fire, on a Galaxy, on an iPad, as well as on an actual desktop Mac—even though as a developer instead of a designer, I use PC tools—across all different operating systems, like Windows 7 Chrome, Windows 7 Internet Explorer 12, Windows 10 and Windows 8 on the same browsers. You can really go across all kinds of different browsers and operating systems at BrowserStack, and that made it pretty easy to make sure that we got all our bases covered.

Ethan:

That’s great. Was performance something you were testing for as well? Not just how it looked and how it actually felt on touch devices and so on, but how quickly it was downloading?

Jeff:

Yeah, actually we did that, and since the Cincinnati Art Museum is based on a CMS, we had a brief hiccup at the very beginning right after the launch, where the Cincinnati Art Museum is very invested in their visuals right, because they’re an art museum. So, they had these gigantic super high-resolution photos in their home page slider control, and they were having problems with load times on the home page… [laughs]

Nicole:

We were crashing all of our iPads. [laughs]

Jeff:

Yeah, they have iPad kiosks in their lobby, right? And they loaded up on the website and all the iPads were crashing because the images were just so titanic in size that it was using up all the browser’s allowed memory. So we had to have that conversation.

Nicole:

We learned our lesson quickly. [laughs]

If they’re spending a lot of time on the website, that means they’re not having a frustrating experience and it means they’re willing to use it on a mobile device.

Largely, all of the feedback that we’ve gotten from our members and visitors has been overwhelmingly positive.

Karen:

Let me ask more broadly about how you measure the success of this redesign. So, now that it’s out there in the wild, how do you know it’s working? What sort of data or testing do you do to find out of the site is performing the way you want it to?

Jeff:

On the Sanger & Eby side, we have set it up with Google Analytics so we can see things like the devices that people are using as well as the session length on those devices. And over time, we can see if it stays consistent, if people on mobile devices are staying around, if they’re clicking through to subpages. If they’re spending a lot of time on the website, that means they’re not having a frustrating experience and it means they’re willing to use it on a mobile device, so that’s how we can measure success on the design and development end. I would defer to Nicole on the client end.

Nicole:

Sure, yeah. I would go with that as well; we monitor our Google Analytics as well. Right now, in the last two to three months, our numbers have stayed relatively consistent as far as number of visitors and that kind of thing. But the summer is also our slow season and our website numbers tend to reflect our in-person visitor numbers as well, because it’s mostly visitors looking up directions and information and planning for their visits kind of thing. So, we’re hoping to do a longer term analysis of this, like at six months and then at a year, and making changes as we go.

We’re going to be doing a few more updates to the site over the next few months, just some little minor tweaks and things that we’ve received as feedback since the launch, and just continuing to make those updates and improvements based on the feedback that we get. The whole concept of us doing this redesign is that it was going to be kind of an organic and flexible process that we can continue to improve and update based on that feedback and visitor success stories or visitor complaints. But largely, all of the feedback that we’ve gotten from our members and visitors has been overwhelmingly positive. We’ve gotten some national and even some international press as far as our site. We’ve also included some new educational and teacher resources, which is a really big step for us. So as far as that goes, the feedback has been really positive, but now it’s kind of going through the data and making sure that the data matches those responses as well.

Ethan:

That’s really wonderful to hear, Nicole. Congratulations.

Nicole:

Thank you.

Once you do a responsive component, it works everywhere you put it. So that’s a definite bonus that will definitely help so you’re not reinventing every single wheel that’s ever been invented.

Ethan:

So before we let you two go, I would love to hear if you would happen to have any advice for any of our listeners who are about to undertake their own responsive redesign. What’s one or two things that you’ve learned in the redesign of the Cincinnati Art Museum that you think would be valuable to our listeners?

Jeff:

I definitely think that you should do it, first off. It’s really not even that much extra work, especially if you’re using some sort of framework, like we used Bootstrap. It does a lot of the dirty work for you—from a design frame perspective, anyway—and also it helps both the design and the development. If you think of it as kind of instead of a set of pages, you have a set of components that can be placed on pages, and I know that’s easy because, like I said, the Cincinnati Art Museum website is based off of a CMS, so it’s easy to think of it as components. But say you have a photo slider that can go on any page, and it behaves the same way on every page, so once you do a responsive component, it works everywhere you put it. So that’s a definite bonus that will definitely help so you’re not reinventing every single wheel that’s ever been invented.

Nicole:

Yeah, and for me, I would just say the best advice would be to listen to your visitors, guests, clients, whoever is using your website. What they actually want and need out of your website may not be what we think is the most important, so really doing those surveys and finding out what people actually want and making that most accessible.

And absolutely, as far as the responsive design, go for it, do it. I think it has been wildly successful for us and I would not have gone back and done it any other way.

Karen:

Well Nicole, Jeff, that’s so great to hear. I’m really thrilled to hear a little bit of background about how you got here and, of course, very happy to hear that it worked out well. Thank you so much for taking time to be on the show today.

Nicole:

Thank you guys.

Jeff:

Yes, thank you.

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.