Episode Transcript

Karen:

Hi, this 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 thrilled, it’s like we have money in the bank. We are here talking with Jenna Kutz and Matt Griffin about the American Economic Association. Welcome.

Matt:

Thank you. Thanks for having us, Karen. Thanks, Ethan.

Ethan:

But before we get started, I’d like to take a moment to thank our sponsor, Media Temple. They’re an LA-based provider of web and cloud hosting solutions that caters to web developers and designers like you and I, as well as to creative agencies and large enterprises. Now, they’ve been around since 1998, so there’s a pretty good chance you’ve heard of them. I mean, heck, one of my earliest sites was hosted on Media Temple. They offer 24/7, award-winning support, that’s based right here in the U.S., available online or over the phone. And Media Temple has one of the highest customer loyalty rates in the industry. They’re incredibly proud of their focus on the digital design community and offer a whole suite of products that are just tailored to its needs. If this all sounds good to you, you can use the code RESPONSIVE when you sign up, and if you do that, you’ll get 33% off the first three months of shared or Wordpress hosting. That’s available at mediatemple.net. Once again, from Karen and I, we’d like to thank Media Temple for sponsoring the podcast. Thanks so much.

Karen:

I would love it if you’d both introduce yourselves, maybe tell us a little bit about what the American Economic Association is and does. Jenna, why don’t you go first?

Jenna:

Sure. Thanks again for having us. The American Economic Association is over a century old, I think we’re going on a century and a quarter of a century, that serves an elite group of probably over 20,000 economists in the fields of academia, business, and government, and from all over the world. Our mission is to support and manage the dissemination of economic research and discussion, and we offer things like membership services, journal and database publications, job services, and an annual meeting that hosts over 10,000 economists, in addition to other informational resources.

Karen:

And Matt, how about you?

Matt:

I’m Matt Griffin and I’m the founder of Bearded. We’re a web consultancy that was hired to work with the American Economic Association on redesigning their new website. So we did a lot of things related to user experience and information architecture and content strategy, as well as a visual redesign, and then working with their internal development team to actually help build out the final website.

We just knew that if we were going to design a modern website, that we wanted it to work seamlessly on both desktops and all devices.

Karen:

Well I’d be curious, just to start this off, were there any conversations that you had to have within the AEA about going responsive? Were there any questions or concerns about responsive as a methodology?

Jenna:

There actually weren’t. At the time, the IT department and web services department was aware of responsive design and we had been assuming that that was the current and upcoming best practice. So we just knew that if we were going to design a modern website, that we wanted it to work seamlessly on both desktops and all devices, so that was just part of the redesign process for us.

Matt:

And it was an interesting experience on our end at Bearded. When we first started talking to Jenna and her team, they were absolutely on board with responsive design, they already knew what it was, they knew that’s what they wanted, and they knew that providing accessibility to people on all devices is really important. But that didn’t necessarily mean that everyone up the tree in the executive levels knew what responsive design was, so we did do a little bit of education there. And I got to have the fun moment actually of sitting down with executive director, Peter, when I happened to be in Nashville, we talked about it and he said, “Well, what does that mean?” and I pulled up a website, which I hadn’t done in a few years, and got to squish it in his browser and watch the delight in his face that it worked on all devices in one browser. [laughs] He was pretty excited.

One of your constituents used the phrase, “user hostile” in one of the interviews.

Ethan:

Wow, that’s fantastic. Maybe you could tell me a little bit more about those early days and some of those early discussions. And I’m curious, because I know a lot of organizations struggle with these two words, mobile and desktop, and when you’re thinking about designing a device-agnostic responsive experience, there tend to be questions about what mobile and desktop actually mean. Do these different contexts need different information and different content, or are mobile users and desktop users more or less looking for the same thing? Could either of you tell me about where AEA falls on that spectrum?

Jenna:

We weren’t separating desktop users from mobile users, we see them as the same users on different devices at different times with different purposes. We do know that for certain tasks, and in fact for most of the tasks that people want to do on our site, they are primarily at a desktop, they are not primarily on a mobile device. But we also knew that there are tasks that probably would be preferable for them to be able to do comfortably on mobile, and that we might not see an increase in usage of mobile until or unless we provided a more comfortable experience on a mobile device.

