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 really could not be more excited or frankly be getting any smarter. We have Roberta Diehl and Curt Kotula, who are here to talk to us about Amherst College. Welcome.

Roberta:

: Thank you. Glad to be here.

Curt:

: Yeah, thanks for having me.

Ethan:

But before we dive in, I’d like to say a few brief words about our sponsor.

Now, Karen and I use FreshBooks extensively here at our little podcasting media empire, and we’re thrilled to have them as a sponsor. And we’re even more thrilled because they’ve launched an all-new version of their popular cloud accounting software! It’s really easy to use, and is a simple way to be more productive, organized, and—most importantly—get paid quickly.

This new Freshbooks has a ton of great, intuitive features. A few favorites: it lets you create and send professional-looking invoices in less than 30 seconds; you can use Freshbooks to set up online payments, which can get you paid faster; and many more.

Sound tempting to you? Well, FreshBooks is offering a 30-day, unrestricted free trial to listeners of the Responsive Web Design Podcast. To claim that trial, just go to freshbooks.com/RWD and enter RESPONSIVE WEB DESIGN in the “How Did You Hear About Us?” section.

Once again, thanks so much to Freshbooks for sponsoring our little podcast.

Karen:

: So, to get started, perhaps both of you will take a moment just to introduce yourselves, tell us a little bit about the role that you played either on this project or in your life in general. Roberta, why don’t you start?

Roberta:

: Sure. So, I’ve been with Amherst College for about two years. Prior to that, I worked at Bucknell University for many, many years in a similar capacity. So at Amherst, I oversee the digital communications team, which means the website, photography, video, and print publications. I joined Amherst College when this redesign project was already about a quarter of the way underway, I would say. My role was to help facilitate between the Fastspot team and the developers and designers at Amherst College and all the constituents on our side, and sort of be a facilitator in between the two groups. It was a very exciting project, and difficult and long, and I’m thrilled with the results.

Curt:

: So, I’m the creative director at Fastspot, so in all projects here I’m working on early discovery and strategy and then coordinating the product teams towards the end of the project. So, I’m pretty deeply involved in a lot of our work. But with Amherst, I also had the pleasure of being the lead designer, and also having a long working relationship with both client counterparts on that side. So a very, very collaborative situation between Pete Mackey, Roberta, and then all of the Fastspot team. With the site itself, I worked on the strategy, coming up with—through interviews and stakeholder requests and workshops—the general objectives we were going to work on through creative and through design, and then actually did those designs and stayed with the project until completion.

Roberta:

: If I could just add one more thing: so on our end here at Amherst, there was also sort of the buying in of the stakeholders on campus for all of the work that was going on between the Fastspot team and the Amherst team, and then sharing that with the campus community to prepare them for this big change, because we had not had a website redesign for quite a number of years. And also to mention that Curt and I worked together on several projects at Bucknell University, so we have a history of working on projects together.

Karen:

: That’s great. I love those long-term relationships as those tend to be really successful. Let me ask, as you were thinking about embarking on this redesign, were there any questions or concerns about using responsive design as an approach? Like, as you were having to socialize this concept with stakeholders and the rest of the people around the college, were there any doubts about using responsive?

Roberta:

: From our end, absolutely not. We had a responsive site going back to 2012; so, Fastspot came in, we already had a responsive site. Not entirely, so I’d say we are in much better shape now that it’s fully responsive. There were some aspects of it that weren’t responsive before. Things like registering for courses, or our giving form, those sorts of things. So, it was a given that it had to be responsive, nobody pushed back. I think our audience fully it expected it to be fully responsive.

Curt:

: On our side, it’s never a debate. We’ve been, for a very long time, treating responsive as a base requirement for everything that we do. So, it’s not something we provide any sort of separate conversation or hours and estimates on. It’s just part of what we complete. So, it was never up for debate or something that could be removed if they weren’t into it. The thing was really great in the opportunity was that they had a responsive adaptation before we started the new project. So, they had a non-responsive site, and then through adding break points when they can and making adaptations to the desktop design, just making scale adjustments, deriving mobile and tablet from that, that’s where they were. So like Roberta was explaining, it wasn’t holistic and it wasn’t from the ground up. So, although they were used to having a mobile accessible site, and so, yeah, it made buy-in very easy. But it was still a great opportunity to do it right from the beginning and to do it as part of the core architecture of all of the design.

