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 I am really genuinely, extremely enthusiastic to talk to Michael Votto and Pankaj Jain, who are going to be talking to us about a fantastic redesign for the Communist Party USA. Michael, P.J., welcome.

Mike:

Thanks for having me.

P.J.:

Thank you.

Ethan:

But before we dive in, a few words about our sponsor. I couldn’t be happier to have Gather Content back as a sponsor on the podcast. You see, Gather Content is a content collaboration platform. It helps teams plan, organize, and produce all their web content in one place. They provide structured templates and simple workflows to make collaboration and production easy without the shuffling around of Word documents and unnecessary emails. Centralizing the editorial process will make approval of content easy, so everyone knows what they’re responsible for and when they’re responsible for it. And what’s more, Gather Content has recently published a free online guide to Content Strategy for Website Projects, which they’ve written for all the people who want to make smarter, content-led decisions on their designs. So every responsive design, I believe, benefits from a content-first approach. But as Gather Content’s guide says, that doesn’t mean waiting until all the content is written. Instead, it means considering and thinking about content at every single stage of your project. And Gather Content’s guide can help you do just that. So whether you’re working in an agency on client websites or maybe you’re working on an in-house team, Gather Content’s guide should help you more effectively contribute to your digital projects. You can read it online for free at gathercontent.com/RWD, or check out Gather Content’s products at gathercontent.com.

Karen:

To get started, how about both of you introduce yourselves, tell us a little bit about your role on this project, what you do. Michael, why don’t you go first?

Mike:

Sure. Thanks for introducing me. I’m Mike Votto, I’m founding partner of Envy Creative, which is a Milwaukee-based design and digital strategy firm, and I served as the project manager for the website redesign of the Communist Party USA’s flagship site, CPUSA.org. I’ve been doing the web design thing for about, god, I think it’s been like six or seven years now, through my company, and I wear many hats: project management, development, things like that. But I served as project manager on this project.

Karen:

And P.J., how about you?

P.J.:

Hi, this is P.J. I head the digital practice at Diaspark. Diaspark is software services firm with more than 700 employees with the headquarters based in Edison, New Jersey and a development center based in India. Our prime focus areas are publishing, non profits, education, healthcare, and energy segment. We are a technology agnostic organization and have a dedicated practice for digital services, which includes website, CMS, CRM, subscription, cloud-based deployment, etc. My role was to interface between the business, which is CPUSA and Mike, and the development team which is based out of Edison and in India.

We got pretty much immediate buy-in from the whole team at CPUSA about going the responsive route; they saw it as a no-brainer.

Karen:

So to start us off, tell us a little bit about the story of how CPUSA decided to go responsive. Were there any questions or considerations that played into your choice to go with a responsive solution?

Mike:

Yeah, for sure. CPUSA has been around for almost 100 years as a political organization. They have a really storied history, but more importantly, they have a bright future. In the last couple of years, they’ve seen a huge shift in how people are thinking about socialism in the United States. Younger people have a more favorable view of socialism than previous generations. We’ve even seen best seller books like by Thomas Piketty, Capital in the Twenty-First Century, Bernie Sanders’ political revolution on the Democratic side of the ticket. I mean, you can really see there’s a sea change happening in American political opinion on socialism.

You don’t have to juggle different platforms, you don’t have to have a dedicated mobile site, you don’t have to have an application, we can just do this all through one site.

So with that, CPUSA knew early last year that they needed to get on the bandwagon. They have a lot of progressive ideas, great ideas that they wanted to share with the rest of the country and their old site certainly wasn’t doing that for them. It was a little outmoded and they knew that they needed to basically communicate clearer and faster to keep up with the rest of the digital world. So, responsive design was right at the forefront of the conversation. They knew that they had to communicate to people on different mobile devices; they had a growing mobile user base who was kind of neglected in the old design. A lot of their users, their primary interaction with the internet was through a mobile device.

So when we were first talking about the design during the RFP process, responsive was the only thing on my mind. I said it’s a lot easier, you don’t have to juggle different platforms, you don’t have to have a dedicated mobile site, you don’t have to have an application, we can just do this all through one site where we can control the experience from desktop to mobile. And with that, we got pretty much immediate buy-in from the whole team at CPUSA about going the responsive route; they saw it as a no-brainer. And when we reached out to Diaspark, that was the first thing out of their mouths, so we were very much encouraged by that first interaction with them.

