 Hello everybody. I am Anusha Jayanti. I sort of want to start off the talk by telling you how I actually ended up here. So, this particular toolbox, this old rusty toolbox sort of represents my childhood. My parents are DIY people and so were my grandparents. Anything that came into the house would be modified the slightest bit to ensure that it works better and that is when I started to appreciate the beauty of functionality and things just happening smoothly. It was sort of unfortunate for them because then I went on to opening every single thing around any gadget I found and playing with fire, experimenting with fire which sort of ended up in me burning a few of my hairs but well that was all good. My father is also an artist which is where I developed my love for art and drawing and sketching and painting and I spent hours doing it. So, all this is good and so I grew up into a kid who was really interested in tech and design and gadgets and playing around. But then well I had no real idea of what to do with all of this. So, what happens when a girl who is interested in tech and design but has absolutely no focus, you know, gets out of 12 standard? Well, it's a standard story, right? She does engineering and then she does an MBA. But luckily enough after MBA I ended up in a really cool setup inside Deloitte which was called Deloitte Innovation and these people they used to work on some really interesting concepts. So, even though I was in a consulting organization after MBA I still had the opportunity to explore trends like gamification in depth, talk to some of the industry experts and also explore visualization because we are trying to figure out how visualization is very important when it comes to industry dashboards, how it helps, how it helps highlight critical things and so on. At the same time we had training in things like design thinking and it was great. But then I decided that you know this is I sort of figured out that there are places and there are careers which I can go to where tech and design come together and that was when I discovered UX. So, I went on to do a six months internship with Microsoft and after which I ended up at Dexitra which a few of you might know because it's the startup that is built Friday and Iris in dial up and trails and here I am. So, I work there as a product architect. Today I'm here to talk to you about complex applications. The reason I want to talk to you about it is also Dexitra is sort of the reason for it because one of the primary application that we work on is Friday. It has tons and tons of data and so many different kinds of data. It gets a little difficult to figure out how to put it, where to put it, what level of detail should be there and there are so many questions like this which keep coming in. So, which is why I thought of the fact that there are so few complex applications which exist in the market and even the ones that do sort of come in from a web interface. Let's take Facebook. If you think about it, it's not a very simple application, right? You can do so many things with it. You can view the content in it in so many ways. You can look at friends, you can access groups, you can access feed, but the reason it is easier for users to go there is because they're already used to a certain web interface, right? So, so is the case with Twitter or LinkedIn. So, then I started thinking about what are the few key things that are important when you are trying to build a complex application from scratch because let's face it. There are so many things that work so much better on the mobile than on the laptop, right? Think about things which use location and which are so personalized because we have the phone with us all the time and hence this topic, building complex applications. So, let me start off with this, the 80-20 rule. It applies everywhere, right? Now, I'm starting this assuming that, you know, you have this amazing app idea with thousands of features which is going to be so awesome because it can, you know, show so many things and filtered out and you can do so many cool things with it, maybe take photos and, you know, like, I don't know, go to the moon or something. But the point is, out of all your users, right? There's generally a normal distribution everywhere, of course. There are going to be such few users who will be actually curious in what you've built and go in-depth and hunt out every single settings and try and toggle with it and think about it. But for maximum users, this stands true. What stands, what also stands true is the fact that if you can't see it, it's not there, right? Which is why it is very, very important to figure out what the 20% of these features actually are so that you can surface them, right? So, but how do you actually go about this 20%? But before I get there, we all use Instagram, right? Now, Instagram is something, is one of the applications which started off as mobile first. Initially, it just had a plane, you know, putting things together, putting filters together or share. But even in that shared part or even in the filters part, you have a choice. Wherever there's a choice, the 20% rule applies. So, if you see the graph, that's approximately how filters are used, right? And that's so skewed, which is why, as I say again, it's very important to have the 20% feature surfaced, which is why you have the normal button first, which is why they probably keep reordering the filters every now and then, slight bit so that it does not disrupt your experience, but at the same time ensures that what you want to use is right there in the beginning. Now, how do you go about surfacing these 20% of the features that we're talking about? Stories. Stories are great. You don't put everything down in stories. Nice, beautiful stories. But these should not be stories which involve screens and features. Please don't do that. What you should do is put it down the way you would expect a user to be using it normally. Don't talk about screens again. I keep mentioning that because that was something I used to do all the time. So, think about a small app which just tells you what to order in a particular restaurant. Okay, so the user story is going to be as simple as this. I walked into the restaurant, I pulled out the phone, right, and sure enough, there was a meal suggestion. I just wish there were more restaurants listed. Now, what might be going on behind this is awesome, might be awesome, you know, you might have features which connect your app with Facebook, which take in your friend's suggestions, what your friends have eaten there before, connected with Foursquare, everything, taken your preferences from other places, also maybe figure out the things that you haven't had, you know, tried, haven't tried at that particular restaurant, right? But this is what is important, right? So, but the thing is we're talking about complex applications. So, what's going to happen is if you take just one story, you're going to miss out things. So, it's not a story. It's more a novel. Keep writing stories. Keep writing stories until you have that initial bucket list of features covered, at least more than once, preferably more than once, right? Keep writing stories. And these stories are going to be very important. Even after you've completely built the app and put it in the market, it's doing well, you want to keep coming back to this because this was your first idea. And in my experience, nothing is as good as the first cut because that has all the energy and all the love and affection and the ideas that you put into it, right? So, this is very, very important. So, I'll talk about the example of a story of a money manager app. I think I'm a productivity app freak. So, I like going through every single to-do app in the market and the money manager app in the market. So, I don't find any of them great, right? So, which is why I thought, why don't I write on a story for this? So, the unclosable tap because, well, you know, the money keeps going away and I can't seem to figure out how to save any of it. So, how I think it will be. Mohana withdraws money from the ATM. Her phone buzzes. The notification bar asks her if she wants to add the transaction to tap app. Now, again, the features behind it might be, it's figured out the location is, you know, because of the ATM or whatsoever, but that does not matter. This is the kind of story that should be put down, right? She transfers money from the saving account to cash because I feel that's something really important. I want to see, I want to figure out the different kinds of transactions I do or the different places I spend money from, right? So, okay, time to go buy vegetables. She gets done from the auto at the vegetable market. Home screen widget for tap app has changed, has a travel expense add option, right? The, what is, what is going behind it might be for the fact that it's detected that you traveled, right? And that you don't have a car, maybe it knows it. So, these, these, these are the kind of stories that you would want to write down to figure out what feature and what content to surface at what point of time. But we'll come to more of that later. So, stories essentially will help you figure out the features more or less. But then there's a whole aspect of content, right? Now, here, the example I'd like to take is an application called Friday, which is built by Dexitra. Now, Friday is beautiful. It's got a huge life logit. You know, if, once you give it the permissions, it takes in everything from SMS to meals, calls, locations, any sort of sensor and brings it all together. And one of the best use cases I find for it is going back to that particular day. You know, when you were standing next to some particular shop in that locality and you made that call to an unknown number, but you forgot to save that number, right? But the point is it works for a use case like that. It's a delight for somebody who likes numbers and statistics. But it is not how you would describe your day to somebody, right? So, which is in places like these in applications like this content becomes really important and the amount of content you show becomes important. So, I felt a good way to look at it. Content and features together is that features ultimately are just filters for your content here, right? You decide which filter to apply to show which part of the content based on the situation or you know, the place or the time and so on and so forth. So, I'll give you let me go for a certain example that I quite, I like quite a bit. So, let's say these are all the superheroes. So, these are this is the content that we have, right? But how do you decide which superhero you want to make a movie on, right? All right. So, you go ahead and put filters. But what are these filters? These filters are underwear outside, tragically dead parents and cape, right? And you put the three of them together and you get the most awesome superhero ever, right? So, filters, hence, are really, really important and features to, you know, figure out what kind of content when and let me come to how to get this right, right? So, sorry, before that what I would also like to address is the whole concept of zero content. Now your application is new. It is just coming to the world, right? Now what do the users see a blank screen? Well, that is not acceptable. After some time your application is going to be full of life and energy and things that you want to tell them about, right? So, this is a great opportunity for you to set expectations, right? Or to get content from them, to get preferences from them. You can set expectations in terms of the kind of content they're going to see later or stories about other users. But it's very important to plan for the zero state. It's as important as planning for a state where you're going to have a lot of content or limited content. So, it is thinking about each of the scenarios while building out the stories. Now, how do you figure out how to layer the content? So, you have an idea, you've written down stories, right? You've connected features, but then inside each feature, again, there's content. You want to apply filters inside each feature so that you get the content, right? Personify the app. Think about how a human would present any amount of information to you. Like, for example, if I think about Friday, our parallel for it was, let me think about how I would describe, you know, my life to a guy whom I just started dating, right? I would probably go into whole details. So, would he, right? We talk about, oh, I got up in the morning and this and that and I traveled, but it's still not be in the level of detail as Friday is currently. It's, I mean, it won't be at the call level, but it will be like, okay, I reached off his five minutes late and then I did this, I ate something, I didn't have Pani Puri today, but then as time progresses, I would probably shift to a level where I would tell this particular person about anything very different that happened that day, right? So, instances like this will again help you plan on what kind of content to present, how to present it inside each feature. If, so, as I was talking about the money manager app before, if I had a personal accountant, my accountant would tell me to stop buying keyboards. This is the latest keyboard I bought. This is like the fifth keyboard I have and that is not counting the other input devices I have, which is probably four different mouse pieces lying around and a bamboo pad and things, but this keyboard is awesome because you know, it has this trackpad and all but the point is I should stop buying keyboards. That is what my accountant would tell me. The things my accountant would surface first is any major expenses that I have had recently, right? It would break down the different kinds of transactions, making it very easy for me to access it. It would help me figure out what transactions are under what and also probably tell me about any major recurring expenses coming up next, right? So, this helps because I would think about how a human being would approach the same problem, would approach the problem of content. So, this is how I would generally go about figuring out content. So, we done with content. Now, what do we do next? We have these stories, we have personified the app, map it out. Flow charts are beautiful. They are awesome, right? You just put them down saying that this what happens and then this happened, right? So, for example, if you're talking about the money manager app as I put down, again, do not go to screens, do not go to features. Just put down basic steps saying or actions. Actions are the best way to do it. Open the app, right? Open notification, click on button A or click on button B and once you do this, you'll see you'll be able to figure out what is missing from the initial list of features is that I think you've missed out, right? Even after looking at the stories, but it doesn't end here. The more important step is doing this. So, you have a whole bunch of places, let's say, think about the traveling salesman, right? There are like five places he has to go to and he has to probably keep traveling between them and how does he figure out the best route? So, once you do the flow chart, once you map it out, you'll be able to understand the adjacencies which in turn will help you understand interactions there. So, you've got features, you've got content, right? And now these adjacencies become really, really important because let's say I want to keep traveling from point A to point B again, 80% of you users want to do that. You don't want to introduce four steps there, right? You want it to be right next to each other and doing this will help you figure out the right screens to have or the right features to have one after the other and minimize the distance between all of this, right? So, this is just a basic graph example of probably how it would work out, right? So, the idea of doing this is to show you that you should probably map it out between for each story. So, once you map it out like this for each story, you just, you know, basically overlap them, see where you have the maximum number of lines covering. This is how I do it. So, it could be anyway and you'll get a clean idea of what's happening. You also see the seven hanging there, right? That essentially tells you that there's a feature which hasn't been covered in your story, right? All of these, all of the numbers which have very limited connectors are probably things which should go into the setting panel. The ones which keep getting connected the most and the are the most important features that you have surfaced out from your stories also are probably things which should be in the top three tabs as soon as you open the app. The content that is going to come inside these particular numbers is also probably the kind of content for which you should send notifications because ultimately those are the most important things. And I cannot emphasize this enough. So, once you do this, there's a very high possibility you'll figure out a lot of issues. And personally one of the biggest issues that I figured is the fact that there are a lot of dangling pointers and more importantly I haven't figured out the back actions well enough. And we all know the back button is such an important button in the Android phone but you never know what could happen there, right? You press a back, sometimes the app gets closed, sometimes the entire screen is gone. So, which is why this becomes really, really important, right? And I forgot to mention but this particular screen should also have the back actions, right? And that is when you know that things are probably at a stage at 30, 40 percent. Now, I just want to talk about a few things, you know, we've got to the stage where you have a map laid out, okay? You can probably go on to wire framing from here but just before that, this is about thinking in Android terms or for a touch screen, right? Now, this is where when you start doing the wire frames you'll start thinking about, oh, this button should be this big, this should be this beautiful. What you should not forget however is thinking about taking advantage of the system. I actually figured this about a few months ago when I connected my Bluetooth mouse to my phone and I figured there was so few things that I could not do with my mouse that I and you know compared to something I'd do when I was holding the phone in my hand and using it with my finger which is really stupid because it's a touch screen, right? You're supposed to be able to do so many more things and zoom and scroll are pretty much the only things that I used. A good example that I would like to talk about here is Snapseed. So a horizontal, a vertical sliding, right? The screen is clean. All you have to do is scroll vertically and you get to choose one of those things that you see the center size or texture. Once you've selected that, you slide your finger horizontally on the screen and you can select other things. So this is a beautiful example of leveraging a touch screen for actually what it is, right? Once you start an action is when things come up. The other example that I would like to use here, which is not a part of Android, but you know is definitely something that I think is very valuable is one note. I don't know how many of you've used one note on the surface or the one note 8.1 version, but when I tap it gives me this option which is just beautiful. This is designed for the touch screen, right? And the options immediately change. I'll show you how the options change, right? I've put the pen here. This is the surface pen. I put it here. The options change. This is designing for a touch screen. And I think it's just beautiful. The other things I would like to talk about before you know completely get into wireframes is about the secret sauce. Now it shouldn't be magic when you're designing application, especially which is complex, which requires a lot of, you know, back in things happening user doesn't really know why content is coming up. That's that's sort of, you know where it becomes a problem. Users should know why something is there. He doesn't need to know how exactly it comes up there. So introduce friction. It's as simple as if you're walking on a floor, you need friction to actually stay upright, right? Let's let me give you an example about a meeting. Suppose you have a meeting and you have a Skype call setup. You definitely wouldn't want this Skype Skype call to connect as soon as it is 8pm because you have the meeting at 8pm. You want that user interaction to be there where you say yes, right? That is the right amount of friction to introduce to give the user some amount of control while improving the experience. Attribution, the user needs to know why some content is there if it is there. Google now is a great example. You search something on the web, it is there on your phone and it tells you exactly why that particular piece of use is there. So you're not surprised by, oh my God, you know, why has it come up? The notifications gave. I mean, I know there are a lot of applications which completely abuse notifications, but right notification at the right time. I mean, my perfect money manager would be something which would tell me to put in an expense as soon as it figured out, you know, that I've taken it. I've made an expense. And suggestions are definitely good, but it is important to structure them know where in the hierarchy they fall. Think Amazon does it great, but I know that's a web on the web portal. But even then the suggestions are secondary level, but you know, they're there, right? And that amount that adds a teeny bit of magic. There are so many times when I've gone back to search for a book that I have read so that I can scroll down and look at the suggestions to figure out what new book to read rather than asking my friends. All of this is at one level. So when you actually do get to the wire frames, right? Do not use Photoshop or do not use anything that will ensure that you get engrossed in the details. My personal favorite is one note with a surface pen or use pen and paper. Use something that will not limit you under any circumstances. Use something where you can, you know, just put things here and there or shift them and draw arrows, connect them and, you know, just let your ideas flow. That is really, really important. And again, I'm going to say that after you do all of this, do not design for yourself. As I said in the beginning, right? There are very few users who will actually be interested in going into every single settings in your application and figuring out how things work. And there's a very high probability that you are such a user. That is not how 80% of the users are for them. What is there is what they're going to use and what they will know about. Designing for yourself is definitely a recipe for disaster. Any Star Trek fans? But, well, you'll understand this, right? I mean, you design for yourself and that's it. You are somebody who's thought about the application, has ideated for it. You know, you've put so much love and affection into it. You know, every single tiny detail about it. So, you definitely cannot be the person who judges whether it works fine or not. So, as I say, do not design for yourself. Take it feedback. Do enough amount of user research, which is a huge topic in itself. But refrain from thinking that because this is what I like, this is, you know, this is something that's perfect and good. I'm going to take a minute and take you through how I do wireframing, hoping it'll, you know, help you. So, this is a few, you know, this is one, so it's really easy to just put in outlines and draw whatever I want here and I can do it at any detail, right? So, this is one detail or I could take it to something which is much more cleaner and this helps me think a lot. You know, figure out whether what I'm doing is right or wrong, change things quickly, share things with the people who are actually doing the developing or I could take it to much more detail, you know, something like this which is colorful, playful, but at the same time, it's not engrossed in detail, right? It's not Photoshop, it's not pixel perfect. So, it still helps me ideate and let me tell you, a lot of times we as designers might have a lot of ego, right? You don't want to change things and I feel working in one node helps me stay away from that because it's so easy to change things. It's not Photoshop where I've spent so much time making everything perfect and it's easier for me to accept in ideas and implement them inside this design. Also, I've found that it's easier to give for other people to give feedback because this is in such a rough stage. I know I've said this already, but I treat again at every particular stage and keep going back to your earlier stories. So, these are a few things which will probably become really, really important after the wireframe stage when you actually go into the detail design, right? Could be layers, colored, all of these are things you'll take care of, but settings is something else you should definitely take care of. If your app is complex, settings are very, very important. That also helps the user understand what the application is all about, toggle things around, even for simple users, right? And what a lot of us do is leave settings for the end and do not design it well. There's no proper hierarchy in there. So, when you're building your user story, please bring in settings also. It becomes very, very, very, very important. I cannot emphasize enough. And yes, iterate again, because even, you know, well, he's not as awesome as Batman, but even Superman's logo took so many iterations to get to where it is, to stay up to date, right? And that's it. Thank you. Do we have any questions? Sorry. So, if you say I'll repeat it. Sure, could you tell me what slide it is? But no, what was there? So, these numbers are parts in the story or actions in the story, right? So, the actions in the story, if I go back to the monetization, or the money manager app, is I transferred cash, right? And then I put in an expense, right? Or after that, it could be a set up a recurring expense or added an expense, and then I made it recurring. So, adding an expense is one of the numbers. Making an expense recurring is another of those numbers, right? And those dots represent from which action did I go to which action? I went from action A to action B. Yeah, navigation, yes, right? So, this helps me figure out which are the actions that are likely to happen together, and hence, should be close to each other. It should be very intuitive to go from, you know, in this case, I see a lot of overlap between four and eight, and four and two. So, it should probably be very easy to go from four to two. Hi, I'm Inba Shekhar, and thanks for the wonderful presentation. Thank you. I have a question. You mentioned that, you know, in mobile phones, we are not using the touch screen very well, and we are using features that are, you know, more commonly used on desktop, and then translated to this. Also, you mentioned 80% of people, you know, just do things that are, you know, visible, what they say. And these two contradicting, meaning these are new features that people have to learn and go through it, and not everyone might see it, because what the scrolling does or the touch does is not really... I definitely, I don't say that scrolling is not important or zoom is not important. Probably what I mean to say is if somebody who used a laptop three years ago can use a phone now equally easily. Probably that's, I mean, I know there are other examples where they go 15 years back, but I said three years back. Think about the touchpad on a laptop. It's pretty much the same, right? You can zoom, scroll. But this is a phone where you're directly interacting with the elements on the screen. So, I feel in places like that, that's why, as I said, snap seat, right? In places like that, there is more of an opportunity to innovate and leverage this rather than having buttons like, actions are coming into play now, right? Like Google, this swipe action to delete something that's getting more prominent now and is spreading across everywhere. So, that was my intention. I definitely agree, scroll is really important and zoom is really important. I hope that clarified your question. Yeah, I can hear yourself just. Sure, I'll get to the question just so that everybody can hear. Can I have your name please? Bhaskar's question is that while designing complex applications and making them simpler, sometimes we might introduce interactions that are very new. For example, using the accelerometer and so on. So, in situations like that, how do we educate the user into using these interactions? Am I right? So, some interesting methods I've found is looking at real life, how do we interact with real life objects? I'm sure zoom came in that way, right? You also have a lot of these interesting games which use the accelerometer, right? So, looking at games is another way I feel where you can pick up examples of interactions which you can then translate here, right? But a lot of times I'm sure it might be things which are completely non-intuitive which cannot be borrowed from here. Times like that I feel it's okay to introduce one new step of interaction because based on the scale of your application, it might be a little difficult to actually get some, to educate a certain set of people. You can always use overlays to describe that this is how you can do it, but if that's the only place it's going to be used, then I don't think it's worth the effort and people are going to get used to it. It's okay to add one new step where things are probably behind one layer but still easily accessible with one tap. Personally, that's what I feel, but I know a lot of people who are major advocates of using tutorials, but I like tutorials too, but I know a lot of people don't follow it, so. When you have a lot of data and a lot of parts like this, some apps tend to overdo the navigational thing, so they follow the web standards with combo boxes and a big number of tabs increase and all that. What are your thoughts on that? See, I personally like heavy applications, okay? So I love using applications like that, but what I would suggest is the whole reason I wanted to go through this process so that you understand or to get a better idea of what are the three features or three filters of content that should be there on top. I think everything else should go into the settings bar or into the menu bar, but a lot of times what we forget is those are not primary actions. Those are probably secondary level actions because here if you see, three is not a direct action, right? So three is really important. The content needs to be there, but it doesn't have to be a primary tab because the only reason you'll be accessing that is because you've done one, right? So from one you can have options to go on to three or let's say, or actually no, it's the other way around. So five is the only one which leads to three. So when you are in screen five, that is when you have to consider giving an option to go on to three. So everything doesn't have to be on the top. That's, I, yeah, thanks. Excuse me, yeah. Just one thing to regarding the gestures. One of the things I think you should consider is when we are using gestures, make sure that we are not using gestures that a user doesn't know about for important features or use it in a way like, for example, the delete action. Even if you don't know the gesture, you can still open an email and delete it with the icon. So you can still use the feature. The gesture just simplifies it or makes it faster or easier to do it. I completely agree, yeah. I think it's only after a certain time when the general awareness level has gone really high that you can completely eliminate the buttons which are on screen buttons. Thank you so much. Do we have any other questions? Yeah, I would like to ask you a question. See, here, most of them, we are developers here. And whatever presentation you are giving, that's fantastic. But it's very theoretical to a developer because when we go to office, you will give us the stories and we'll start working on them. We won't have time to go into detail of those stories. Even if the color is interesting, maybe I don't like. So what are your suggestions for developers to look into the work they are doing from your perspective? Means you are suggesting something and I'm a developer to code only. But how I can add value to your design also if I feel something needs to be changed. So again, my answer will have to be completely based on what I think is possible because I've never worked in an environment like that. But whatever I would probably suggest is even after you get an idea of what you are needed to create, probably take a step back and see if you can make something like this which is gonna be very simple based on the story or the screens you already have, which will probably help you figure out whether it makes sense or not, whether everything is in place. Just to add to that, just to add to your answer, design isn't something that is just what a person called a designer does. A developer is involved in that. So as a developer, you should understand the reasoning for why a workflow works in a certain way. Why the designer has decided that this page goes to that page or why there should be a button. As a developer, you should have an understanding or you should understand that it is important for you to know. So that you can also contribute and improve to that. Any other questions? Thank you, Anisha. Thank you so much. It was great talking to you.