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, well, we’re like a little kid running through the apartment just turning on all the lights, because we couldn’t be more excited to speak with Cindy DeVelvis and Emily Gray who are here to tell us a little bit about OhioCeritifedSites.com, which was brought to us by Dayton Power & Light. Cindy, Emily, thank you so much for joining us.

Cindy:

Thanks so much for having us.

Emily:

Yeah, we’re excited.

Karen:

But before we get on with it, I’d like to welcome back our sponsor, Gather Content. I’m thrilled that they’ll be sponsoring this podcast for the rest of the year. I recommend Gather Content to my own clients who are going through a website redesign. Gather Content provides some much needed structure and editorial workflow to help manage a large-scale content creation process. Because Gather Content works with so many organizations going through a website redesign, they have unique insight into how content fits into a web project. And because they are such great people, they wrote down their advice for you! They’ve put together a 41-page guide to Content Strategy for Website Projects. Head on over to gathercontent.com/RWD to read their advice or download a PDF to share with your team. Thanks, Gather Content!

Ethan:

So, before we talk a little bit about Ohio Certified Sites, maybe you both could introduce yourselves for our audience. Cindy, do you want to go first?

Cindy:

Sure! I’m Cindy DeVelvis, digital communication specialist at Dayton Power & Light, which is an AES company, and responsible for all the website, social media, and digital strategy for the company.

Emily:

Hey everybody, I’m Emily Gray, title is content strategist at Sparkbox. We’re a web design studio in Dayton, Ohio, and we work with some awesome clients, like Cindy. So, I do both content strategy for Sparkbox and then also manage projects, which I did for this one.

Ethan:

Well once again, welcome to both of you. We are really excited to talk about this beautiful responsive site. Maybe we could back things up and actually just start from the beginning of the story, because I’d love to hear a little bit more about how the redesign was kicked off. Specifically, as you were starting to think about this new website, how was the decision made to go responsive? What was appealing about that as a methodology? Or maybe on the other side of the coin, did any stakeholders or executives have any concerns about the approach? I’d love to hear a little more background there.

Cindy:

Well actually, for us, going responsive was never a question. We’ve worked with Sparkbox for a number of years and they’ve really helped guide us in that direction. We were one of the first electric utilities to have a responsive website, built about seven years ago. For us responsive isn’t a requirement, it’s an expectation.

Emily:

Yeah, and Cindy has done a really awesome job of championing that internally too, because definitely team members come and go, and helping them understand the constraints and the intricacies and the benefits of responsive—we’ve helped empower her and I think she’s done an awesome job championing that internally, that really nobody had a question.

Karen:

That’s so great to hear. I honestly wish every entity had someone who was as great of a champion. Let me ask if the question around mobile users and desktop users was something that you discussed as part of this project. I ask simply because I think this is probably the classic example of the type of site where the expectation is that your audience will be business professionals, they’ll have a desktop computer. Was there a sense that they also would want to look at the site while they were on the go, or is it more of a case that you wanted a responsive site just because you wanted it to work across all platforms?

Cindy:

Well, we did understand that our primary audience was the C-suite level executives or those business people who are going to be making real estate decisions, for the most part. The goal of the site is to attract business development in west central Ohio, but so often those decisions aren’t just made sitting in front of a computer in your office, they’re made in meetings where you might hand somebody a tablet and say, “Look, this is the property that we need to invest in,” or it could even be just on the go, searching for information. So for the economic development site selectors and those C-suite executives, they could be anywhere when they’re doing background research or looking into properties, so we wanted to be able to serve them no matter where they’re accessing the websites. And I know a lot of consideration from Sparkbox’s end, all of the mapping and the cool stuff, the animations that happen on the site, they put a lot of time and effort in making sure that they were going to work and look good no matter if the person was looking at it on their cell phone or on a great, big desktop monitor.

Karen:

Let me follow up and ask about the mapping and all of the cool things about this site. Emily, can you talk about how you and your team at Sparkbox would plan and manage a project of this scope? It sounds like you’ve worked with Dayton Power & Light for some time now. When you’re thinking about planning a responsive project or when you’re thinking about wanting to create some of these innovative features and having to plan for how much time it’s going to take and how much it’s going to cost, how do you do that?

Emily:

