 Hi, I am Jonathan and topic for today is UX design process. How many of y'all are designers? Actually, not front end developers, just designers. So how many of y'all have done any UX design process? Just put your hands up. I am just going to run through a generic model of UX design. There has been a lot of puzzles around UX design and what is design and what is so cool. So there is also a lot of identical puzzles being thrown around information design, interaction design, information architecture and no one really knows where anything fits in. So maybe we can get some clarity on that also. So first thing is, manage the work design process from your mind. Design is a process. It's the way we are creating something. We use it to create things, we use it to make. And a process is just a framework. A framework for talking about UX design. And it's a framework for tools we use to accomplish it. So the elements of UX, some of you guys have heard of the elements of UX by Jesse James Garrett. So the elements of UX was first created in 2000. It was a conceptual model of how to detect the UX design problem. And it was first created in 2000 just as a play diagram. It's been adopted in software development and in industrial design. So let's just go through it. It starts from the abstract level and moves to the concrete level. So at the abstract level you have very abstract concepts like business goals and user needs. And right in the concrete level you have how the software actually looks and works. So on the lowest plane you are not concerned with the final shape of the product at all. And on the highest plane it's only the appearance, only the colors, only the concept. So the choices you make at each level will implicate the choices that you make at a later level. So there is a ripple effect that you will see. So let's start with the strategy plan. So on the strategy plan you've got user needs and product objectives. So user needs is there to understand what the user needs from your product and how that fits in with your own business goals. So you use user segmentation which is demographics and psychographics to really understand all your users, classify them, quality of age, mindset, maybe even technology in mind. So we can use user research, usefulity studies, great personas. So our product objectives are business goals and branding. So we really get product objectives from metrics. So you can only see from product objectives you can use success metrics to map out whether your software was better before or after. So on the scope, this is more of a really software development angle that's been brought in. So you can only see functional specifications which the software required me talking about. But content requirements are the latest content elements that can be required. And this is just not writing a text for your application or site. It's also the CMS considerations that you have to take in the program. What kind of database do you need? So in the scope, there needs to be very different. You've heard of these companies that go in this perpetual beta phase, right? And they never really release anything. Because they don't know what's in version one and what's in version 1.1 and they keep flipping features back and forth. So the scope is very important to know what you're building and also to know what you're not building or what you're going to build later. So now here it's getting a little technical, but the idea is that interaction design and information architecture are really not technical. They're ready to understand people. So the user will know when to sponsor a system. So the way we structure our system will guide the user through the application. So the structure really helps in creating a conceptual environment for the user. And interaction design is how the user will be able to sponsor the system. So for example, the conceptual models. Like for example, how a shopping cart goes. It's a container where people can drop things to buy later. Or conventions and era hand that would come in interaction. This interrupts me if there are any questions. Information architecture is the arrangement of elements in your website. So the arrangement of content will facilitate some understanding or whatever understanding you want to make. Our website is not really a collection of pages. So what you see most of the time in information architecture is site maps and page diagrams. It's not a collection of nodes. And each point of information in the site is just a node that's connected to another node. So at the skeleton level, we've got information design, interface design and navigation. So if the structure was how the product will work, the skeleton is the format. Information design is presentation of information for effective communication. If our information is not clear, it doesn't matter how interesting we try to make it. What cool paper effects and post it nodes and drop things we could. If it's not clear, no one's going to understand. The interface design adds those elements into it. Should we use checkboxes or radio buttons? Should we be using a dropdown or should we be using tabs? Do we have global navigations or do we use a hub and spoke one? So these elements are really found together. Later when we go through a case study, we'll actually see that you can't really separate these elements into nice neat gray boxes like this. They're very integrated. And all of this together actually in the skeleton process. In this plane, it's vibrating and prototyping in the real world. And the surface, it says sensory. So sensory design is what clients refer to as look and feel. That jazz, that wow effect that people want. So smell, touch, vision, it's all comes together in the sensory level. All the people say senses are, you can't really hear and feel the interface. But if your entire app speaks in one voice and wears the same clothes, it has to look the same. It has to have one personality. So you're getting to more tangible design deliverables at the top. So here you've got very abstract looking things. Sorry? So that's what you're supposed to do with this on this plane. On this plane, you're supposed to set that color value. You're supposed to set that grid. You're supposed to set your time. This is the level at which you really set how you want your app to look. The feeling that you want. So we just go through a case study and put it all together. So you can't really have any boxes like this. That's very gray areas and it gets very, very close. So let's see how the process works in an actual situation. So this is case study number one. It was a redesign of NID.edu. So the National Institute of Design is supposed to be the previous design institute in India. But it's also a government website so obviously their websites suck. So I actually worked on this project a few months ago. It was a redesign of NID.edu. And it was a three to four month project. So we just go through it. And you'll see the entire elements of user experience that we had in the previous thing. I mean that was like an ID, utopian design world where you had designer gets as much freedom and a lot of clients willing to pay him money for as long as he wants. What do you have that lines? So you can't really see. So the process changed a little bit. At the start we had internal discovery, user research and comparative review. So this was just a three week process. So internal discovery and then we had information architecture and then prototype. The rest of the process was again a iteration of information architecture, another iteration of prototype and another iteration of information architecture before finally going to the visual design. So this was some of the background research that I did. The history, the history was actually 50 years old. It's got about 50 years of history. It started in the 60s. So actually checked out their old books, their old photos, spoke to some alumni. So in internal discovery actually found out the roles and motivations of the people living in the institute. And every feature request or improvement that happens in any system will be motivated by something. People have their own motivations. So to figure that out, you have to do internal discovery. Figure out why people want that feature on their site. Why does the administration want an internal thing but they don't want an internal section. So this gave me an overall understanding of the institute. We did a comparative review about the top 30 design schools all over India and the world sorry, not just India. So Delft, SVA, Stanford, RISD, a lot of colleges in Europe. So just to give you an idea of the competitive review that we delivered, we had a screenshot of the page of a competing site. And we had the lessons learned from that site. So you have the name of the site under URL. We have what works and what doesn't in two basic blocks. So direct links to news, combination of audience and functional groupings and what doesn't was large file size backgrounds but our system doesn't work. So this helped us really figure out what the competition is doing, how are they solving problems that we might face and if there are any common solutions can be adopted. So user segmentation was user research that people referred to. So you go and see who is really using your website. And you segment those users based on their behavior patterns. So we figured out that the three real, the four kinds of audiences that we're dealing with were prospective student, inquisitive parent, potential client and district community member. So each of these four audiences have their own separate motivations and goals. So we actually summarized each of them in a quote. So the inquisitive parent would probably ask, like I don't understand what my child is studying at NID. It's something to do with design and computers. They don't really get what design is. So this was an example persona that we made. So in each persona we've got a quote to represent that person's understanding. Like the course names are confusing. What is the difference between new media, digital experience and information interface design? There's no explanation. So this shows that there's a lack of explanation on the website. You can understand that. Then segmented user going to key characteristics. So these characteristics separate the persona from the other personas. The goals, questions that they have, and frustrations are paid points. And we added something else in the design process. So we added frequently used interfaces. So we have some idea of the interactions that they are comfortable with. Are they used to age ads? Are they used to any static pages? Are they used to checking mail only? So for the IA part, we started with the content audit of the previous site. We did a complete Excel sheet of all the main pages and sub pages and sub sub pages and sub sub pages. And we put it all out here and we said, okay, let's restructure all of it. It was one big wall access and designers love post-its. So we added post-its. So it was 116 iterations of just the information architecture. And then we went to Lofi-Delay product. This is now getting close to the structure plane that I spoke about earlier. So this we're just concerned with the, just not the form of the application. What is function? How will things work in relation to each other? Will the navigation be on the top or the bottom? Will the main header be from the top on the left? How will they work in relation to each other? So I like to use pen and paper for this. Lofi-Delay is the best one that pen and paper. The hyper-Delay prototyping is that we got a little more detail. It's in the form of how it's going to really appear. So separate color treatments, we tried different things. We tried different interactions. So this is where we now get into navigation models and interactions. We tried different behaviors. So we made a clickable prototype so that people can actually, so we can test how people react to a menu design. Tried a couple of different menu designs, things popping up from the bottom. And then the final product. So this is just the, it's not the complete form. It's like a half-pitched form of the design. We've got all the pieces plugged in, but there's no visual treatment about it. So no sensory appeal, but just lack of it. So it doesn't really say anything. Then we move to visual design. So the visual design page, it's ready. It's in that place, it's ready. You need to have some design principles before you actually start your vision. What do you really want to say with your graphics? What do you want to communicate with? So you need to develop some design principles. You want it to be clear, clean, clutter-free. You want it to be fast. You want it to be dramatic and classical or elegant. So these are the words that you can add to your desktop when you're creating a design principle. So again, menu iterations, we fleshed out the entire, there are many, many page types in that video. This is when we get to the sensory part of the development. So at this part we really say that, okay, if you've got six categories, how can we change those categories? So we choose colors, not just for clarity. We choose colors based on the meaning, the semiology. So red is associated with bigger willpower and leadership. We use it for the faculty page or for the administration. If green is tranquil and refreshing, we use it for MS. And Georgia Varano straight away, industrial design decisions that we took because it's there on every system. And this was the final design. It'll be out in a few months. It's a dominant thing. Remember those content requirements I said, I spoke about? So since they have a CMS running in the background and they have a person sitting and doing data, you need to specify content requirements. You've got to say, okay, the title is going to be only one of the characters. The body is going to be 500 words. So we've got content requirements for the entire website. Image sizes, color depth. So this is case study number. Any questions on? Yeah, I have one. So when you're talking about the process, you have to go through the migration one after the other in terms of by getting what I am, the content strategy. I wanted to know as to like, when did you validate that how could you validate whether you're doing this right or not? Going back to the... So we had really, for this project, there were no validations that I did. It was an open logic, so there was a committee, a website committee. So I had to present this to them and they would give feedback and I would change or not change the point of that. We would also do user testing. I do user testing because I would be sitting on campus. So user testing was like an everyday thing. What do you think about this? More like quick forward testing. You just draw something and then you show it to someone or quickly change something on the screen and show it to them. So that kind of thing happens. So when you're talking about user study, kind of like these are going to be our focus rules. You know, focus rules. But when you're talking about these are going to be our response. They could be various, right? So as part of the discovery phase, what we did is, in our user research, we looked at the analytics of the site. So we found that a lot of people are actually coming to the post-graduate page. Just a list of post-graduate courses. They're trying to find out the mission needed. And while I was doing this project, the admission season was on. So we actually got a chance to speak to parents, speak to students. And we actually found out, they would be like, what are the post-graduate facilities? Who's the post-graduate? What are they teaching? The admission was not on the website. And since it is an academic institution, you don't actually have those many daily users. You have students, you have parents. You have prospective students. So I was lucky that we were able to do much research. But within once those user groups were defined, actually we figured out that the individual target audience had to be targeted one-on-one equally. So after we figured out that we were going to target students and parents, we actually had to speak to prospective students. And figured out, okay, where do you... what do you put it for on the website? So you don't really... people will give you their opinions. But their opinion doesn't really matter. People don't know anything about it. They never know anything about it. So you have to really figure out, you have to keep probing them and find out where they actually had a small conflict in their entire process. They say, oh, I clicked here, but then I couldn't find something, so I went there. And that day, I did not like that thing. But actually the problem was on the previous day. Problem was that they couldn't find what they were looking for. So there's a lot of open-ended questions that we have to ask. So it seemed like in your case that it seemed... there could be various approaches, like, you know, let's not worry about what's there in this case. And we will take a fresh restart. Sometimes in your process, you actually might have to cut that or reuse what was there. You know, these outcomes like a bit of mind-maf, based on what was the base structure, the sideline, what's in the context of the other thing. So what made you really do that? And how exactly you came to the conclusion that, okay, this is how we can best restructure the pages. Did you make a decision on drawing something because if that did not make sense? Yeah. So the only reason I did the content on it is because I was worried that I would miss something out. So you always have to take and take what people have. People have made it till here, right, with the product page. So there's no point throwing it out completely just because it doesn't work. You can take the good parts from it and then improve whatever you want to improve and add your own on top of it. But if it doesn't make sense, I mean it's up to you to improve whatever. So I actually got rid of a lot of it. I added a lot, which made much more sense. So you did a new feature. People are thinking, this is going to add good. What do you do about it when there's no content in itself? Like you require a content, say A, and people are supposed to be content. What do you do with the gap that's there between... What to do when there's no content. It's a common problem because people won't design and they don't want content. It's supposed to start with content, but so in cases when you don't have content, what I do is I structure it anyway. It's a blank canvas. You can say, okay, there's going to be a heading on this page, there's going to be one paragraph on this page, and there's going to be one image on this page. And then you give those requirements to the person and say, I want this content. So you can be with the template or you can sit back and say, I won't work until content comes. You can do that also. But I think if there's no content, then at least the structure of the content can be developed. Also, what do you do? Kind of content you need. So if you say, I need content of this type and they say I don't have this type, but this adds to the overall... So it's okay, say you're designing a sports website for some sports team, and you say videos would be very cool. So I want videos, but they say we don't have videos. So you can hire a videographer to go and do it, or you'll have to come up with all three types of ideas. I mean, a large part of the design process is working with constraints. And thinking outside the box is very overrated. Thinking inside the box is highly underrated. How you work with those constraints, the more constraints you have, the better your design is. So what I did was... I'll just go back. So what I actually did was I defined page objectives for each page. So on the home page, I want the user to... This is the main action. This is the primary action, second action. On the course page, I want this to be the primary action. So if we didn't have content to start with, we had terrible content. And for some pages, we didn't have any content. So like I said, if the content is not there, you can at least create the framework for that content to be there. And then you play with it. So sometimes you have to use lower-miximits or dirty hack. But yeah, you have to do it sometimes. You seem to talk like it was like a three-spoon process. Yeah, because it's an idea. I guess we're going to decide, how do you... You didn't say anything about the clients you really knew. So the clients were actually some of my faculty. So... Designed by committee is a pain in the ass, honestly. It was a very big pain in the ass. It went smoothly in terms of how I communicated with them. I was able to rationalize a lot of my decisions. So they accepted it. But... I mean they will still say that we want faculty to be on the front page. Because they are faculty. They have their own motivations for it. We want faculty profiles to have awards... and awards data type. I mean... No, I mean they are open-minded. It's not like they are not open-minded. They were open-minded people. Very open-minded. But Designed by committee is... it's not easy. Some bad memories. I got a question. So... it actually wasn't easy because NID did not have any branding guidelines. They just had one logo which was designed by some German guy in the 50s. And... So that background research that I did actually shed a lot of light on that. So a lot of old photos. A lot of history. That's sitting in the library in NID. And no one knows about it. So I said, why not build on that? So... So this background image... you can't really see properly. It's one of the old photos. It's Adrian Frutiger actually teaching one of the first batches of NID. And he's teaching a class in semiotics. So you're actually given that background image a half-tone shape to give it that mechanical feel that hand-crafted feel from that age. And we've also given it a monotone, half-tone color. So we tried to get that image back. People had... the committee did have some other order. They were saying, no, it should be super simple. And then there was a family that said no, it should be colorful. It used to be bright red. Designed color needs to be there. So... But we were able to compromise on a couple of things. Sorry? I see that. You're going? A rounded corner. A rounded corner. I was tired of rounded corners when I was doing this actually. Okay. It's very... Design is opinion-based, right? It's largely based on your thesis. Not your CSS. Class of UI designers or US designers, you need to complete a project like this. Because, you know, I'm an engineer. So I... So this is what I was saying, right? I mean, the areas between this, they're very great. You cannot... You can't really say someone is only an interface designer, but he cannot do information architecture. A person that wants to do any of this has to have a combination of skills. You can't say who I would only set type on the data. So hopefully you want to consider, you know, US designers, you'll see that something like this end-to-end, giving the programming part of the screen. You're saying end-to-end designers. Like, full process. Lead to HTML CSS and there's parts and all that, right? I mean, remaining things like what fraction of you do this by education or by experience? I think everyone can do this. I think everyone. I think... I actually think people... People come up with this question first. They think that, you know, I won't be able to do it. But actually I think it's not that difficult. Design. By process, by process. That's all fancy, fancy, fancy. It's made to sound good. Yeah? Sorry? Yeah. Sorry? It's disturbing. Yeah. That's okay. That's okay. Fine. It's disturbing. I like it, so it's there. Yeah. I mean, yes, there is that alternate version which is, you know, clean, stripped out, only the information, right? Yes. There's only black and white gradients and just text. I mean, that is the cleanest approach to the information. It's most clear. But then it lacks any personality. What we also need to convey is some emotion, right? That NIDness that she was talking about. How do you really say that this is a 50-year-old institute with 50 years of design heritage? Okay. How do I do that? I don't show photos. If I don't, it's 50 years. So, one of the approaches that we took was this. If I can find a better approach, I'm looking for it. So, metric shows purely page views. We don't have to converge on it. Yes. So, page views are bounded. It's page with the usual Google Analytics stuff. Yeah. So, I had the advantage that the previous site was so terrible that if you had shown that anything, it would be an improvement. So, even with this, but it failed quite well actually in any user test that we did. Even if it was a basic hallway test, we would actually give people a flow and say, okay, you have to go from, you have to find the graphic design course. So, you actually click okay, post-graduate, visual communication, graphic design. We do a printed paper prototype. And, discoverability wasn't a problem. If you have basic design sets, right, discoverability is why do you present the new designs to us or the client? Why do you do that? It's not. Presenting a great brand, right? No. So, I decided to present something which would be an entire UX process. So, I don't get to the entire UX process in all my projects. I thought, I thought that it was a good coverage of the entire process because it starts with user search and goes all the way to the surface of it. The process makes playing time consuming. Yeah. That's okay with you. How many people? There were 11 people in the company. Most people they knew. There is a question with that is so, like, that's really something. So, they thought it was quite awesome. So, I also think it's quite awesome. See, like, it's the most interesting. Simparas. Yeah. The way it is, they see to it that how users So, we did user research and usability. We did that. I mean, those personas were there. I showed you one example for something. I'll show you the rest. I have the entire documentation, I'll give it to you. I can show. You can go through it and take it. I don't have one restaurant. You can discuss this later. I can show you my I'll show you my portfolio. It's all good. So, I'll just go through one more case. It's a shop. So, in I work in Clare Trip company. And the design process that you were saying there's no real design process. You can make up your own design process. So, in Clare Trip, you see what we do. Let me go to Instagram and see. Right? And sometimes you use Photoshop and Omni Graph. So, you do a lot of variations. This is the recent searches that went out. Recently on Clare Trip.com. So, all HTML and CSS, many variations. It's we find it easier because we like working with HTML and CSS. It's much more flexible and agile to work with. And, yeah, that's the final thing. So, this is entire thing was like 14 days. There are no you know, you know, the likes and works. No ads.