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:

This week we are beside ourselves. We are impossibly excited to have Dean Cookson from Virgin America and Joe Stewart from Work and Company. Dean, Joe, thanks so much for joining us. Why don’t you guys introduce yourselves and tell us a little bit about what you’re working on. Dean, how about we start with you.

Dean:

All right, thanks Ethan. I’m indescribably excited to be here as well. I’m the VP and CIO here at Virgin America. Which means basically, I have responsibility for everything that has a computer in it that’s not inside an airplane. [laughter] You like that? The focus really, of course, for this past little while has been the website. There’s also all the work that is necessary to run a business and to run an airline. We’ve been very excited to work with the Work and Co. guys on this site. We’re looking forward right now to finishing up a little series of post-launch releases before we start buckling down for our first major feature release which will be coming up sometime this fall.

Joe:

Hi and my name is Joe Stewart. I am a designer. I worked with Dean and the Virgin America team to design the new Virgin America website. I am one of the co-founders of a new design consultancy firm called Work and Company.

Ethan:

That’s fantastic. We’re really excited both of you guys could make some time for us. Both Karen and I were really excited to see the new responsive Virgin America site. It’s really beautiful. We’re looking forward to hearing a little bit more about it today. But before we do that, here’s Karen with a few words from our sponsor.

Karen:

I’m pretty excited to talk to you about our sponsor, Macaw. It is a visual editor for people to do layout and responsive prototyping. See, if you’re me, you’re lucky enough to have Ethan Marcotte building your responsive designs for you. But if I didn’t have Ethan, I would use a tool like Macaw, because it provides the ability to create responsive layouts and it produces incredibly clean code—which I think is something we all agree is a good idea. So right now, Macaw is offering a discount for our listeners. So if you go to Macaw.co and use the code RWD you’ll get $80 off the product, which is the lowest discount that they have ever offered for this. So sometime during the month of September you should go check this out at Macaw.co.

Ethan:

This is a question for either of you guys. I’d be interested to hear about how the decision to go responsive was made. Was there much convincing that had to happen on Virgin America’s side, for example, with various stakeholders, like this is the right approach?

I happened to stumble across the Boston Globe’s new responsive site. As soon as I saw it, it was sort of one of these “the clouds parted and a ray of sunshine came shining down” kind of things. I knew at that point I wanted to do a responsive site when we started Virgin America dot com redesign project.

Dean:

I’ll jump in on this, Ethan. We started thinking about the idea of a new site in probably middle 2012. I was looking around trying to find the best-in-breed e-commerce sites that I could find out there. I happened to stumble across the Boston Globe’s new responsive site. As soon as I saw it, it was sort of one of these “the clouds parted and a ray of sunshine came shining down” kind of things. I knew at that point I wanted to do a responsive site when we started the virginamerica.com redesign project. I think we need to deliver a great experience across all of the devices. Just having a website that works on tablet and mobile these days is simply table stakes.

From a purely somewhat selfish point of view, as the IT guy, having one common code base to maintain seemed like a wonderful idea. As I did more digging on what was possible with responsive, I became further convinced that that was the right thing. I started an internal narrative in the company, every time I would talk to somebody about the coming project that “We needed to do a responsive site, we needed to do a responsive site.” And it was one of those things that when you run around and you tell the same story often enough, you start hearing it back from people. I had sort of laid the ground work for more than a year before we had the initial contact with Work and Co. that responsive was the path we wanted to take.

Karen:

Can you talk a little bit about how the web fits into your overall digital ecosystem, for lack of a better word? How do you think about the web on all of these different devices? How did that play in to any conversations that you might have had about apps or even things like the kiosks that people check in on? How does it all fit together?

There’s a very large fraction, more than half of our business, comes in directly from consumers through the web. That’s important for us. We understand that travelers are going to be mobile a large fraction of the time.

Dean:

