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, we couldn’t be more excited to be speaking with Ewan Watt and Ellen de Vries, who are going to be telling us a little bit about the Theirworld redesign. Ewan, Ellen, thank you so much for joining us.

Ellen:

: Hi.

Ewan:

: Hi. Thank you so much for inviting us.

Karen:

But first, let me welcome our sponsor, FreshBooks. I personally have used FreshBooks to manage my invoicing for many years now. FreshBooks has made my life so much easier by helping me keep track of who has paid me, and who hasn’t. It’s been a great product for years, but now it’s even better, with an all new version redeisigned from the ground up. Now it’s even easier to send invoices, set up online payments, and manage expense reports. Their dashboard, notifications, and automated late payment reminders will help ensure you get paid on time. FreshBooks is offering a 30 day, unrestricted free trial to our listeners. To try them out, just go to freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section. They’re great, and you should totally try them out.

Ethan:

: So before we dive in, maybe you could both introduce yourselves to our audience, tell us a little bit about what you do, and maybe tell us a little bit about Theirworld. Ewan, would you like to go first?

Ewan:

: Sure. Well, about myself, my background is journalism. I was a journalist for more than thirty years in daily newspapers and news websites. I worked on various titles in Scotland, England, and the United States. Firstly as a reporter, then a copy editor. I worked my way up to become a senior editor, and then latterly for the last few years of my newspaper career, I was digital director of Scotland’s biggest newspaper company. So, that involved working both in the newsroom and as a member of the senior management team. Three years ago, I decided three decades plus was enough in the media world, I’ve done my time, and I moved into consultancy work. So, I have the great pleasure of working mainly from home. I have a set of clients, but the major client who I enjoy working with hugely is the children’s charity, Theirworld, which is a UK-based charity. So, basically they asked me to come onboard to use my editorial and communications skills and background to help them to get their message across.

: Just very briefly, Theirworld is a charity that helps children to unlock their potential. We carry out research, we do pilot projects, we campaign, we run a very active news channel on the site; we’re at the forefront of shaping new ideas and coming up with solutions to help give children around the world the best possible start in life. You can break that down into three main elements, or three main causes: every child in the world has a right to go to school and learn; every child needs the best start in life through quality early years care; and every young adult must have access to skills development. So, those three causes are reflected in everything we do at Theirworld, through our campaigns, through our calls to action, our original research, our projects in the field, and then our news content.

: News is very much at the heart of what we do. We’re not really like many NGOs, who will probably do one or two blogs a month. We have a steady stream of news content, which we use to bring people into the causes and the campaigns that we feature. That’s where we went to Clearleft to ask for their help and advice in restructuring the site, redesigning it, but also giving us a new way of communicating our messages to our potential audience.

Ethan:

: Well, we are delighted to have that message here today. Ellen, could you tell us a little bit about yourself?

Ellen:

: Sure. Yeah, so I’m the content strategist at Clearleft. I’ve been at Clearleft for a couple of years, so working with Theirworld was one of the longest projects I’ve done, it went on for a whole year. I worked with a team pretty much consistently throughout the whole year, and that was with Rich Rutter, Mark Perkins, and James Gilyead. So, Rich was the UX designer, Mark was the dev, and James Gilyead was the designer, and we all worked really collaboratively to basically get Theirworld a new website and CMS, to help them get their message across much more clearly.

Ethan:

: Marvelous. It’s wonderful to have you both here. So, I’d love to hear a little bit more about the early days of that project, and maybe specifically, as you were contemplating a new redesign for Theirworld, what were some of the factors that went into deciding that it was going to be a responsive website? And were there any concerns or challenging discussions around responsive design as an approach?

Ellen:

: Well when I took the project on, I discovered that it had such a wealth of resources behind the scenes that, on their old site, none of this stuff was coming to the fore. There was news stuff, there was lots of stuff being shared on social media; there was a vast amount of resources in terms of information about childhood development issues sort of hiding behind the scenes. We wanted to really bring that out, but obviously when you’re thinking about responsive design, you need to think about readability and you need to think about how that content is going to be accessed. So, when we looked into the user stuff, we saw that there was a large part of the readership where the users were based in countries where they may not even have access to desktop computers. With Clearleft, doing a responsive design is kind of a no-brainer anyways. We pretty much work either mobile-first or just work responsively anyway. But in this case, it was also vital that that content was served up appropriately to the various audiences that we had to work for.

