Travelocity Marketing

     

Video Transcript

Travelocity's Joshua Bright discusses marketing growing pains and greatness uncovered throughout the responsive rollout at Travelocity.

Before we jump in though I will go into some of the things that I have worked on over at Travelocity, so most recently in the past six or seven months, really focused in on mobile but previous to that worked with external partners, CPC as well as Med and getting hotel information , pricing information out to all of our partners, developing new technologies around that and then previous to that worked in within social commerce, launched new review system with Bizarre Voice and extended the ability to build the community around asking questions for specific hotels and found that was actually quite helpful and I was very happy about that experience. In terms of personal, I feel very happy that I am able to work over at Travelocity, when I was going through high school, I was stoped about backpacking and being able to weave those types of dreams for people, these travel experiences and being part of that and actually making money off of that in some sense, is actually a very fantastic thing and I feel very blessed that I have the ability to work within the hospitality industry and I highly suggest that you take a look at it if given the opportunity.

In terms of other things, I do have little sports attention deficit disorder going on. This past weekend I was actually out in New Orleans for the Red Dress Run not sure if there are any Hashers out in the audience but essentially it's just a fantastic time where essentially you dress up in a red dress and run around the streets of New Orleans and the reason why there is a question mark for that picture. I didn’t want to show off the fancy dress I had going on. I was actually out last night with the a few of the folks from Compare Metrics and I really wanted to highlight that's because I had a very biased opinion on what to expect for Philadelphia. This is a really fantastic city. But I was under the impression was that was a real hateful city. This was a city that throws snowballs at santa for crying out loud, right? And of course that was somebody from DC who informed me about that but I had an absolutely fantastic time I think that WBR, you guys did a really great job in choosing this city. It has been very hospitable and the food here is absolutely amazing. So we will shout out.

Now we will jump into the responsive web and it's definitely been an adventure for us over at Travelocity. I think that you heard the gentleman from Fat Heads talk about his experience and the six months of preparation, lots of digging deep to really understand how they are going to implement responsive, we are going to go little bit further and I am going to tell you about the relationships between myself and the other members of the team. So hopefully you can go back to your teams and learn from some of the opportunities and experiences that we actually had. So I promise lots of drama, there is a happy ending and there will definitely be sequels to this experience.

So here is the boring outline, right, it's … what is responsive? I think … actually, let’s get a show of hands, does anybody at this point the last freaking presentation today and the last day does anybody not know what responsive is? I have gift cards. Okay. So I won't beat that to death. So we will talk about why we chose responsive over Travelocity. How we implemented it and some of the lessons that we learned in going through it and then talked about what were we actually able to accomplish in rolling out responsive. That's talking about the goods and the bads. This is my little plug for Starbucks. I do have Starbucks cards. So what is responsive? Essentially it's a way to scale the presentation of mobile device from smartphone all the way up to your tablets. . And so why did we pick responsive over Travelocity? There was a lot of rhetoric. We are starting to look into this about last year September-ish area, there was a lot of rhetoric within the user experience community, that's my background that talked about the benefits of responsive, and there is a lot of rhetoric within the mobile community, apparently still to this day on responsive and how great it is, but for me, I am a doubting Thomas internally. I just … whenever I hear rhetoric, all these great things about a certain solution I automatically doubt. I am like, this got to be garbage, so it's kind of the combination of social mobile, these words, kind of buzz words the things that come up, I automatically have kind of this rejection feeling.

So for me, I went over into the data and I went over into our Google Analytics and I looked at the number of different screen resolutions which we are logging over at Travelocity, I thought okay, well, this is interesting, okay, clearly you could see the number one, that's definitely an iPhone, that's out there rocking it and you have a long tail that exists but what you see in the bottom right hand corner is a very large number, so we got one through ten in terms of the matrix that we see but that number, I don't think that I am going to be able to get it to expand but that's 3500, so 3500 different screen resolutions have hit Travelocity. This is back in September last year. So there is a little bit of a puckering moment for me at that point and I felt quite confident that going forward, I knew that responsive was going to be something that was going to add a lot of benefit to Travelocity and our customers, and obviously fear is a great motivator, right, certainly.

And so we move forward with responsive and I want to give a little bit of a shout out to the other ideology within mobile which is adaptive, are there many adaptive philosophers here in the audience? Bam!! Right there, all right. There is a gift card coming your way my friend and I remember a face, let me tell you what. All right, anybody else? You could even lie at this point. I got a bunch of them. Bam!! All right. Whoa!! AVs got there, sweet! So adaptive essentially tell us and… any of the philosophers can correct me if they wish, this can be a discussion and less of a lecture, but what adaptive says is, hey, look, you should be building an experience per the device category. So the device category being a feature phone, a smartphone, a tablet, a phablet, those should all have their own experiences. To me another pucker moment. That sounds expensive. That sounds really, really expensive but the customers certainly would appreciate that as an offering.

