 Hey guys thanks for coming. So just to give you a quick introduction about myself why I work at Teotrip as the new designer. Previously I have actually worked with Burb. I also worked with a design company in Bombay called Pain Plain. I was working briefly with Yahoo sometime back that's how I actually moved to Backload. I'm briefly from Bombay. So yeah I mean that's about it about myself. I just wanted to get a sense for the people here right like in terms of I don't know what was sort of like the omniscient. So I just wanted to get a sense of so I can all the designers raise their hands. How many designers in the house? What about front-end engineers and these developers or other folks? So I mean guys you is clearly mobile at all. How many of you have smartphones? Pretty much everybody. And how many of you have iPhone guys? Android? Okay great. So just to start off I mean now that I get a good sense of you know what the sort of who I'm talking to. I'll just give you a quick start off with just talking about what I'm covering today. So essentially the plan was something like this. I'll talk a little bit about the evolution of Teotrip mobile. Then we move into just talking about mobile as a medium today. Like how do we sort of how do we approach mobile as a medium? And based on that medium what are the design decisions we have to make while designing Teotrip mobile? So these are more like very high level sort of design decisions that we have to make. And dive deeper into the landscape in general like what are the different browsers? What are the constraints that we have to work with? What are the different screen sizes etc etc? And then yeah just some nuts and bolts in terms of you know what are the things that we actually used? Smaller things that actually may experience the way it is right now. And then we can probably you don't have some question answers. Okay so Teotrip mobile actually will launch Teotrip mobile in June 2010. And this is essentially what Teotrip mobile looked like back then. This is what Teotrip mobile looked like. We actually launched Teotrip mobile as a middle viable product. Essentially when we launched Teotrip it was mobile. It was just one way you could only search one way for one passenger. So if you notice you can't even actually add a passenger. We were sort of only looking at business travelers who are on the move and they want to book tickets for themselves. So it was more of like let's try this out and see how the market response was like. And as you can see the first cut was very very fair. After you know we just I mean like when we started seeing the response to Teotrip mobile and it was phenomenal I mean like we really was surprised at like sort of the traction that the mobile product started getting. So we started to actually invest a little more time trying to understand how we can make the product do better. And then we you know smartphones were kind of the penetration were getting better and better back then. And then we sort of said okay let's let's kind of design something for the touch phones. And what you see here actually the previous version right. Pretty much so this is where actually at this point we actually forked our product into our smartphone version and like a very basic version. So what is the screen chart that you saw on the previous slide. The basic version is not really changed that much. Apart from obviously we made some cosmetic changes and some of that. But our focus is going to be smartphones, phones that are movable in terms of of course I mean that means that we are also focusing on touch phones right. So very soon like you know we actually added a bunch of features to the mobile. So earlier it was just fly bookings. When we said okay why not you know let people access their clips on the booking industry that they've done. Let people actually consume content about you know the destination that they are traveling to. So we had we had tips we had small world integration. So if you booked a ticket for Bangalore you would actually be able to access information about Bangalore where to go what to see stuff like that. And I think the biggest thing that we did back then was actually launching Express checkout. I mean right from the beginning we felt that you know we want to make the mobile product really really simple and easy to use. So we actually cut down as many features as possible. We just kind of ruthlessly cut down functionality. We brought it out to the bare minimum and then we said okay what next right. How do we kind of make it even easier for people to actually run that on the mobile. Because in general people are you know it was new right. People were using they were snacking on you know Twitter and they were snacking on Facebook. But you know transaction was something that people are not really ready for. So we kind of took this plunge where we actually we introduced Express checkout. We had HTML5 you know phones were starting supporting HTML5. So we said why not kind of use local storage, store all the details on the phone itself which kind of. And then we had obviously a security layer where you couldn't really actually use the data without a clear grid password. So yeah I mean this was in September 2010 and this is what the product looks like. I mean in terms of the user experience like there being obviously I mean what I mean what the stuff that I actually talked about all this while it was like the major milestone right. In between there's been a lot of stuff we added trains and we you know independently improved the product a lot. But I think very recently you guys have sort of been following what's going on and we actually took Express account. And then we said hey you know what this is working very well for the mobile. We were actually surprised when we looked at the stats we saw that people are actually adopting Express checkout. So we said you know what this is going to work for the desktop side as well. So we actually launched it for we rebranded Express way Express checkout and we rebranded it as Express way. And no longer do we use HTML5 local storage. But the credit cards are stored with us and you can access it on the mobile as well as the desktop. So I think I think like in general like you know in my entire sort of experience of mobile. I've seen like you know the fact that there are so big constraints in the mobile. It really makes you think out of the box and I think we obviously related about this on a blog where we've actually the stuff that we built for the mobile we've actually brought it in other places like we just felt that this works so well. So design wise functionality wise stuff like that right. So yeah I mean that's pretty much where mobile stands right now. You can actually book trains, flights, you can look at your details and obviously you can access your credit card details for an easier transaction on your mobile. Talking about the medium right like mobile this like going back to where we started. We said okay like you know we've got to build something really great. We had a good desktop side we wanted to build a better mobile experience right. So what are we dealing with right the screen size obviously the form factor is a big driver in how you actually desire for it. The other main factor is the connection speed right like in India I mean I mean how many people are 3G. I've never seen anyone actually not complain about 3G right like everyone complain about 3G like it sucks right. So I mean there's no way out of it we have to design for low connection speed at least in this country. So that was a big driver in terms of the decision we needed to make. The interface itself right the mobile is so different you don't have a keyboard you don't have a mouse. The form factor is so different how does this actually you know change things. And obviously the you know one another factor that kind of drives the design is just the capability of the phone itself right. How much can it process. Moving on to the design right now based on what we had like this is what we are dealing with. How do we sort of like build the mesh experience right. It requires a lot of forces right like we need to kind of really look at I mean for me as a designer right. When I look I mean my benchmark was really the desktop side. Our desktop side is already very minimal. Now I could make it even more minimal so like that's really requires some amount of focus right. So I think it's just to sort of really understand what can users actually live with and what can they not live with right. I mean it's just like kind of really thinking very hard about those things. And you've got to be ruthless. You've got to just tell guys in your team boss this is not required. You've got to cut down stuff. You've got to cut down data. You just have to sort of keep it as minimal as possible because you know sooner or later things will actually start creeping in right. So when you actually go to market it has to be really really simple. So just to give you an example in terms of you know where we are on the desktop side and where we are on mobile. This is an interesting example. This is our desktop one way search and this is the same search on a mobile application. So as you can see a lot of stuff crunched into a small screen and it just jumped a lot of stuff. It just fell okay fine you know price and time is the only thing that we care about. Just don't worry about anything else right. We'll figure it out. So yeah we've cut corners as much as we can in terms of presenting data. And the other thing like we've been also very receptive to user sort of behavior right. So we saw that you know like our search patterns on mobile and our search patterns on desktop is pretty different. We realized that people are actually on the mobile actually searching for today and tomorrow right. So we actually changed our sort of search results to kind of allow users to actually quickly access previous and next day right. So what you see here is someone searched for a day and then you just got kind of you can easily sort of you know talking between a previous date or because people actually searching they have to go all the way back you know and just to enter into data because you know your your destination and source city doesn't really change it just the dates are changed. So we actually sort of made these design decisions to kind of incorporate what users were actually doing on the site. This is another example of our itinerary so we basically before users actually start booking to present the itinerary so that they can review what they are looking at. So this is what it looks like in the desktop and I mean this entire thing gets crunched into this much. So I mean it was an interesting challenge from a design perspective like you know because it involved sort of you know really think about how do we build the right visual hierarchy you know how do we you know how do we like sort of make all that information available you know at our arms length stuff like that. So I mean like my experience has been that you have to obsess. I mean you got to obsess like you see you got to think about it day in day out. Like I mean is what you see today is like not out of one or two iterations. There have been like 50 iterations in terms of we I mean you know it's like we've come from say you know 60% information to like 20% information and like it's just been a continuous iterative process. You got to obsess about details because I mean with retina display everything is of course I mean like it's like you are literally under and we could die. So I mean you know you have the technology that can make things beautiful. It doesn't take too much to kind of you know sweat the details and at least you know make sure that the people who actually have this technology have a good experience right. So we have we actually started supporting retina display the day it was actually launched in the other day. The iPhone 4 was launched in there we actually the next day we actually started supporting retina. Another thing that you got to obsess about is just like the page request sizes, page weights right. So just to give you an example I wanted to walk away. In fact we got this sort of small experiment done just before with the retina because we wanted to showcase this as case study. So you know I spoke about the poking of the basic size and you know the HTML5 size. Essentially what used to happen is users actually landed up. So one is how do we you know there is obviously this e-direction right. It will land up on www.theatrep.com now and they need to go to theatre mobile site based on if they are you know coming from a mobile device etc. So just all this sort of round trip right made like people landing up on the mobile site all the more slow. So we were just trying to think about how we actually cut down that sort of you know lag. So we actually optimised the flow in such a way that you know what is we are people used to actually land up on theatre mobile slash m. We actually removed m because there was an e-direction we landed we did some changes in the back end. If you type in theatrep.com they actually land up on the mobile site. So a lot of magic on the back end to sort of just make sure that our sort of you know the page goes in the time that I didn't like it to be right. So just to give you an idea right we had about 7-8 requests coming in from the home page right. Like he said I mean this is not happening approximately I think the home page on a gprs connection was taking upwards of 10 seconds or something like that. So we separated out the mobile page and we said okay fine let's look at this exclusively and see how do we cut down the amount of requests that come to this page. We basically brought it down to half the number of requests and then we also cut down the size of the actual page weight right. So we are at about 5 seconds per minute I think we are at about 5 seconds now. So it's almost twice as fast as what used to be. Initially we used to actually do like I mean I don't know how many people are familiar with my new page 5. So we were actually caching our home page because it was slash m but I think now because it's landing up on theatre.com it's a little complicated because we do allow users to actually access our desktop site to send in. They need to access more bug-cells because you know pretty much all phones actually support full running browser like full app applications. So I mean we've actually removed caching and manifest on the home page. We plan to sort of introduce it in other pages that people are familiar with. Okay so I mean that's sort of the design slash you know performance build that we'll take some time back. Just talking about the landscape right mobile landscape. I mean as designers we hope they're not like you know rejoicing over the fact that I use finally that and we just got ourselves into all this right. Millions of devices, different screen sizes, different models, you know you sort of now take care of all this stuff right. Another challenge that we do. So you have different hardware you know there are people still using like phones that actually have bank balls and bank pads. So you've got a sort of balance you know between touch and cursor based interactions. Browser capabilities right. You'll have browsers that are very very advanced and then you have browsers which are sort of you know very basic even today. So just talking about the browser right. Pretty much like this you know calling to like a more popular category and then there are new browsers that are emerging. Chrome for Android and Firefox are sort of you know just launched. So I mean we on and off we do get like feedback from our customers and things are breaking and sort of that. But yeah these are all challenges so I mean if you guys are designing for mobile. So you've got to take all this into consideration. So we have I mean resolutions, different resolutions that you've got. I mean even though you know the small screen sizes are constant you have various different resolutions within that sort of category. You have different orientations. So you still have blackberries around which is a landscape orientation. All the smart phones and all the touch phones have kind of moved into a landscape orientation. And you have different pixel densities to sort of worry about. Okay so the good news is that you know the majority of the browsers are actually getting powered by Perkit. So you have one group obviously I'm not saying that all the browsers are powered by Perkit. But most of them I would say 50% of now all the browsers that are kind of becoming popular are powered by Perkit which is the good news. You also you have Opera and the older blackberries, the newer blackberries are moving into Perkit which is a good thing. The other good news is like even though this transition is happening browsers are quickly catching up so you know that's a good thing. There's tremendous CSSP support. So talking about you know just the nuts and bolts right like see I mean we actually didn't do anything special in terms of I mean yes we spent a lot of time on sort of you know cutting down the clutter but there are things that are readily available. I mean we did have to sort of it's not rocket science it's not documented it's out there like none of this stuff. All the stuff that I'm going to talk about right now is like available and just I mean pretty much everyone is talking about it. So I think this I kind of only picked up things that we used and we saw benefit in. So I think like you know it's a good checklist this pretty much sort of covers you know 60-70% of the things that you would like to do from the book. So on the HTML front you know I think one major thing just talking about like you know the actual sort of execution right. One thing you need to know really sort of worry about is the viewport right. Now why do I mean what is a viewport right the viewport is essentially the space in which you know your content goes in the browser right. And that means completely because all browsers kind of have default sort of sizes that they enter. So you probably noticed right in the open of the website in your Safari browser it kind of constrains it in a specific way. Now that means Safari sets it at 986 right. So all your sort of content will actually so it kind of sort of assumes that most websites are approximately that size and will actually sort of go into that size. Essentially what it means is the physical sort of is the sticking of physical width of your website to 980 pixels and shaking it down. So looking at this image right essentially what it's doing is I mean the actual resolution of iPhone is 320 pixels and this image is also 320 pixels but it's assuming that this page is 980 pixels and that's why it's scaled down right. So that's why you need to actually configure your viewport. So talking about the viewport meta tag right you can actually so one is you need to sort of define the width that your content needs to render it right. So I mean like so the way you do it is basically you use there's a meta tag that you can actually put in and say ok fine this is you know this is the width that I want my content to render it and then you can have some like sort of more controls like what you wanted to actually scale at when it actually rendered. So normally I mean for mobile websites it's good to have it at like one because that's the actual size. One means actual size and then the other thing you can do you have more controls like when actually switch off or rather disable I mean disable the browser from users to scroll so I mean I would rather zoom. So they can't really pinch and zoom but we've done that on a site because for us that's important we don't want to play and we are sort of working in that space. So yeah I mean viewport is something which is like the bare essentials to start up in a mobile site. Some of the other things that sort of you need to take off you know for us we had sort of like numbers and stuff like that and also we had a lot of numbers in general right so we had booking IDs on our site we had flight timings and the browser essentially thought these are phone numbers and it used to actually link them right. So I mean there's a way to sort of switch off like the browser to actually automatically make it a link but you can sort of fall back to a more sort of robust way by actually giving it a link with the user. One of the other things that you need to really do is really making like you know texting code really really simple right so all this is all available iPhone has been supporting it for a really long time slowly all browsers are supporting it back then 6 is supporting it Android in its recent sort of upgrade has almost supporting all of these HTML5 attributes so you know you say input type is equal to email you get an email keyboard tell if you say tell it's a telephone number and there's also a number but actually there's a small problem with that actually iOS 5 actually considers it as a number and puts a comma so we had this problem on our we used to use type is equal to number on our credit card and it actually put commas which used to kind of look like a sort of you know it put commas in for months so we had to remove it and actually there's a fall back you can actually use pattern is equal to 0 to 9 and then you should see only those keys also I mean another good thing to do is just sort of switch off all auto corrects and sort of auto complete wherever you don't want it so you know your first name I mean if you are collecting information about the names email address you don't want the auto complete to come in the way of the customer right so all these small limit things actually sort of remove all the friction between the user and the product and it sort of becomes much easier to use the other thing you did is like you notice you know Safari and Android actually have a address bar that sticks to the bottom you can actually use a small script that kind of scrolls the address bar back into place so you have more sort of space for your partner so my specific stuff that you get to I guess I mean this is things that you probably you've done mobile so you've been doing it already you can add two types of icons that you can actually add your web page on the home screen which sort of almost feels like it's an app it's essentially a bookmark to your website there are two ways of doing it you can actually put a flat icon and then so obviously it's not very clear but there's a slight difference this was actually a flat icon which iOS automatically put that last sheet you can also customize your icon you have to use a specific tag and it actually customizes it you can open your website in a full screen mode where it actually looks like a web app so I mean you can customize certain things like the status bar and stuff like that on the CSS front I guess one of the biggest things that you guys need to sort of look at is media queries media queries is everything when it comes to like designing for mobile you can do a bunch of stuff right I mean you can sort of like target specific screen sizes you know have customizations to specific screen sizes, specific orientations pixel densities so I mean these are I mean I'll just put this up so that you guys I mean this may not be very useful but you will get reported to a computer how do you support Latina higher density or higher density so I mean just to look at one example we have you have a default like sprite this is essentially all the third card logos and then you have 1.5x so basically Android has I think three levels of three different pixel densities they have a 3 port 1x and 1.5x and they have a 2x IOS just has 2 1x I mean there's a 3 port pixel density and like HD version of it so yeah I mean you can sort of like actually deliver a much crisper image to like browser that actually supported some of the other handy tweaks that you can sort of do is well I mean what Safari does by default when you actually rotate your phone is actually adjust the screen size right also in the phone size so you can actually disable that if you want to I mean right now we've not done too many customization when we are in landscape mode but if you sort of disable this you can actually do a lot of customization in the sense that you can actually showcase more content in a landscape mode and stuff like that some other CSS tweaks you probably noticed there's a sort of a very steady transfer and create highlights that shows up when you actually click on something you can disable that you can prevent users from actually selecting tests next and I think that pretty much rounds it open more questions yeah any questions? yeah so I was very curious to find out whether you are how you have done your Dubai question I thought whether or not you should be able to explain okay why? I'll tell you why just because you have been in mind and comes as you go to a very very simple I want to know where do you how much for an architecture is to change and how much of a video is there to make a video just to explain so the question is essentially how much of we write a video yeah where do you use video for this so we essentially it's a different site or it's a completely different front end in fact it's different I mean obviously the data is the same but like the front end and the back end is sort of different because the flows have changed a little bit on the mobile so it's completely different from that perspective media queries we've not used apart from like targeting specific pixel density so if you want to do retina then we've done written a media query to kind of support the printing inside and so forth but apart from that you've not done media query I think the media query comes in handy when you want to actually customize for a specific size so we say that hey you know what everyone gets this experience but guys who come who I mean any guy comes to my site who has a sort of browser that's less than 240 pixels like do this right so you kind of overhead style so we luckily we've kind of designed from grounds up so we've taken into consideration what the experience would be for a smaller screen so we just use it for pixel density to answer your question given the fact that the technology is good today and if you had a let's say if you were to decide as well to move from desktop to mobile today you think that media query is sufficient enough to kind of do the same motion or say it would take a different function or whatever it really depends actually I mean in the sense like we it depends on like how one is how heavy your current sort of desktop position is right like is it an interesting if it's too heavy then you probably need to sort of rewrite everything but like things like for example like like the products that we have like for example we have you know a blog you know then we would not you know put it in the effort to actually build something from scratch we just use media query and it works pretty well you know means switch off some content that will load up which will not really have which is sort of just you know and we switch it off but yeah I think those those are less risky so we can do that so yeah I mean like this question yeah so the question was what was it I mean what are the discussions about internally about like native versus mobile right I mean mobile right so we've been obviously like you know big believers in sort of being able to push more functionality to our customers as soon as we can native apps unfortunately you know don't give you that like that flexibility here we can push stuff in the middle of the day if things are not right so we've shied away from native apps obviously but we obviously have their advantages it's a good distribution channel it has a better user experience so we are spending time to kind of see you know there are ways to you know actually look at that as a channel as well in fact I mean like we are sort of you know we are working on some ideas right now yeah so driving consideration was how fast we can push to market here WebKit is essentially a engine that powers I mean it actually powers the rendering on the browser so it's a rendering engine for the browser yeah it is sort of open source I mean everyone is using WebKit you have Chrome using WebKit and Safari so the question is what kind of analytics tools are you using not using analytics tools right now because that's a distant sort of script that you need to run on the front end so we've kind of avoided that but we do look at our server logs to see you know how people are behaving so it's kind of right now it's not it's kind of rudimentary but it does what we need to do so yeah we look at conversion we see where the drop-offs are so if say for example we realize that you know people are actually not going beyond you know like say one step we actually experiment with some like obviously we'll have some inclaim what the problem could be we'll actually try it out for couple of days switch it you know just kind of make a small tweak see if people respond to it and that's normally how we actually do it you know AAP requires a much like requires a bigger infrastructure I mean like in the sense right now yeah we are obviously you know investing you know effort in like building a mobile product but still you know we don't have the resources that we actually like to have build that infrastructure for AAP tests and stuff like that so right now like we are not debating like that lets actually access our desktop site so let's talk about why you've chosen you know insurance policy so yeah you know like we kind of didn't want to have so like you know insurance and all that comes into view sorry what do you mean by insurance? you know we don't have so the question is whether why the insurance is not part of the mobile right yeah we excluded it because it kind of requires a decision making right and we want to kind of like I said cut down on any sort of issues yeah people don't have to make a decision right suddenly there's one more sort of dimension I think yeah we've not done it for a mobile site so the question is are we using are we not using the GSP work to actually for a mobile site we're not using GSP work because our time is I mean pretty I mean in terms of it's not it's not very dynamic we still need to kind of figure out what the browser can support right in the sense there's too much between browser so we want to we've kept it simple because you know very minimal jobs that we do we're not using it in fact a lot of the years that we're using on like which it's we're using is like we split that down expected only the things that we need so it's very very sort of it's a stripped down version of our original thing but we've not even done it are we experimenting or are we experimenting sorry are we experimenting or are we experimenting like I said like our desktop site has obviously taken you know as sort of evolved over four or five years right there are things that we don't have to actually you know we don't have to have customers pay for that in the sense in terms of bandwidth cost right where you can actually deliver the same experience you can deliver a better experience with something which is much more lighter and you know I mean it's just actually it's bandwidth it's just like it's an additional effort right you can always hide it at the end right no but that's dead weight right so if you have content that you're hiding the content is still getting delivered through the pipeline it actually goes to the client side and then you actually like sort of switch it off so like I said like for lighter sites it makes sense like our blog is like that I mean I mean we just wanted to use this concept we tried it out experimented our account, the new account to a certain extent is responsive like you would probably check it out on the tablet to see how it works yeah okay so you done thanks guys