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 are as excited as a little league ball player who’s getting to throw a pitch out in the major leagues. We are here today with Kurt Kohlstedt and Andrea Tomingas from 99% Invisible. Welcome.

Kurt:

Thanks guys, good to be here.

Andrea:

Yeah, thank you so much. Excited to be here.

Karen:

But before we get started, I’d like to say a few words about our sponsor, Media Temple. If you’re a web designer or developer, you need solid hosting with great customer support. Media Temple focuses on the needs of the design community, and is constantly improving their products to make hosting simple for you. That’s why they have one of the highest customer loyalty rates in the industry, with the average customer sticking around for years. If you’re looking for WordPress hosting, shared hosting, virtual private server hosting, or just want something better than a crappy $5 a month hosting plan, you want Media Temple. Go to mediatemple.net and learn about their hosting services and award winning support team.

We are really, really thrilled to have not just such an amazing podcast represented on the show but also such a beautiful new responsive redesign. But before we get started talking about that, what I would love is if both of you could just introduce yourselves, tell us a little bit about your role with 99% Invisible. Kurt, you want to go first?

Kurt:

Sure. My name’s Kurt Kohlstedt and I’m the digital director for 99% Invisible as well as a web producer, and 99% Invisible is a tiny radio show about design with host Roman Mars.

Andrea:

And I’m Andrea Tomingas, I run a boutique design agency with my partner, Gabe Danon, doing a bunch of different design and development projects. And several months ago we made this great connection with Kurt and 99% Invisible, and the journey started from there and ended up with this great relationship and great website.

Given the amount of mobile visitors it had and the general trend of things, that just seems like an essential way to go these days.

Karen:

So, I’d be very curious if you could tell us the origin story of this redesign project, and in particular I’d be really curious to know how did your conversations about responsive design feed into your decisions? Were there any questions or concerns about going responsive?

Kurt:

I was talking to Roman last year about all kinds of things, including coming on board potentially and helping redesign the website, which at that point was not responsive. And ultimately, I would say it was pretty easy to convince him that the site needed to be upgraded and that it needed to be mobile-friendly; given the amount of mobile visitors it had and the general trend of things, that just seems like an essential way to go these days. And part of that redesign effort was to launch a new set of content directions too that were more web-specific, so now we are doing web-specific articles in addition to the episodes.

A lot of it was about adjusting the hierarchies of navigation and decreasing the importance of secondary navigation options in the mobile site to make it as clean an experience as possible.

Ethan:

Just following up on that, maybe you could tell me a little bit more about the rise of mobile and how that actually informed the responsive redesign. Karen and I speak to a lot of organizations, either on the podcast or in our client work, where some of them tend to think about mobile users and desktop users as dramatically different camps of people, whereas many others are actually starting to see them as more or less needing the same information regardless of the device. Was that a conversation that came up at all, and how did that inform the responsive redesign?

Kurt:

The ultimate conclusion that we came to was that their needs were not totally different. They all need to be able to access both episodes and articles relatively equally, efficiently, and cleanly, have a good design experience throughout. And especially on the mobile front where that wasn’t really possible to read content as efficiently before, we really wanted to make sure that that happened. And to facilitate that, a lot of it was about adjusting the hierarchies of navigation and decreasing the importance of secondary navigation options in the mobile site to make it as clean an experience as possible, basically stripping away those things that are added features on the desktop but not essential to the user experience. I think Andrea’s got something to say on this front as well.

Really, to me, as a user, I need the same things on mobile and desktop, so that’s what we consider when we develop websites as well.

Andrea:

Right, in terms of thinking about mobile versus desktop users, generally we really don’t think of them very differently. We do try to duplicate all functionality and design elements in general, and then in this specific case too, we really wanted to just make—99% Invisible has just this impressive library of archives and content, so we really wanted to prioritize the content, access to content, so making it very easy to browse and also really easy to read and consume the content.

So certainly some things did need to be streamlined. One piece of functionality that we did streamline was we have this advanced filtering functionality in the archives on desktop, where you can really hone in on what you’re looking for and select author and year, and really filter down. And it just wasn’t feasible to include that level of complexity on mobile, so we felt that we needed to just prioritize a streamlined experience for mobile. But other than that, really, to me, as a user, I need the same things on mobile and desktop, so that’s what we consider when we develop websites as well.

Kurt:

Yeah, exactly. I should clarify too that nothing was really omitted from the mobile site, it was just that advanced means of searching which just, yeah, wasn’t possible to make happen on mobile, and really would’ve been more distracting than helpful. And so I think that’s part of it, is just making it the best experience possible at all scales.

