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, I think it’d be really, really difficult for me to be more excited, because today we’re going to be speaking with Josie Parker and Peter Morville, who are here to tell us about Ann Arbor District Library’s brand new responsive website. Josie, Peter, thank you so much for joining us.

Josie:

Thank you for the invitation. It’s a pleasure.

Peter:

Yeah, happy to be here.

Karen:

Many of the content strategy projects I work on lead into longer content development projects. That phase can be weeks, months, even years long. Content delivery usually means working with dozens of stakeholders, copywriters, and freelancers. You may have to change hundreds, thousands, even tens of thousands of pages. It is a long slog and requires a lot of planning.

The good folks at Gather Content are back with another book to help you with just that. It’s a really lovely experience to read online, and they’ll send you the ebook just for asking. Did I mention it’s completely free? I don’t know why you wouldn’t go to gathercontent.com/books/content-delivery right now and get it.

Thank you to Gather Content for sponsoring this podcast for so long. It’s been a pleasure to promote a product I really believe in.

Ethan:

So before we dive in, I would just love to hear a little bit more about, well, who you lovely people are and a little bit more about the Ann Arbor District Library. So, would you folks like to just introduce yourselves to our listeners and tell us a little bit about what you do?

Josie:

Sure. I’m the executive director of the library system. I’ve been here about sixteen years. There are five locations of our library; we serve about 165,000 to 170,000 people. So we’re a mid-size public library in the nation, but we’re very busy, one of the most used and utilized systems—online and in our buildings—in the country. What we have to think about is how everyone who comes into the library uses it and whatever form their use is, if it’s digital or if it’s in real time. So, that’s a lot of how we concentrate our work, is focus on the user, understand what they’re asking for, when they need something, how they need it, and then try to deliver. So, the library system in Ann Arbor does that, and it’s great, fun place to be consequently, and this project is one of those highlights of a career; I’ll always look back on this as a very special time at the library.

Peter:

I am an independent information architect and a resident of Ann Arbor, and so I was delighted when I was invited to work with the library on the restructuring and redesign of their website.

Ethan:

Well, we couldn’t be happier to have you both here, so, seriously, thanks again for taking a few minutes. So, let’s get started with the origin of this responsive redesign. Specifically, I’d love to know how this project got started. What were some of the goals for the redesign, and I’d love to hear specifically if maybe there were any questions or discussions around whether or not responsive was the best approach for this redesign.

Josie:

I can start a little bit by telling you that we have been planning to migrate our Integrated Library System (ILS) system over to an open source platform for a very long time. The last website launch was in 2005. Our websites worked well for us for a long time, but our ILS system was not, and we needed to do something else. So, we went to Drupal 8 and migrated it to Evergreen with this launch. It was not a simple website redesign project, it was a complete change for how we do business on the front-end to the patron and on the back-end for the staff. So, this decision to go open source with the ILS system drove a lot of the thinking around the website.

Peter:

Yeah, so just to fill in a little bit of the story, I remember back when Josie and Eli invited me up to the library for our first conversation about the redesign and my possible involvement. Towards the end of our meeting, I remember asking, “So are you folks planning on this being a responsive website?” and Eli and Josie sort of exchanged that sort of look where you know a lot is going on in their heads in between them. Basically I think by asking that question, we all agreed, yes, this is going to be responsive, because at the time the library had a sort of separate website and mobile site. We were just talking before this conversation, kind of acknowledging that that was absolutely the right direction to go.

Karen:

Let me follow up on that a little bit and ask about how you conceived of the needs of a mobile user. I know Ethan and I have talked to other libraries that shared that they were trying to balance the needs of someone who might be visiting the library website to look something up or find out the hours of the location, but that there were also needs that they thought mobile users might have when they were physically in the space or in the building. Did you conceive of mobile users needing something different from what desktop users needed?

Josie:

I don’t know that it’s that they need something different. They come about it differently if they’re using the library site on a mobile device exclusively. I’ll give you an example of something that our mobile users can now do that they’re thrilled about: On their phones, when they pull up their library account, their barcode is exposed, so they can use their self-check machines with their phone, they do not have to fish for their library card. That has been a wonderful edition to service. So, yes, you do think about, “What can you do to enhance the experience?” But it’s not a balance, it’s making it great for everyone. You’re not taking from any user by making a mobile great or a desktop great, it should be an equally wonderful experience no matter how they come at it. That was the challenge that we gave Peter, and I said, “Okay, let’s do this, but no one can complain that they’re getting short shift.

