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 are, frankly, lit up with electricity. We have Nicole Hynum and Darrell Corriveau here to talk to us about the Independent Electricity System Operator. Welcome.

Nicole:

Thank you for having us.

Darrell:

Hi. Thanks for having us.

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:

I’m going to bet and just make a guess that our audience doesn’t actually know what IESO is. So, maybe we could start this off, you both could introduce yourselves, tell us a little bit about your role on this project and, of course, give us some background on what the IESO is and does.

Nicole:

Hi there, thanks so much for having us today. My name is Nicole Hynum and I am the supervisor of web services for the Independent Electricity System Operator, also known as the IESO. The IESO is an independent non-profit organization that works within Ontario’s electricity sector. The main functions of the IESO I would say are managing the power system in real time, as well as settling the market transactions that fall from that. With respect to the functions of the web services team, we’re responsible for the organization’s corporate website, social media, and brand.

Darrell:

And I’m Darrell Corriveau, creative director for digital products at Q30 Design Inc., a branding and design firm in Toronto.

Karen:

So, I’d be interested to know, as you were embarking upon one of your redesigns, how did the conversation about responsive design play into your discussions? Was it something that you treated as a given, or perhaps did you have conversations or questions about whether responsive was the right approach?

Darrell:

I think it was very much a given that we would go this way. We didn’t really discuss much other than that it absolutely had to be mobile-friendly. We actually designed, from the ground up, mobile-first, and so almost by default you’re talking about responsive. There was an interesting story from one of our visual designers later on about that process, because he really, really wanted to just do mobile designs first and then roll out desktop later. But it was actually internal groups at the IESO, because you’re at offices and you’re viewing things on desktop, we would show mobile views but you weren’t really in that environment at work. So, we quickly had to scale up to desktop, so we were doing both at the same time.

Ethan:

I’d love to hear a little bit more about some of those discussions because I know that that’s something a lot of companies struggle with, balancing the constraints of the small screen with the needs of the desktop user. Can you tell me a little bit about how you managed to balance the needs of those two ends of the spectrum? What does designing mobile-first mean for the IESO?

Darrell:

It all comes from content, and we thought there was a ton of content on the current IESO site, and we went through and tried to ascertain whether or not any of it was going to be a problem on a mobile device. We determined that there was really no reason that it couldn’t work on mobile, so we assumed from the outset that we’d be able to solve everything. And we knew we weren’t going to get the most elegant solution everywhere all the time on mobile, but we knew we could solve for it.

Karen:

Talk to me a little bit about how you planned out this project. I think the scope of it was enormous, and I think understanding the content and the scope of that content obviously played heavily into that. How did you know, especially as an organization working with an agency partner, how long this was going to take, what you needed to plan for in terms of the number of things you were going to build or design, the number of reviews you had to schedule, all of those questions?

Nicole:

I would start by saying the project took longer than anticipated. About two years, is that right, Darrell?

Darrell:

Yeah, from beginning to end.

Nicole:

Yeah, and during that time we went through some organizational change. We had a merger, so it changed the scope of the project.

Darrell:

Right, and if you want to talk about planning from the ground up right from the beginning, I don’t think we actually did that. It was very much, “Let’s start. We’ve got to start doing things,” and doing things in this case was organizing content, figuring out who the audiences are, and then planning from that. Every step was sort of a new planning phase, and we didn’t really have any sort of project management philosophy going into it; we weren’t necessarily doing a waterfall approach or an agile approach, we just knew we needed to start work right away and figure it out as we went along.

Nicole:

One thing that we did do was we had a project manager come in that was a liaison between our organization, Q30, and our developer, and she kept us organized and on track as we got into design and implementation.

Darrell:

Right. So, we knew this was a large project but we didn’t quite grasp the size of it. We’re a fairly small shop. I’m creative director and I do some visual design and I do UX design and run some workshops here and there, and I was doing a lot of that at the beginning but it quickly became apparent that we needed more help. So, we ramped our capabilities up, we found a UX researcher, we reached out to you, Karen, to get the IESO team excited about content strategy, and that gave us some really great strategies on how to get that started, and the IESO did that. And we also expanded our design roster internally, too, to get this going. So, we started small and we actually had to add a few people here and there to make this go a little more smoothly.

Nicole:

Internally, we also were supported by a steering committee with groups from across the organization. Because when it came to developing, reviewing, and moving content from the old site to the new site, we needed to make sure everybody was on side, so it was a major lift from inside of our organization as well.