Mobile users, for the most part, using our site analytics, were new users. They were new to the Communist Party, they weren’t existing membership.

Ethan:

I’d love to hear a little bit more about how you came to terms with the needs of that mobile user in the face of an old desktop-only website. We talk to a lot of organizations who struggle with what mobile and desktop mean for them in their design and development processes. “Mobile users need less information and they need quicker access to facts and figures, whereas wide-screen users, they’ve got so much time on their hands, maybe we can design for both of these contexts separately.” How did CPUSA tend to think about that?

Mike:

Well, we understood that our users were completely different from desktop to mobile. Mobile users, for the most part, using our site analytics, were new users. They were new to the Communist Party, they weren’t existing membership, and they were looking for very specific things. They were looking for more information about what the party stands for and, more importantly for us, how to join, how to pay their dues, how to donate. And that differed from desktop users. Desktop users typically were our membership, people who were coming back for news, they were coming back to look at what’s the next event, and the old site wasn’t doing that.

So, we made sure to have that be our main goals of the redesign set that new users were very important but we also had to juggle these existing users. And for mobile, that meant having constant call to actions on the page, always encouraging our new users on mobile to do something and for them to do it easily, which the old site just simply did not do. Things were buried in the old site; when we wanted people to join, they had to go through two or three steps even to get to a form. So when we were evaluating the needs of the site, we had to kind of juggle those two groups, which had disparate needs, and funnel them to the appropriate channels.

It takes a little bit more, in terms of the QA part of it, to assure that every single device works with the site, but it saves us a boatload of time in the long run versus having to juggle multiple platforms.

Karen:

I’d be curious to hear how you planned and scoped a project of this magnitude, especially because you’re all working as consultants to CPUSA. One of the things that Ethan and I sometimes hear is that people expect responsive design to take longer and cost more because you’re essentially building three different versions of the website. Did you find that, in scoping out this project and scoping out how you worked with the Communist Party USA, that you had to take more time, or did it cost more money than traditional ways of working?

Mike:

Honestly, coming from the background of being a web developer myself, I’ve always thought of responsive design of being “that’s just the way it is now” for web design. So, when I was presenting it to CPUSA, I said this is really the best way of approaching it. Yes, you’re going to be designing three different versions of the site—which in the case of our site, I think we designed something like seven different versions based on breakpoints. But if you have a good development team who, from the outset, understands that we’re going responsive and it’s vitally important, really, our timeline wasn’t any longer than I would’ve anticipated. And CPUSA understood that it does take a little bit more care; it takes a little bit more, in terms of the QA part of it, to assure that every single device works with the site, but it saves us a boatload of time in the long run versus having to juggle multiple platforms, like a dedicated mobile site or an application or something like that. So, I think that when we were scoping out the project, Diaspark came with a proper timeline for what I thought would be acceptable for a responsive web design.

It’s a little more testing, but it’s fun. It’s actually a lot of satisfaction seeing what you are doing is working properly on different devices.

Ethan:

Since you mentioned it, Mike, I’d love to hear a little bit more about how you did manage that QA and testing process. Was that something that you introduced in day one, you were sort of incorporating devices a little bit more in the design process, or was it managed a little bit closer to the end? P.J.,if you have any thoughts here too, I invite both of you to weigh in.

Mike:

Yeah, the good thing about how Diaspark handled the process was that they were presenting us designs, as you present designs, at different breakpoints, how mobile menus will look in a visual way, and then once we got into development, they were great at giving us a live environment to look at. And because it’s responsive, I can go to that same live environment on my phone, my tablet, even here in my office we have a bunch of different devices that we design to. I was able to go on all of them and see, in the middle of development, how the site is shaping up. But P.J., you’d have a bit of a better way of phrasing that, I would guess.

P.J.:

Absolutely, you have phrased it right. But if you see it from a design perspective, when you create the mock-ups, it’s usually three different breakpoint mock-ups, but when you implement them, it’s testing a little more than that. Because it’s not just one resolution on mobile devices, there are multiple resolutions. So although you can do the testing over the browser by re-sizing, the actual testing needs to be done on those sample devices. So we have seven or eight different resolutions as a benchmark where we have the devices, so testing is done on all different devices. With the desktop, you only do two or three different operating systems, which is Windows, Mac, and sometimes Linux, and the browsers, but on devices it’s a little different because you’re doing the testing on different devices, which is irrespective of browsers, it’s more resolution-based. So, it’s a little more testing, but it’s fun. It’s actually a lot of satisfaction seeing what you are doing is working properly on different devices.