Well, there’s definitely a budget, which is one of the first things a client wants to know about, in terms of scoping. Cindy actually did a lot of legwork. We’ve worked together so much, she knows the kinds of questions we’re going to ask, she knows what things she can do to kind of help get some ideas around scope before she even comes to us. So, Cindy came armed with a lot of thoughts from her team and had already kind of gotten their heads moving in that direction. So she came to us with a pretty good idea of what she thought she wanted, and then we actually kind of dug into that and talked about goals—and we can maybe talk about priorities off of this, but that’s a big thing that I know was really huge on this project.

I think this was one of those cases where we had a very well-informed client who came to us with a really good idea of scope, and then we tried to chisel at that to really get at the heart of what they needed. We don’t really like to just necessarily build precisely what idea someone has. We feel like that counsel that we can give adds a lot of value, and sometimes that means kind of de-scoping in certain areas and saying, “You know what, I don’t think you need to spend money on these five things. I think you’ve got too many templates here.” Whereas we might say based on some other goals, in this case for this project, they were really hoping to win some awards, they were hoping to kind of set the bar for what sites like this would look like, and be something that people would aspire to. We said, “You know, we can kind of de-scope in some areas and kind of increase what you’re thinking about in others.” We’ve got some great folks here—Rob Harr—and a lot of our team really get in on estimating and helping to plan that. This was one of those projects where I feel like everybody on our team really had an opportunity to shine. So I don’t want to go too far into all of that, I feel like I could go into twelve different spaces. Is there anything about that you want me to dig into?

Cindy:

Just to add to talking about the prioritization and the goals, Emily and her team—we knew that mapping was going to be very important for us, because for an economic development website, we’re not attracting people who know where we are, we’re trying to attract people from around the world to come and invest in the Miami valley. When we said, “We want to make sure everybody knows our location,” they really took that to the next level with all of the maps. And even not just on the home page with the animation when you come in, but then really animating it in to show, “Okay, this is where we are in west central Ohio,” but then still having that—there’s an icon of the United States with the marker on it so that way, even if somebody enters the website from a search result or directly on a site page, they still have context of where we’re at in the United States.

Emily:

We pay a lot of attention to goals with clients. I don’t necessarily like to typically ask a client what their goals are, I just like to ask questions and poke and prod, and I’ll take notes as we’re having a conversation and then kind of throw up on a screen, “Hey guys, I feel like you’re saying this. Do you think this is what you’re saying your goals are?” And out of that, it was really, really clear that this site existed to showcase individual locations people could move their business to, and why they should. So it was so incredibly clear to us that that was the top goal, that the priorities all just kind of shifted around that goal. We said, “Okay, this site is in service to these locations. We need to make these huge, shining stars. This is what your navigation is.” This is one of the sites where we said, “Your navigation should just be these sites, and a lot of links that you’re thinking about that’s kind of supporting copy that people aren’t really here for necessarily, the site needed that kind of content, but let’s put that in the footer, let’s talk about where that belongs.” Yeah, so we did a lot based on those goals.

Cindy:

Yeah, I think the original site map that I proposed in the background research was about forty or fifty pages with the site pages, and then all of the other content that we could talk about—why it’s great to do business in west central Ohio. But we were able to really pare that down, focus on those goals, not get caught up with all of the other stuff that might not necessarily help us win those deals, and then also just to link to our partners and all of the community organizations and the other economic development entities that are in the area who already have really good content out there, so we could have just one page saying, “Here’s the advantages, but go to the other places for that prime information.”

Ethan:

Something Emily said in her last response was the word “showcase,” which I think really struck me when I first saw the website, because I think it’s incredibly impactful and it’s beautiful. I’d love to hear a little bit more on how you translated some of those goals from the initial requirements into some of these really beautiful aesthetics. How was the design process for this structured?

Emily:

So we were in a meeting, and we know the people that we’re in the room with pretty well, and we hear them asking us for something that’s like totally outside of their norm. For a utility company, they’re heavily regulated; caution and conservative are definitely words that I think Cindy could probably—she’s nodding her head—those are words that I think of when I think of working with this team. Because they’re lots of things—they’re safety, they’re working with electricity, those are important things for them. So we knew when they came to us and they were like, “We want to win awards,” and “memorable” was one of the other words that I remember coming out… And so we thought, “Okay, we think we know what they need, but it is not what they’re going to be expecting and it is going to make them so uncomfortable.” [laughs]