Ethan:

: Let me ask a little bit about some of those early conversations, because I’m interesting to hear a little bit about how Amherst thought about mobile users vs. desktop users. So as you’re transitioning into planning this new redesign, did you think about the size of the screen as informing the kinds of tasks that users would want to access, or the content that they would need? Did they need similar information, or were they basically dramatically different?

Curt:

: There’s something really interesting about Amherst that not many people know, and that is that all of their school’s administrative software and all of the class learning software, everything that they used is tied up—and I might be overspeaking, Roberta, so jump in—but it’s all in that same installation. So they don’t have a portal, they have fully integrated student tools throughout the site. So not only in the task of making the front-end website responsive and giving it new style, we were diving into actually providing new styles and new updates and architecture to all of their core business systems for the campus. So, there are so many lines of code within that project that we were coming into—I mean, hundreds of thousands of lines of Drupal code that we were working within. And that’s a rarity for us; we usually start the CMS installation and the design and the build-out from a blank point, and this is one instance where we were bringing everything—content, code, applications, everything into the new system all at once.

Roberta:

: Yeah, that’s absolutely right, what Curt said. Everything is in our CMS, so it was not a simple task at all. We pretty much had to make sure that everything worked on mobile. There were some decisions that were made along the way, some features here and there don’t show on mobile, but pretty much everything does in one way or another. The site is huge; as you know, all higher ed sites are enormous. And we were able to cut down on some of the bulk of the site as we did the redesign, we got rid of a lot of duplicate pages and all of that sort of thing. But everything had to work, everything from registering for classes to the learning management system, to all of our internal password-protected pages… Everything.

Karen:

: Let me just follow up on that a little bit and ask how you approached planning and scoping a project of this magnitude, particularly as you’re working with an outside partner. How did you know how long things would take or how much they would cost, and was there anything that wound up taking longer than you had expected?

Curt:

: Yeah, there are things that take longer than expected, almost always. In the case of this project, it was the forms. We take a component approach to scoping a project, so we’ve gotten beyond kind of feeling like the complexity of the site is in the number of templates that they have. We really go down to the feature and component level, and we really see templates as they’re more like layouts and not the features of the site, but just visual layouts for the features of the site, which are the components. We did a huge audit—not just of the external ones obviously, because a lot of the depth of this project was behind login.

: But as a logged in student account, we went in and did what we call a component audit, which is really just screenshotting and naming all of the unique elements that we could find and marking whether they seem derivative of one we’ve already labeled or whether it seems completely unique. We had quite a few around the forms and the complexity of those forms, and it was like the tip of the iceberg. With all of the applications involved and the functionality, there was far more complexity that came in when it came down to that final ten percent of the project, where you’re hitting all those deep holes in functionality, and we just kept having to do new markup and new design on forms. But the storytelling components, the engagement elements and the design elements, and a lot of the really outward-facing impressions, those were really well-managed and the team does a lot with a pretty tight design system.

Roberta:

: Yeah, I would agree with that. I think all the work that went into what the design would look like, all of that went on target time-wise. Where we hit on difficulties and where the project became bigger and took longer than we had all sort of hoped or originally anticipated is when it got into actually building it out, as Curt said, and then on our end, when we were doing the migration. I mean, all of that always takes longer than you expect. And it was really complicated. We can laugh about it now, but it was difficult as we were doing that phase of it. It was so much code and so much back and forth, and it was a really complex set of components that you were building for us.

Curt:

: Monster Menus should probably be mentioned at some point. I don’t know if y’all know this, but the Amherst team is pretty instrumental in the maintenance and creation of Monster Menus, which is a really big Drupal extension, does a lot for higher ed institutions, and there are quite a few that are on it. And the dev team on that side was really responsive. So, we were needing to add functionality to Monster Menus that allowed for some of the layout flexibility and the modularity that we really think is important to creating variety and experience. The Monster Menus team and the Amherst dev team were really great about extending that functionality in the core product and making it available to others, so that was cool.