Matt:

I also think this whole question of mobile accessibility for AEA really tied into a much larger question about accessibility in general via content and user experience and everything. Their site was very outdated—I mean, they were themselves describing it as cluttered, and a dumping ground. I think one of your constituents used the phrase, “user hostile” in one of the interviews.

Partly that was because their content was really aimed at the top percentage of economists, so even students, younger teachers, people with less experience felt excluded from the experience even if they were on desktop, which was sort of the best case scenario. So, providing a good experience on small screens but also providing content to people from a variety of experience levels, and expertise levels, and information architecture that was intuitive was all part of the same initiative about bringing more people into the fold, making people feel welcomed when they came to the site, regardless of where they were in their careers or which device was in their hand.

Jenna:

Yeah, that definitely is true and was the experience that we had. The old idea was reduce the amount of clicks and put everything on the main page, the new idea was to streamline navigation so that you could more easily find what you needed. And that required a new content strategy on our end, and Bearded was definitely able to help us move in a better direction with that, and in addition, to include groups of people that we hadn’t previously been trying to provide information to.

Karen:

I’d be curious to know how you actually approached planning and scoping a project like this. Matt, I might imagine if you’re working with a group of economists, that they would like to have some sense of predictability around what the scope and budget for this project would be. How did you work together to figure out what you were going to do and when you were going to do it?

Matt:

Oh, that’s a great question, Karen, and I was actually going back to refresh myself on that part of the project, because it was quite some time ago when we initially started. We did a long research phase with them, I think it was four to six weeks, something like that, where we really tried to dig in and understand things, and also understand each other and what the AEA needed most from us, and what they could most provide to us while we were working on the site and how they could contribute; where they felt comfortable, where they felt like they needed more support. That was a great period that helped us to find things.

In fact, at the end of that, we wrote one of the longest strategy documents we’ve written in the last few years, and that’s what surprised me. Right now, we tend to write very brief strategy documents and keep things very lightweight, but because the Economic Association, partly because, you’re right, the economists sort of dig documentation, and also partly because it was a very complicated site, it had a tremendous backlog of content with high ambitions for what they wanted to change, and they had the most dreaded thing of all, which was the integration of many third-party services—technically not third-party, they were homegrown applications for the most part, but they had been homegrown over the last decade, literally. So, we had a decade of potential technical debt to deal with and systems to integrate with, and that was pretty scary. So we ended up with a fifty-page strategy document, which for us was a lot longer than normal. It’s not the longest we’ve ever written, but it comes in probably a close second.

So we were defining things, though, as far as what are the pitfalls that we know about, what is our laundry list of features and the order of priority that we have for them, whether or not we tried to group things into sections of what are definite musts for launch, what is nice to have and would be great if we could do them, and then what are things that are just probably future features more than likely, unless we can squeeze them in. That really helped us set priorities with the schedule. We created a pretty robust schedule, it was one of the more mind-bending budgets and schedules I’ve created, I still remember vividly the day I sat down to do it and wrap my head around it. [laughs] But there was still, even with people who are looking for a high degree of definition, we all had to accept that there’s a certain amount of play that’s going to happen in terms of scope and in terms of focus throughout the project. And I think Jenna put it really well when we were talking just a minute ago when she said when you look back at the initial proposal, it’s not what we did. And that’s great, because if Bearded was tied to doing exactly what we said at the beginning of the schedule, that means they’re tied to it too, whether it’s good for them or not. So over the course of the many months that we worked together, we really had the chance to adjust and do what was right for AEA, even if that meant doing slightly different features or moving priority up and down of things as new facts came to light.

We realized that, more than anything, they needed a full-time new position at their organization of someone to write, and edit, and curate writing and content articles about economics.

Ethan:

I’d like to hear a little bit about how you pivoted from strategy and research into design. How did you actually structure the design process for the AEA redesign?

Matt:

