 Okay, so we've got Tulsi this morning who's going to be talking about designing products and services. And Tulsi's got a long history of working on designing products all over in startups and enterprises, which is going to take us through a whole bunch of different processes that we can use to actually go from merely good products to really amazing ones, using different tools, talking about prototyping, how do you use prototyping while building products, talking about gorilla testing, talking about usability, and also looking at an extremely important part of the picture, which is how do you sell design, how do you actually make a case for design, how do you say that design is actually going to lead to an increase in your investment by investing in design right now. So Tulsi runs a product and design startup based in Hyderabad called Zuri Labs, which you can take a look at as well. Thank you. Can everyone hear me okay? Let me just pass this and you get going here. Okay, so my talk is called High on Design. I think I was telling somebody last night, I think I was high maybe when I came up with the title of the talk, but basically what I'm going to be talking about is some real world examples that I've learned along the way. My life also started off in engineering very similar to Navjoth who spoke yesterday and I moved from engineering to product management into design and I sort of ended up full-circulate design now. I moved with my dog Zuri to India about a month and a half ago. I used to be in the US and I just started my company called Zuri Labs and we hope to work with nonprofits as well as smaller companies to help them realize their design of their vision of having innovative digital products on the internet. I'm really happy to actually be part of this wonderful network and be part of the digital revolution in India. Some of my contact information is below so I would love to hear from you and even if you have any feedback would or bad about my talk I would love to hear about it. So today I'm going to be talking about design thinking. We won't delve too much into the processes of design thinking. We'll instead move into some real-world exercises and examples that I've seen working and then we'll move on to how to empower your engineering teams because a good design is nothing without an engineering team to help you build it. So what is design thinking and why is it so important? Design thinking came up from companies like IDEO as well as the design school in Stanford and it's just an amazing institute and there's a lot of great work coming out of there but basically I think that design thinking gives companies this little design edge and if you look at companies that we all love, like I know many of you have Apple computers for example the first time I got my Apple computer many years ago I read an article about the sleep light in the Apple computer and basically the sleep light is a white light and it mimics human sleeping patterns. So the first night when my Apple computer was shut down and was next to the bed you know I looked at it and I was like oh my little computer is sleeping as well and you suddenly have this fondness towards your computer and so I think that little piece of design in the Apple computer made me a brand evangelist for Apple and I'm sure all of you have a similar story about Apple or you know your favorite brand there was something that turned you over into just from becoming just average user to becoming a product advocate so I think design is that key thing that can make that happen that kind of leap of faith happen and really kind of inspires customer loyalty so in terms of you know when you're explaining to your boss you know why is why should I spend money on design or you know what's the return on investment just think about how like you know well-designed products sort of sell themselves you know you create like a network of advocates and brand evangelists that just sell the product for you and I think that's really key and design can help that process. So back to design thinking and why I think it's important know what is design thinking according to Tim Brown who's the head of IDO a really fantastic organization if you haven't heard of it go to their website they have a lot of excellent content that you can learn from but basically you can read that I'm not going to read it for you but basically what design thinking is is just a different way of thinking I think many of us are already doing it and we're just putting a label on it but basically what design thinking is is empathetic thinking putting the user in the middle of the problem instead of the problem ahead and then really I mean you know a single line definition of design thinking is a human approach human centered approach to innovation and so I think that's really key to beautiful products put the user in front put the user's problems in front and really build the solution for that user to make that user happy to make that user more empowered and save them time or something like that but put that user in mind in the center so there are many many different ways that design thinking processes are defined and while we sit and talk about process and things like that I just want to clarify that not all processes work in all situations so don't just blindly go back to your organization and say you know like I read I saw on meta refresh that I need to do these six things and my company is now going to be successful I think you need to really take ideas from here and then see how it'll work within your own organizations within your own structures and patterns so basically design thinking the four key stages I think in the design thinking process are defined with where you basically define the user and you're the problem ideate where you throw out ideas it's a very collaborative type of process you don't judge during this process there are no stupid ideas that come up from this process I mean there might be but you don't judge other people's ideas and I think ideation is is key to design thinking where you throw out a lot of ideas and then figure out what works prototyping of course is really important where you go straight from ideation to prototyping so put it in some form that you can then get feedback from users and get users to engage with it and give feedback I mean again it goes back to you know design thinking puts the user in the center if you're not able to get feedback from the user then you know you're not really design thinking then you might as well just build a software product and then put it out there and figure out what it does and then of course built software product is not a software product if it's not built so that's obviously quite obvious and then learn I think that that too is important basically once you put the product out there don't just think that the product is out there my users are using it engage with your users see how they are engaging with the product I think yesterday Kartik mentioned about metrics there are a lot of tools out there that you can actually measure the metrics of how users are using the product you know how's the mouse moving before they actually click on that button you want them to click on and things like that so really measure all of that now I think every designer or many designers big challenge is how do they fit into the agile world and I don't think there's any easy answer for this unfortunately sorry I was talking to somebody yesterday where they they said that in their organization the designers are upfront and central I would love to work in organization like that but unfortunately never have so usually what happens is product management and engineering set the timelines for a product and then like many times actually engineering would come to me and say hey like we need these screens by tomorrow and obviously then you don't have time for ideation and prototyping and testing and all of that so what we did what we managed to do pretty successfully was actually get slightly ahead of the curve so we'd work with the product managers and figure out approximate timelines for when products were coming out in a sprint cycle and then we'd work one sprint or two sprints before that and then we also became much faster and quicker about this entire process in yellow sometimes we just do it in a day that we would you know ideate in the morning build the prototype in the afternoon if you have templates and think like bootstrap and stuff with easy to prototype and then we just do internal testing sometimes and also I mean I again want to iterate like just because there's a process doesn't mean that you should follow it and you shouldn't become rigid about following it there are lots of times that you can just use your gut instinct and put a feature out there I think that's really important if you understand your user and your market and your product then sometimes just build it and put it out there and see what see what the feedback is so don't get fully stuck on so I don't want to delve too much on theory let's just move on to some things that I've seen be successful and I've learned from other people along the way so the first thing is the first stage like we saw in that little circular diagram is defining so defining is of course key we I mean we don't even have to have this discussion if we're not working on defining so what is that stage so basically that stage is where you define the user and you define the problem and you define why solving this problem is important so that's the stage of defining so the first thing is defining your user and getting to know who your user is you know you don't need to do something as complicated like this it has helped us in the past especially trying to get all the engineers on the same page a lot of times what we used to do is print out these cards like really big that there with the photograph of the user what motivates them what makes them happy what's going to get them their next promotion what's going to make them look good in the eyes of their boss you know all of those sort of things you know do they have a dog what's their dog's name so really you know things little things about the user where you get to know them you get to know what motivates them you know so basically it's like an emotional map of your user and that's really important like it brings everyone on the same page when you're ideating as well as building the software so like in in our engineering office actually we have a whole wall full of users for various aspects of the product and it's you know it really helps validating the product the next thing of course is defining the problem of course you know there wouldn't be a solution if there isn't a problem so you know when you're defining the problem it's it's really important for the next stage that we talk about in a second the ideation stage to actually have a clear definition of the problem it's really important because if like if you have like 10 people in a room that are going to be ideating and kind of throwing out ideas for solving a problem it's really important that they know what the problem is that they're trying to solve everyone needs to be on the same page kind of you have equal footing when they're innovating around this problem so I mean this is just some examples that are some questions that you should ask yourself when you're defining the problem you know is it worth solving this problem how is the user going to feel if you solve this problem are they going to become more productive you know are they going to send you a thank you note you know it's always fabulous when you actually get a thank you note from the user saying you know thanks a lot like it just saved me six hours a day because you built this thing into the product you know that that sort of thing you know makes you know that you've done something right okay so we're going to do like a little ideation exercise in a few minutes but before we do that I want to talk about my five favorite sort of design rules when it comes to building user interfaces the first one is hardcore software free some people also refer to this as the epicenter basically what that means is that one or two elements that give us give your page its purpose put that kind of in the center of the page and then build all of the other functionality around it and when I say center of the page I don't mean like literally center of the page but center of the focus of the user I'll give you an example recently yahoo redid their user interface for their mail software I don't know how many of you use yahoo mail so about a week ago I was using yahoo mail and I couldn't figure out how to compose an email message I would think that that is core to yahoo mail being able to send an email message I shouldn't have to search the whole screen for that so that's what I mean when designing from the core so keep the core central it's also very very useful doing this when we're designing for responsive web design because as soon as you've identified what those core elements are and that core functionality is to a page then you know that on a smaller screen tablet mobile you still want to keep that core central so it's a really really useful principle to have the next one is the Pareto principle it's actually some it's actually a concept that comes from economics and sort of unrelated to design but some designers have taken this and are running with it and I think it's a useful principle it's basically the 20 80 or 80 20 principle you want to try and get the user to do 20 percent of the work required to achieve 80 percent of the result now obviously that's not always possible but it's something that would be great to strive for the third one I think is sort of a self-explanatory minimize distractions so that's just basically if you don't need it on the screen don't put it on the screen keep it minimal keep the fonts readable get rid of gradients and you know uber rounded corners and all of that stuff so you know just keep it simple keep it up and you're probably doing a job blank slate so blank slate is basically sort of the welcome map to your software application how does the user first feel when they enter the application like once they've logged in they've come into the application how does the user feel about the application how do they engage with the application it's not necessarily showing them a message it could be doing something for them I'll give you like a really great example I think a Pinterest has like a perfect blank slate the first time I signed into Pinterest or got my Pinterest account I was a skeptic like most people and I was like do we really need another social networking for images so then I said okay fine I need to sign up and see what it's all about so I sign up for Pinterest and as soon as I sign up the first thing it does is goes and checks what my interests are and comes back and says we think you should have these five boards so I'm like okay fine create the five boards and then it says we think you should follow these 10 people okay I'll follow those 10 people and all of a sudden in the next step my Pinterest account is set up I'm following 10 people they have all this exciting stuff and in just a few minutes I've become an addict to Pinterest because they had awesome blank slate they thought of the user they thought of engaging with the user and they thought of making adoption of the product much easier and I think that's something that we could all keep in mind and finally good defaults sorry was that a question no good defaults good default I don't know I think some people might think that it's not like one of the key principles I think it's a key principle because if you actually think of good defaults in the product like I'll give you an example Zomato like the first time I went to Zomato it had already selected Hyderabad for me or campaign monitor the first time I went to campaign monitor it had selected my time zone and it had gotten a whole bunch of information about me through my Facebook account so I think the good thing about defaults is if you think about the defaults then you realize that there are at least 20 questions you don't have to ask the user you can answer those questions for you and it sort of goes back to that whole you know inspiring adoption of your software asking the user less questions assuming more about the user and then personalizing based on what what we assume so now we're going to move into like a little ideation exercise so all of you probably have a notebook this idea actually came from someone at Google called brine oven and it's also talked about in the in the ghost game-storming book so definitely get it if you like this exercise so take your take your notebook and take a piece of paper out of your notebook so this exercise is called 685 which basically means six to eight ideas in five minutes but because we don't have that much time we're going to do a kind of shortened version of this which is going to be four to six ideas in three minutes so what you're going to do is fold the paper in half and then fold it in one-thirds so you're going to get something that looks like this you have six quadrants basically in your in your paper and now get out your pencil and I'll and I'll talk to you a little bit about the exercise okay so here's the exercise now the user is somebody called Tashi and he's a teacher by day and a foodie by night what makes him most happy is when he's cooking for his friends and his friends can tell him what a hero he is because he's cooked such a fine meal the problem is that Tashi has invited people for dinner and he's run out of gas he's called his regular gas company and they say that they can't deliver it for three days so Tashi is screwed he's not going to order pizza that's beneath him so he needs to get gas he needs to get gas today so what we're going to do in three minutes is come up with an app that Tashi can use it's going to be you know like a local app you know think about how local apps work what is needed for Tashi to find the gas locally find out if it's available how much is it going to cost and actually make the order and be able to track it on this piece of paper you're going to use one little square for each of your ideas and the goal is to come up with six ideas for the problem in three minutes so we'll start the clock and go ahead start brainstorming keep it really high don't think about who's going to build it how it's going to be built it's going to be like really low fidelity high just sketch out some ideas so go ahead and sketch I'll tell you after when you have about a minute to go I have a question if regular gas companies cannot provide it three days then any app will not do well yeah again like this is all an imagined world where there are perfect gas companies that provide gas today okay I think we're about halfway through have about 20 seconds to go okay I think we'll stop now so let me just try and take a poll like how many people actually could fill all six of those areas with excellent we have two how many people could fill four excellent how many people filled in more little squares than they thought they could fill okay good so you know like I think this hopefully this was a fun exercise to do you know the idea is just to get those juices flowing in your head and it's it's a really great exercise to do in a room with four or five people and then and then really you know be able to share those ideas with people now I think the one thing that you need to all be aware as a great designer is not every idea that you come up with is a good one or it might be a good one but it just may not be a good one for that specific scenario so the next step from this and we're not going to do this now but the next step of this whole exercise is either you brainstorm with those six ideas with other people or you take those six ideas and you do a one-up so what that means is you take chuck out or throw away five of the bad ideas from those six take one and kind of turn the sheet over and make that into more detail and then you can start getting feedback on that idea so let's move on to prototyping you know once you have that idea like we mentioned before you know the user is central to this process so I think I am personally a huge believer in going straight from like an idea to a prototype I no longer use Photoshop for any of the work I do because I realize that users cannot engage with Photoshop they don't know how that menu is going to pull down or that the button actually clicks or that there's a drop down or anything so it's much nicer to go straight from the to a prototype it's much more realistic for a user you can get much better kind of better feedback loop that the user is in and really be able to engage with them much more realistically and especially with things like Twitter Bootstrap and other sort of frameworks like that prototyping has become much much easier this specific sketch is actually from an interview that Dave Gray did with Jason Freed and if you haven't seen the interview you should it's half an hour of sheer awesomeness now of course creating wireframes is always an alternative I think if you don't have the skills to do HTML then definitely create wireframes but for those of you who don't do HTML and CSS and think that you're designers I think it's time to learn to do HTML CSS and JavaScript don't feel so scared it's not that difficult to do yeah so you can always do wireframes there are lots of wireframing tools out there Flare Builder and OmniGraphil and Balsamic are my favorites but there are a whole bunch of tools out there there are even some that are completely online as well okay I guess the the next important stage is testing you know if you need to get feedback from your users now when you approach your user it's really really important that you don't use jargon there are a whole bunch of designers that I know will go to the user and say you know this was our design process and here's how we thought about your problem and this is how we approached it and blah blah blah the user is not interested in any of that instead when you approach the user ask them really directed questions like here's the page what's the first thing you would do on this page or how would you go about creating this element ask them questions like that so that they give you they're able to engage and they're able to think about it the other thing that I found very useful is actually having usability tests with other designers they're able to engage with the product differently and you can actually have the designer talk you through what they are thinking as they are engaging with your prototype so that's also been very you're probably wondering what gorilla testing is it's something that I found very useful and it's actually fun and actually you make friends so lately what I've been doing whenever I design a piece of software is I'll go to like a coffee shop or something and especially if it's a B2C type of software take your prototype to a coffee shop approach somebody who looks friendly and tell them you'll buy a coffee buy them a coffee if they'll engage with your product for five minutes you get anonymous feedback totally kind of objective feedback and it really helps you improve the product and there's also lots of UX testing tools out there that allow you to do remote testing my favorite is this thing called Intuit HQ you can see here this is a TED the TED site being tested for a redesign so it's really straightforward this Intuit HQ basically they ask you like they allow you to put a screenshot of your product and then ask you to type in a question in this case you know how would you view upcoming TED conferences and then it tracks the mouse the mouse of the user and then gives you results based on the mouse tracking and things like that so it's a really great testing tool and it's quite affordable of course there are several others and then finally finally you know you might have the best design in the world but then if you don't have an engineering team to build it then you know we might as well all go home right so I think the first thing this is also another idea that came up from the game storming book it's called Four Seas so what the idea here is that you get before you're building a product get four disparate groups into a room so in this case you might have product managers focusing on the characteristics you might have marketing focusing on the characters your engineering team focusing on the components and then say your ops and database team focusing on the challenges and so you get all of these four kind of groups of people in a room to write down you know what they think about this product that you're proposing and that really empowers your entire company they bring everybody on the same page as far as the product and kind of inspires everybody about the product and it really puts the engineering team in the center of the process I think so there's that's one thing you know I in there are like lots of design center companies where designers are in the center of the solution or the problem or they're driving the solution basically and in those cases sometimes the engineers feel that you know they need to enable the designer in a lot of companies I've been at like the the engineer usually feels that they are the curator of the of the software and they need to protect the software and the designer is out there to screw with their zen basically but we're not doing that we're all working on this together and it's important that you you know build that relationship with your engineer and empower them the other thing that also has really helped is setting up design standards and guidelines that engineers can follow recently actually at allegiance we set up about six months ago we set up a design guidelines and it had everything from capitalizations to colors to fonts to everything and one day I was having coffee and I heard these three engineers fighting about what the capitalization should be for table headers because it wasn't in the design guidelines and I was like yes success so you know so you can inspire your engineering teams to follow design guidelines and be inspired to bring in design and design thinking into their processes and finally you know communicate the mistakes so they're not repeated what we've done in the past that's been really successful is have like mid-week design reviews where the engineering team can come and show show you what they're doing and that was really great because the engineers themselves started building kind of cool ideas into the system sometimes they were a bit crazy but you know if they're inspired I think that's a good thing and this is my last slide there are lots of tools out there to maintain templates and patterns which help establish the guidelines throughout your throughout your company I think one of the my favorite is pattern where you can save your favorites and go back to it and refer to it in the future so that's the end of my talk this is my contact information I would love to get feedback from all of you and I think we have about 15 minutes right for 10 minutes we have about 10 minutes for questions. Hi my name is Amit good presentation thank you and I myself am a UX designer and have been working on a lot of these things what you taught in the presentation one thing which I wanted to ask was how do you ensure visual design if you say you don't want to like skip the photoshop part and directly jump from wireframes to html and you also ask us to like learn html I know html yeah but like if I create html I have those prototypes but eventually that needs to be converted into an application it needs to go to the developer so this is one question and with the same question actually how detailed do you want to go to the wireframes uh the same question I had for Navjod also yesterday we were saying like a very crude uh wireframes that you're creating like paper prototypes and these starting are good for ideation and stuff but eventually you need to communicate those things actually elements in your page to the visual designer also so few people actually in wireframes do go like give them the background the focus to some buttons so that visual designers also understand what needs to be given more focus to so how do you ensure those things when you're advocating not to use photoshop or skip that I think well I guess it depends on whether you're developing a new application from the start or it's you know some features that you're adding to an existing application right so let's take the scenario where you're adding features to an existing application it's a little bit easier because you probably have a design guideline that's set and you're following a certain design guideline and so what we've done in those scenarios is actually create our own sort of bootstrap with all of those visual design elements in in there so that it's very easy to just take and build a form or a wizard or whatever so that's obviously the easier way I think when you're doing a new product what I've done actually in the past is first focus when you're doing usability tests you don't really need to have the visual elements at all so rather it's the layout it's the interactions and all of that and that we've just been able to do with bootstrap and things like that but then we send that eventually I mean if it's a new product I think you do need to resort to photoshop there are actually a lot of visual designers now that are just working directly in CSS and HTML and that actually is my preference because a lot of times that thing that you build in photoshop when you build it in HTML it doesn't really look the same or it takes like crazy amounts of effort to make it so I hope that answered your question yeah hello cool um earlier on you had a slide which had this survey you can give users so like what's your frustrations what's your ideal experience now on a lot of websites there's like a bio description on the user profile page where they can edit their account have you seen any websites that actually ask those questions on that little user account page it seems like a valuable thing to do yeah no I haven't and I think that would be like maybe that's the next piece of software we build cool all right sweet yeah it seems like a good idea I'll probably try it cool sweet hey it was really nice um so design thinking um since you've been practicing it for some time I've I've come across the term the process for a few years now I've also attended a couple of workshops around practicing empathy and brainstorming things like that I tend to kind of not agree with the I'm guessing just the naming of the thing because thinking to me or a process to me is really about automating stuff right it's about removing thought so that you can keep repeating things and given that here we've called a process design thinking that to me sort of seems absurd as a as as a name and I'm guessing that that's been one of the big reasons why I just haven't gotten into following some of the practices I mean the general ideas of practicing empathy and and understanding and spending time with your users are great but the name itself is dangerous because a lot of people might confuse it with real deep thought and understanding rather than you know a process thoughts what do you think I agree with you I think like the name itself go have a discussion with Tim Brown they have lived reply to that but I do agree with you and I think I sort of mentioned that earlier on I mean just because we're doing a B and C doesn't mean that we're building like awesome software right I mean you can always like I think a lot of times you know like if you know like awesome product managers or designers who really know their space they really know their users sometimes they just use their gut and you know they just be like yeah I think we should just do it this way and they put something out there and users love it so you know I don't think we should get caught up in processes and I also I think we talked a little bit about this last night I mean I agree with you it is a little bit dangerous especially when enterprise customer companies you know latch on to these sort of terms and then do it half-asset you know they don't they'll follow some of it they'll try to do some things and then like all of a sudden they'll tell their customers that you know we're doing design thinking and our software rocks but in reality it actually sucks but so I think I mean I don't think we should I agree with you that we shouldn't get carried away with these processes and things like that I mean the the whole goal of it is basically to design for the user keeping the user in mind so I think you know we can forget about the term but just remember the fact that we should design for your user hi hey we have a request for your UX testing tool slide somebody wants a copy of this to see the slide yeah I actually I can I can send you the whole slide deck and actually I have four or five pages of resources but anyway there are four or five slides of just resources that I use for this talk all right so we'll be putting that up online yeah one question so my question is that what design process according to you will be suitable for a product which tries to bring in some kind of behavioral change in the users so you what kind of you're trying to bring in new way of doing certain things you're trying to bring in behavioral change in the users so what design process would you recommend for such kind of products I'm not okay I can give you an example yeah so see so a few years back there was no Facebook right I was quite happy with awkward I was happy with the way I used to do things but then then comes Facebook and I got a new way of doing things and I found it quite cool probably because my friends are moving to Facebook so I also moved to Facebook but that's not what I really wanted at that point of time so how do you design such kind of products which tries to bring in this new way of doing things I don't know if I necessarily have an answer for that there is like one really interesting book that I read recently actually was an article called the fog method of thinking and I think it's a method that Twitter and Facebook and many of these social sort of networking sites use a lot of but it's a psychological type of approach to design where basically there's that I'm forgetting exactly the terms but there are three different things that happen there's a trigger there's like a reason and something else but the idea is that you try and segment all three into this at the same point of time for a user so you might want to read a little bit about those sort of things because I think companies like Twitter and Facebook and things like that they follow a lot of these sort of psychological principles for design but I myself am like not very familiar with other things about social and how social networking change behavior through design sorry hi I have one question you were suggesting you were suggesting to escape the photoshop entirely so in many companies are having many visual designers they all will lose their jobs well that's why I suggested they should learn html and csl that front end developers will lose their job what then front end developers will lose their job front end developers should need to learn JavaScript and jQuery