Roberta:

: Yeah, our instance of Drupal was really highly customized, as Curt discovered. So, it was challenging.

Ethan:

: Well, this might be an interesting time to transition into talking a little bit about the design process, because the new Amherst website is lovely to look at. So Curt, as creative director at Fastspot, I’d love to hear a little bit more about how you started having a conversation about the visual direction for this new site. Was this process dramatically different from other Fastspot clients? How did you structure that conversation?

Curt:

: No, the creative process and how we approached coming up with the visual momentum, the design system, that actually followed a pretty normal Fastspot process. We don’t start getting creative until we’ve gotten our minds around what the client really needs. So, we did a pretty extensive discovery, and that is output in a variety of ways. But the creative brief is pretty important to us, and that’s a chance to come to a consensus with the client about what the key objectives are. Those are broken out into creative, business, architectural, what the audiences for those objectives are, if it changes the overall audience hierarchy from objective to objective, and really just a written overview of where we think the website can take the Amherst brand and where that will then lead the communication strategy. So, that’s actually a written document and it’s one we iterate on and collaborate with, and Pete Mackey at Amherst is a really great collaborator on that vision.

: After that, we have a design team of about five at Fastspot, not counting myself, and we involve the whole team in larger projects. This was a multiple-concept project, which most of ours are, and that means that we come up with conceptual approaches that make sense of changing the content hierarchy within the page that we’re designing and makes sense of what holds everything together so you’re not thinking, “Flexible feature—events go here, news goes here.” That’s not really how we work. So, different designers work on different concepts at Fastspot. So everything, it’s not a superficial difference, and we try to cast a wide net all within what makes sense for the creative brief and what makes sense for the brand of the client. And then we present those to our core team and on the client side and build momentum towards doing a larger stakeholder presentation. So, we believe pretty big in casting a wide net and then using those conversations and the discourse about the designs to really start getting the meaty info about what they’re resonating with and what’s working and where it’s going to go. Our second round and third round designs are always much closer to what becomes the end product.

: The aspects of Amherst that we really dug into, though: we were really open to exposing, kind of pushing out the, “People online don’t read” aspect, that assumption that students don’t read and that it all has to be really basic visuals. Amherst was like, “We have the proud, intellectual, ‘we are readers,’; we’re just going to hold that flag, that’s us.” So, we latched onto that pretty early and we started being creative around leading with the human voice and the written word. That made its way into a couple concepts, but not every one. And then that’s, of course, tailored; we dovetailed it in with imagery, it’s not just words, it’s still got graphical backing but it’s far more the atmosphere than the focus.

: And then exposing—there’s so many details about the courses and how specific and interesting they sound. Any time we can get a human voice from the faculty, the students, either in video form or in testimonial form, we jumped at those chances, and those components started to really mold where we went. And then, of course, you can’t escape Amherst being purple, so we definitely had to work within that palette. But we invited new colors, new secondary approaches to pairing purple with pops of the teal, and at one point we were experimenting with lemon, and I don’t know that that made it anywhere. But we were bringing in these higher energy colors to bring kind of a different feel to the color palette that they’ve been using for a long time, but to make it special for this project and to actually have that make its way into the brand later on after the project launched.

Ethan:

: If I could just follow up on that really quickly, since you mentioned concepts a couple times, I’d love to hear if the applications and tools Fastspot designers use to flesh out those concepts have changed over time. What are you presenting to the folks at Amherst? Are you presenting comps? Prototypes? A bit of both?

Curt:

: It has evolved a little bit since Amherst, but it’s kind of similar. So, we jumped on Sketch right before Sketch 2 came out, and have been pretty much working with that app for a long time, when it was still pretty raw. But we liked the fluidity of the workflow, because we really like having art boards and pages and just a lot of the whole system visible at once. But I mentioned earlier about component scoping and thinking of the complexity of the project at a system level abstracted from individual layouts, and we get there, but we don’t start there. We do still deliver high fidelity comps, but they’re not the first thing that the clients see.