We’re at the point where any web design project that comes our way, it’s a given that it’s responsive. We haven’t done a non-responsive website in at least a couple years.

Karen:

Andrea, I’d be curious to hear from you, as you’re working with clients, how does the responsive design question play into how you might scope and plan and budget for your redesign process? One of the things that Ethan and I hear a lot is that responsive design costs more and takes more time. Do you find that that’s true?

Andrea:

That’s a really interesting question. It is true—however we’re at the point where any web design project that comes our way, it’s a given that it’s responsive. We haven’t done a non-responsive website in at least a couple years. So, really it’s just par for the course now. Like it’s like a client coming and saying, “I want a good-looking website.” Of course they want a good-looking website, so it’s just all part of the same deal. But yeah, you’re right, it does take more time and planning, and I think more attention to process, more communication certainly throughout the process. It’s a higher quality product in the end, so yes, I do think clients know that they would be paying for that higher quality product, but they know that it’s par for the course and state of the art at this point.

Kurt:

And I would add that one of the really great things about this project from my perspective is that I came into it with a technical advisor and longtime friend, Michael Waggoner, who helped me scope things on my end and with whom I’ve worked on responsive sites. So coming together with Duck Brigade, who had also worked on responsive design sites, we all, I think, had a very clear idea of the complexity but also the manageability of designing in this way.

Andrea:

Right, that’s a really good point. Scoping a project really carefully is so valuable, and Kurt and Mike and 99% Invisible really did that. They scoped every last detail, and so that really helps for any project, but especially for a responsive project, for us to plan exactly what’s coming at which phase.

We establish the look and feel and think of design of the site in components rather than in layouts—or to be more accurate, both in components and in layouts.

Ethan:

Andrea, you mentioned process earlier, and I’d love to follow up on that for just a minute. Specifically, I’d like to hear if your process has changed as you’ve started doing more responsive work over the last few years. And this could either be you as a visual designer, like does this change the way you start thinking about building design systems, or even just the way that you talk about responsive design with clients. I’d love to hear about either of those and how that influenced the 99% Invisible site.

Andrea:

I think with every project, I learn something and our company learns something, and certainly as we’ve been doing more and more responsive design projects, we hone in on the right process and change the process every time. I think the 99% Invisible process was a really good example and a culmination of that honing of process.

Breaking up the design into components is perfect for responsive design because you’re creating a look and feel that will need to scale from desktop to mobile.

Speaking from the design perspective, now with responsive design and with 99% Invisible, we establish the look and feel and think of design of the site in components rather than in layouts—or to be more accurate, both in components and in layouts. So, for example, our first step is always research and analysis, so we pull mood boards, we analyze audience, and then our first step in terms of design, in this case we did style tiles as well as the desktop layout. So, the style tiles explored graphic elements, broke things apart, how to treat photographs, what are the distinctive graphic elements that will communicate the brand, what is the right topography for the brand. So, breaking up the design into components is perfect for responsive design because you’re creating a look and feel that will need to scale from desktop to mobile. So rather than holding on tight and only showing design in layouts, it’s nice to show it in these components instead.

Once we’ve established the look and feel of the home page or any key page, we get it quickly into browser, get it into development so that we can start working with the responsiveness and really honing the responsiveness once it’s in-browser.

Ethan:

That’s really exciting to hear. If I could follow up on that for just a second, and maybe this is a little “in the weeds,” but I’d love to hear a little bit more about the applications and tools you’re actually using to create some of these deliverables to show your clients. Are you prototyping things a little bit more in browsers and devices, or are you sticking with some of the tried and true visual design tools, or is a bit of a mix? What’s your day-to-day look like, basically?

Andrea:

Well, we’re still using the classics, the classic design stuff, like we design in Illustrator and present that to the client. We’re also using tools internally throughout, like Pinterest, to pull mood boards, to gather visual elements, even UI animations we gather on Pinterest. But in terms of layouts, we’re using Illustrator and then we are getting it quickly.

Like once we’ve established the look and feel of the home page or any key page, we get it quickly into browser, get it into development so that we can start working with the responsiveness and really honing the responsiveness once it’s in-browser. I think a responsive project, you really need a balance of design development but also project management and organization, so for project management we use Trello to track tasks from the beginning. So once we’re presenting designs, if 99% Invisible mentions, “Oh hey, it would be nice if this element, if a user could interact with it in this way,” we get that into Trello for the development phase so that we’re not forgetting anything that’s come up in the design process. And then another key project management tool we used in this case was Slack so that we could communicate in real time about design questions, development questions, things like that.

Kurt:

Yeah, and I would say one of the greatest things about working on this project with Duck Brigade was not only are they incredibly talented on design and development fronts, but they’re incredibly well-organized too, and they really set the tone and pace for how we were going to proceed through the different steps of the project, and it was really a nice setup that worked extremely well and helped us both stay on track but also helped me communicate to other stakeholders, “This is where we’re at, this is what the next step is, this is what I need from you,” at each step along the way.

Once you get a visitor into a category they’re interested in, they will stay engaged; they will visit more pages on the site, they will listen to more episodes, they will read more articles.

Karen:

Let me follow up on the questions about design and development by asking a little bit about the content. So, by that I don’t necessarily mean the actual episodes themselves, but rather all of the little bits of content that need to populate the website. So, titles and descriptions of the episode, and even the lovely little categorization system that you have for all of the different types of episodes. Can you talk a little bit about how that fit into your redesign process and maybe even if some of that changed as you went responsive?

Kurt:

One of the key things that we were trying to do from the start was to make content pages more organized and more hierarchical. So for example, there are credits associated with every episode—music credits, production credits—and we really wanted to separate those out, give them their own breathing room, make it clear. Before, the article would just end and then it would bleed into the credits and it just wasn’t a very clear transition, it felt like there wasn’t really an end or a separation.

Also, the categories were a new edition to the redesign. We actually went back in and recategorized the entire archives, and I felt that was important based on my own experience with knowing that once you get a visitor into a category they’re interested in, they will stay engaged; they will visit more pages on the site, they will listen to more episodes, they will read more articles. So developing a category system was really important to me, especially now that we’re going to be adding articles more frequently. So as the archives grow, it gives people another layer of navigation options in addition to simply reverse chronological or searching.

I’m always impressed by the feedback I see from the 99% Invisible listeners. They are so polite and the feedback is really valuable because they often have a background in user experience design or design in general.

Ethan:

Now that the responsive redesign is live, I’d be curious to hear if there are any elements of the design that you’ve found maybe need a little bit of refinement or that you’ve reworked since launch. And if so, I’d be curious to hear why.

Kurt:

So we’ve made some adjustments, some usability, some design, mostly small tweaks, and mostly around user feedback. One of the great things about the 99% Invisible audience is they are big fans and they are really helpful, and so most of the feedback we’ve gotten has been small, and it’s been details that they say, “You know, this wasn’t the most intuitive experience,” and we might take another look at that and say, “Is that just their opinion or is there something we could or should do here?” Mostly in terms of navigation, calling out the difference between articles and episodes a little more clearly. But by and large, when we rolled this thing out, we were pretty confident. We’ve done a lot of testing, we’ve gotten a lot of feedback already, made sure everybody was on board, and it’s really been incredibly successful and well-received.

Andrea:

Yeah, I’m always impressed by the feedback I see from the 99% Invisible listeners. They are so polite and the feedback is really valuable because they often have a background in user experience design or design in general, or development, so we have gotten really good feedback or helpful feedback. I think there are areas that we’re constantly looking at. I think the player and playlist interaction is a good example, where we had an idea and a goal for it, but to hear how people are actually using it and how it feels when the listeners actually use it is really valuable, and so that’s an area where we’ll continue to work on that and noodle with it.

I would take what I had, sometimes in PDF format or really whatever format made sense at the stage, and then share that with the group.

Karen:

Can you talk about how you managed the process of showing the design work in progress with other people in the organization? So, what did you do to keep people informed of your design decisions or how did you have to show work in progress to communicate how the responsive design would appear at different sizes or on different devices?

Kurt:

So, we set up the schedule such that I would touch base with Duck Brigade, get the latest iterations of things, and then take what I had in, sometimes in PDF format or really whatever format made sense at the stage, and then share that with the group. And then really it was about framing that conversation and making sure they knew what things are locked in place, what things do we need big decisions on, what things are still open questions, and framing that discussion in such a way that I made sure that everybody else was a part of the process and definitely knew each change that we were making and planning to make, but at the same time trying to keep it compact and efficient enough that we could always get actionable feedback in a reasonable amount of time and then pass that back to Duck Brigade for the next round of the process. And we worked with pretty tight iterations for a lot of those steps and it turned out to be a very good system and a good pacing, I think, for getting the feedback we needed, taking the next steps, going back, getting more feedback, and then really deciding at each phase what things do we really need to talk about with other people and what decisions can we just make as a smaller unit and then push forward with.

Ethan:

One thing I’d love to hear a little bit about is performance. We’ve been talking with a lot of organizations who have been transitioning to think of responsive design not just as a layout technique but that the weight of our digital work is actually something that impacts our users. Was this something that came up in the redesign process for 99% Invisible, and if so, how did that change the design?

