 Actually, I should thank myself as well because I missed my flight. I canceled my hotel bookings, so it was a hectic journey to Dublin from India. Today, we are going to talk about design, design principles, and what MVP is, and what are the design principles for MVP. So my name is Junad, Junad Masudi, and I'm a front-end developer at Acquia, and I have come from a beautiful place. Yeah, it's called is Kashmir. It's in the South Asia. So it's a short video of a place where I live. So what do you think when I say the word design? So I guess probably you get an idea like when I talk of the design, you might think that I'm talking about something finely crafted objects, like logos or posters or something like which we can hold in our hand, but which are actually classic icons of timeless design. But today, we are not going to talk about that kind of design, but a kind of design which we keep in our pocket and we may not have thought about it. That kind of design we are going to talk today. We're going to talk about the design of digital experiences today. So consider like if we talk about the Google, which process about one billion queries every day, and in about every one minute, hundreds of minutes of footage is being uploaded on YouTube, and that's in a single day more than if we combine the three major networks of US, what they broadcast in five years is what Google broadcasts in a single day. And if we talk about the Facebook, it processes images, photos, text, and to 1.23 billion people every day. And that's about one, one by six of the humanity. And designing to this scale is not like very easy. It's very hard to design at this scale. So to design at the scale, we have to keep two things in mind. One is audacity and another is humility. Audacity is something that you have to believe that if I am designing something that it should be something that the entire world will have to use it. And humility is something, it's not about your portfolio or something. It's about the people you're designing for and how your design will help their lives to become easier. Now unfortunately, there is no school for design for Humility 101, but while we go down the line as a designer, we have to educate ourselves how to design in that way. The first principle is we have to keep one thing in mind that little things really matter. So there is nothing like a big or a small thing when you design on a page. Even a smaller and a minor detail that really matters for us, right? Here's a good example of a like button on Facebook. It's a very small object on like a block on Facebook. But designing that, it took about 280 hours to a designer to design that small piece of button. But if it comes to me, I'll say it will take me just hardly like a 30 minute or 40 minute work. But it's not like that only. What we have to keep in mind, the first thing is the height and the width proportions, it has to render in a lot of languages. We have to degrade it gracefully on older browsers as well. So yes, that's why we have to keep this thing in mind that everything on a web page matters. Another thing is design with the data. When you are working on a project which is on a very large scale and you have an incredible amount of information with you. And with that information, you can influence your design decisions. But it's not simple as following the numbers while designing with the data. Let me give you an example of, yeah. There is a tool on Facebook with which we can report that if something is in the violation of the community standards, things like spam and abuse. There are tons of photos that are being reported every day. But there were actually a small percentage of photos that were violating the community standards. I mean, that were being reported in the violation of the community standards. Most of the photos were reported were party photos are bizarre. And there was an engineer at Facebook, he was like something is not going well. So he had a hunch and he was thinking that something was going wrong. So he went back, checked the data and came with a solution. Now the data he had in hand and the patterns drawn, it was like a large amount of photos were reported by the people themselves who wanted that their photos shouldn't be on the Facebook. So they added a new future where you can allow that allows a person, that allows you to message your friend to ask them like you don't want this photo to be on Facebook. But again, only 20% of people did this and it was like only 20% people reported. They went back and worked on it. They talked to the people who are experts in conflict resolution. And talked to the people who have studied the universal principles of polite design, polite language. I never knew that there is a language called as polite language as well. So and they found something interesting. They introduced a new concept of telling your friend how you feel about this photo. So with the amount of data in hand and extensive research on data, this is how it looks today. And research said like from 20% to 60%, I mean say like this has increased to 60% the report abuses that are being there are the photos. And the same service showed like on the both sides of the conversation, people feel better. And the same service showed like about the 90% of your friends wants to know if they have something really bad to you or by uploading your pic. And I don't know about that 10% who they are and maybe. The word user experience is something, the definition of user experience change from person to person from place to place. But the broader definition of user experience is the common sense. It doesn't need development, it doesn't need any knowledge of any technical knowledge when we talk of the user experience. User experience is common sense. How a person feels about what you are drawing or what you are creating. How a person feels about it. How you are attaching their emotions with the thing you are designing. That's what user experience mean. So if we talk of the principles of design, like there are four or five basic designs, sorry, principles. One is the balance. If we are creating something, we have to balance it all through the page or all through the app. It shouldn't be like overweight from the other side or something like that. Alignment is also important, it's very important to align the blocks or regions and emphasis on a thing that's the most important part of the page has worked with, finally, even on the newspapers as well. We see it every day. For position, again, we have taken it from the newspaper designs and we are using it. And the movement, the flow of the content, that's more important. Like when we go down to the page, it shouldn't be like from least important information to the most important information, it should be vice versa. And pattern, yes, if we are repeating objects and we should make sure how we are drawing the patterns and how we are showing it on the page. So as I earlier said, there are thousands of design principles, but the most important design principle is a common sense. Let's take an example of a cart. Every designer is using this cart on a e-commerce site. But what they do is they make some refinements and produce the same cart. But what if a designer comes and creates something else? I mean, say, which is not even like the cart or something, but it replaces the cart on their side. How will you feel about that? I think this is where the basic principle of user experience comes into play. If you have an object on page, you shouldn't be thinking what this is going to do. It should be self-explanatory. That's how it should be. If a user is stuck on your site thinking about the block or the content or a button, what it does, that means it's a bad user experience. Yeah, even if you can't make it self-explanatory, at least make it self-evident. So one most important from the user side is how we are using the web. One of the research showed that if we are creating a page, suppose I don't have a good example right now. Yeah, if there is a page, it has a motto of ABC, but a user is using it for some other purposes. So it only happens when we don't have a good user experience. So for example, LinkedIn, yeah, some of the people use it for flirting with the girls. But it has some other purpose. It's not like Facebook, so that's where it comes into play. We are very much into like, from our childhood we have red newspapers and we're very good at scanning the pages. We know what the hero title means, what this block means and that block means. That's what really goes with the websites. When we scan a website, we don't go block to block, we don't go from content to content. We just scan it. It should be self-explanatory to tell us what the site is all about. There is one more thing called as billboard design. We see billboard and the attractive thing is in like a very big font and conditions applies like a smaller. So that's how it should go on a website as well. If we have something to sell or if we have something to show, cause it should be like a billboard design on a website and rest of the content should be down the line. When I was talking about the cart, if we are going to change the design of the cart, designer has to keep in mind if he is like inventing a wheel or he is just creating a new rolling device. So he should be sure of the thing. If he's replacing something with something else, he should be sure that it's going to rock. Otherwise, it's not a fuse. So if we talk of MVP, there is another term we call as MMP. And Eric Rees has written a great book on difference between MVP and MMP, where he has inspired millions of people while creating a product from MVP to MMP to a full product. So earlier it used to be MVP and then a product. Now it's MVP then MMP. MVP means minimum viable product, MMP means minimum marketable product, then it should go. Why this division? Because many of the designs had this notion and they used to say like a marketing team comes to them and says, hey, this is not working. This should be like this. This is not working. This should be like this. You know, when we are doing a user experience on a thing, marketing team should be away from it in first place. So that's why it should be MVP only. It should be between developers and user experience guys and then it should go to the marketing team as an MMP. Then you can sell it as a full product. We are now more conscious on test to before you invest principle. And with many projects starting, we have hypothesis which is answered via MVP, MVP release. If we think like if this thing is going to work or something, so we have MVP for that. So what are the design principles for MVP that we are going to see? And so MVP is like this. It's a small illustration how MVP should be. It's like, yeah, that's how it looks like. For some people, the first version of product doesn't need to be nice or perfect. Just go early with one single killer feature. So the concept you are trying. Find out what market actually needs and what you are actually selling to the people. Technically, I agree with the MVP concept here. And regarding the minimum effort and time to test this product in a market rather than waiting for one or two years for full product to come in with all the features. But this doesn't mean your product should literally go ugly and minimum. It means you have to deliver qualities along with one of the single killer feature. If we talk of the design principles for user experience, here are some of them. It should be nice and simple visual design. You don't have to go with a lot of imagery things. You don't have to go with a lot of transitions and stuff. It should be very nice and simple. And if we talk about them one by one, there should be unity. And we already talked about it. There should be balance on the page. If we are in a Drupal Center project, we talk about blocks. If we place blocks, they should be symmetric, not asymmetric. Even if they are asymmetric, they should be in a visual equilibrium. And the hierarchy is most important in any project. Elements should be arranged like from, it should be arranged like if there are four items and they are part of something. So they should align accordingly in trees or desks or weights per the block should begin. And scale and proportion is one of the most important aspects of any design. How we are relating this content. If you have a block on this page, how it's going to relate it to the other block of the page. Why the ratio of a block is actually there should be a ratio to differentiate which is the most important content, which is not the most important content on the page. And the dominance of something we already talked about is like the contrast on the page. It should be like visually differentiated from the other things. And if we talk of similarity and contrast, there should be actually a contrast on a page. It shouldn't be like, I mean say the colors should be differentiated in a way if there should be a clear separation between the elements like from the black and from the gray and whatever we have. Second is the giving the user an onboarding screen to show that the unique value of the product that you are selling. Onboarding screen is a sequential screen of two, three, or maybe four, four slides that comes for the first time when an application is open. The screen actually consists of three or four screens and talks about the product, what your product offers, and how it's going to solve their problem. But as most of the user quickly skip the screens, when the user skip the screen, he should have that wrap in mind what actually this product is offering me. So there should be a nice visual intuitive design for the onboarding as well. This is the onboarding screen for Airbnb before we log in or sign up. It's very, they have used nice and appropriate pictures to convey the home-like pleasant feeling. Again, it's about creating the first impression. And the other thing is to welcome your users and walk them. When we log in to an application or something, there should be another screen called as a welcome screen where an application should give a short tour about the offerings of the application itself. If a product is new and unique concept, make sure you walk users through the process. And the goal is to give them a feeling that they have succeed to manage and understanding the concept. This is a welcome screen, an example from three applications. Even we can put some coach markers or the welcome screen as well to tell the user what this menu or this specific item does. And if we have some empty screen, we should also utilize that in educating the user what this empty screen means or how to fill this empty screen. And the most important thing is preparing the FAQ that accommodates the question that may arise from the user's side. Because it's the only MVP where we can grab most of the user's things so that we can accommodate in the full product. And this is the most important thing, managing a micro feedback on a site. Here is a great example by Uber, how they manage this. For example, Uber asks you to rate and comment a driver that you drove or rode a car with. By collecting the bits of information from user who actually engage with your product, I think you can use the data to improve your services as well if you have some queries to the driver or something. So that will help the Uber also to get better next time. Now, there is one more thing. It's like changing in the already existing design. If we have a design and we are going to change it, make clear that if it is helping you out, I mean, I'll give you an example, you'll understand. These stars were something we used on YouTube as a rating from 1 to 5. But it didn't work because a user was giving a 1 star or a 5 star, 2, 3, 4 never worked for YouTube. Then they came with a like and a dislike thing. But it is said that billions of people were not liking it because they were already used to the stars. What the YouTube did is they ran a poll for two, three months. They came with a lot of news bites about changing it so that they make an impression on the user's mind that they are going to change it to something else. So it shouldn't be like that. It was YouTube, but in many of the products, it won't be like that. We can't spend such amount of money. And for Drupal, UX has been a big deal always because what kills a product is the number of clicks. That's the most important. There are talks like it should be most of clicks or most of pages. But Drupal is something like where we have to go page by page and we have to educate ourselves about Drupal. If we talk about WordPress and Drupal, I talk to a lot of people, what do you like most? They said WordPress because it's easy. To me, it's more easier to create a blog site in Drupal rather than WordPress. But why people like WordPress is because they have a good user experience rather than Drupal. But I think Drupal, guys, they are moving towards usability and even in the keynote by Dries, he showed the blocks and menus. So it's decreasing the amount of clicks. That's the most important thing. And the conclusion is we shouldn't take a lot of time in crafting the MVP, but we don't have to go ugly as well while creating an MVP. And there's a conference front-end United that's happening in May 2017. If you want to join it, you can. And there's a contribution sprint that's happening on these dates and time. Any questions? Okay. So you can evaluate the session. Thank you.