Ethan:

Couldn’t have said it better myself, P.J. That was great. Mike, since you mentioned mock-ups, I’d love to hear a little bit more about the design process that CPUSA used. Were you creating traditional mock-ups in something like Photoshop and Illustrator and then moving into prototyping? Were you mixing prototypes with static comps together? How did you actually start to formalize and talk about the visual design for this responsive layout?

Mike:

Well, P.J. can speak about the technical side of how they devised the mock-ups, but at CPUSA we had a pretty large group part of the design process, it was what we called the “design collective” at CPUSA, which was basically about seven or eight different people at different levels of leadership at CPUSA who were part of the mock-up approval process and things like that. I would say it was a bit of a longer process, but I think that the thoroughness of it made development go a lot quicker.

We were presented with obviously wireframes to start off to show how layouts would look and then breakdown based on the responsive device size. Once we approved the layout, moving on to the design portion where we would actually get physical mock-ups, we were presented with color scheme options, typeface options—there was a lot of discussion that went along with this and a lot of templates, I think P.J. can attest to that; we did a lot of page templates. At each part of the process, it was presentation, discussion, revision, and then pretty much Diaspark, after that one round of revision, boom, they had it, they understood it. So, we went through that process, I thought it was a very intuitive process. The group, as we went from template to template, started to get in the rhythm of this revision and approval process, and I thought, by the time we got to development, our expectations—we knew what to expect coming into development. But P.J. can talk about the technical side of developing the mock-ups.

P.J.:

Mike has portrayed correctly how the process went and it was very good support from the CPUSA team to approve the mock-ups, which helped the development team to implement those, converting to HTML, and integrating them into the CMS. So as Mike said, information architecture, then wireframes, then defining the font, color, size scheme, and then converting them into Photoshop files. Mocks were created in two to three different formats and then different templates. So for each page, initially we started with the home page, so that became the masterpiece and then went into other templates, like the article pages, the donation pages, the subscription pages, the social media pages, etc.

They got a lot of good practice in on the development side before we even launched the site, and now it’s humming along two months in.

Karen:

What about the content being created for this site? So, how did the design process, and particularly the responsive design process, influence or guide how the editors or the content creators at CPUSA were thinking about what they’d produce?

Mike:

Well, we had to relearn how we were doing things because of the responsive elements. As part of this, I should mention we completely changed content management systems. So, we went from an older content management system called SilverStripe that CPUSA had redone back in the late 2000s, to the new content management system, which is WordPress. So, not only did our content creators have to learn how to upload correct photo sizes so that they would scale properly at different breakpoints, but they had to learn a whole new system on how to do this. Now, albeit it’s a much easier system in WordPress than it is in SilverStripe, but it did kind of change how they develop content.

They had to make sure that when they were putting big swatches of content on the page, that when we’re reading it on mobile, it’s not just “death-by-scrolling,” or when they’re uploading featured images, that they’re uploading a correct size so that it scales down properly in proper dimensions, from desktop to mobile. In terms of content creation, the team unfortunately had to kind of relearn everything. But we were doing the content generation for the launch of it, where we were uploading a bunch of new content during the tail end of the development, so they got a lot of good practice in on the development side before we even launched the site, and now it’s humming along two months in.

Karen:

How did that process work as you were communicating with the team at CPUSA, like if they were reviewing the designs in progress or reviewing the types of content that they’d be creating in the future? Did you show them prototypes? Did you have conversations with them about the CMS? How’d that work?

Mike:

We basically held two sets of meetings. We would have an internal meeting and we would also have a meeting where we’d bring in Diaspark to explain things a bit more clearly. But we would mockup content, really, so I spent a lot of time building mock-ups of posts, of pages, of event content, things like that that showed the CPUSA team how to go through the whole process of creating this new content. So it was more of an internal piece of work than it was bringing the Diaspark team in, because they were busy developing away and we didn’t want to stop their progress to go through the content creation with me.

With CPUSA being the progressive people-first organization, that was a huge part of making sure that we got our site down to a manageable size that didn’t put undue burden on our users.

Ethan:

We talked a little bit about QA and testing. I’d love to hear if performance was a consideration while you were working on this responsive redesign. Were you actually looking at how the site would perform not just on different device sizes and screens, but how it actually felt on different network conditions? And if so, didn’t that influence the design at all?