Karen:

: Let me follow up on something you just mentioned, which is people not having access to desktop computers. How did you think about the role of mobile devices versus the traditional desktop machine in thinking about this redesign? Sometimes Ethan and I will talk to people that say that they believe that they have very clear mobile scenarios of use or that they want to optimize for a particular mindset or use case that might presuppose that the user has a mobile device. How did you think about that?

Ellen:

: Well in our case, we didn’t make any exception for mobile users. We basically serve up the same content to desktop users and mobile users. The only anomaly in that case I think was where, in some of the campaign software, we wanted to make sure that people took action on the campaigns. For example, like signing a petition, they didn’t need to scroll through loads of content and loads of storytelling stuff to be able to get to the call to action. But that was really the only difference between what we served up on a mobile compared to other devices—including the desktop, that is.

Ethan:

: This might actually be a good time for me to ask about the design process. Specifically, how did Clearleft and Theirworld start talking about the look of this responsive site? Were you looking at flat mock-ups, or prototypes, or looking at things on devices? I’d love to hear about how that got started.

Ellen:

: Well, we had a really collaborative process. So, it was a case of working through it together. Ewan, James, and the rest of the team and I all sat together, even though we were at different locations, every day and talked through the progress of our designs and the decisions that we were making. Everything we did was very much content first because Theirworld is a very, very rich resource for content. So, we took much more account of how the content should manifest before we actually looked into how it should be visually presented through design. So, a lot of work went into taking inventories of the content, and auditing the content, and looking at the vocabulary that was being used, and the information architecture. That information architecture and the whole underlying plumbing of the system gave rise to the design.

Ewan:

: If I could reiterate what Ellen’s been saying, it was hugely collaborative. This was so much more than just a website build. This was an opportunity for Theirworld to examine real core issues, like who we are as an organization, who our audiences are, how do we be more creative in how we work, how do we introduce new forms of storytelling to get our messages across. So, there was some very, very deep conversations throughout the organization with Clearleft internally and so on, because we knew we needed a new website design and structure, but we also needed a clear content strategy. There are some quite complex issues that we’re trying to get across to an audience in many, many countries across the world, some of whom don’t have English as a first language—lots of challenges there. So, we looked at various ways of how people would access all of the thing we wanted them to access in a seamless way. So, without bogging down the content with long explanations or clunky links which the previous site had…

: So if I can give you an example: we’ve been writing a lot over the last few months about Syrian refugee children who are out of school in neighboring countries, such as Turkey and Lebanon, so we regularly report on what’s happening to them. The work that Clearleft did, they identified that we could create multiple content elements which we could then pull into our news stories or our blogs, such as a call to action block, a block explaining the campaign, what our physical projects are in these countries; related explainers on issues such as child labor, early marriage; what research is available; fact boxes, tables; embedded social media postings and so on, so that the storytelling was freed up by those layers of content that we could pull in and which we have as basically a library of elements that we can pull into any of our articles on the site. That took a lot of research by Clearleft into what we were trying to do as an organization.

: We’ve ended up with a site which I think we’re very, very happy with. It’s actually allowed us to attract people of real quality onto the editorial side. So, we’ve got a former newspaper editor, a couple of award-winning writers, picture specialists, social media marketeers, and they’re coming to us now because of the work that we’ve done and the work that Clearleft have done on creating that new site and that new content strategy for us.

Karen:

: Let me ask about the content management system that, Ellen, I think you alluded to earlier. When I hear teams say that they’ve put a lot of work into defining a content strategy and revising sort of their overall editorial practices, often that implies that they’re doing some work on the back-end to support that. How did you think about that?

Ellen:

: Well, it was really interesting to me. For the first time, when putting together a backlog and looking at the user stories, we considered editors as part of those user stories. So, whereas two-thirds of the user stories are obviously targeted at the user, the editorial team needed to have a lot of tools and functions to make sure that things went smoothly when they were actually writing the content. But one of the main needs at the beginning of the project was to streamline and make it easier for editors to tag content to make content easily searchable and to make it much more efficient for people to write content. So, as Ewan was saying earlier, being able to pull in modules of explainers so that they didn’t have to reinvent the wheel every time they were writing an article. So, that’s how we went about building the CMS really, is thinking about what the editor’s crucial needs were and looking at ways of making it as easy as possible. If anyone wanted to come along who didn’t understand Theirworld, they could just go into the system and it would be kind of like painting by numbers, deciding how you might easily tag content so that it could be grouped together again in the future.