Peter:

One of the mobile use cases that was on my mind when we were working on the information architecture—I actually became a user in that case a couple of weekends ago, where I was in the car, I was at stoplight, and I was able to pick up my iPhone and check the library’s hours before the light turned green. So, that sort of use case of being able to check the hours or find directions while you’re in the car, I think that was sort of one of the priority uses for mobile users that was on our minds.

Ethan:

That’s really fantastic. Josie, something you said about making the design great for any device, I would love to hear how you started thinking about that in terms of managing the visual design for the website. When it came time to take some of these requirements and translate them into actual screens for the design, what did that process look like?

Josie:

Well, we were able to have another company who’s local work with us on that, and that’s Q LTD. We are also, in our area, the library for the blind and physically handicapped, so the website had to be accessible to people with low vision. It couldn’t be a separate website for people with low vision, it was the same website. So, that was my challenge for everyone, was I wanted everyone to be able to use this website, and I didn’t want them to have to use a “special” website for their needs. So, that was part of what we said to Q. They loved it, they were all over it, like, “This is going to be fun and interesting, and this can be done.” And it was hard; we went through several drafts, getting things just right for the different levels of visual capability was a challenge, without losing some of the elegance that you see when you look at it—because that was another aspect, we needed it to work well but also be clean.

No one should have difficulty with the site because of the site, I think that’s what I would say. There are people, though—we lose people with innovation. We’ve done it every single time the library’s innovated. From the day the library decided to migrate to an online system and not upkeep a card catalog, you lose people. There will be people who just can’t come with you. I’ve had that experience here, I’ve had someone in my office in tears because of the loss of the card catalog and, in her opinion, the loss of the library to her. I had to hold her hand through that, but as the director of the library, I also had to know that that’s going to be part of the process of innovation. There will just be people who won’t come with us. But the site can’t be why, if that makes any sense.

Karen:

That just makes perfect sense, and Ethan and I are both sitting here, we have a little back channel where I’m like, “Aw man, librarians are so great.”

Josie:

[laughs] Thank you very much. I’ll take that. I didn’t feel great that day, but I’ll take that.

Peter:

I’d like to just offer up a short story about the design that you might appreciate. So, the design firm that worked with the library, Q LTD, is also a partner of mine. Going way back to I believe 2010, when Ethan’s first article on responsive web design came out, I brought that article to a brown bag lunch with the folks at Q to talk about this weird new thing called responsive web design. And I remember that in that experience that people were interested in the idea, but it seemed sort of futuristic and speculative. And, of course, within the next few years I was then working with Q on responsive websites. So, I think it’s kind of a fun example of where we need to kind of stay up to date with what’s on the cutting edge because that very quickly becomes what’s expected of us. So, I like to think that preparing for the future is our job.

Ethan:

Peter, that’s beautifully put. That’s one of the best and worst things about this industry, I think. [laughs] But I’d like to follow up on that a little bit at least with regard to the design process for the library website. Can you tell me a little bit about what your agency partner was using to actually show the design to you, as a design team? Were they using prototypes, mock-ups? How did they think about this multi-screen, multi-need design and actually show it to you?

Josie:

It started out flat, just mock-ups, and then it went to a screen and things could be moved around somewhat. So, it started out with paper and then it moved to the screen. There were people here involved; we have a team of people who worked on it here who all had a say—and even with me sitting in the room, it was equal say. They were able to do that here, which I appreciate. Some of it was hard to work through. Librarians like words, and we had to struggle against putting too much on the screen, and letting the screen show it self as a navigational tool without a lot of words. So, that was a challenge, and they were great in helping us do that.

Peter:

Let me provide a little bit context or background here. So, Ann Arbor District Library is an unusual library in the sense that they have a team of folks with front-end and back-end coding skills that most libraries just don’t have. So, I believe on this engagement, the design partner focused on the visual design, but the library/in-house team did all of the coding for responsive.

Josie:

That’s correct.

Peter:

And for me as an information architect, that was one of the most exciting things about working with the library, is knowing that my client is able to take on this system—because a website of a public library is not a product that’s static, it’s a part of an ecosystem that needs to evolve over time—and the library has the in-house team with the feedback loops and the capabilities to keep growing and evolving and performing experiments and improving over time. So, even the site that’s there today is going to keep evolving over the next five to ten years.