Karen:

Well, I did do a really fun workshop with you all, which is how I… Our listeners may not realize that I’m not actually out there like browsing the websites of electrical suppliers in Canada all that often. So, that’s how I know about these fantastic people.

Nicole:

[laughs]

Karen:

Could you maybe talk a little bit about some of the challenges that you were able to think through when you were dealing with the massive content that you had? I know one of the things that we talked about was that because you went through a merger, you really had a lot of different content to make choices about and pare down. Could you maybe discuss how that fed into the overall planning and the overall responsive work?

Nicole:

Sure. I think you hit it right on the head: if I was going to point to one of our greatest challenges, I think it was around the content and the content migration, especially because that was the part of the project that seemed to get squeezed towards the end and required a lot of attention. So, we did do an inventory in the beginning of all of the content on our site and then worked across our business units to determine what could stay and what needed to go. We have a really good web services team internally, and they, towards the last month and a half of the project, worked to make sure all of the content was moved over and ready for launch.

Darrell:

Right. I will say that we did start with some of the strategies we talked about, and one of them was creating—we needed a central repository for web copy and editing, and we started Word docs for all the sections, carefully labeled and tagged. That worked a little bit at the beginning, but I think the IESO team became more comfortable later on when we finally got a CMS up and running to actually do that work right in the CMS. I think the Word template thing was a great idea, but I think for a site of this size, it was getting cumbersome.

Nicole:

Yes, and the timelines towards the end, it seemed like double work to put it in the CMS and then also in the site.

Darrell:

Right. We also looked at things like GatherContent and other tools. IESO being a high security organization, we couldn’t access some of those tools internally. They were blocked by IT from accessing them, so we actually had to find more guerrilla ways to do the work.

Ethan:

I’d love to hear a little bit more about the design process, especially for a responsive redesign of this scale. When you’re partnering with an outside agency, how do you actually start talking about what this site is going to look like? Are you looking at prototypes? Are you looking at comps? How do you actually take that strategy you’ve sort of planned out and start creating something that you can look at and start using?

Darrell:

As a company, we’ve always moved to design pretty quickly. Of course, after our discovery phase, we quickly went into wireframes. But our wireframes are fairly tight in the sense that we are figuring out space and typography and sizes and things like that, so we kind of know what our proportions are. We would present that in one meeting and go right into visual design in the next. It seemed to work out. We started with a few representative pages and really worked on those, a lot of iterations on the home page. We must have probably had twenty to thirty iterations on the home page, and some internal pages—when I say pages, we design components first, but to show to the IESO we assembled in situ, in pages, so they could understand the context. But yeah, it was very quick to visual design.

Nicole:

Q30 also undertook some user testing and development of personas. Do you want to talk a little bit about that?

Darrell:

Yeah, a lot of the discovery phase was figuring out the audiences. We knew—or at least we thought we knew—the major audience, the sect of participants, which was kind of the old audience, and with this redesign we were introducing a newer audience, which is more for the layman, more general consumer. But we had probably nine personas, and what we tried to do was tie those into specific people that we actually knew, specific people that the IESO actually has to deal with on a day-to-day basis, be it a media, a representative of a generator, a high market participant like an energy manager in a factory… These are people that have day-to-day with IESO personnel, and so we interviewed those people along with the IESO staff that deals with them, and created personas that were not fake at all but quite real, even though we gave them fake names. [laughs]

Karen:

Since I know you were wrangling all kinds of different stakeholders in this project, can you talk about how you managed reviews with the larger organization? How did you show them work in progress and how did you get their feedback on both the content and the design?

Nicole:

It was several different approaches. We took a strategy into our executive team early on, and from that I know that the design at a high level was also shared with the executive. When it came to the content on the pages themselves, each of our web team members had a liaison from the other business units, and the original content was shared with them. And then prior to the site going live, we were able to show them the preview site so that they could see how the content would actually look displayed, and then that was their opportunity to streamline or enhance, if they still wanted to, before we went live. Having said that, this continues; our site is very much in evolution, so we’re constantly working with our business units to keep content fresh and up to date. So, this is an ongoing process, it didn’t stop with the launch of the site.

Darrell:

But it definitely was a bit of an education, though, for both of us, because we do have a longstanding relationship with the IESO and we also do a ton of print work, which is also highly iterative. We’re used to just doing changes on the fly. If somebody calls us, we make a change, send it back, and that’s how our design process works. We actually don’t often even try to polish design before showing it, because a lot of stuff comes up out of discussion. The website is no different, except there are real time and development constraints, where we have to actually sign off on design to get it to a next level for coding and into development. So, we had to change our process a little bit, where we actually had to sign off on certain points, and if there was a design change later on down the road, it was a much larger deal than we were normally used to.

Ethan:

Was performance or site speed or how quickly pages loaded a consideration during this responsive redesign? And if so, how did you measure that, how did you talk about that?

Nicole:

I can start by saying it’s very important that our website refreshes quickly and the pages are displayed quickly. A lot of people are on our site looking at market data on a regular basis, and so it has to be there on time.

Darrell:

Your data is refreshed every five minutes?

Nicole:

Every five minutes, yeah.

Darrell:

Yeah, so it has to be up to date. And people are making decisions that cost thousands of dollars based on the data that the IESO is feeding them, so it has to be accurate and it has to be timely. So yeah, it was definitely a consideration, especially since the older site was quite slow and we had many, many comments to that effect. We did everything in our power to streamline, while also keeping enough design elements to keep it interesting and fresh. So we did subtle things, like it’s basically just one font family. We originally started with four and we pared it down to two fonts, but one family. There was a lot of work done at the back-end, too, to try and speed things up.

Karen:

Tell me about how you think about evaluating how well this site is working for you. What sort of metrics or data or analytics do you look at to know if the site is doing its job?

Nicole:

Yeah, so this is a really good question. One way, qualitatively, I think we have received a lot of feedback from our heavy users right when we launched. We gave an opportunity for people to write in or call in and let us know what they think, and people definitely took that opportunity. We also will be going back to our heavy users and providing them a survey in a little while to see what they think of the new site and if they have any feedback for enhancements. When it comes to analytics, we’re looking at a number of different things. We’re hoping to increase our reach to a broader audience, a more general audience beyond our traditional technical users. So, we’re finding ways to determine if we’re doing that effectively. One of the areas of the site that you probably saw was the Learn section, and Get Involved. These sections are split apart for different audiences and meant to pull them into different parts of the site. Darrell refers to this as “Plus One.”

Darrell:

That’s right. So, one of the major organizational principles of the site was what we’ve been calling the Plus One. There are a lot of people that go to the site for very specific reasons. It’s not really a general knowledge site, but we wanted whoever came here to get the thing they need or learn the thing they need to know, but also get something else from it that they didn’t necessarily know was associated with that.

Ethan:

Nicole, Darrell, this has been a wonderful chat and I can’t thank you enough for coming on the show. But before we let you go, I would love to know if you have any advice for our audience. If there is someone listening to this podcast or reading the transcript who is about to start their own responsive project, do you have one or two things you’ve learned redesigning IESO that you’d like to share with them?

Nicole:

So, we talked about allotting more time for content migration a bit earlier, so I won’t touch on that. But one thing that I think we could have done a little bit differently as we looked back is having our back-end developer along for the entire project. They came in a little bit later, and so that created a bit more work, maybe a few more iterations here and there when we were going to implement…

Darrell:

For sure. From a design perspective, we plowed along knowing our design was going to be implemented into a CMS, but we didn’t know which one and we didn’t know by who. So when that actually happened probably a year into the process, we did have to retool some of our design to fit a little bit. We didn’t have to change much, and nothing was compromised, but there was a bit of work there. Probably fifty percent of our components had to be looked at again.and restructured.

Nicole:

Also, a reminder that the site is an evolution and it’s okay to launch it maybe not to a hundred percent perfection on day one. We are going to be launching a new part of the site later this year/early next year called Powering Tomorrow, and we quickly realized, as we were getting closer to launch, that with content migration and everything else that was happening, we might want to park this part of the site for a moment so we could do it really well. So, keeping in mind that it’s an evolution.

Darrell:

Yes. And also, remain flexible. Don’t draw a line in the sand and say you’re going to do something one way. Be open to changing your plans as you go.

Karen:

Well, I think that’s great advice. Nicole, Darrell, thank you so much for taking some time to come and talk to us. I’ve been really eager to see how this turns out, and it frankly turned out beautifully.

Nicole:

Well, thank you for having us.

Darrell:

Thank you very much.

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.