So for me, what I think is adaptive is the right way of going about it, but we do have to have a cost balance to how we approach things and I say, just like Bo Jackson, why don't we do both? Why don't we do both responsive as well as adaptive. So the way that we are approaching it over at Travelocity is we are doing responsive from smartphone up to phablet because we see similar task, timeline task as well as tasks being accomplished within that set and then we allow iPad or the larger tablets to go over to the desktop and I think ideally what I would like to see happen is that we create this responsive site between smartphone, phablet and then create another responsive site using essentially an adaptive segment and create an experience that exists for large tablets all the way up to desktop. I think that's the natural goal that we are going to be moving toward. And what I would say to you is just essentially look at your data set, watch your customers and see what they are doing, seeing if there is much of a variance between the different device types and then proceed as you need to.

So of course I got to get to shout out to the team, right, product manager, I got to get a big old thumbs up, so we had a core team of three folks that really worked on our responsive strategy over at Travelocity, so we had our user experience representative. We have got HTML CSS, and Javascript and then we pulled in a number of other folks that helped supplement the team by coming in from Android development over to mobile web because it's Java based and so the skill sets were quite similar. So those of you product managers out there that want to steal resources from other teams please go on ahead and look to your Android team to do so. And I will definitely tell you that there were quite a bit of silos, so I approached this at the beginning of November and started really looking into responsive in terms of what we are going to do. We have a number of veterans on the team, and so you can imagine that December was quite a wash and what ended up happening is myself and the user experience representative within the group we worked closely to hammer out the requirements and work out all of the designs, getting them tested, taking them to usability, iterating and changing it up. So what ends up happening is our engineers come back ands we slam these golden tablets down on the desk, and we are like “guys, it's done, it's done.” All you have to do is throw this together, throw the code together, we should be done in a couple of months.

As you can imagine that didn’t work out that well. There is discussion around what's going to work, what is responsive in terms of document structure. A lots of … the devils in the details when it comes to responsive and so we got a little bit of feedback let’s just say in what we delivered over but essentially what we did is we looked at … In fact, if you look over at the tablet design you can see the instant feedback that's coming in from the development team. The tablet design itself is not responsive, it's not meld well with the smartphone, so for those of you who have been here throughout the day and previous days you probably know that that's not a collapsible situation over there in a tablet.

So what we ended up doing is we tried to create this Pixel perfect experience and we are running into all of these issues and having all these problems and really what this is… the first lesson of today and my experience is just keep that constant communication up with your team. Make sure that not only you are engaging with user experience group but also making sure that you have development in there. Development is really cranking, trying to do what they can to create this responsive experience and they are really doing it to Pixel perfect perfection but they are getting very frustrated. There is all sorts of issues around maintaining artifact library in terms of all of your photos, like, okay, now we need to create a photo for gradients, for phone and portrait, phone and landscape, tablet and portrait, tablet and landscape. Now you got to multiply that by 2 because you got retina and nonretinal, so it just gets crazy. The guys were just like, boom, forget about it, it's just absolutely terrible. We are fed up, and thankfully the user experience group just said, look guys, we trust you, there is a circle of trust and you guys really need to drive this yourselves. We provide the feedback in terms of artifacts like comps, and so now it's up to you just really run with it and at the beginning I will tell you that that was not received very well. They felt like user experience is like, see ya, we are done. But what it actually did is it empowered them and made them feel them great about just driving it themselves and so they took liberties and they grew confidence in how they were developing the code, so it was actually a fantastic, fantastic thing and there is definitely and inflection point.

Another inflection point, I don't think you will be able to see it but there was a breakthrough email that came out, so it's breakthrough. The developers had said, I finally figured this out and as I mentioned there is an extensive library of artifacts, there are gradients in all sorts of shapes and sizes and just getting all sorts of crazy and what we found, I think this would be valued to everyone here is that you can reduce the amount of these image libraries by converting everything to icons and then simply adjusting the icons using CSS. So that took an image library of, it was like 143 I believe down to 19 icons. Now you are delivering a faster experience because page times are decreasing in terms of the load, but you are also keeping the development staff out of the nut house because they are having to managing all these artifacts, so it's very very powerful. That's the one thing from the development standpoint that I would love for you guys to take away is you really using icons and figuring out how to reduce the images that exist within the web pages.