: We don’t like the “ta-dah moment” all that much because it’s fraught with risk. So, what we present are we write concept briefs now, which are little write-ups of each design we’re going to do from a home page standpoint, and we present those now with pencil sketches, which elements and objectives from the creative brief it’s really going to emphasize, and how an individual concept kind of changes the content flow from top to bottom. Then we build a wireframe out of that as we start to get more serious about functionality, and then we design that, and the client now has walked through those iterations. We weren’t quite that rigid with Amherst.

: But once we have a visual direction that’s post home page and sub page and global elements being designed and the system kind of having life, we get into a component-level approach to everything. So, we present templates in high fidelity because that’s what our stakeholders generally respond to. If they see something that looks like a web page, they don’t have to use their imagination as much, and they can respond about the details, and it all comes together. They’re not all creative people, they’re not all artists that we’re working with, so I find high fidelity comps to be really valuable in bridging that gap. And so we still create those, but it’s not really where our scope is.

: Our scope is in creating components in the systems, and then as we get into that revision loop now, we put a cap, like two rounds of revision on each thing, because if you need more than that then you’re going in the wrong direction anyways, and we do that at a component level. So once you’ve seen the featured faculty profile component three times and it’s approved, then the next time you see that in a template, that’s not what we’re talking about, that part’s finalized, we’re looking at the other elements. So, we do very much think in systems but we communicate to the client in pages in high fidelity, because I think that really helps them get it and ask the right questions.

Karen:

: Let me circle back and follow up on Ethan’s favorite content management system, and some of the changes that you might have made there, or even changes that you would have made to the content to have it work and fit appropriately in the new responsive design. Can you talk about the editorial process and how that might have intersected with the CMS?

Curt:

: I’m going to let Roberta speak to this, because the CMS selection and the environment and everything was very much a constant. So, go ahead Roberta.

Roberta:

: Amherst has been using Drupal for a long time, so there was no discussion, as far as I know. Because as I said, I came in after the project had already started. I don’t believe there was any discussion of abandoning Drupal, because we’re so entrenched in it, all of our processes are entrenched in that. And I can’t speak to all of the changes that had to happen within Drupal; I was sort of a witness to it from the outside since we have developers who did the hardcore work with Curt and his team. But there were a lot of changes to the code, to the Monster Menus, changing content types that we already had and retrofitting them or making them fit into new ideas and design concepts and then building some brand new ones. All of that had to be—the migration process, when we cloned the site and started building out the new components, was complex and delicate. So, we all worked really hard on that because we were making changes to the new site using the new display types and syncing that every day and trying not to overwrite anything that already existed on the current site, the live site at that time. So, it was very complicated.

Curt:

: So, to answer our side of that and where we asked for them to extend it… So, as you browse the site, you’ll see that there are quite a lot of visual components that fall outside of the general flow of the body copy, that kind of modular approach to bringing in profiles of faculty or steps to go through in the admissions process, or visual walkthroughs of facilities—those elements were all new to the system, and creating those in Drupal, creating the modules to support them and creating the database of the courses to have the content that we wanted, all of that was adapted for the new system.

: The area that we walked the Drupal team through and they were willing to make adjustments to were—there’s multiple regions on the site that can be reordered and added to over time. There’s a whole set of content width components that flow next to the sidebar, in that nav area, and you’ll notice there’s a lot of different interactive pieces that fit in that area. So, you can interact with that region in Monster Menus and strictly reorder and have as many as you want of any one component; the order is completely up for grabs, nothing is really required. And then that same system happens again in full width components after that main body area, and there’s a region for interactive components actually above it, too. Each of the headers isn’t a strict header based on a template, it’s actually a content component that you can add for the page, and that area you are limited to one. But that approach, really just treating the different widths of the page and the responsive break points, and creating the components for those widths, that’s something that we do on a lot of our projects, and then they extended Drupal to allow for the reordering and the flexibility and basically the optional approach to any one piece. They really extended that aspect; it wasn’t quite as flexible before.