So we pushed Jeremy Loyd, our creative director who worked on the design of this, and something that I feel has been really helpful with working through design as a team, at least myself in helping to support our design efforts, is one, having goals, and then two, having an aesthetic language. It’s kind of one of those other things that I like to pull out when I’m listening to clients, and I felt like they were saying words like “memorable,” “showcase,” so those were words that we pulled out. When Jeremy then presented the design, he was very intentional about what he gave. We have lots of things that we think are pretty fun about the way the site interacts… So Jeremy basically presented a static design, but he actually used CodePen to show one of the unique elements that he wanted on the site, which was, on a larger screen, sort of a static left side and an actual scrolling right side. He said, “Okay, I’m going to put this in CodePen so that I can very lo-fi just show this,” because it’s kind of hard to communicate that to somebody and have them understand what that feels like. So that was one of the things he did, but then he also had a lot of animations in his pocket to help show—and he really did an awesome job of helping explain, “Hey, this is what you’ve asked for, we believe this delivers in all of these ways.” And very intentionally asking, “Do you think this is memorable? Does this give the right kind of pop and emphasis to these particular areas?” to not let ourselves get so bogged down in, “Hey, this is your norm. Does this feel right to you? Do you like this?” I do think that very intentional way of presenting the design, I think the design would have been dead without that. But I also think, just as importantly, having Cindy and having that trust also allowed us the rope to have the tough conversations around this kind of design that was really going to push them.

Cindy:

Yeah, and on that note, when we were here in the Sparkbox offices and Jeremy and Emily were saying, “Here’s the design,” I think my first impression was probably the emoji with the two heart icons as eyes. That was my reaction. But looking around the table at some of our other business stakeholders, they were pretty shocked because yellow and black aren’t brand colors for Dayton Power & Light. So just the first shock of, “What’s this yellow website?” But as we went into, “It’s yellow because that’s a memorable color. Highlighters are yellow because it helps people remember things.” Having that explanation from Emily and Jeremy was very helpful in getting us to get the acceptance of the design. And when we walked away that first day, we didn’t have full acceptance of it, but we said, “We like the layout, we love all of the animations and how it’s coming together. Not sure about the color palette, but let’s move forward,” and we were able to bring our team and get those acceptances in.

Karen:

It wouldn’t be me if I didn’t follow up and ask a little bit about the content process for this project. So, as you were thinking about the responsive designs and you were thinking about how you would present this information, how did you manage the editorial process for creating all of this content? And perhaps, what’s the site built on? Is there a content management system that people are using to keep things up to date?

Cindy:

I’ll speak to the editorial process and then Emily can talk about the CMS a little bit. We were very fortunate to be able to work with a dedicated copywriter for this project. This was probably one of my favorite projects because we got to pull in a couple of the creative teams that Dayton Power & Light works with. We went to Nova Creative, they’re a local agency here in the Dayton region, for the content just because their copywriter actually has real estate and economic development experience. She had been a marketing manager for a development company previously, and we wanted to make sure that we were speaking in the voice of site selectors, of the people making these types of decisions. So, we worked with them to give them all of the background information and their copywriter really hit it out of the park, just being able to work within—we had the content and then we were able to put together the wireframes and the designs, which I think was extremely helpful for Sparkbox. But then also even things like the case studies that we have on the website, we were able to really go out and travel to all the different businesses, get their stories, hear from them why they’re staying here in the Dayton region, and to really help tell their stories. She was able to get all of that information first-hand instead of us just feeding that to her, so I think she did a really great job.

Emily:

I feel like several years ago it was, “It’s content first. No, it’s this first.” I feel like whoever goes first always has a really hard time. Something I liked about this process was it was kind of a joint partnership. Even though it was a different company writing the content, our team had a lot of conversations around weighing out what kind of content we felt was necessary to meet the goals. With Cindy, we had those conversations around, “Okay, we don’t think we need this,” really stripping down, like, “Okay, these are the core pages that the site needs to accomplish our goals,” and talking a little bit about what those pages needed to be. Cindy helped really guide that effort of, “Okay, this is what these pages need to be,” and then talking with that person. So Cindy was really like a great person to help keep everybody in-step together so that as they’re writing content, we even got to give a little bit of feedback on that as content was being written. We were creating wireframes sometimes mostly with real content, which is so awesome. So, mostly we tried to work our timeline around each other, and then sometimes we would be giving suggestions to the copy person, where we’d say, “Okay, we’re going to do this, this, and this. Ooh, I think it might be nice if you take this particular piece and break it up, or actually, I think this is really great. Boy, we should put that at the top of this page and have it be Benefit Highlights.” So, we were kind of getting to have that creative process back and forth with a three-legged stool of, “Okay, everybody’s improving one another,” and each step would kind of flow to the other and improve one another, which was awesome.