So what ended up happening is first three months, we have paths that are very unique within Travelocity, we have got air, hotel, car, so the hotel path itself took three months to really move through and understand and figure out, but once we were able to utilize, harness the ability of using icons and starting to reuse code across the paths, the first three months were obviously storming. You could see we got some thunderbolt action going on over there but in flights that's done to two months for HTML and CSS and car is just one month. I mean it was absolutely amazing to see really happy, to be able to see this progression within this group and this confidence that's being built. It's absolutely fantastic. And so this is what we end up, so this is our search page. This is the base page of the hotel path, and you can see in standard, responsive measure, it just kind of expands and then contracts back up. What is this? Saturday night … I wear shoes, like, expand, contract, I don't know. And so we expanded the same thing out to flights, so flights is the same deal, you can see that we are reusing pieces of the code, always reuse, do not waste and the same thing for cars, by the way this isn't public knowledge just yet, so flights and cars aren’t just yet, so just kind of keep that underneath your hat. We are really excited and we think that's going to be out in the two months or so, so super stoped about that.

In terms of metrics it's all about keeping it simple, right, keeping it simple, so for us it's all about the money. So increased bookings, you want to watch time on page and make sure that our exit rates are within reason comparatively to the previous site. And obviously reduce the amount of errors that we ran into. We ran into a lot of session based errors because we have a dated path, for travel you have to input your dates and so the page that you get, the information that exists on the page is very time sensitive so we ran into a lot of exception errors. So you got a product guy here, so I am going to jump into some nerdy details. But anyway as I was planning this I redesigned out in my initiative model, I was really concerned that on some level we are going to take a hit and that's always scary, right. Anytime you do a redesign, I know that everybody voted for change in 2008, but anytime that you put together a redesign you can expect to see a drop and it was surprising that the gentleman from Fathead also had mentioned that he tried to … or the Four Seed folks that were guiding him had mentioned that there was going to be a drop in his experience but he didn’t see that either. So thankfully that was the same experience we had actually. Bookies have definitely increased between 6% and 8%, that's for iPhone and Android respectively. Time on page actually increased 50%. I am always suspicious sometimes on page, from a usability standpoint I always think of time on task is like a lower number but as you move into time on page, from a traffic standpoint it's actually a good thing, so it's always been very confusing to me.

In terms of exit rates, our exit rates have dropped on nearly all pages. So there is definitely one page that we are isolating, and we will continue to change and we are really excited about trying to figure out what exactly is the reasoning for the problems that we are finding in that page and the exception errors, super awesome. We are able to trap and handle exception errors in a better way this time around than we were in the previous so I think that definitely helps increase transactions over in our site.

And so the lessons learned generally. It's going to take longer than you think. User experience is going to take longer than you think, you are going to need to bake in time as the gentleman from Fathead said, look at all of the different form factors that you are going to see and also understand that these media queries for all of the different devices that you have is going to be like an endless struggle to keep up with all the different devices that continually come out and continually challenge you from the development standpoint and certainly when you are doing the forecasting for those of you who aren’t using Agile, I would really encourage you to take a look at using story points for your development cycles that will make you feel much more confident and setting up release dates and communicating those release dates to the executive management. In terms of analytics and screen sizes definitely make sure that you isolate what you are going to support out of the box. You can run into situations where you just continually, it's like whack ‘em all, like, boom, okay, we got the Kindle, we have got iPhone but these things just keep on coming up, keep on coming up. So isolate what you are going to support out of the box, look at analytics, pick your top 10 to 15 screen sizes and just make sure that you feel confident in the screens that you are going to support and don't be afraid to tell that to the person that's testing using internet explorer, one of your fellow colleagues that testing internet explorer on your mobile site, that look, I am sorry, someone here is from Microsoft but internet explorer it not a mobile browser, all right, sorry about that. It's not a web kit based browser.

So again I would really focus in on icons instead of imagery that will definitely help in terms of page load times and your customers will thank you certainly. Ensure that your KPIs and analytics are solid, when you are doing a redesign make sure that you have all the tracking and ensure that you have all of the stakeholder information upfront because it's no fun when you get into a room, and someone asks you a question, they say, are you tracking that and you are not, it's very uncomfortable. So that would be my suggestion to everyone and of course in the end, we are all colleagues, we are all going through this at the same time, so certainly reach out. There are lots of resources, certainly WBR has put together number of folks that are certainly welcome to help everybody. So I am not different from everybody else. So please reach out if you have any questions about responsive. Again I do have Starbucks for those of you who are sleeping now. Thanks.

[applause]

Host: Any questions for Joshua? You can't just ask him for a gift card.

Joshua Bright: Right, get these gift cards, guys, had them for two years.