Karen:

Peter, maybe I can follow up on that and just ask a little bit about how you sorted some of the challenges of making the site readable and browsable and navigable on smaller screen sizes. I know that for many organizations that are implementing responsive design, figuring out the nav and figuring out how to prioritize the information is usually the biggest challenge.

Peter:

Yeah, one of our goals in this redesign was to help people to better appreciate the full range of collections and services that the library offers. Because the library is way more than a library, and there’s so much more that the library does for the community, and people and organizations in the community, that most people just aren’t aware of. So in designing the home page, for instance, we were trying to really expose and surface all sorts of different facets of the library. So, there’s lots of scrolling, whether you’re on mobile or on desktop; there’s a lot of stuff there on that home page. But then from kind of a mobile-first perspective, we were also thinking about prioritization and what do we need to make sure people can see at a glance. One of my priorities was to avoid relying on a hamburger menu. So, we agreed to four major sections of the site that are representative on the nav bar, and those labels show up from desktop to tablet to mobile, so they’re not hidden behind a hamburger.

Josie:

And those were the conversations in the design meetings—the ones I remember listening to people talk about deciding what those four areas were going to be and what the word was that described them was where a lot of conversation occurred, and then everything fell under that. I can say this: there are at least 350,000 pages on the library’s website, and we needed them all to be quickly accessed. They weren’t before this launch, and now most of them are.

Karen:

Let me follow up on that and just ask how did the implementation of Drupal 8 go for you? What kind of planning did you do around how that content structure or the interfaces that the people in the library would be using to manage and maintain the site—how did that come into play as you were thinking about the experience for the end user?

Josie:

As the director of the library, I’m going to be totally honest with you and tell you I don’t have the first clue. The wonderful thing about that is I don’t have to because I have so many people here who do this work. What I do know is we’ve been on Drupal for twelve years, and so the migration up to Drupal 8 wasn’t as difficult as it might’ve been for someone who wasn’t on Drupal. When we launched in 2005, we were on Drupal and we had Live Blog, and our staff all could be live on the internet, writing, all at the same time, and we’ve been doing that for a long time. So, I don’t think the Drupal side of this was a challenge for us.

Ethan:

One thing I’d love to hear a little bit about that some organizations find is a bit of a challenge when they get to the end of a redesign is did you have to do a lot of device testing and quality assurance once you had this new, fancy responsive site?

Josie:

If you’re asking me how did we get feedback, we got it directly from the folks using the website within minutes of launch. That’s our community, and we were counting on it, and they did not disappoint. So, we learned very quickly what was working on what kind of device and what wasn’t. And we answered them all individually; we had a team of people prepared to do that. So, 800 comments, texts, or emails about the site came in within the first two weeks, just about particular things. And we still get them; we’re still getting them. Of course, we tested in house and we were always looking at it in different ways, but we relied heavily on the feedback loop, and we’re still doing that. It’s a very unusual community that way. I know Peter will tell me the same thing. When you’re in a university town like this one, and it’s a town with a lot of tech start-ups, people are savvy about the technology that we’re trying to use and they are more than happy to help us get it right.

Karen:

Do you have any metrics, analytics, or data that you’re tracking over time to find out how well the site’s working for you, or to figure out what needs to be changed?

Josie:

No. The honest answer to that is we’re listening. We’re listening to feedback, and we’re getting it. We ask for it, we count on it, and then we operate and use it. So, that’s how we’re doing it.

Peter:

Let me answer that question in sort of a roundabout way. So, as Josie mentioned, the library has a very tight feedback loop with the community and is always getting suggestions from folks. When I did the user research sessions, I talked with a dozen or so folks with different backgrounds in the community to get a sense of what was working and not working with the old site to better understand people’s needs going forward. So, generally it was fascinating the degree to which many of those users knew folks at the library by name, and they’d say, “Well, I was telling Eli last week about this…” So, there is that close connection with the library staff. It made me realize—and it’s sort of a humbling thing for a web professional to recognize—that the website really is one piece of this broader ecosystem, and that we weren’t going to change the world with the website. It’s about how it all works together.

I’ll offer up just one more story as an illustration. So, as I mentioned before, the library’s much more than what we think of as a library. One facet within the Ann Arbor District Library is the Washtenaw Library for the Blind and Physically Disabled. So, during the user research sessions, I had the opportunity to talk with a woman who’s blind, and it was one of the most fascinating interviews I’ve ever conducted. She spent quite a bit of time kind of venting about various problems that she had in the world, but talking very highly about her interactions with the library, and about all the different ways that she uses the library for books, events, and so forth.