As far as content management system, we’re using ExpressionEngine on this project, and a lot of the reason we picked that was it worked well with the stack that already existed for the properties we’ve built for Dayton Power & Light. Most of their sites are using some version of ExpressionEngine right now, so we picked it for that reason. But something we felt was important—we really wanted to use React to build a lot of those transitions that we were talking about and Cindy’s alluded to, and so we used ExpressionEngine to serve that up as an API.

Ethan:

That’s very cool. One thing that I’ve been thinking about as you’ve been talking about moving from static designs into a fully functional, well-animated responsive layout: how did that actually change the review process with other stakeholders at Dayton Power & Light? Were you looking at the responsive design on different devices? Was it still kind of projected up on a screen? How did you gather feedback during that process?

Cindy:

For a lot of it, it was projected up on to the screen, or I was sending the links and doing WebExs with some of our different business stakeholders and resizing the browser to show them how this is going to—”Okay, if this is tablet size, this is how it’ll look, or this is how it will adapt to mobile.” But for the most part, as far as the testing and everything else, I actually came into Sparkbox, and along with their team, I think I spent more time with their team than the Dayton Power & Light team those weeks, but we did all the testing on their device wall, where they have all the different tablets and phones and everything, to make sure that it worked. But our business stakeholders for the most part just trusted that, “Okay, you guys are testing, you have it down,” and moved on with it. But yeah, so for the most part it was either bringing it up on a big screen and showing it to them, or even just a WebEx.

Emily:

We had a couple of formal meetings to help just get the design direction, but then we also tried to get a lot of what Cindy’s talking about, with that testing and actually seeing it develop, we tried to get up into a QA instance as soon as possible. So even though there are some things that are going to look not great at certain points in time, we just tried to get that reality up for clients as soon as we can so that we all know what we’re talking about and we know what we’re refining. We feel like the only thing we’re really giving is a website. You didn’t hire us to give you a really beautiful static design, so we tried to move past that as quick as we could and not really refine that too much, and let that happen in the browser, which means we have to be honest about the ugliness that sometimes exists as you’re building something, and just give clients access to that QA instance as early as possible.

Cindy:

Yeah, and as a client I really appreciate that, because some companies work and they show you the design and then they go away for a few weeks or a month and then they come back and say, “Here’s your website!” and by that time it’s almost too late if you need to make changes or decide you really don’t like how this works. So, being involved throughout the process and seeing how things evolve and knowing, “Oh, this isn’t really going to quite work the way we thought it would. Is this okay? Or we have this alternative suggestion,” as a client it gives us that ownership so that way we are involved and it’s not just a pull the curtain and then, “Here’s your website!” and then if you don’t like it, you’re gonna have to spend a lot more money and time to really get what you want.

Karen:

Speaking of getting what you want, can you talk about how you measure the success of this website? And is it different if you’re evaluating the site in a responsive context? Are you measuring how well it performs or converts on different devices?

Cindy:

It’s a little bit early in the process for us as far as the measurement. We’re definitely tracking everything in Google Analytics, and who’s coming to the website, and how they’re getting there, and are they engaging with the content. We’re keeping an eye on that right now. But we haven’t actually, from Dayton Power & Light’s side, really announced it or had a big marketing push for it. So that’s going to be coming hopefully in the next few weeks or a month, because the properties that are featured on the site, in the certification process, they’re all in the third and final phase, and we’re hoping that we’re going to have at least one of them fully certified, and that’s what we’ve kind of been holding off on as far as putting out that press release and really having that marketing push. So, we’re keeping the pulse right now, but in the end our ultimate goal is selling the properties. So we have that one shining goal that we want to drive business investment here in our region, and although we’re keeping track of what those traffic levels are, where are people coming from, how are they getting there, to make sure that we can keep getting people coming there.

Emily:

Yeah, Cindy’s being very nice saying, in a good way, we delivered way early, which is really awesome. [laughs] And fortunately, Dayton Power & Light was nice enough—we were all super giddy about getting it out there, so we said, “You know what? Even though the sites are super close,” because the real benefit for having these sites is the fact that Dayton Power & Light has done all of this work to certify that locations are really good and the site lets people know, “Oh hey, I should go here because it’s going to have enough water and wastewater, and it’s going to suit my electricity needs,” like basically Dayton Power & Light has done all that legwork to certify these locations. And they’re almost certified. But we were all just too excited, we were like, “We want to get this out!”

Cindy:

And of course, as the client, we had a deadline that was very optimistic and very hopeful, and the Sparkbox team delivered on that early deadline, and then now, as some projects go, we’re just kind of going along and waiting for all the pieces to go before we can really announce it and start marketing it.

Ethan:

I’d love to know if the speed of the new responsive site was ever part of the discussion. Emily, was performance something that Sparkbox tried to bring up with Dayton Power & Light?

Emily:

Yes, and it’s honestly one of those things—I don’t remember the first time performance really started getting talked about a few years ago within our team, and it feels like we’ve done a better and better job, as each time we talk about it on a project, it’s closer and closer to the start. So I feel like now we’ve gotten to the point it’s when we’re talking about design, we’re talking about, “Okay, we’re going to use these maps? What does it mean, the fact that we’re going to use Mapbox, what kind of performance hit are we gonna take for that? What do we need to maybe compromise in other places to make sure that we can make up for that?” And Daniel and Adam were the two primary developers on this site, and they both are super awesome about keeping performance in mind, having a performance budget and checking against that. We try to not let performance budget be a thing that somebody just checks every so often, but building it into our actual workflow so that there are checks and it’s like, “Okay, did you know you just blew the performance budget because you put this piece in?”

So that’s something we try to keep an eye on, check in, use WebPageTest to run things. So, performance was definitely something that I know Adam and Daniel went to time and time again and every so often were just doing everything they could to try and improve performance. Both of the guys wrote a little bit about it in the write-up that we have on our website about the project, and Daniel actually has another performance thing that he just wrote about it that came out as we’re recording this today that shares a little bit more about some things that we did on this project.

Karen:

Well, I think as we come to the end of our time here, I would love to hear from both of you, do you have any advice for other people who might be embarking on a responsive design? What did you learn from this project that you might want to share with our listeners?

Emily:

I’m huge about priorities, and I feel like goals are a thing that I really latch onto with projects. I think without those goals, this site could have been a very, very different thing. Knowing those goals helps you prioritize on a page, helps you suss out if that content should even exist on a page, and that’s my absolute thing that I love the most about responsive design. If you design from a mobile “small screen first” mentality, it’s those tough conversations that it forces you to have about, “Does this content belong?” When you start doing design on a large scale, it’s really easy, “Oh, well there’s space. We can put that in there.” But when you start with a small screen, it really makes you question every single little thing that you put in there, is it really serving the users or is it just something that somebody thinks would be cool to put on the page? Which, depending on your goals, might be a valid thing to do. But yeah, I think goals and starting with small screens, and using the goals to guide what that content should be is my favorite thing.

Cindy:

From my point of view, I would say don’t be afraid to listen to outside influences. When you’re working with your business stakeholders and they have a certain vision or idea of what a website is going to look like, don’t be afraid to trust your creative team. We’ve been working with Sparkbox for quite a long time, so we’ve been able to build up that relationship and we have that trust they’re not going to make recommendations or say, “We need to build a yellow and black website” unless it’s something they really feel strongly about, because that’s a risk for them, putting that proposal forward. So, really listening to outside influences even just in picking the domain… That was one of the hardest decisions, actually, of the project, “What’s the domain going to be for this website?” And Jeremy and Emily and their team were able to come back with a few of our first suggestions and say, “Well, this makes sense to you, but it doesn’t really speak to us.” So, having those creative partners that you can rely on who will be honest with you and not just give you what you ask for, but give you what they think is going to help you accomplish those goals was very, very important in this project.

Ethan:

Well I have to say, from where I sit it seems like that partnership paid off in a big way. So Cindy, Emily, thank you so much for coming on the podcast and telling us a little bit about your recent work. Can’t wait to see where it goes next.

Cindy:

Thank you.

Emily:

Thank you!

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, GatherContent. Go to gathercontent.com and take control of your content production process.

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

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.