Yeah, the web is obviously a hugely important sales channel for us. There’s a very large fraction, more than half of our business, comes in directly from consumers through the web. That’s important for us. We understand that travelers are going to be mobile a large fraction of the time. I think we’ve learned as we’ve talked to our guests that when people are planning a trip, they are often sitting at a laptop or a desktop and doing research and thinking about where they want to go. But there’s a significant fraction of our folks who are certainly on the move for check-in, especially when they’re coming back from somewhere, and there’s often times where your plans change while you’re in the middle of a trip and you need to be able to do things on the device you have in hand.

As far as kiosks go, as we think about kiosk from a check-in point of view, we think we’ve got a roughly equivalent number people who check in at our kiosk, people who check in online, and people who check in at the counter. So kiosk, especially on the day of travel experience, is quite important. At some point, we’re going to take down a project to start getting the kiosk to look more like the new site. They’re still much more similar to the previous site than the current one. There are challenges in the kiosk world because of the way airports work. Some of our airports, we have our own equipment in there for kiosks, some of our airports are common use. In the common use airports, the airport provides the computer, the airport provides the environment that the kiosk software has to run on, and there are limitations around things like browser versions that we have to be able to adapt to that make doing a responsive kiosk a challenge.

Ethan:

That sounds great. Joe, I’d be interested to hear a little bit, as Work and Company got involved, just generally speaking, has your design process changed much as you’ve been doing more multi-device work, whether it’s responsive or not?

In terms of the overall way to think about design and design process or responsive, some people like to say there’s a mobile-first way of looking at things but with responsive it’s everything first. It actually is sort of relieving to be able to think about all of it all at once.

Joe:

Yeah, it’s really needed to. I think the real secret to any digital design process is it’s constantly evolving to do its best to keep up or stay a step ahead of what the state of medium is. I think there are a lot of different things, in terms of process, of how we worked with Virgin America and responsive was definitely part of it. But because we wanted to concept and design and build something so fast, and we also had to do it across multiple devices, the biggest thing in terms of process was really the immense overlap of communication that we had with Virgin. So we actually moved into their offices because it was so complicated and there were so many ways to get it wrong, we needed a constant feedback loop. Buying airline tickets is fairly complicated and there are tons of rules and tons of edge cases and it is overseen by the FAA, so there’s more edge cases than you might even imagine. I think the responsive part, in a way, wasn’t even the biggest problem. The biggest problem was figuring out how to get all the information in correctly. So, as I said, we just moved there. We still have people there over a year later.

In terms of the overall way to think about design and design process or responsive, some people like to say there’s a mobile-first way of looking at things but with responsive it’s everything first. It actually is sort of relieving to be able to think about all of it all at once. A lot of the times, or at least in previous ways of dealing with projects, you deal with the desktop first and then you keep punting, like “Oh, we’ll deal with it later, we’ll deal with it later,” and then it gets stacked up and you end up spending a very, very small amount of time on it. So, in a way, being forced to think about it all constantly while in the upfront is certainly more labor intensive, I think in the end it’s actually easier to be doing it all at once because everyone is looking at the same thing all at once. All the designers, all the developers, all the clients are all looking at everything all at once. So it’s sort of a relief, although it is more upfront leg work.

Ethan:

That’s really interesting. Joe, can you say a little bit more about how that focus on everything has changed, even if something’s mundane like the applications and tools that you use. Are you doing more prototyping work upfront or are you still mainly doing conceptual exploration in something like Photoshop?

Prototyping is basically our number one tool. So our philosophy on how to go about a project like this is to race to a prototype as quickly as possible. We actually never really made a presentation ever once, but we did constantly work on making prototypes. So, even the very first time we got to meet Dean and the Virgin America team, we showed them a responsive prototype.

Joe:

The answer is yes to everything. Prototyping is basically our number one tool. So our philosophy on how to go about a project like this is to race to a prototype as quickly as possible. We actually never really made a presentation ever once, but we did constantly work on making prototypes. So, even the very first time we got to meet Dean and the Virgin America team, we showed them a responsive prototype. It’s just a better way to think about things because you get feedback much faster and you can see what’s going to work and what’s not going to work. So the very beginning part of our design process was trying to very, very quickly put a prototype in front of real users. It’s one thing to prototype and test that with internal stakeholders or just amongst other designers and that’s incredibly valuable, but it’s the ultimate test to put it in front of people who are going to be using this. I think by the second month we were putting real prototypes in front of real users and I think we did more qualitative tests than quantitative tests in the beginning. So I think we showed it to about sixty or seventy people to see how it was going to work. And that’s just invaluable. Then from then on, we just went and did more and more prototypes.

In terms of the tools that we used to get there, I don’t know if there’s really a standard yet. I think we’re all playing around with what’s out there and it’s certainly a much better environment than it ever has been. We kind of use different things for different parts. Some are the more web-based tools where you kind of drag-and-drop things, sometimes actually building things in HTML. Sometimes we even use After Effects to test things very quickly. I still use Photoshop just because it’s what I’m fastest in. I know a lot of people are switching to things like Sketch, which seems great, but for me it’s just not the fastest. My design partner, Felipe, uses Illustrator for everything because that’s what he’s fastest in. I think it doesn’t really matter how you get there. If you can get something that you can put in a person’s hand and get feedback, that’s the goal. However you get there is how you get there.

Karen:

One of the things that I really loved when I first saw this responsive site is just how pared down, how elegantly simple it is. I am a 1K flyer with an unnamed airline that I will refer to as Schmunited. Every time I look at their website, it is just this cacophony of stuff. Can you talk a little bit about, how did you get there? How did you get to a place where you were able to strip out all of the extraneous crap and deliver something that was just so focused on what people want to do?

For whatever reason, people think it’s okay to have focused user experiences being on mobile, but when you get to desktop it’s about throwing in the kitchen sink. One of the great things about responsive is that it forces you to make those mobile decisions on a desktop.

Joe:

I’ll start. I’m sure Dean will have good insights there also. But I think that’s my favorite part also.

I think that having this stripped, clean, minimal booking flow and site completely is definitely my favorite part of what we were able to get to and that really came from mostly Virgin America and their creative direction from the beginning. It really tied in well with the business direction, which was our number one goal is to get more people to buy tickets, to increase conversion, to lower drop off, and to have more people booking on more kinds of devices. They’re seeing more and more people come with tablets and come with phones and there’s higher dropoffs there, which is where our responsive was sort of seen as a decision.

The one great thing about this project is everyone was able to agree upon what the goals were. In this instance, the user goal and the business goal very, very much overlapped, which was fantastic. And that’s not always the case. Sometimes the business goal is to promote marketing messages, where the user goal is to achieve a task. But in this instance, the user goal is to buy a ticket and the business goal is to buy a ticket, which was great. So that’s why the vast majority of what you see on the homepage, for example, is about achieving that user goal. And then through the rest of the site it’s really about cleanliness and focus.

Some of that actually had to do with it being responsive. Since the desktop version is basically just a big version of the mobile version, in a way that forced us to make very, very simple, clean, minimalist, functionalist design decisions, which was very freeing. A lot of the time, what we see as both users and as designers, is mobile versions of products or apps or websites are always very focused and very clean and only about the one thing that you really need to do. For whatever reason, people think it’s okay to have focused user experiences being on mobile, but when you get to desktop it’s about throwing in the kitchen sink. One of the great things about responsive is that it forces you to make those mobile decisions on a desktop. But also there was really really clear, concise, incredible, creative direction and business direction from Virgin America about: let’s keep users on task. We want them to buy tickets. There are all the things they need to do. They need to be aware of sales, et cetera. They’re not even secondary, they’re tertiary to the user goal.

We didn’t want folks waiting a long time for page loads, especially on marginal networks. The less stuff we pushed down to the browser, the faster the site would load. From a pure performance standpoint, low clutter meant fast page loads, short time to first visual, time to transact.

Dean:

If I can jump in to build on that. The way I was thinking about it is, one of the things that I wanted to do was to pull as much friction as possible out of the process of transacting on the site. And the old site was very noisy, very cluttered and it had a lot of distraction on it. Getting something that was very focused on “get the guest through that booking process as smoothly as possible” was high on our list. Jessie McMillan, who was our creative director through the project, also was very focused on us having a very clean design aesthetic, which sort of matches the way our airport interiors and our planes are. Also, it’s very clean, very fresh, very modern. Because we were looking at having the responsive site across all the devices, we wanted a site that was highly performant. We didn’t want folks waiting a long time for page loads, especially on marginal networks. The less stuff we pushed down to the browser, the faster the site would load. From a pure performance standpoint, low clutter meant fast page loads, short time to first visual, time to transact.

Ethan:

Is there anything that either of you guys learned about the design and development process that you might have approached a little bit differently knowing what you know now?

Joe:

Yes.

Ethan:

Cool, okay.

One of the great things about this project is the development and designing concepts tracks were one hundred percent overlapped. There wasn’t a design phase and a development phase. It was designers and developers working together.

Joe:

I can give one example. One of the great things about this project is the development and designing concepts tracks were one hundred percent overlapped. There wasn’t a design phase and a development phase. It was designers and developers working together. Both on our side and the Virgin side. Virgin has a team of really incredible developers that had to work with our team of developers. There was a sort of real true overlap in a way that I’ve never had the pleasure of experiencing before.

Part of that was really beginning to learn where the development struggles were. I really got to be privy to seeing the mistakes in real time. One of the biggest pain points, which is something that I didn’t realize, but something that I’ll probably not do again is this: The Virgin booking flow, if you get through it, if you pick a seat and you enter your info and you choose a flight and a time and a number of people, it’s actually one long page. You can scroll all the way back up to the top and scroll all the way back down to the bottom. We did this for a couple reasons. One is to let users always be able to change things and go back. Another reason is, it’s cool and no one’s doing it. We found out the reason no one’s doing it is it’s exceptionally hard to program with the amount of information that we’re having to pass back and forth. There’s all kinds of stuff between the front-end and the back-end, between the prices of the flight or the number of the seat, et cetera. To do that all on one, like, 30,000 pixel long page, just is very, very difficult for lots of different reasons. For example, it took up so much memory in early builds that an iPad Mini couldn’t even run it. It just broke the browser and just wouldn’t do it. We had to really streamline it. We’re pushing the physical limits of what browsers are capable of doing. Which is why a lot of times on more complicated sites, you just see things chopped out one at a time.

That’s something that there’s no way we could have known and no way we could have predicted. And will probably be something that only Virgin gets to own, because it was so hard to do. The result of which is gorgeous and I love it and it’s great to run. But, I think a lot of the developers are owed a lot of beers by me and the other designers.

Part of why we’re actually able to undertake such a big process so successfully is that we didn’t have a wall that we tossed things back and forth over. It was really very tight feedback loops. Very collaborative.

Dean:

I’ve got that John F. Kennedy quote from his first inaugural, “we choose to do these things not because they’re easy but because they’re hard” running through my head after hearing Joe say that. The thing I would do differently is, we took the opportunity of doing the website redesign to simplify our technology stack also. In the old site, we had one technology on the web servers and then we had a back-end layer that was written in a different language. We took the opportunity to completely rewrite and refactor that. We did that on our own a little bit before we involved the Work and Co. guys. As a result, we presented them an API that, I think, had we had their input on the design of that API earlier, would have made the resulting development faster. I would have brought them in to that loop earlier.

Joe’s comment about the two teams working basically tightly together almost as one virtual team rather than as two separate teams is really spot on. That’s part of why we’re actually able to undertake such a big process so successfully is that we didn’t have a wall that we tossed things back and forth over. It was really very tight feedback loops. Very collaborative. And I can’t say enough about how awesome these guys were to work with.

Joe:

Well, that’s nice.

Karen:

That’s great to hear. I’m interested in to follow up on, a little bit about what you just mentioned with the technology stack and APIs. Can you talk about how your content management infrastructure fits in to all of this? I ask because, a lot of times when I talk to organizations that have these heavily transactional websites, where the focus really is on a transaction flow. Some sites seem to forget that there’s also some content in there. So banks or other financial services, they wind up with a lot of content that they don’t have a real strategy for how they’re going to manage and maintain that content as it lives on the site. Can you talk about how you made decisions about where the content goes and how it’s stored and managed?

Dean:

Yeah, I’ll talk a little bit about how it’s stored and managed and then Joe if you want to jump in and talk about some of the stuff about where it goes on the site. We had the advantage—not sure advantage is the right word—of starting at a place where we were like some of these sites we talked about where our content management was a bit all over the place. One of the things we knew with this project was we wanted to actually roll out a real content management system and be able to push the ability to update, change, release content directly out into the business as much as possible. One of the core design requirements of this was that we would select and implement a content management system as part of the project and that the marketing folks would have direct control over being able to publish new content. Because in our old system, many content changes actually required software developers and the IT release process to get out into production. That was a business process that was just too painful to continue to live with.

We made a system of Legos. We designed different box types, different module types that could work at different sizes. They could work for a tablet or a desktop or a phone and then within there, the content can change. Anything that you do will automatically be responsive because if it fits in one of these modules, it will be responsive because the module system itself is naturally responsive.

Joe:

From sort of a design side, one of the things that… and I’m glad that you asked this question, because one of the things you don’t often think about is this is also a pretty big content redesign and replatforming also. There’s a lot of content that lives on a site like this. Both either information about what’s great about the planes or legal stuff or marketing stuff or sales. We also designed a responsive content site for them, it’s integrated, it’s the same website but it was just as big of a project. And for a lot of clients that would be the only project is really doing this content site.

Basically our approach was, we made a system of Legos. We designed different box types, different module types that could work at different sizes. They could work for a tablet or a desktop or a phone and then within there, the content can change. There’s a couple of good things about that. One is anything that you do will automatically be responsive because if it fits in one of these modules, it will be responsive because the module system itself is naturally responsive. The second good thing is the guys at Virgin America can now go make whatever pages they want based on these Legos. They can mix and match what’s going to work for them so they can have two big ones, three small ones, and four or whatever it is. They forever will have this set of tools that is naturally responsive to build out their site.

Virgin also made up a pretty cool decision which is to try to bring as much of the content into the site itself. Sometimes you’ll see subsites or microsites or things like that and I think we’re making an effort to have it all under one bigger umbrella, which I think is pretty cool also.

Ethan:

I’d be interested to hear a little bit more about how performance was factored in, both from a… not just a technical consideration but also from a design consideration as well. How did that manifest itself in the project? How did you guys manage that?

We tried as much as possible to use as little, in terms of graphic design, as possible. Which is both philosophically the correct thing to do but also, from a performance standpoint, the benefits were seen very, very, very quickly. There’s a great feeling of snappiness.

Joe:

Speed is everything. If someone thinks something works well or something doesn’t work well, I think a majority of the time they’re responding to you “Is it fast or not?” Something can look great but if you don’t get what you want, you think it’s broken or it’s a piece of junk or whatever. So speed is everything. One of the things in dealing with an airline is you’re hitting pretty heavy databases that are pulling pretty complex bits of information. So if you want to know a flight from San Francisco to Portland at eight o’clock and how many seats are on that plane, you’re asking a lot of questions and that’s going to take a little bit of time. I think our job from a design standpoint was to have that be the biggest wait. We didn’t want to add anything to have that be any slower because there’s already going to be a two-second space here and there and god forbid that anything that we do make it be a three or a four-second space.