Kurt:

Oh, definitely. How to best cache the site, how to get the persistent audio player working in such a way that it would save people’s tracks and playlists and persist across pages so they can navigate the site while still listening to episodes, all while still having caching in place—all of these were big factors, thought about throughout the course of the redesign.

Partly it comes down to having a robust hosting solution that’s configurable so that we can deal with caching issues as well as all the things that go along with the playlist, and partly that was minimizing things on the more mobile end of the spectrum so that mobile devices aren’t loading more resources than they have to. But yeah, that was definitely a consideration throughout. And as I mentioned at one point too, we also are still in the process of finding—well, we’ve found a new hosting solution, but we’re in the process of moving to and deploying on that right now, because what we’ve found was that the hosting setup that we had planned on having just didn’t support the advanced functionality that we’re using on the site in the way that we wanted it to and at the speeds that we wanted it to.

Visitor time on site, which is a really important metric, has gone up dramatically since this redesign, and that’s really encouraging.

Karen:

Can you talk about how you measure the success of this redesign? So, do you look at your podcast download stats or other statistics to help you determine if the website is doing its job for you?

Kurt:

Sure, yeah. We have some really great custom variables in Google Analytics that now allow us to see like never before. So many actions that people take on the site, from downloads, to plays, to adding things to playlist, to changing around their playlist, so we have a much more granular understanding of what users are doing on the site, which is great. Of course, it’s hard to compare that back to before because we don’t have all of that data from before the relaunch. That said, visitor time on site, which is a really important metric, has gone up dramatically since this redesign, and that’s really encouraging. What we’re seeing is that a lot of people are coming to the site to listen to episodes and then spending more time on the site listening to those episodes and browsing the rest of the site, which is exactly what we want them to do.

Laying the groundwork, having a good team, and really spending time at each stage making sure that you’re on the right path are probably the most important pieces.

Ethan:

Andrea, Kurt, I just have to say, the site looks beautiful and we are so excited to have had you on the show a little bit to talk about it. But before we let you go, I’d just love to hear if you have any advice for any folks who might be listening today who are about to start their own responsive redesign. What’s one or two things that you’ve learned over the course of this process that you’d like to share with our listeners?

Kurt:

So, one of the things that I’ve learned is that the process is only as good as the participants. I couldn’t be happier with having worked with Duck Brigade on this, and having Mike helping us out, and having the team at 99% Invisible be both engaged but also sufficiently disengaged, that we could always keep making progress and keep moving forward. It never felt like there were too many cooks in the kitchen, and at the same time it always felt like we had the right talent on deck to move the thing forward. So I would say the most important thing is getting the team right from the outset.

But in terms of the design and layout challenges, really laying the groundwork is extremely important, and Andrea and Gabe made sure we did that from day one. Really understanding what the larger goals of the project are beyond page views and visitors, but really understanding what do we want this production to be, how do we want it represented in visual form, and how can we make it not just the best representation of what we have now but also a gateway to the future of what we want this media production to become? So, laying the groundwork, having a good team, and really spending time at each stage making sure that you’re on the right path are probably the most important pieces. I think a lot of people rush into these projects and want to just get it done, but the more time you can spend at the outset getting the setup right, the better the final product will be.

Andrea:

Yeah, agreed with all of that. We think the first phases, our research and exploration phase, seeing what other websites are doing, doing a lot of research like that, it really lays that foundation and it saves time down the line. So, really take time at the outset to do that research and to truly explore the design from multiple angles, see what communicates the brand rather than just thinking about it in terms of layout. That initial stage not only helps with the project but it helps the team to hone their communication styles and to get in a rhythm before you start really getting into the nitty gritty of development.

Also, a responsive design project is one-third design, one-third development, but one-third project management, so make sure you have a good project manager. I acted as the project manager for Duck Brigade, Kurt was a great project manager on 99% Invisible’s end, really prioritizing what needed to happen at which stage, and being organized. And then finally, that tight communication, a close connection to feedback, a close connection between design and development, and then also just being attentive and analytical about the process itself, like what should we prioritize in each stage.

Karen:

Well Kurt, Andrea, as fans of design and fans of podcasting and fans of responsive design, you guys have just been amazing to have on the show. I really appreciated you taking the time to talk with us today and I’m looking forward to hearing more of your podcast episodes.

Kurt:

Great, thanks so much.

Andrea:

Yeah, this has been so fun. Thank you, guys.

Kurt:

Yeah, thanks a lot for having us. We really enjoy your show.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, Media Temple. Go to mediatemple.net for easy to use hosting and 24/7 customer support.

If your company wants to go responsive but you need help getting started, Ethan and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

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.