Roberta:

: That’s a much better description than I gave. Thank you, Curt. [laughs] Yeah, we do, we have lots of pages now that have no body content, it’s just a series of components. We have many pages like that now, which gives us a lot of flexibility for sharing those on different parts of the site. We have components that are shared on many pages, so that’s been really interesting working with that. And the ability to reorder things in the different regions that Curt was describing with the above body content and below the full width. So, we’ve really been able to experiment with that since the launch of the site and use those in all kinds of ways that we really hadn’t imagined as we were going through the project.

: As far as the editorial content, we did a lot of rewriting of the editorial content on the top-level pages, especially the first page for every academic department, because those pages are crucial for our prospective students to learn about the college. So, we rewrote a lot of content, because as Curt mentioned earlier, Amherst is a very literary society, it embraces that in its community, and it’s very proud of it, so we had a lot of words on all of our pages. So, we tried to work on condensing those messages and then linking on to further, deeper content—you know, as all websites do, of course. But not getting rid of that love for language that we have, but trying to really introduce it in smaller content chunks. So, we did a lot of rewriting, with the new design in mind, with these new display types in mind, because a lot of them have maximum word counts in them, so we had to really rewrite and bring everything to fit into these content types.

Ethan:

: Well Curt, Roberta, this has been a wonderful chat. It’s been great hearing a little bit more about Amherst’s redesign. Before we let you go though, I’d love to hear if you might have any advice for our audience. If there’s someone out there listening to this or reading this transcript and they’re about to start their own responsive redesign, do you have any advice you’d like to share with them? Curt, do you want to go first?

Curt:

: …Oof… No, I don’t want to go first…

Ethan:

: [laughs]

Curt:

: Broad advice for anyone starting a responsive redesign…

Ethan:

: Narrow advice is fine, too.

Curt:

: [laughs] Yeah, throw everything away and start fresh. I just think any time that there’s that opportunity—and I know we talked a long time about Amherst being very successful even though we adapted everything—I think that we don’t delete enough content online and we don’t stay focused enough. So, I think spend a lot of time really digging at how you can effectively communicate with the people you want to communicate with and how you can own that part of the message so that you stand out, and then create a site that does that and make it as slim and as focused as possible.

Roberta:

: I would agree with that entirely, Curt. If you’re in a situation where you can convince your group to start from scratch, you can do so much with that. Inheriting a site that’s already been there for many, many years and trying to change that up without starting from scratch is complicated and tricky. You’re limited, in some sense, to what you can do. But as far as just going responsive, if there’s a site that’s out there that’s not responsive at this point… You have to get on board with that, absolutely.

Curt:

: If I could add one more thing—these are long relationships, these are long projects: find a team you really gel with. If I could do another site with Roberta tomorrow, I would.

Roberta:

: Thank you.

Curt::

: The connection really matters; your rapport with the creative team really matters. Spend a good amount of time getting to know the people you’re about to work with for a year.

Roberta:

: That’s the last thing I’d like to say. I’ve coordinated I think eight, nine major website redesigns in my career, and this one, in spite of the challenges we faced, because it did get tough towards the end just hitting our deadline and getting the whole thing launched—it was the smoothest rollout I’ve ever experienced as far as how our audience accepted it. We had some complaints about the size of the font being too big or this or that component not working. But as a whole, the feedback that we got from our on-campus community and our extended alumni community and general viewers was so smooth compared to every other one that I’ve been through. It was incredible. And the staff here who had been through many technology projects in the past before I’d joined Amherst College couldn’t believe how smoothly it went. I mean, the minimal amount of complaints or noise that we got just on social media or to our IT group or anything… It was really smooth. So, that was fantastic.

Karen:

: Well on that note, I think that’s a fantastic end to our episode. Roberta, Curt, thank you so much for spending a little bit of time to chat with us today. I really think the redesign is just beautiful and you should be proud of that work. So, thanks.

Curt:

: Thank you.

Roberta:

: Thanks very much. It was nice talking to 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.