Oh thanks, that’s a good question, Ethan. So, we started out as we like to do, with the most lo-fi of things, which is words and information architecture. This is a site that’s very, very content heavy, it’s really important to get the content right, so modeling the content really well, and for us that’s tricky, because this is not content we normally deal with. [laughs] I distinctly remember just trying to wrap our heads around their concept of journals and articles because it’s a multi-tiered hierarchical situation. They don’t just have one journal, they have seven journals at the American Economic Association, and then each journal has issues, and then each issue of course is full of articles, right? So, coming up with a way to talk about articles, issues, journal, journals, was actually rather difficult because all those views need to be represented on the website. You need to be able to look at all the journals together, you need to be able to look at the contents of one journal together, and then come up with a sensible way of modeling that very academic content in a way that’s understandable.

So we worked through that in words and in diagrams, and then we moved on to establishing look and feel with an element collage, we created wireframes that we created directly in HTML and CSS that we were able to run usability testing on. This was fun because you couldn’t do regular usability testing with something this specific, we had to do economist usability testing. So if you think recruitment is hard for usability normally, try economists. But luckily we have several universities here and the University of Pittsburgh has a great economics department, so we were able to find grad students, we were able to find professors, we were able to find retired people, we were able to find professionals and get the whole gamut of economics in here, and then really get a sense from them not only could they use the interface, but was it providing things that were useful to them? So we talked to them a lot about what do you want from the American Economic Association? And a lot of what we got is right now the site isn’t that useful to me, which is fine, but what would you like to see? And what we kept hearing again and again was it’s really hard to keep up with the current publications. What’s current in economics, what are the current trends? This may sound familiar to those of you that, like us, are in web design, staying on top of what’s happening right now. One user put it really well, he said, “If I can’t make it to the party, I at least want to know about the most fun stuff that happened in that party,” which is maybe a strange metaphor for economics for some of us, but we got the point. And so we created a way for them to surface the most compelling of their articles on to the home page, but also to provide a new thing, which was language that was accessible to people who may not be the upper ten percent of academic economists so that everybody could read the articles as well as access the academic stuff. So, figuring out those features was part of modeling that content.

And in fact during that period, something that really came out—I think the biggest feature of the website was invented during that content modeling and information architecture period, which was that we realized that, more than anything, they needed a full-time new position at their organization of someone to write, and edit, and curate writing and content articles about economics. Someone who could write those plain language summaries of very academic pieces, something most people won’t be able to do, someone who could create nice news summaries of things that were happening out in popular culture that related to what they were doing, and do it in a timely fashion and keep their site up to date with fresh content. And to their credit, the AEA acknowledged that that was a really important thing, and then they actually followed through on it. They created that job position, they hired for it, and they’re cranking out content all the time right now, so that was quite exciting.

But I’m off track a little bit. Once we got through all of that content stuff, which is probably the heaviest portion of our work, then we moved on to look and feel. So we used our element collage, we brought that design into the wireframes and enhanced the wireframes up to working design prototypes, and then ultimately built out the working site based on their platform until it was ready to go for production.

Jenna:

I would just like to add that we did figure out during the planning stages that we wanted to not just make the website more accessible in terms of devices but also to make it more accessible in terms of use for the audience that we’ve always planned for, which are PhD economists, but also for the more general public and people who might be interested in coming into the field of economics. There’s definitely been more of the idea that we would want to try to make economics more accessible to people, especially people who would be considering economics as a profession.

We were able, thankfully, to bring a staff member on board who is writing research highlights about our articles and is able to pick and choose. We do have seven journals, so he’s constantly monitoring what the newest articles are and seeing which ones are more popular in terms of usage statistics, but also choosing things that are timely in terms of the news, and we’re pushing that to the front page. And we’re doing it regularly and we’re promoting it to social media, which we recognize means that people are going to be accessing that content on mobile devices more so than perhaps content that’s not promoted through social media. So, we’re glad now that we have a nice responsive, comfortable experience for those people.

When we did eventually launch the site, it was familiar, it felt good to them, so nobody was surprised when that big change happened.

Karen:

Let me ask about how you socialized this work in progress with the rest of the organization. So, were you sharing around wireframes or comps or working prototypes, and did you have to review this with executives and economists and other people in the organization to weigh in?

Jenna:

Yes, definitely. We were primarily working with Bearded on the things that we knew we needed, and then we had several levels up that we wanted to keep touching base with, making sure that stakeholders were involved and had the opportunity to see things and provide feedback. So, at the point where we put together the strategy document, they were involved in that process. And then whenever we had the initial set of wireframes, they were able to review that and just make sure that everything seemed to be in alignment with their expectations. There were changes to be made, but I don’t think that it was anything that was major or incredibly surprising. We sort of went through it with internal staff first and then with stakeholders, and the process just sort of cycled in that direction and I think was fairly smooth.

Matt:

And I think in a lot of ways we treated AEA’s team, Jenna’s team, the immediate team that we worked with, as really just an extension of our team. So we worked with them constantly and were constantly iterating and changing, and they were here in our space frequently, and then we’d periodically push up to director-level. And of course usability testing is where we brought in a wider circle of economists outside of the organization, which was really helpful.

And then periodically, very rarely, we would actually do in-person presentations or WebEx presentations if people weren’t on site. A lot of the AEA is based in Nashville right now, so we would do WebEx presentations with them, and then at the end everyone, I think the whole board came together for the end of the project and then we presented out, “Here’s everything we’ve done, here are our goals that we set at the beginning, here’s how we fulfilled those goals, and here’s the information backing that up,” and then gave them a chance to ask questions and clarify anything that was still confusing. I think those occasional big in-person group things, when structured well, are actually really helpful.

Jenna:

Yes, and by including them at regular intervals and making sure that the feedback was there and that we were responding to it, when we did eventually launch the site, it was familiar, it felt good to them, so nobody was surprised when that big change happened.

Matt:

I think it’s interesting actually, in some ways when you launch the website, that’s the scariest part for the organization, and I sometimes forget that because it’s something we do fairly regularly. But when that big redesign hits, there’s the fear that everyone is going to be upset, that it’s different, it’s changed. “Where’s my thing? Why is that word different? It looks different, I don’t like it.” So everybody’s really on edge. And Jenna’s right, bringing them in throughout that process makes sure that, at least for the executive level, that they’re going to be a little more comfortable and it’s probably going to be a smoother launch for them.

We really had to fall back to a more classical typographic design and layout-based design and really just think about things in terms of space, and layout, and typography, and color.

Ethan:

I’d like to hear a little bit about if performance was a design consideration at all when you were actually working on this. So, there’s a lot of focus on the content, the design, and the usability. Was the speed of the website something you were testing or considering as you were working on this responsive redesign?

Matt:

I’d say on our end, that was something that we were really worried about from the very beginning of the website, and so the design process for us is one of our biggest places that we can impact performance and content strategy.

Of course as things shifted towards deployment later on, things like server optimization and caching became more of a concern for the technical team over at the AEA. But initially, performance, in terms of design for this site, was really not something we had to worry about so much because it came naturally with the fact that it’s very hard to represent economics with photography. So, our initial design constraint was how do we do a beautiful website when we really can’t use that much imagery? And a lot of the times using what is commonly used now in design are lots of icons, that didn’t really make sense either. The dollar bill icon and photograph you run out of use for pretty quickly, people get pretty sick of it pretty fast. So we really had to fall back to a more classical typographic design and layout-based design and really just think about things in terms of space, and layout, and typography, and color, which was a lot of fun for us as designers to still try and create something compelling and navigable and useful without a lot of flashy imagery. We did also get to generate some neat icons on some of the pages because, you know, designers.

We weren’t trying to increase usage per se, we were trying to create a better experience for users and also to hopefully bring in some fresh users.

Karen:

Let me ask about how you measure the success of this work or measure the success of this redesign. What sort of analytics or data will you evaluate to know if the site is performing the way you want it to perform?

Jenna:

That’s an interesting question. The interesting thing to me is that people have to come to our site regardless. If you want to get a job in economics, you’re going to come to our site. If you want to publish in economics, you’re going to come to our site. So, we weren’t trying to increase usage per se, we were trying to create a better experience for users and also to hopefully bring in some fresh users who would not normally have been someone that the association was contacting.

