 Good morning everyone, we can start right? So, yeah, just to introduce myself, I am Sunil. So, I work at design lab here and basically I am doing this workshop which essentially is going to help you, the whole idea of the workshop is to kind of walk you through certain exercises and concepts that you know, you get familiar with and then you can kind of actually easily apply them in your projects. So, just to kind of give you a sense of like what we are going to do today, right? So, there is basically like, we are going to do about three exercises, right? The first one is basic, I mean it is pretty fundamental, it is just basically kind of, you know, really kind of get you warmed up in terms of how to approach a design problem. The other exercise is basically, which I think a lot of people kind of, you know, find it hard to kind of balance out is how do you balance basically business with design, right? So, the second exercise is really about that. And then basically the other main problem is like if you guys get a project and you got to start it from scratch, like what is the design process to follow, right? What is the framework that will kind of help you make decisions as you go along? And I mean through this, I am going to like, I am picking like examples from Clearwater because that is something that, you know, obviously I understand and you know, I have worked on personally. So, I think that will kind of give you a sort of perspective some inspiration to, you know, start working on the sentence that have been given to you, right? So, I think the main focus today is, I mean obviously design is a very vast sort of topic in itself and you can actually go down, you could have a workshop at a very, very sort of, you know, specialized level but we are just going to cover three main areas. Basically just I think the key is really how do you, I mean first before you approach a design problem like it is very important to understand the context, right? How is basically someone going to use the product? In what context is he going to use a disease? On the move is he, you know, in his house, etc., etc., right? Just understanding the timeline of how the user is actually going to use the product. The other thing is really, like once you understand, you know, the sequence of events that's happening with the user and how he's interacting with the system, like how is the information structured and the last is basically the presentation, the presentational layer. You know, even though this is like, you know, I would say cosmetic, it kind of, you know, plays a huge role in the overall experience. So, we're going to actually talk about these three things. So, I mean, when you talk about approaching a design problem, right? I think the main important thing is really to, you know, ask these questions, right? Who really wants this information? What's most important? And what is the context in some, I mean, what is the context in, you know, what is the context in which the information is going to get consumed? So, just give you an example. You know, this is what a ticket looked like. I mean, if you look at it, you know, it looks pretty clean. It's kind of follow standards and stuff like that. You can see, you can find information, you know, very clearly, but I mean, if you actually think about how the ticket is going to get consumed, right? You can make a lot of sort of enhancements. So, like, you know, you can break the itinerary so that is, you know, you can get a sense of the itinerary in a slightly, I mean, at one glance and then you kind of, you know, then talk about the tablet and stuff like that. So, if you see the difference between both of these, like it's just, like the information is, you know, structured in a much sort of cleaner way, right? And it's easier to find out, right? So, just some details, right? So, giving you another example, anyone uses the passbook, like, I mean, IOS users here, right? So, I mean, you have, so we basically designed, you know, when IOS 6, IOS 6 basically launched a passbook and, you know, we wanted to kind of, like, you know, have our sort of tickets delivered on the passbook. This is what it looked like, right? I mean, passbooks obviously have, you know, the scope of design is very limited, like most of the IOS takes care of most of sort of the layout and stuff like that. It's just basically, you figure out what data points you want to show and there's a ready template to be used, right? So, if you look at it, I mean, in its own self, it kind of works. But, you know, if there's a, if you have a tablet who's, you know, booking lots of tickets with us, this is what it looks like, right? So, in the passbook application, when you have, like, multiple tickets, this is what it was looking like, right? I mean, you really can't see, you know, which pass is for what. It's just basically got, it's just got basically the dates and stuff like that, right? So, we kind of redesigned it, we said, okay, like, you know, right on top. We obviously did kind of, we were never expecting this situation where people would have, like, 20 passes in their passbook, but that happened, right? In fact, that image was tweeted by one of our customers He wasn't even complaining, but, like, we picked it up and we basically redesigned this. And this is what it looks like right now, right? So, like, when it's in your passbook, so if you see compared to others, like, you actually know the context of the pass itself, right? So, I mean, these are, I mean, you can actually make a difference through design at a very, very minute level, right? I mean, and just to kind of, I mean, this was really to kind of give you a, before we start on your design exercise, right? I just wanted to highlight these things because the design exercise you're going to work on is kind of very similar. So, I'm just going to pass on some sheets, right? It's essentially, it's got, we're going to look at the voting pass. How many people have floored into Bangalore for the conference? There are a lot of people there. So, I mean, like, you guys obviously have a first time experience like more recently about using a pass, voting pass. So, when I was talking about basically like, you know, the context and you know, who's really going to use a sort of this pass, right? It's just basically thinking about, you know, who's the user, right? Like, you know, if you look at the traveler, every, the pass actually goes through multiple hands, right? You have, you know, the traveler obviously becomes a primary user, right? Where he kind of needs to refer to the pass for like various information points, right? And then, you know, you have like the security guard who's, you know, during security check-in who actually looks at this voting pass. And then you have the ground staff, which is basically, before you actually get onto the shuttle, there's, you know, somebody who actually looks at your pass. I mean, if there's a, you know, a bar scanner, then it kind of gets scanned and, you know, you get registered as someone who's actually checking in or, sorry, voting. And then you have somebody at the pre-voting also to just make sure that you're getting onto the right flight, etc. So, everyone like kind of needs a different sort of, is looking for a different data point at this stage, right? So, obviously, I mean, if you look at, if you look at the airline staff and the security staff, they seem to be doing this from, you know, they're just doing this from, I mean, from morning to evening, they're probably looking at 100, 200, maybe 1000 voting passes a day. So, obviously, you don't have to design for them because they will kind of, you know, they will get used to or they'll kind of figure out, you know, where to look for information even if it's not prominent, right? So, having said that, like, I feel that, you know, if you look at the weightage, I would say that like, you know, 70% of the weightage on the voting pass should be actually given to the information that's required by the traveler. And, you know, in fact, 30 or even less than that, you can actually give it to the rest of the people. So, you guys have worksheets with you. So, I would actually, you know, so I've actually just... Does anyone need worksheets? So, some part of it is got washed out. So, I, especially the traveler bit, so I'm just going to keep this light on, right? I've just grouped the information based on the primary user and secondary user, right? So, like, why don't you guys take a stab at, like, designing a much better voting pass. The second sheet essentially has information bucket, what's missing is... So, I basically created three buckets. There was basically the important stuff, not so important stuff and the least important. I mean, when I talk about least important, you could basically chuck, you know, those... If you feel that there is something on the voting pass that's not required at all, you can just basically... Anyone has any questions? Not very clear. We need to categorize which information is most accurate. Yeah, exactly. So, essentially, I've, you know, I've noted down, you know, what the primary user needs, right? And if you see the block here, essentially is where you need to actually do the new voting pass. Yeah. I'm just trying to pull out the original... So, the sequence number is essentially the number in which... So, when you check-in, right, you get assigned the number. So, if you're the first one to check-in, you're basically sequence number one. So, if you notice, like, when you're actually boarding the flight, just, I mean, before you get into the shuttle, you have, you know, the airline staff will actually... If there's no barcode scanner, they will actually check-off 116. So, they would have, like, a map and they'll just check-off that this person who's checked-in is actually going to board, right, just to keep track of who's not checking, who's not checked-in, or who's not boarded as yet. Who's not boarded as yet. So, yeah, I mean, if you think about it, it's like, it's a... information that the traveller doesn't care about. Yeah, exactly. So, it is less important, but like I told you, there is a use case where, you know, there are multiple travellers and you need to... You need to kind of distribute the passes. At that point, it's relevant, but yeah, I mean, it's not the most important thing. You also get sometimes multiple boarding passes at the same time when you are hopping flights. So, maybe in that case... In an international case, yeah. Well, it's just probably really that important. The destination is, right? Even if you have multiple... If you have androids to, say, Dubai and Dubai to New York, it's not like you're going to have a flight to board in-band or to New York directly, right? No, no, but yeah, I mean, I guess, like, when you have two boarding passes, you know that, okay, I don't need this boarding pass right now, right? It's something that I'll need later on. So, yeah, I mean, it's a valid point, but again, like, you know, you have to consider these cases as well. I think the class also, I think you need for LDA, if I'm not mistaken. Or something, you need it for something, or produce the class number. I know what you need it for. You need it for, like... So for example, if you, you know, if you booked with Clear Trip and, you know, you want to basically redeem miles, I mean, today we don't basically... I mean, today we started doing that, right? We sent your frequent flyer number, but earlier when we were not able to send the frequent flyer number to the airline, you had to go to the airline website and actually kind of clock those miles in, and they required the class at that point. So I don't know if it's relevant any more, but yeah, that's one of one case that I remembered and needed the class. You should also think about utilizing the space. Like, you know, there is a class, right? So we can use the right side of this logo, and we can differentiate by using colors. Yeah. But I think, you see the class, the seat class is, you know, slightly technical and it's kind of for the airline. I was just explaining that basically, I mean, every class has a fare attached to it, as I understand it. So, like, basically when you actually, you know, you're booking in advance, essentially you're booking tickets in the cheaper class, right? And then that class gets sold out, and then, you know, the second class gets opened up and that's how the prices increase. So every class has a thing, and in a full-service carrier like a Jet Air, this probably doesn't apply to Indigo and the low-cost carriers, but basically the full-service carriers, you can be upgraded to first class or business class only if you're in a higher class. You know what I mean? Like, even if you're in economy, but like if you're in K, you never get upgraded. So, probably the only understanding I have of the class. So I think irrespective, I don't think it's kind of important for the user that much. Okay, so I think we have run out of time you know, I guess, you know, we've kind of obviously discussed a lot of ideas and I'm sure that, you know, you guys have come up with good solutions. So basically, I mean, just to, something that I didn't get a chance to kind of mention earlier, I think through the workshop, you know, even though like I believe that, you know, the final result comes, right? Through the workshop, the idea is not that you kind of get the best solution out there, it's just to kind of go through the process and you know, if you guys are enthusiastic about like taking this to finish line, you know, you have that opportunity, you can always go back, you know, like kind of define this design and like, you know, I'll be around through the conference so if you have any ideas or you need feedback, we can kind of work together to refine it and you know, maybe we're figuring out a way if we can actually showcase whatever you guys have done through the conference. So, yeah, I mean like, you know, these exercises don't end here, you can go back and refine it, but like we kind of keep moving in because I want to cover a lot of ground here, yeah. So moving on, so I mean, I kind of spoke about, you know, how to balance business requirements with, you know, what the user needs. I think over and above what we did in the previous assignment, I think there's one layer of, you know, basically you were just addressing what the user needs. There's another layer that, you know, comes from the business which is like, you know, what does the business really want? You know, what does the business want to achieve with any sort of design effort, right? So I'll give you an example before we jump into the exercise, right? So this is actually what our confirmation page looked like, right? What, I mean, basically, you know, as soon as somebody booked a ticket on Clear Trip, you know, we just kind of jumped on the user saying, hey, you know what, book a cab, do this, do that. And if you notice, you know, what the user actually booked, what he was charged was kind of like, you know, somewhere in the corner. So even though this was kind of addressing business goals, you know, it wasn't really addressing the basic user need, right? So I mean, after talking to a lot of users and getting feedback, in fact, this was feedback coming from users where, you know, because people are still, you know, the users who are still very uncomfortable with using their credit card and obviously payment gateways are not as stable as we would like them to be, you know, many times you get charged, but your ticket doesn't get, you know, issued and suffer that happens a lot. So, you know, there was a certain sort of comfort level that the user wanted first, right? As soon as he booked the ticket, he wanted to kind of feel that, you know, you know, I booked, this is what I paid for and this is what I got in return, right? So I mean, so we said, hey, you know what, like let's not basically try and do everything. Let's take it slow. Let's kind of give that comfort level first. And so we basically broke the entire page into three parts, right? There's basically, you know, just your booking. So, you know, this is what you booked and this is what you paid. And then, you know, things that you could do next, which is essentially coming from what the business wanted to do. And of course, I mean, business, both even deals for that matter is basically coming from the marketing team. So this is what basically came up with, right? So this kind of really improved the experience of someone who's actually made it. And because obviously, you know, the transaction size is also much larger than what you would pay in an e-commerce website, buying a book and stuff like that, you know, you're spending anywhere between 5,000 to 20,000. So like building that, like sort of comfort level was very important. So yeah, this is what I was saying, like, you know, like even though, you know, you have a lot of pressure to actually address business requirements, you need to understand that the user comes first. And there's obviously, we used to actually sort of balance it out, right? So, I mean, that kind of brings us to the second exercise. Many of you actually, and so most of you use credit cards. So like, does everyone have a credit card in the house? So what do you think about the credit card statements you get? Okay, so we're basically going to kind of, you know, look at the credit card statement and here we kind of, you know, go, I mean, we go in a little deep, I mean, deeper in terms of what the user wants. So imagine that basically, you know, this is what a user wants from a credit card company, right? It's kind of, it's a pool that you can actually sort of, you know, access in case of an emergency. This is a group exercise, sorry, I just forgot to mention. So, you just kind of make groups of five people in your location only, like just, you know, five people together can just sort of sit together and brainstorm. So I was talking about the user, right? What the credit card really does is kind of gives you an additional pool of financial resources in case of emergency or whatever you want to, you know, get a little lavish or whatever, right? Also, you know, how do, I mean, how do I maximize my credit limit? These are things that user wants, right? And also, you know, credit card companies come with their own sort of benefits, like, you know, you can actually, like instead of spending money in cash, you can actually, for example, you're paying bills, right? You can continue paying bills which you normally do with cash, but if you use a credit card, you can actually redeem mines and stuff like that or more points or whatever, you can get free tickets and so on. And then, obviously, there are a lot of deals. So these are all the things that the user expected from a credit card company. And of course, I mean, like, you know, as far as possible, you know, even though it happens that you land up, you know, paying excess amount of interest, you want to avoid that, obviously. So this is, again, something that the user wants. And what does a bank want? The bank just wants you to spend more so that they can, I mean, that's the end goal, right? They obviously, you know, they give you a big service, but like the way they make money is actually by you spending more and kind of they only interest from you, right? Same name. Sorry? Same name. Yeah, exactly. So I mean, now imagine that, like, you know, this is what the user needs. And, you know, this is what the bank wants, right? Out of the whole process. Can we, like, so you guys have the, what do you call it? Everyone's got, I mean, all the groups have one sheet. So we'll actually do this in a group exercise. I think to start off with, I want you to actually, you know, really think about what, what do you want to achieve with this redesigned? What is that problem that you want to solve? I mean, to start off with, it's important to actually set some goals, you know, before you actually get on to sketching and doing anything, right? So like, you know, you have the business objective, you have what the user needs, and you have basically the existing credit card statement, right? So what is the problem that you want to solve is very important. So like, I'll give you some examples, right? So like, assuming that, you know, you want more, you want to motivate users to actually spend more. So obviously, you know, reward points will become like a very large portion of your credit card statement. So you get a sense, you know, there are other things which actually, there are other smaller problems that you can solve. Like, so today, what does reward points really mean, right? Like, what is the value? Like, it's very difficult to kind of gauge the value. You've got to go to some website and like, you know, put something and so like, does, is there a way to actually communicate that easily that, you know, 5000 is, you know, is worth X, right, in rupees or even if it's indicative, at least the user knows. So I'm saying that, you know, these are sort of opportunities that you can look at, right? Yeah, but before you do that, I mean, it's important for you to kind of think about what you want to solve and I guess everyone, the fact that everyone on, you know, everyone in the house actually use the credit and you guys understand what the pain points are. So take one pain point or multiple pain points and like, see if there's a better way to present the credit card statement. So, yeah, I'm putting this on and you guys have the, I think the prints for this version is much better. So I think just to set the context of the next part of the workshop, you know, like we spoke about like, you know, when we started off with, you know, how do we approach a design problem? How do we think about, you know, what user needs, what kind of information, what's important and stuff of that. And then we basically kind of looked at how do we balance what the business wants. I think one of the major challenge is that what if, you know, you were to basically build something from scratch, you know, you don't really have any reference point. Like, you know, redesigning, it's easy to basically look at an existing product, you know, find out what issues there are. But what if like, you know, it's a completely new thing, right? What kind of process, what kind of process can you follow that basically, you know, lets you identify the problems and actually like come up with solutions for it. So, you know, what I'm looking at is basically, you know, when you have to design from scratch, what if like, you know, you had a problem, you kind of run it by, you know, a process and then basically you get a solution on the other side. And that's the whole idea of this part of the workshop. Like, I'm kind of just going to quickly run through all the different techniques and sort of tools that, you know, we've been using to kind of solve small to complex problems when it comes to design and interfaces, right? So, I mean, in the next part, we're going to look at, you know, what if you've got to basically build a user experience for an online bill payment system, right? So, I mean, I'm just kind of listed down, you know, what, you know, the brief requirements of this online billing system, you're not going to kind of design the whole thing, but we'll kind of look at one small portion of it, right? I mean, all the examples that I've picked, essentially, I've picked so that, you know, everyone understands the pain points, everyone pays bills, right? So, like, it's easy for you to identify with the user and that's one of the reasons why I've picked these examples, right? So, Kena, is everyone like, does everyone have access to, like, I mean, I just want one person in a group to have access. What I'm going to do is we're just going to share one document on Google Drive, on the meta-refresh hashtag. So, Kena, can you just, like, share that thing? Just tell them to read with it also so that everyone gets access to it. So, you can just have the document. Essentially, it's like, you know, you're already covering that in the slideshow, but, like, you'll have a sort of, you'll have a reference point of the entire thing and it's slightly more detailed that we'll kind of, you know, you'll be able to, before it, through the design exercise. So, it's pretty much the same thing, but slightly more detailed. So, yeah, I mean, talking about process, right? You know, there's basically, you know, what is the product supposed to do? You know, what is the customer need? Again, what is the context? How are people going to use it? What are the flows? You know, how do we structure the information? How is the user actually going to navigate through the product? And the entire presentation here, right? You know, what are the sort of, how do we, you know, I mean, I was talking to some people before the workshop and kind of figuring out what are the challenges they face while designing and one of the things that came out is, like, you know, it's kind of, how do I take a decision on, you know, what kind of color palette to pick? You know, how to choose at the type phase and stuff like that, right? So, we'll talk about that a little bit in the presentation aspect. And what I'm going to do is, while walking you through the process, I'm going to show you some examples, relevant examples of clear-trip, like I did in the previous assignment, so that it kind of, you know, you kind of are able to identify with, you know, what I'm talking about. So, again, I mean, like, you know, if you look at customer needs, you know, what the customer really needs is, you know, a very secure, reliable online payment system. And the fact that, like, you know, today, basically, you know, he's got to go to multiple places. He's got to go to a Vodafone site to play a game. You have to go to Bangalore one or, you know, the, you know, the sort of electricity board to play this. Can I basically bring all this under one umbrella so that, like, I can actually pay bills from one place, right? And of course, you might have some specific needs. This customer might have some specific needs, like, you know, I don't have a credit card. I have, you know, I need a net banking. I need to be able to pay by net banking and stuff like that, right? Then there are some other users of the product, right? So, we may not be the primary users, but you still need to kind of, you know, address needs of these users. You would have people who want to work for this company. You know, you'll have, you know, people who want to, I mean, the investors, interested investors or the press who want to write about it. So, we're not going to get into detail, but I'm just covering it because, you know, you will have to kind of, you know, address their needs as well. And when you talk about context and flow, right, we spoke about the life cycle. I mean, in the previous assignment, when you're talking about the boarding pass, right, how does a user navigate in an airport using the boarding pass, right? So, like, similarly here, you know, when we talk about a life cycle, it's really, you know, how does the user, you know, from a first-time user to, you know, someone who's become an advanced user actually navigate to the site. And to support this timeline, does your site or your application have all the necessary state? Because you cannot talk to a first-time user and an advanced user in the same tone. I mean, you know, a first-time user will need a little bit of hand-holding and stuff like that, right? So, how do you look at those different states of the application? And the other thing is just looking at how does the user get things done, right? Like, for example, I'll talk about, you know, what are the things that the user needs to get done through the application. And the other thing is, like, these are probably slightly advanced sort of areas that you might have to look at. These are like behaviors, right? So, things like, does this guy pay, you know, bills late? Or is he someone who pays bills on time? Stuff like that, like, do you, who are you trying to kind of cater to, right? The guy who actually pays bills on time or things like that. And so, just understanding the user, or at least being conscious about it. Because, you know, no user is the same, you need to kind of be conscious about these things. And the other part is communication touch point, right? Just thinking through. So, I mean, when you talk about user experience, it's not limited to the interface, right? You know, when is, when are we supposed to actually get in touch with the user? What are the kind of communication touch point? Is there an email? Is there an SMS? And stuff like that, right? So, I think all these kind of, you know, fit into, you know, I mean, all these are opportunities to delight customers. So, talking about life cycle of a customer, so, you know, whether the user is a first-time visitor, is he coming back again? Has he registered? Has he signed in? Has he paid a bill before? Has he added a card? Has he set up, you know, an automated payment facility on the account? Stuff like that, right? So, these are kind of some things that you'll have to kind of question. And to give you an example, you know, this is what, this is the clear trip, like, account section. And if you basically, you know, you've not really added a card, this is what you get, right? So, we just talk about express mail, you know, what it is, what are the benefits. And then, this is the same page in a slightly different state, right? Like, if you have cards, that same page changes into like a card listing. I mean, just, this is an example. And then, through the account, I was talking about, you know, how do you get users to do more things? And so, like, I mean, these are some of the upsells. If you see this page, you see the right-hand side. So, this is basically, you know, get upselling like different features of the site depending on what state you are. So, for example, you know, if you've, you know, we have a profile, a traveler profile. And if you've not really told us what your sort of meal preference or seat preferences, then we'll ask you that, right? So, we'll just keep building your profile without you having to do that. Or say, for example, you know, you booked a trip, you know, you booked many trips to Bangalore. I mean, from Bangalore, we'll say, hey, you know what is Bangalore your home city? And then we'll keep adding to the profile without the user having to do it in one shot, right? So, I mean, this is really kind of those elements that you need to think about while building this. So, what do you need of the user, right? What is, what do you want from the user, right? Like, for example, in terms of, so I'll give an example in the context of a bill, right? Assuming that, you know, he's been paying a bill with a particular credit card and he's not stored that credit card, there's a possibility to kind of ask him to store that credit card or whatever. I mean, this is just an example. But yeah, you need to think about those things as well. So, as far as, like, you know, all the tasks that are involved for the user, you know, it's just thinking through, you know, how does the user sign up? You know, how does he add a bill? How does he pay a bill? You know, how does he save a card and stuff like that? And, you know, looking at this in, like, in sort of, like, looking at this holistically, right? Again, what are the touch points across the board? Like, for example, if someone has to store a card, where are the opportunities for you to actually get him to store a card without him doing that explicitly? So, giving you an example, right? Express me, I mean, this is, you know, where, like, you know, this was an ad that we ran. So, you know, just talking about or drawing attention to the consistency in the communication, right? So, basically, this is what the ad looked like. And, you know, we actually, what do you call it? We advertise the URL, which was qrtip.com says expressway. And then when users actually land up with the expressway, there's, like, that consistency, right? Like, it's, you can immediately identify and kind of, you know, it's kind of adds that, like, extra, like, because expressway is all about storing a card and stuff like that, you need to build in that trust, right? So, if you kind of have an ad that, you know, has a particular visual, and then that cut doesn't translate into your online presence, there's sort of, like, doubts that come into users' mind, right? So, right from, you know, how it's delivered on the desktop to the mobile, and then while creating an account or sort of in the account section, so that this is, like, more like public-facing, but when you're kind of inside the account, again, there's, like, that consistency in branding and communication across the board, right? On the mobile apps across the board. Even, like, during, I mean, if users don't, users haven't actually bothered to do it through the accounts, like, there is that, again, we actually are kind of, you know, using the brand to kind of have that connect, you know, during the book flow, right? And so, basically, right from, you know, getting people to store the card to actually, you know, transacting with Expressway enabled, right? So, there's kind of, yeah, I mean, I just wanted to share this example because I feel that the successful Expressway lies in kind of building the trust through consistency across the board, building that brand, pushing it through the, pushing it through the product, right? It's not really, it's, like, marketing and product working together to actually sort of building a brand which is kind of very, very sort of strong. Anyways, so, I mean, talking about communication touch points, right? I was saying, you know, what are the communication touch points? Email, SMS, you know, things like, you know, how do you kind of talk about the benefits of this feature or service? What kind of reminders or notifications do we need to put into the, because I mean, this product essentially calls for notifications or notifications, right? Because, you know, you need to remind users that, you know, there's a build coming up. So, just that experience, right? When does it happen? How often does it happen and stuff like that, right? And of course, contextual product ourselves, right? Is there, like I was talking about while making a payment, can you actually get into store a card? Now, storage of card is actually a separate feature, but you kind of do it through, you know, a slightly different task. Okay. So, again, giving you some examples from ClearDrip about this. So, whether it's about, you know, delivering a ticket to, you know, like cancelling a ticket, right? So, you have basically, you know, cancellation is a big problem, refund is a big problem, you know, we have to actually, we have three parties involved. You have the airline, I mean, it's ClearDrip, there's the airline, there's a bank, right? There are kind of, you know, in many cases, because a lot of the process is manual, things, you know, users get, I mean, it is a longest process, like getting a refund is a longest process. So, how do you make users actually comfortable about it, right? So, we actually, you know, we kind of like this communication builds that trust that, you know, what if this is the status of your cancellation, the refund is getting processed and we can order the way to even ask whether like the refund got processed, even though that's out of our control, we could actually push it. So, the last email is just kind of, you know, sending out saying that, hey, did you get your, did the money actually get credited to your bank and stuff like that, right? So, yeah, I mean, I think, you know, you want to look at all this holistically, it's not the interface, user experience is like way beyond just the interface, right? Moving on, talking about contextual upsells, so this is actually, so I don't know if you guys know, we actually, you know, launched this product called collection, which is essentially travel inspiration, we tied up with Continas Travel and kind of launched this collection. Now, we had a boring, you don't have any trips kind of a message in your dashboard earlier on. So, hey, you don't have any trips, why don't you go somewhere, just to go to the, like the desktop. Now, this is a great opportunity to actually inspire people. You don't have trips, they go get inspired, you know, so just, I just wanted to highlight this example because it kind of fits in very well in this context. Okay, so from, I mean, moving from, you know, the context, communication, touch points, just get into slide, I mean, I mean, the side structure itself, I mean, you know. So, when you're thinking about the flow, right, you essentially have to think about the flow before you decide what are the screens that are going to come in. Because you don't do it the other way around. You kind of understand the flow of the user and then figure out now, if this is the flow, what are the screens that I need to build to support this flow, right? And how are people actually going to navigate through those flows? And does your, does the, so, I mean, you know, actually what's interesting is the navigation can be a great way to communicate what the site is all about. I think people underestimate what a navigation can do. I actually come, I mean, I was not able to actually get a good example, but many times you land up on a site and you don't realize what the site actually does. I mean, I'm sure a lot of people have actually experienced that, especially when the service is new. And I guess all of you probably are building products where they are unique and they don't exist. They don't have any, there's nothing familiar, users are not familiar with that concept at all. So, I mean, think about how you structure your navigation because that can actually be a design, it can actually communicate a lot about what your product does. I mean, I'll just give you an example. I mean, you know, when you come and clear that, you know, it's a travel site, you have this bunch of things and then, you know, there's some, you know, there's some level of grouping also. There's basically, if you notice, there's like, you know, you have the search projects products and they have an arrow because like, that's just to indicate that like, if you click on those, the context will be maintained. You'll kind of be in that same, sort of that same interface versus if you go below, you would actually land up. So like, if you see collection and need to go in small world, that the context completely changes. You don't have, you don't no longer have the left navigation. If I put the arrow, user would actually expect like the site to open up right there. So think that there are, you know, small set of queues that you can give users to kind of explain what the product or what they should expect. So from site structure, moving on to at a very screen level, right, if I mean, you guys did voting pass and you did the, I guess you guys really thought about how can I actually present this same information in a way that's, it can be consumed really easily and it kind of, you can get all the key information points in like at a glance, right? So that starts with really understanding what's important, like driving the same point, what is really important and then you kind of start with that and everything else kind of becomes secondary, right? So some examples, again, you know, this is what a review page look like, right, when you actually were booking a flight ticket, this is what it look like now. So if you notice, pretty much everything in the itinerary is flat, right? Now, obviously, that's not how users expect it to be, right? This is what the new book flow looks like. It's a, you know, you can actually get a sense of the itinerary at a glance compared to this, like you have to actually really, you know, get into details and really like read all the information, right? You are like, for example, economy is at the same level as the flight details or at the, you know, and if you look at, you know, the departure airport, it's all jumbled up, departure and date is all jumbled up. Here actually it's kind of broken into smaller pieces so you can actually consume it layer by layer. So you actually look at, you know, the first piece, then you actually kind of, you know, get into more details at your will versus, you know, having to kind of deal with it yourself. Anyways, another example is like our hotel details page, right? So this is what our hotel details page. Again, you know, it's just completely flat, you know, self-service, like we are not kind of saying what is important here, right? So we said, why don't we kind of, you know, improve that? So, you know, you're through the hotel details where we're basically highlighting, you know, how good is the hotel, right? Basically, pretty much all the, so just see this, even though there's a lot of content on this page, this with very less information says so much about the hotel, right? You get a sense of the quality of the hotel, you get a sense of, you know, how many rooms that hotel has, you know, where it's located, you know, and what it looks like, et cetera, et cetera. I mean, photos obviously gives a big, you know, gives a big indication of the quality of the hotel. I mean, same thing, I mean, a lot of this actually is getting inspired, like most of our design is getting inspired by the mobile because, you know, we always have constraints on mobile because it's much smaller. And in fact, what we're doing is, you know, we're thinking minimal on the mobile and then bringing it back to the desktop. So, yeah, I mean, that covers, you know, the structure, the page structure part of it. You know, how do we actually deliver that at a glance experience? Moving on to the presentation layer, right? So when it comes to presentation, right, so now let's look at bill payments, right? I think the first thing that, you know, you would like to think about when you come down to actually building or rather, you know, creating a visual style for the site, is really thinking about all the metaphors and keywords that are associated with bill payments, right? So, you know, there's cash, there's a card, right? There are bills, actual bills, right? So can you collect, say, I mean, or rather the way we do it is we start collecting visuals that are related that kind of inspire us to take the direction for the visual design, right? So everything, so first make a, like, a list of keywords and, you know, what are the associated keywords and then start collecting visuals that kind of start inspiring you about colors, typography and stuff like that, right? And I think this exercise also will kind of give you a sense of what the treatment and voice and character should be for the site. I'll give an example, Expressway, again, this is what actually we started off, right? I mean, when you talk about Expressway, we kind of, you know, started collecting these sort of highway signboards and this is what we came out with, right? And obviously this is not the kind of, this is not what we wanted to communicate, it feels very informal, it's not, it doesn't feel, you know, sort of trustworthy. And then we kind of, you know, further, you know, research, I mean, just collected more sort of, you know, images that, you know, are related to Expressway, what kind of signboards and so on. And this is what we finally came out with. So I think, I mean, this is also a very iterative process. You know, you would come up with visuals, you would collect visuals, you would kind of go down a path, realize it's not working, you know, go back, start from scratch. And it's just that basically, you know, following this process just makes you conscious and it's very easily reproducible, right? So like, for example, if this retro style, you know, visuals are not working, maybe I need to take a slightly different approach, right? Just, I mean, I think, but it's important to kind of be able to reproduce that. The other way to actually do it is like, you know, building inspiration. I mean, I have not formally done this, but, you know, I mean, inspiration and mood boards come from, you know, it's kind of traditionally used by fashion designers, interior designers, and, you know, even graphic designers, too. It's actually a way to convince clients more than anything else, but actually it can work. In today's scenario, you have Pinterest, you can actually go look for a lot of images, put it in one place. So this is actually a board that Anand created. He actually is going to speak tomorrow. You know, he's leading design at Cucumber Town, and he's written a fantastic article about how to choose a typeface. And, you know, this is his inspiration. Cucumber Town is all about, you know, chefs and people are kind of sharing recipes and stuff like that. So, like, his inspiration was really, was derived from food graphics, right? Like, what kind of labels are out there that kind of show up on food items, right? So, I mean, this is very easy to do. You don't have to kind of, you know, go cut news papers and stuff like that. The other aspect is, which is very important, is basically, you know, like, refinement and detailing, right? Like, that plays a big role, at least I mean, like, we spend a lot of time doing that. So no matter, so, you know, and like I said, if you notice the flow is, you know, starting from, you know, very abstract to, you know, more tangible stuff, right? So, at this level, you kind of really look at alignments and, you know, how do you kind of refine that visual hierarchy through this process, right? So, I'm giving you some examples. There's a, if you look at the site, I'm just kind of drawing attention to all the details that have gone into the, I mean, design of the site. I mean, that's probably one of the reasons why it looks clean, at least I think it looks clean. So, you know, just, you know, simple things like, you know, that the checkbox is aligned with the rest of the icon, right? So, from there to, you know, forms alignment, so like this, the loader bar is actually exactly double the size of the mother deal and the sort bar, right? So, when it actually, so if you notice, sorry, so when it actually finishes loading and actually, you know, transitions out, it uncovers the content below that, right? Without any sort of extra lines or anything like that. And, you know, that kind of, you know, extends all the way on the right side. So, I mean, and talking about sort of, you know, details, you can actually control, I mean, like with very subtle sort of treatment, you can actually control how users, I mean, so at least you can actually try to control it. Users will finally do what they have to, but like you could actually guide them. So, I mean, this is how we expect the users to actually go through or consume content on the site. The fact that, you know, there is something loading and there is an animation, your kind of, your attention goes to that, right? And then obviously, I mean, the fact that it's loading, you kind of start noticing things around this page, right? And then basically, once the results actually load, your focus goes towards the result. And I mean, I'll showcase how this actually happens, right? So, we have, if you look at it at a very sort of minute detail level, I mean, this is how it's layered, right? So, I mean, literally, we have, I mean, these layers in terms of what do you call it? They're very subtle, but actually it's there, right? So, coming back, now the fact that the results are loaded, you know, there are multiple ways to consume the same content, right? So, you could basically, you know, look at each unit at a time, you know, if you're concerned with the price, you could compare prices, you know, I mean, and you know, if you're kind of already this, if you already, if you're kind of interested in one particular flight, you're actually now only consuming that unit, right? You're not looking at anything else. Something, I mean, just basically, you know, just showing you some details of the dignaries that we've built. I mean, so moving on, I mean, moving on to the transitions, right? So, I mean, I believe that basically transitions work if you kind of use it, you know, it's not all over the place, you kind of use it smartly. It can actually bring a lot of character to the product. Just giving you some examples. This is what, I mean, just showing you some sort of transitions on being to go, right? So, as soon as, so, I mean, actually, and you know, you don't think of this while designing it, it's just that basically you spend enough time with the product and you start seeing patterns and then you connect, right? Like you say, if I like, you know, you have a search bar, that same search bar shows up in the page inside, can we kind of transition it, right? So, there are multiple transitions here. One is basically the search bar moves up to the top. Then at this stage, you know, we don't have the root information and you only see the icons for the mode transport and as soon as we get information about how long the roots are, we actually kind of build the root and that's also animated. So, like, we didn't get this on day one. It was just like, you know, this looks very abrupt. Can we actually make it more natural and stuff like that? So, I think, don't think about these on day one. Like, kind of look for these patterns. You might find them and like, if you're able to pull it off, I think it kind of adds a lot of fun factor to the... So, this was another thing, right? So, initially, I mean, we have, you probably, if you use Queer Trip regularly, we have basically a modified search button there and then essentially it shows the search form and that search form used to have a calendar. So, basically, when you want to modify, you can see, I mean, you can see what are the prices if I want to change the dates and stuff like that because people really change the dates. And we saw, we noticed that a lot of people actually use the modified dates. You cannot move that calendar outside so that people don't have to hit Modify Search because basically, you know, they just use this calendar from here and when you hover, you can actually see the rates. So, but people are so used to using Modify Search, like this got completely missed in the beginning. So, a lot of people started complaining, hey, where is the calendar in the Modify Search? So, great opportunity to actually do two things. One is, you know, retain the calendar inside and then also draw attention to this calendar. So, basically now what we've done is this came later on. So, the same calendar actually transitions in place. It kind of does two things. One is obviously it's available outside but also kind of reminds you that this is available outside. So, again, you know, something that we have not thought but it just kind of, you know, we saw that pattern, we got it working. Another transition we wanted to showcase. So, like this is, we wanted to bring in that sort of, you know, delight factor. Every time somebody finished a step. So, yeah, this is a small, subtle thing. So, yeah, I mean, like I'm kind of covered with, you know, the examples, the whole idea, you know, to show you that was to kind of get you thinking while you actually work on this assignment is that you could actually look at all these things while building it. And so moving to the design exercise. You guys, have you shared the view? Has anyone been able to access that page? Yeah. So that, I mean, this took, yeah, it's a good exercise. This to give you, so, you know, obviously, we were talking about the fill payment application but we're not basically looking at the entire application because, I mean, obviously, we don't have too much time. In fact, I mean, just now we have just 45 minutes. So, we've got to kind of sprint into this. So, the scope is essentially looking at just the dashboard of this product. So, like, if you are a user, if you are someone who, like, builds online, right, what is your expectation of, you know, like a home screen, right? Like, what kind of, you know, one is obviously, what are the states and scenarios that you spoke about, you know, users being first-time or repeat users and stuff like that. And, you know, how do you give this user a summarized view of his account, right? Like, you know, the bills that he's paid, you know, bills that are pending or, you know, upcoming bills or whatever, right? Yeah, I mean, basically, we're just going to kind of focus on this aspect. We're not going to look at the entire, we're not going to look at the entire application, but just think about what the navigation should be and what the dashboard should be. And I think the only difference between the previous one and this is that the credit card statement was, I mean, we started off with, like, a voting pass, which was very small, a very small problem to solve, the credit card was just static. This becomes a little dynamic. There's a little bit of, there's a timeline involved. So, yeah, I mean, how does, how do you, how does the product respond to different states of the user, right? If he's like, I've already kind of drawn attention to the fact that does the product talk to a guy who's coming for the first time differently versus a guy who's, you know, added a bill versus a guy who's slightly advanced and has multiple bills and stuff like that, right? So, yeah, I think that's the scope. We have 45 minutes. I mean, obviously, there's lunch after this. So, I mean, yeah, you guys want to, like, you can continue working on this. Even, you know, we can extend it a little bit. Do you think you can buy a frame out of this or just ideas? Buy a frames. Yeah. And like I said, we don't end at that. Like, I mean, one o'clock is not where this assignment ends. You can feel free to kind of, you know, go back, define it, and we'll kind of, we're trying to figure out how to showcase your work during the conference if you're going to be taking the conference later on. I think it's good to kind of take this to finish line because, you know, all the stuff that I spoke about, we were able to at least, you know, cover, you know, everything till the presentation will be great. But, yeah, it depends on, you know, how much time you guys also have outside of today and tomorrow. Some things could be done as a applying delay in some group. Yeah, sure. Yeah, it's on the meta-refresh hashtag. Sorry? I have it over, but I can't find it. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. So, the logos are quite specific. Yeah. Yeah. Yeah. Yeah. So, I mean, I think you kind of just ask yourself, right, does this basically, you know, communicate trust? I mean, is it, like, is it a logo that people have trust, right? And it's too playful for you to trust it, right? You would trust, so if you look at the actual icon or the tiny logo that we came out is like, is the sign that you can go ahead. I mean, you have those signs. You trust that, right? You look at that and basically, you know, if you trust that visual, so I think that's really the framework, right? What is, you need to ask yourself, what does the brand need to communicate? If trust is one of those things, then, yeah, I think it's express way, but it doesn't communicate trust. So, I think that's the real reason why it didn't fly. Yeah. Yeah. Yeah. Yeah, exactly. Yeah, exactly. Yeah, exactly. So, it's got, I mean, it's got all the elements. You know, in fact, if you see the visual, if you see the campaign and all that, even though the name is express way, the image is of a runway, right? So, I mean, so you have flexibility. I mean, like, you know, you have flexibility to play around a little bit. So, it communicates, yeah, I mean, absolutely right. I mean, it does have the elements of an airport and I was talking about you trust that, right? Like, if it says, you know, this is the direction you need to go, you trust that. So, I think it has that sort of element to it also. So, twitter.com slash metarefresh, and we'll be able to see some things. People have access. You've put a hashtag. Who's not able to access that thing? It's not there. It's available, right? So, everyone's got the document. So, it's basically, I mean, it's the same, it's whatever I've covered in the last part, slightly more verbose. And I think, like, the idea there is that we don't have to, so, like, for the purpose of the exercise, we don't have to actually cover everything in that. It's just, like, you can use this for future reference when working on a product, but, like, it covers, like, the scenarios aspect. So, you can, you feel free to, you know, refer it, I mean, you don't have to cover all the points there.