Ethan:

: I wanted to touch on something that I think, Ewan, you mentioned earlier, which is we’ve spoken to a lot of organizations that, when they start designing for other countries or cultures, that surfaces a lot of challenging issues, like ensuring that the speed of the site is as fast as it needs to be when people may not necessarily be on the strongest network connections, or that the design of the site may need to be tweaked for different cultural contexts. Did any of those international questions come up during the course of this redesign, and if so, how did you tackle them?

Ewan:

: Yes, they did. I’m not the best person to ask about the technical side of it. We did discuss whether we would carry our content in multiple languages, that’s something we put to one side for this version of the site. It’s something we may revisit in the next couple of years. I think it basically came down to thinking about the way we presented content. So, doing things very visually. Our previous site was very poor on pictures, on use of videos, on other types of storytelling elements. So, I think the design process made us think about how to reach out to as wide an audience as possible visually; keep our language very, very simple, not dumb it down in any way, but being very clear on what we meant by the terminology we used. So, Clearleft challenged us on why we used certain words—what did we mean by “movement”? What did we mean by “coalition”? What did we mean by “a project”? And so on.

: So out of that came a very controlled vocabulary that allows us to tell people in various parts of the world exactly what we mean. Our language is very clear and direct. I think it helps that I come from a tabloid—not the American-style supermarket tabloid, but the British tabloid newspaper area of just telling stories as clearly and concisely as possible so that the widest range of people can understand their meaning. That’s something we did in a very collaborative way. As I say, technically we haven’t looked at, for instance, using other languages, but I think that’s possibly one we might come back to in the future.

Ethan:

: Beautifully put, Ewan. Ellen, I know that Clearleft has spoken quite a lot about marrying the aesthetics of a new site to the speed of a new site. Was that something that intersected with your work at all on Theirworld?

Ellen:

: Well, I know, as well, that Jeremy’s really hot on the speed and performance of the site and keeping a site budget. So, I have faith that it was considered, but I can’t tell you personally to what degree. Mark Perkins would be the best person to talk about that.

Ewan:

: I do know that not just for our audience but for the network of people who are actually involved with Theirworld, we have 500 youth ambassadors in eighty-five countries. Many of them don’t even respond to emails for days at a time because they have poor access to internet. But they’re telling us that the page load time on the website works well, visually it works well on all devices, and they seem to be happy. I know it’s not a scientific poll, but the feedback we get from our youth advocates in these countries is very important to us, and the feedback has been very positive from them on the technical work done by Clearleft in this project.

Karen:

: Can you talk to me a little bit about how you might have reviewed, or socialized, or maybe even tested this work with your constituents and stakeholders and users? How did you show this to people and what kind of feedback did you get?

Ewan:

: We did a lot internally; we have staff in various parts of the world. The wider organization has offices in London, New York, Washington, and Abu Dhabi, so we’ve got a wide range of people on staff. But also partnerships we work with, other NGOs, organizations—as I say, 500 youth ambassadors around the world. So, we were sharing a lot of the thinking we were doing behind the design, the content strategy, the way things were working, and so on. I’ll leave Ellen to talk about what Clearleft were doing in terms of specifically user testing, but certainly we were discussing, explaining, getting feedback throughout the entire process, over those several months, from those sorts of constituents.

Ellen:

: Yeah, so from the user testing point of view, it wasn’t actually part of the scope of the project to do user testing as such. We put a lot of work into the first phase of the project, into doing initial research. And then as the project went along, as Ewan was saying, everything was distributed throughout the team so that things could be checked and looked at. But we didn’t have a user testing element, per se, in the project.

Ethan:

: Well Ewan, Ellen, this has been a wonderful case study, and we thoroughly enjoyed speaking with you both. But before we let you go, I would love to hear if either of you have any advice for our audience members, some of whom might be about to start their own responsive redesign. Is there one or two things you’ve learned in working on Theirworld that you’d like to share with them?

Ellen:

: So, for me, the two very interesting things about this project were working on cyclical campaigns and looking at how content changes so dramatically as time goes by, and how you accommodate in modular design for so many different types of content flowing through a site. Because usually you’ve got content strategy, and it has its own sort of level of change over the period of a year, but then when you’ve got campaigns, you may have six campaigns running at once, so you need to be able to cater for that amount of content. So, it’s really interesting to me, as a content strategist, to look at how modules and components sort of form these guest houses for content as it flows through. That was a big learning opportunity for me to really test modules and patterns with as much content as possible to look out for different anomalies and situations and make sure you’re catering for the needs of the company or the organization. So, that was the first thing.

: And then the other thing that I really enjoyed about the project and that gave me a really good opportunity to go deeply into the vocabulary of an organization was this development of the controlled vocabulary. So, really thinking with all the various members of the organization about what their vocabulary is. As Ewan was saying earlier, thinking about how you might define a campaign and how you might define a movement, and how you might bring people’s voices into the information architecture and bring their stories alive, and thinking about also how you might iron out various inconsistencies in an organization’s vocabulary to help everybody literally sing from the same song sheet, to make everybody work together using the same language. That was a really important part of the process for me, and I think it helped us a lot, and the organization a lot, in the long run because it means that everything is clear between the people that run the charity and the people who are the users of the content.

Ewan:

: I’d reiterate the points that Ellen’s made, but from my point of view, from within Theirworld. The advice I’d give to anybody starting a project on this scale is prepare to be challenged. Don’t be defensive about what you already have, don’t be defensive about the way that you currently do things. We had to set aside a lot of preconceptions. We were pushed and challenged very, very strongly on why we did things certain ways, on our workflows, on our types of content, and so on. For that, I’m very grateful, because we really took a very hard look at ourselves, what the motivation was behind what we were doing, were we doing it the best way, and so on. That’s my big lesson: be challenged, don’t be defensive, because in the long run you’ll end up with a far better site, better methods of working, and so on.

: Secondly, on the CMS, don’t be afraid to ask for the CMS to be the way you want it to be, because at one point eventually the digital agency is going to go off and you’re going to be left with it. So, we worked very closely on ensuring that the CMS did what we wanted it to do. But not just that. The terminology used within the CMS—we were comfortable with it, it wasn’t just the default terminology. That allowed us also to talk about future-proofing both the CMS and the site. So, don’t think this is the end of the journey when the website is delivered. Think what you might need months or even years ahead. So, we’re six months after the project ended, starting to use other bits of work within the CMS that we haven’t dipped into so far, but we had the foresight to plan ahead together with Clearleft.

: And just listen to people like Ellen from outside, who come with a real strong background in content strategy. So, just very quickly to give you an example, like many NGOs, we used to carry traditional news stories and personal blogs all lumped into the same news channel. It’s the way almost all NGOs do it. One of the things we did early in the process in discussions with Clearleft was to split that into two separate channels so that our news is very much told in a third-person way, traditional news way, taking a dispassionate stance. But we have a separate “Voices” channel, which is where people tell their own experiences, what they do, what they see, what’s happening in their communities. It sounds obvious, but it hadn’t been obvious to us until Ellen and Clearleft came along and said, “Look, you have different types of content. Don’t lump them into one silo. Present them in different ways, and that will give you an extra strength.” So, that was another big plus for us to come out of the process.

Ellen:

: On the back of that, a really important part of the process was establishing what those storytelling principles would be and really figuring out how we could bring people’s individual stories and how their work of Theirworld affects them to the fore on the site, which was something that had been missing before. But as well as that, I wanted to acknowledge the work that Ewan put into developing the information resources that support all the news articles as well. We call them explainers, but really it’s such a wealth of information about childhood development issues. It’s almost like a—well, it’s not crowdsourced, but it’s like a Wikipedia for childhood development now. Ewan put a huge amount of work into creating those resources and getting them all checked, and getting all the policy stuff signed off. But it’s there now, and it forms a bedrock for the site. So, it was great to see Ewan take up all those storytelling principles from the very beginning. The entire site was formed based on them.

Karen:

: This has been a really fascinating case study. It’s a wonderful site, and I’ve really enjoyed hearing the story of how you made this happen. So, thank you both for taking the time to come on the show today.

Ellen:

: Thank you. It’s been a real pleasure.

Ewan:

: You’re very welcome. I’ve enjoyed it tremendously. Thank you.

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design Podcast. Thanks also to our sponsor, Freshbooks. Go to Freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section for a 30-day free trial.

If your company wants to go responsive but you need help getting started, Karen 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 if 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 again for listening, and we’ll see you back here next week.