The other thing that I’m interested in looking into as we get a little bit farther down the road is to see what happens in terms of mobile traffic. We’ve never really had a high amount of mobile traffic, but I’m interested in seeing, “If you build it, they will come” works for that and that if we will see a substantial increase in mobile usage just because you can. Whereas before, it was an uncomfortable thing and only something to be done if you had no other alternative, now it’s seamless and comfortable for people to do even on small form factor devices. So, I think we will be looking at that as a point of interest down the road.

Matt:

I think it’ll be interesting to see how people interact as well with content that wasn’t there before or wasn’t there in that way before. So where previously people did have access to all the academic journal articles, they didn’t have access to them in a way that was quite so friendly or accessible with plain language summaries and laid out in a way that was easy to get to. So I’m curious to see how engagement goes, now that this has launched, with the number of users that are using that, if we’re getting people that weren’t there before. I mean if you use the Wayback Machine and go to the previous version of the site, it’s very dry content, it’s not very inviting. And now you look at the home page of their website and front and center there’s an article about the gender gap with wages, which is something you would never have seen on their previous website, or at least not in a way that you knew that’s what they were talking about unless you were an economist. So I think that’ll be really fun to watch.

Jenna:

Yeah, we’re definitely seeing the benefits of that already in terms of just having the ability to showcase some of our articles that are getting press coverage or that are covering timely topics. We’ve definitely seen an increase in traffic to those kinds of things, whereas on our previous website we didn’t really have the ability to showcase different parts of our content. So, we’re really having a lot of fun with that.

The fact that we had management and the executive committee on board, and that they had buy-in and that they were excited and willing to provide feedback through the process was a really good thing.

Ethan:

Well Jenna, Matt, this has been a fantastic chat. But before we let you go, I’d just love to ask, if someone in our listening audience is starting a responsive redesign, do you have any advice for them? Maybe one or two lessons that you’ve learned over the course of working on the AEA website that you’d like to share with someone else? Matt, do you want to go first?

Matt:

Sure, I’d love to. You know, it’s tough because we worked for such a long time together that there were actually a number of lessons that I feel like I learned on that project and some of them have become so ingrained by the end of the project that I’m not even sure I’m aware of them.

I think when undertaking a project that’s as long as that project—and I think even after the research phase was another six months of work, roughly—being tuned into working with their team very closely and frequently, and being open to iteration and change, and I think being really aware of their changing thermometer for how things are going throughout that project, noticing when they seem to be getting antsy about something or maybe there’s a new feature emerging or new technical issue emerging on their side that you’re not quite aware of yet, and just talking frequently about it I find is really helpful.

And the other thing I think is if you know you’ve got a big build design and build thing coming up, to make sure the research matches it. Frequently in smaller projects, we’ll do a one-week research phase, two-week research phase, for them having more like a five or six-week research phase really allowed us to dig hard into the content and way down deep through that website, do at least a lightweight content audit of the entire thing so we knew what we were looking at, and really talk to their development team for a long time so we understood all of the technical challenges that awaited us as much as we possibly could at the beginning so we could at least have a nice, rough scope where we were enable to get enough done that it would have value for them at the end of the project.

Jenna:

I think that having the support of the full organization was really important. The fact that we had management and the executive committee on board, and that they had buy-in and that they were excited and willing to provide feedback through the process was a really good thing from our perspective. We feel that we were fortunate to find a design firm like Bearded that had a proven track record and really felt like a good match for our needs for our organization.

And to follow up on what Matt was saying about having the process of the research phase and having that be somewhat longer, I think we really had the opportunity to build trust and feel comfortable preceding with the rest of the project, and we recognized that both our teams had the flexibility to do what we needed to do and I think the project just went so much more smoothly because of that, so I would count that as a huge point in the success of the project. It was good that our teams were able to work side-by-side with their team as the project progressed, and our team really learned a lot from working with them, so.

Karen:

Well, it sounds like a fantastic collaboration and this has been a fantastic episode. So Jenna, Matt, thank you so much for taking the time to come and talk to us today.

Matt:

Thank you so much Karen, and thanks a lot Ethan. It was a pleasure to be here.

Jenna:

It was a pleasure. Thank you so much.

Ethan:

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 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.