We were about half an hour into the interview and I finally said, “Well, let me ask you to show me how you use the library’s website.” She said, “Oh, I don’t use that!” I said, “Well, how do you use the library?” She said, “Well, I talk to the librarians and they help me get my audio books, and they help me find the events.” So, she talked about the difficulties of using most websites for someone who’s blind… Afterwards, after the interview, I sent her an Amazon gift card as a thank you, and she was unable to use it. She said, “The site’s too hard for me to use. I’ll have to pass on the gift card.” I was able to get her one for Barnes & Noble, where she could go in to a physical store and get something… But again, it’s another one of these humbling moments where I realized we are not doing a good job with accessibility, and the vast majority of websites are basically unusable to people who are blind.

Ethan:

That’s beautifully said, Peter. That’s a cause I know both Karen and I deeply care about, so thank you for sharing that. To follow on from that thread, I would love to hear, now that you’ve reached the end of this really wonderful and very successful responsive redesign project, do either of you have any advice for any other organizations or listeners who might be about to embark on their own responsive redesign? What’s maybe one or two things you’ve learned over the course of this that you’d like to share with them?

Josie:

What I can say is take the time. Take the time to do it right. Take the time to plan. We started talking to Peter over a year ago, and when Peter finished up the wireframes for us, then we moved to working with Q. That was six to seven months, that process. And then we put it out as beta so that our public could look at it two weeks before we launched it, to get feedback on it. And then we closed our system down entirely for three days in order to launch this without glitches. That is a big deal in Ann Arbor, to close the library for any reason at all. It’s not something we do much, so to close it for three days in a row—and no website, no access; there was like no library. So, the reaction by the public was like, “Oh, I want my library back!” So, when it came up it was like a party, it was wonderful.

But my advice is take the time and spend the money on the professionals who are able to help you do this and do it well.

Peter:

First, part of the reason why this project succeeded was because, from the very beginning, we knew this was going to be a responsive website. So, even from the very beginning of how we thought about the information architecture, we were thinking about how is this going to work across different platforms. I’ve seen information architects who will only do desktop wireframes and then assume that the design firm is going to figure it all out. I firmly believe that if you’re going to design a responsive website, you need to start at the very beginning of the information architecture, thinking responsively

The second point, I’ll put in a little plug for my book. I have a new book coming out in the next couple of weeks called, Planning for Everything, and it’s about the design of paths and goals. Part of my argument in the book is that we need to do a better job of planning. That’s not just upfront planning, but incremental planning, recognizing that the plan needs to happen but the change needs to happen, too. I think that this project is a perfect example of the tremendous amount of planning that goes into a project of this scope.

Josie:

Yes. And then the planning to launch has happened, and now there’s planning to develop every day as we go along, and we’re responding to the comments we’re receiving, we’re changing it… Peter had us launch this website with a search box that did not include author, title, and subject—which, those are like bread and butter in the library world. And we did it; we trusted him and we said, “Okay, we’re going to try this,” and we launched without it, and it lasted less than a week, and we had to put the dropdown in, author, title, subject, because our folks were demanding it. And so we did. And we all smile about it, and it’s not hurting anything to do it, it’s not a failure to put it there, it’s just a smile. It’s a library website, for pete’s sake.

Karen:

Well, for pete’s sake, this has been an amazing conversation. [laughs] I’ve known Peter for many years, but Josie, this has been a real pleasure to get to talk to you.

Josie:

Well, thank you. I’ve known Peter, too. What he didn’t say to you is he was doing his PhD at Michigan when I was doing my graduate degree. So, I knew Peter from the School of Information at Michigan, and I knew what his work was, and he worked with some other people I knew. So, when it came time to talk to somebody about this, when I talked to Eli I said, “What about Peter Morville?” He said, “Can you get Peter Morville?” [laughs] I said, “I can try!” So, it’s been great for all of us, and we really appreciate Peter’s continued support and help on this website.

Karen:

Well, I appreciate Peter letting us know that this website happened, and I feel lucky that we got him on the show, too. So, thank you both so much for being here.

Josie:

Thank you.

Peter:

Thanks a lot.

Karen:

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

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 also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near 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 podcast episode at responsivewebdesign.com.

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