Q: I am going to ask you for a gift card but hopefully is gift card worthy. So you mentioned converting images to icons and I was trying to read the email up there and I just want to make sure I am following. Did you mean that you turned your PSDs into vector illustrations and then you are suing CSS to manipulate the vector?

Joshua Bright: Absolutely.

Q: And so how many browsers are able to render vector drawings mainly right now? Certainly web kite I guess but are you worried about anything past the phablet the other direction with vector or … I am curious how that works.

Joshua Bright: Yeah, it's a good question. For us because we have taken that kind of adaptive responsive mixed approach, we have not been concerned about that. So the core browsers that we focus in on are web kit based and because that's the segment of smartphone to phablet. That's a great question and something I will definitely stew on tonight.

Q: I was wondering as far as content. Did you take away content and you broke it down?

Joshua Bright: We take away content?

Q: Uh-umm…

Joshua Bright: Let’s see in one sense, are you saying that we drop stuff that we didn’t think that was interesting to customers? So like create minimum product, is that what you mean?

Q: Basically yes. So everything on full screen didn’t really make the cut down to mobile.

Joshua Bright: I will say that that is correct, so I just was overseeing the responsive redesign. There was already a mobile site that existed previously and so yes, there it is a dumbed down version of the desktop site. We came into that using analytics understanding what people were using, what they weren’t using on the desktop and then just trimmed that way. Now since then I am on the opinion lab and ones familiar with the opinion lab, that's a feedback mechanism. So I get emails directly from customers that have points of opportunity for us as well as graces, but essentially what we do is based on that feedback we prioritize the features that exist on the desktop that aren’t reflective, and then we throw this into mobile. So yes, it's a dumbed out version.

Q: Thank you.

Joshua Bright: You are welcome. So modular versus scalable, we went for scalable. And the reason is that because of the paths that we decided to go after we don't really need to worry about it being as modular because the variance and what the page is going to look like isn't going to be that significant, does that make sense? Originally I believe we targeted specific devices so we looked at GA and said, look, iPhone, Nexus 7, Kindle Fire, Samsung 3G and 4G and so the breakpoints were associated with those devices so you have six break points. I think I got in trouble because I did …

Q: No, you are not in trouble yet. Lot of stakeholders I am sure.

Joshua Bright: Yeah.

Q: How did you handle prototyping doing wire framing with the responsive framework versus typically where you could do quick prototype in Axure or something where you could use a flat image, how did you handle those challenges with your stakeholders?

Joshua Bright: Well, that's a good question. The way that we … originally it was kind of weird to have that, written back on my head in terms of a speaker. The way that we approached it originally is we worked within photoshop and then just did flat comps and then we moved into Axure, and that's what we took out to do usability testing with, we have a home grown lab at Saber that we use as well as we went out to Starbucks, in terms of communicating up to management I tried to … it's the balance of do you want to do low fidelity and then say why isn't this there or why isn't that there? Or do high fidelity that create expectations that may or may not be there, so I think in general I try to move out into the high fidelity portion just because they get to see the interaction and they can make comments as well. It wasn’t that much of a concern that they are going to beat the crack out of us for a specific color scheme. We don't have that problem because for the most part be3ing a reseller and the approach that we take into mobile has been a media slim approach and so we haven't had those major issues yet, and that's why you probably said I am not in trouble yet.

Q: Hi! I am sorry ifi am asking the question that you already covered because I came in a little bit late. So when I saw your site, I saw there is lot of ads that you guys have., so as you go in mobile, what are your thoughts on monetization because I am assuming all those ad spaces that you guys have on your main side and maybe on a tablet, you are planning to monetize, I kind of check your mobile thing, there were no ads or anything so what are your thoughts on how people are going to monetize when you go mobile?

Joshua Bright: That's a fantastic question, we use the I word in mobile, Integrated and so the way that I would like to see mobile develop is having more integrated ads as opposed to blatant display ads. So I think we have to an opportunity specifically within Travelocity, there are all sorts of ways that you can sell things, you don't have to create a specific slot for selling because really customers become ad blind anyway. It's not that big of a deal and it doesn't add value to the customer and it doesn't add value to the supplier of the ad. So what I would like to see is figuring out more integrated ways of throwing ads into the experience, like for example we have a product which allows the customers the ability go and shop in different OTAs, right, so the Hotels.com, the Expedias, the bookings, we offer that experience and on the desktop that's a standard display ad, but really what it should be is as you are moving through the experience picking out a hotel if there is uncertainty we know people shop around, I shop around. Then allow them the ability to go in with a good user experience and shop. so that would be my suggestion is just to create an integrated and relevant ad experience within mobile, because otherwise you are just going to piss people off.