So, something that’s probably fairly obvious is there are zero photographs in the entire booking flow. From the homepage to paying, I think there might be a picture of a credit card when you’re on the Visa pay page, or on the homepage there are some extremely lightweight SVG graphics that weigh almost nothing. But even things like sometimes if the back-end is taking awhile, you’ll get a pre-loader and it’ll say “Loading” and it’ll have some dots moving back and forth. Those dots are not a graphic, it’s all just done with type. The font that we’re using is Gotham and so the pre-loader is just three dots of Gotham moving back and forth. We tried as much as possible to use as little, in terms of graphic design, as possible. Which is both philosophically the correct thing to do but also, from a performance standpoint, the benefits were seen very, very, very quickly because when we opened the site and it loaded, it was like “Oh, it’s nice.” There’s a great feeling of snappiness and people really, really respond well to how fast things work.

Dean:

On the technology side, part of the motivation behind that back-end refactoring was making the queries both to our own databases for things like our Elevate frequent flyer program, and also out to the reservation system, much more efficient. So, we pulled a lot of wait time out of a bunch of different steps there. We also heavily rely on caching out at the edge of the network. We worked with the folks at Akamai, who do a lot of caching for site elements for us, a lot of optimizations depending on which network people are on, making sure we… in the case where there are images, we push the right resolution down to the guest based on what size device they’re on.

Karen:

Can you guys talk about how you might go about measuring the performance—measuring the success of this redesign? For example, I noticed you launched it as a beta first, so how did you decide—based on data, I would assume—to switch it over to be the real site?

We came down with just a few weeks of beta, where we got some good feeling that the site actually did work for people. We got a lot of good data that the infrastructure was actually holding up under the load well.

Dean:

There are a couple of questions in there. Overall, the way we measure performance is, from a pure speed metric standpoint, we use third-party performance monitoring tools and look at page load times at different regions around the country. We had an internal goal of trying to be the fastest airline website out there in terms of initial homepage load and competitive with the sort of best-in-breed e-commerce sites and I think we achieved that.

From a business metric standpoint, we do a lot of conversion monitoring and we do it at every step during the booking flow, so we had some internal numbers that we were shooting for that we wanted to see before we went live. The decision to do a beta launch was really twofold. One was we knew this was going to be a completely different experience than what we had—and indeed than what anybody else had had before—so we wanted to sort of soft roll it and get a little bit of feedback from our guests and from the world about what they thought of it. We were also building the site out in parallel with our existing site, so we had an entirely new set of infrastructure stood up. As an IT guy it’s always nice to turn that valve on slowly and make sure that the thing you’ve built works the way you think it should. So, we popped it out and we knew we wanted to get some feedback, we knew we wanted to act on it but we also knew we didn’t want a really protracted period. So I think we came down with just a few weeks of beta, where we got some good feeling that the site actually did work for people. We got a lot of good data that the infrastructure was actually holding up under the load well.

We did take feedback from folks on a couple of things. The biggest one I think that we saw that we acted on before we went live was we had, on the old site, a 7-day fare search feature where you would see a side scroll of fares three days ahead and three days behind what you had actually searched for. In beta, that wasn’t on the new site. It had always been planned to be a post-launch feature that we would roll out but we heard loud and clear from our guests that they missed that feature, so we made sure that before we actually flipped the switch to VirginAmerica.com that we heard that feature rolled out.

Ethan:

Well guys, this has been really fantastic. Dean, Joe, thank you so much for taking a half hour out of your busy days to talk with us. Again, the site looks wonderful and we’re really looking forward to seeing it evolve.

Dean:

Thanks Ethan, it’s been a thrill and I’ve had a lot of fun talking to you guys.

Joe:

Yep, thanks very much. It was great.

Karen:

Thanks to everyone for listening to this episode of a responsive web design podcast.

Ethan:

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We’re also planning to offer these workshops to the public, so please go to responsivewebdesign.com and let us know that you’re interested.

Karen:

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.

Ethan:

Thanks again to our sponsor, Macaw. As a reminder, if you visit Macaw.co and use the code “RWD”, you’ll get $80 off their wonderful responsive design software. So check it out, and thanks again for listening—we’ll be back next week.