P.J.:

Yes, what we looked at was the maximum page size should be limited so that, even on the slower networks or slower internet bandwidths, the page renders in less than five seconds. That was the major criteria, saying each page should be ideally speedy, like two to three seconds, but worst case it should not be beyond five seconds. So, a major consideration was on the images, to ensure images are not too heavy.

Mike:

Another political and social consideration, when it came to the performance of the site, was because a lot of CPUSA’s traffic comes from typically working-class people, especially ones that use their mobile device as their primary means of accessing the internet, we didn’t want to put any undue burden on them to access our site. We didn’t want a big bloated site because a big bloated site means that when they access it, that would impact their bottom line when it came to paying their bills, basically. So, that was even in consideration, and with CPUSA being the progressive people-first organization, that was a huge part of making sure that we got our site down to a manageable size that didn’t put undue burden on our users.

Which I thought, from being in the web design business, I almost have never dealt with that idea, so it was very interesting to operate from that point of view as well, that at the end of the day your website costs people money to access it, so you make sure to make it as easy to access as possible and cost them the least amount of money.

We’ve seen increases across the board in sessions and users and page views—I believe we’re up sixty-two percent in page views since the redesign. We’ve dropped our bounce rate by ten percent.

Karen:

How do you measure the success of this redesign? How do you know if this site is working, if it’s helping CPUSA achieve its goals or connect with the audience that you want to connect with?

Mike:

Well, we’re already seeing some great success with this new redesign. Our main ways of looking at it was direct user response, the site analytics, and then the amount of actions taken by the users. Following the launch back on May 1st, we got so much love mail, basically, from users, saying, “Thank you for redesigning the site, thank you for making it easier for me to access on a phone, easier for me to share; thanks for making it look modern.” So that was one of the first ones we looked at.

Then when we looked at site analytics, “Are we accomplishing our original goals through it?” we’ve seen increases across the board in sessions and users and page views—I believe we’re up sixty-two percent in page views since the redesign. We’ve dropped our bounce rate by ten percent.

People on mobile phones, on tablets are accessing pages and completing forms and taking action in a way that we’ve never seen before on CPUSA.org, and that’s all thanks to basically going responsive.

Our mobile use, we’re at a sixty/forty split now and our mobile average duration is up thirty percent, so people are engaging with the site on a phone in a totally different way than they were before; they are more likely to go to another page because of the responsive redesign.

And we’ve also seen the moneymaking part of it, I guess would be the most unsophisticated way of saying it, increase as well. Donations are up, new membership sign-ups and newsletters are up thirty percent each during the May to June period. So, we’re seeing already real, tangible impact, tangible results from the responsive redesign. People on mobile phones, on tablets are accessing pages and completing forms and taking action in a way that we’ve never seen before on CPUSA.org, and that’s all thanks to basically going responsive.

Ethan:

Well, operating on the heels of such a successful redesign, I would love to hear from both of you: coming out of this process, do you have any lessons that you’ve learned that you think would be helpful for our listeners? Specifically, if somebody is listening to this episode right now, what’s some advice you would have for them as they’re starting their own responsive project? P.J., do you want to go first?

P.J.:

Sure. It’s very important to define the minimum viable product and have it ready, saying whatever timelines are there. Then the second important thing is the team involvement. The team should be prepared to give their time and share their thoughts. So whatever thoughts they are sharing, the design and development team can ensure that their minds are replicated into the product.

Mike:

The biggest thing for me that I’ve learned is to make sure that you have a great partner to develop with, one that’s a logical fit with the team that you’re going to go through the entire process of a redesign with, and that understands clearly the needs of the project. From the outset, the folks over at Diaspark handled that process with care, they walked us through every step of the process, and they were constantly reinforcing the goals of the project throughout. When we would suggest something but it would be in conflict with one of the goals, they would remind us of that, they would keep us on track. And making sure that you have a great partner, one that really fits well with your existing team, like we had at CPUSA, I feel is the most important part of the process. So, really when you’re developing that RFP and you’re looking for teams to develop with, that’s the most important part, I feel.

Karen:

Well Michael, P.J., this has been a fantastic look at a really interesting process, and I have to say, I think the site is great and I think you’re doing great work, so we’re really thrilled that you came on the show. Thank you.

P.J.:

Thank you.

Mike:

Thank you for having me.

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.