UI UX Design Workshop

1. UI UX Design Workshop: What's up, guys, welcome for this workshop. And the goal is, I want to take you from where you are now, which is a student. And I want to show you the career path, basically all the way down. So making 100 K as a UX designer. So in this workshop we're gonna go through, I'm going to explain properly the essentials and new axis. I'm showing good and bad UX experiences. Then we're going to talk about career path and how you can make the transition, the hardest transition from students to junior designer. We're gonna go all over that in this workshop. So let's get going. Before we get started, my name is Anthony convoy and I've been a professional, a UX designer for 15 years. I've worked some of the world's biggest companies and I hope some of the stuff I'm going to share to you now is useful. So let's take a look at the board. This is UX in the middle. Let's talk about actually what UX design is. And this three circles here. So the first one is we want to make something that's in useful, really important. Then we want to make something that's actually desirable. So we want people to desire so often band usable. So you exit to the center of this. But what exactly is UX design? So I'm gonna give you a practical example now, we'll go through what it's lighter design e-commerce websites. Okay, so let's start with our econ website. I'm going to draw a big circle, and this represents a user experience. I'm going on this website. So think about, this is UX here. So think about new acts as the whole process. So within the new user who comes to the website, what do they see? Well, first of all, they might see some images. So good, good product photography. They might have UI, which is the user interface. So this is the look and feel of the website or the app. Then there's also other sections about this. So they might have the actual experience of checkout. Then there's the content on the web sites. And then there's other things like the actual interaction, animation, stuff like that. So UX make compromises and roughen. There's all these little section. This is what people will actually get a bit confused why UX, UX already actually exists. So any website or an African Union you already have or you act. And it's not about designing UX to say, it's about improving things to make sure that the person who comes to the website, their user experience, is as good as possible. So let's take a look at some good examples of UX. Let's take a look at an example for the homepage for the income as websites. So we've got our page at the cup, we've got a navigation bar. So now we've got some labels and we've got to search. So a big part in UX is making sure that the information architecture on the website, which is basically how things are organized at a range has good. So making sure all of the labels here are cleaning, defined it simple language and understandable. That's a really important experience. Then we've got set. So set is a big part of a website having a clear and predominant and make sure that experience is really good. So we also have images are a big part of the website, making sure that the products clearing the images, it's not confusing, it's very simple. Then we'll have some descriptions. So it's making sure that the descriptions clearly indicates we don't want any surprises and other products actually are. And then what we want is big call to actions. And we want to use a basically to know what happens when they click that button. So this is an example of a product detail page. So we still got our navigation. Then we've got images, reading weld on high-quality images. Then we'll have some sort of title description. I'm big, clear call to action, which is like add Tabasco. And then underneath here we want things that are useful to the users, which might be, there might be some reviews. Then we might also has other bits of information like different sizes, small, medium, large. A very simple structure for our websites book has all elements that are really useful for user. Now we'll take a look at what happens when someone actually add some prints a cart. And I'll show you a good example of a UX. Amazon is a really good example of a good checkout experience. So this split the page up into three sections. So the first thing is Direct Delivery Info. Then this is where you do your payment. And then at the bottom is basically where you review everything. Nice and simple. And they've also got one of the most amazing experiences and new x, which is the 1-click buy. So this button here, which is a, basically a confirmation, they brought that button earlier in the cycle to the actual page where the product description is. So you don't need to add some from the basket and you can purchase a straight from there. It's very addictive and it's one of the best bits user experience to actually increase revenue for the website. So the reason why you access so powerful for companies like Amazon or e-commerce websites is basically. They make an easy process for the user to penetrate or something. And this creates a rarely, rarely happy customer because it was nice and easy. Desk then leads back into revenue for the company because they returned to the product. They, making things simple, as easy as possible is a brilliant way to attract great customers. Now let's take a look at it and bad user experience. So let's just example. We've got our customer here for this. Let's call her mag. So megawatts to go to a different e-commerce website. So she logs in and she tries to find what she wants to buy. So she looks at all the items and then she decides to add solvent to a calf. So she's found was she looking for? She then goes, but then then asks her to make a new profile. So there's no logout as guest or no checkout as guest, but you have to create a profile. So make goes for all their fields in a form. She creates a profile, that's fine. So there's no log out with Google or anything like that just to create a form on this website. But then once you've created the new profile, a basket empty, so there's nothing in it. So washing added than before. It gets forgotten about during this journey. So now she has to go back. And then she finds our item again. She adds it to a car or while she's adding it to a card, she had two big pop-up here, which is like 50% of all the office for the website with a tiny small cross button in the corner which he can't find. So once you've removed that serious game, both bombarded with advertisements on the website and distracted enough and the whole process. She didn't get fed up of all of this and wants to contact those, but then gets taken to a 404 page which has a broken website. Then she just gets fed up and decide to leave that journey. So you can see how different that is from Amazon. There's so many steps involved here. Amazon every frame was really nice. This one loves to sail. Amazon gain the sale, and that's the power of good and bad UX. So let's take a look at the UX design process now and an example of why you might do day-to-day. So let's stick with this E communist website and let's take a look. Okay, our job is now to redefine the bad user experience on the body e-commerce website. So the UX design process is split up into five stages. And you'll see this on the Internet. Each stage, basically, you do different things in the UX designer. So let's start with the first stage which is defined. So before we start, we need to know what exactly we're doing in the project. So we need to talk to the business or find out what they want and their job is, okay, make this cell, make this sales process better. But we need to know, actually, does that mean I've gone off traffic coming to the website so they need to improve the advertisement? Or is it that the users are fallen off a saddle point in the journey? So we need something solid to go by and because this is what we are going to be judged later on. So for this example, and they've got plenty of traffic coming to the website, but their purchases aren't as big as they want them to maybe aren't as good as they want them to make. Okay, So that's our problem. Then the next thing we need to do is we need to understand why this problem is happening. And this is, this is kind of like they use in research phase of the project. So this is quite, It's kinda quite fun as a designer. So this is where you get to have me thinking hat on and you get to actually, so you want to meet with customers. So you can meet them in person. That's great. You want to talk about their problems with the process. Some big companies have in-house testing facilities. So whatever is the Barclays, they are these rooms where they got customers and the customers get paid for the time and then you get to ask them questions and sit down like a glass wall is candlelight in a police interrogation. Apart from, it's a lot nicer. That's quite fun. So you can do that one-on-one. You can do that's called infographic research. We follow people around in real life and you, you observe the mucin, the website or the app and actual day-to-day realized situations. Or you can do surveys and get quantitative data with lots of people. And you kind of just understanding the problems. So with this website, we know that the checkout journey basically wasn't God, we added a toy basket. They're dropped off rather create a new profile. And we were bombarded by ads. So we understand that by girlfriend Jenny ourselves and by talking to customers. Then the next stage is the design phase. So this has loads of different steps in it. So we might start out by doing rough sketches. So we might sketch it's getting new journey. And what we might do this in a workshop where we'll get people from the business. We might get some users. And as a designer, it's quite important to facilitate workshops. So that's often than gold and you'll learn to there as your career progresses. But you're lucky. You might sketch out the website. And then from that big because sketching so easily you can scribble off, doesn't cost that much and you get the paper from the business involved. So you kind of know you're headed in the right direction before you even rarely get well, that's one I've kinda lens from a career. Then you'll take those low-fidelity sketches and turn them into wireframes than you can prototype. Prototype them in websites, applications like Figma or Sketch or Adobe XD. Figma is the one that everyone's using at the moment. So she has been bought by Adobe. It's really good. So you'll create. A wireframe and now you'll then test up with your test out with the audience. So you'll get people in your lane. If you can do the test in a line, you can send people prototypes, ask them questions like do this checkout process. Then you'll go back and you'll make changes. You can make a high fidelity version over. So you'll make it look and feel like the real website. You basically go back and forth, back and forth, back and forth until you've got something which actually quite come from the same. Then there's kind of a step before analysis which I'm going to say develop. So it's really important to work with. Let's just put that in death. So one of the key jobs, new harbors a UX designers to work with the development team. This might actually be the majority of the year because projects take a long time to design and develop. You worked at development team to basically you want to hand your plans to them and they'll make it in front. And tools, HTML, CSS, JavaScript. And they need to basically you're an architect and you're giving them as good plans as they could possibly have. So that could be a prototype, but you also want to work one-on-one with them, make sure they understand the nuances of the design and then that will get developed and released. And then one of the key things that people don't realize in your exercise is to analyze what you've done. So you wanna make sure that okay, actually this is performing how we want it. Okay, we're getting just as many users coming to the website and our conversion rates gone up. So we're making the company more money. But then you can then move this back around. So from the analysis we mainly on a couple of things. So we might say, okay, we've done this, we've done really good. Apart from on this wall page will lose in the checkout final page, we're losing a lot more people than we should. So you'll take a file and then go back into the define stage. And then you can get on the stand on the new design, why people are falling off from that page and then go through the process again. So as you can see, this might this whole process might take a year. So during the first couple of months of the year, you'll be doing different jobs than you would be in later on when it might come more design and development. And it's quite formed because you got to wear different hats as a UX designer. And following this process, no day is actually the same. Probably watching this video, interested in becoming a UX designer, I just want to give you a quick overview of what your UX career path might be like, which, which is interesting and I wish I would've known this one I started. So here you are as a student, what are you thinking about changing career? Then? To get the first job is always the hardest actually. So you wanna get a junior designer role. And to get this role, you're going to need a portfolio of projects. So you will need three to five case studies, which is where you might read as an app, redesign a website, or make a brand new one from scratch. Then once you get this junior designer role, you can then progress. You become a mid designer, senior designer. And as for the salaries you can expect, my first junior role was about 30 K in the UK. Obviously, this depends on what country you're in. It might be slightly more now into an independence that was in London, might be finding OF in different places. Obviously in California is gonna be higher than other places. But then you might go and you might go fatty, 35, 40, kay. We've got a decision to make. A big decision is whether you want to continue in as a design, as an individual designer or whatever, you want to become a manager. So this is where it forks off. Now, as you see on the example before the e-commerce website, the whole digital industry works and projects and candidly unique to digital. So there's two ways you can go. One is to become a contractor while the other one is to become a permanent employee. And this is your Senior Dev. So go down the PM role. This is where you then start to lead teams. So this is where you're a manager. And then you can, you can, you can enter a hunger cane above. And that's where you're actually going to be looking after festival small t and for free or for designers. And then you might need a global team of like 50 or 60 designers. Bought your actual day job will become more management and less hands-on design. So the overrode the ever you can go is to become a contractor and that's what I saw them both. So you can look at my contract that and that's where you might go into a big company and you might be given a year contract. So that will be design this e-commerce website. You get paid on a day rate. So you might you might have $500 a day. This could go off to $1,000 depending on your experience. And you'll be in that company for a year and then you leave and you're probably goes to another company or it might get extended. So there's, that can be more financial gain and this side, but there are downsides to it as well. So I've had contracts canceled on me. Basically the day before I went, there is no stability. Cannot grade with a family because they might be. So this one, you might have 3 mol. Notice one lymph node test. This one could be two weeks or even a week. And companies are more likely to cancel big projects and move you on. So there's no stability after a year you have dangling and apply and get another job. They might take you three to five months together. But if you're good and you become good for Ukraine, you haven't Good call folio. You can make more money, become a contractor. But if you want to have a long-term relationship with a company, you can go down the permanent rest and recovery manager. Okay guys, the most important thing we're probably going to talk about on today's whole workshop is this. The goal is to get you a junior designer role. So I know that that's the hardest thing in the career because once you actually get in their career, you've just got to work hard and apply your skills and overtime you eventually work your way down. These are, these are the things that you need. So there's six things on here and we'll go over each one of them and I'll explain to you how you can actually do this yourself. Okay, So the first thing on the list is you need a good foundation of skills. So one of the key things you need to be aware of when applying for a junior role as this career that you're applying for is user experience design. It's not user-interface design. So I know you'll see a lot of tutorials online. Everybody's all over fake math designing websites and apps in it. But as we've talked about before, UI design is just and it's kinda just a small portion of the overall UF bubble. So when you create your portfolio and you go for a job interview, you need to show all the types of skills. So there's, there's all of these over bubbles here, which are all different new tasks. So some of these and research, some of this is analysis. There's obviously UI desired, but then there's like no fidelity wireframing and prototyping, sketching your ideas. I'll talk to you in a little bit about how you can show all this. But that's one thing you need to bear in mind. That's why a lot of people who go into this design, lots of cool things in Figma actually navigate to become a professional designer because that's just as a hiring manager, I've had loads of designers. That's one thing I look for, not just skills in Figma. And you've got to look at, you've got to understand how to create a great digital product. So the next thing is experience. So how does this always makes me laugh? And people look for junior designers have free is experienced as like, how do you become a junior designer? You've never gotten experience. And so I did when I came into it, I had years of em college and university. That's when I did it. But I also know that you don't actually fully need dark when it talks about experience. Like what I got my first job, people that didn't actually asked me about my university degree. The experience is shown in the next one, which is your portfolio. And you don't have any professional experience, that's okay. That's where we create the example projects. We're going to show them as case studies. So you probably need three to five things in the portfolio. And those three to five things we're going to actually focus on different parts of the US experience. So we might redesign an app, but within that, we might create a persona. We might do a User Flow Diagram. We might do a high-fidelity prototype. But we might also show how we use a test that you need to get all of those different things into your portfolio. And three to five case studies is more than enough to know to show your knowledge of the subject. So your portfolio. So I'm just makes me not a whole lot of people who go into UX have these flashy portfolios. You'll see them online where people review portfolios. And I think the lung year in the industry, the less flush here needs to be or they are, the more simple you realize things are because you're applying for user experience and roll, you're not applying for a developer role. So developers that people who make websites, X and user experience designers. You care about the experience of the website, which is actually making things simple. You don't need all these animations and tax flushing things which make it overly complex near them. Very civil portfolio which shows your understanding of the subject. And that's why my own portfolio is on Behance. Behance is owned by Adobe and it's a, it's a free portfolio platform. And what's great about Behe answers. Adobe have another thing which is a paid thing, which is called Adobe portfolio. And I think it's like $10 a month and it takes you up Behance portfolio, which is like a republic. So it's almost like a social network for designers. And then it makes your own private website. With that work at pulls it in and it lays out how written nicely. So if you can fool, you can combine Behance, Adobe portfolio. So you use Adobe portfolio when you apply for a job and you can use Behance as a free one, and then you can combine those two. You can make a portfolio really easy. So next we're going to talk about, so we've already mentioned this case studies. So when you're writing out your work, you need to meet him right? In detail about the different things you went through on the use, on the user-centered design process. So write about them. Don't just design an app or create a persona and talk about how you got the data for that persona. Right, show the user journeys and explain why you think that you need to explain your thought process throughout. And the case studies should be quite long mission of a lot of text in there. It should have a lot of maybe photographs of your sketches and even put some videos and a lot of people don't take advantage of the phone. Being able to take amazing video, talk about the process. And if it gives me as a hiring manager and insight to you. If I saw two part two portfolios, one with a few videos and I would feel more inclined to like him because I'd know what I was getting into before the interview. Then once you've got that, you can go into networking. This is where we use LinkedIn, which is one of the most amazing tools on the planet. So LinkedIn is wet. So since my first job, all of my other jobs have come through LinkedIn. So all of the big companies have recruiters. And recruiters, basically a pay to place you into a company that needs to be called head hunters. So they do have recruiters for juniors animals. So big company wants to go to them and say, we need a junior designer. You need to be on LinkedIn because they scour lengthen for prospects, which is what you are your prospects for their, for their job. Your portfolio shall be on LinkedIn and you should also use LinkedIn as a marketing fee is your own brand. So post articles on that, right of couple of things about UX, share your journey and you're getting an even go on their cetera, recruiters, u2 recruiters and the cities you want, and then start sending the messages and seeing if there's any thing going there. So you need LinkedIn to basically build your own personal network. And then the next one is where you actually get the journey designer role. So how I personally got mine does, and I did internships. So it doesn't sound that glamorous, but internships is basically where you work for free or you already got paid for lunch money. So I worked for Vogue magazine in the UK. So I got that position because I other good portfolio. I had lots of good example projects and which I made for university when you can do them yourself. And they, they, they like my portfolio and they give me an internship. So I went there for two weeks and then off my own back. There's lots of other magazines and the building, I went down to talk to the art directors and the different magazines, introduced myself, explained that I wanted to become a professional designer. And they in turn give me two week experiences for magazines like GQ and Ferrari. And then because I knew people in the company, when I graduated university, I got my first job in the same company for wired for someone I met in an internship, so on and also obviously live in hostels and cheap hotels. While I was doing this, I didn't have any money. It ahead. Not glamorous like everyone towers yet. But I did have to get my foot in the door because it's gonna be very hard having no I have not done much experience. You get to be competing with loads of people for this junior role. So you can do as long as your portfolio and your case studies are good. But I kinda went in the back door like I wasn't competing only one for this internship. And when the job came up, I wasn't competing with anyone because they knew me. It was just me. They just give me the role. So that's what you need to do. So I hope that explains how you can become a junior designer. And now I'm going to show you the next steps on what you can do to actually do this. So in this path, I want to talk about mentorships. So I was really lucky for my career. I had some great mentors. I had the teacher in college who really cared for me and was able to mentor me. And then when I went into working for magazines, I had two of the best art directors in the world who mentored me. And I know that this isn't available for everyone around the world. So this is where I want to ask Canada's my knowledge and hopefully Item become your mentor. So that's why I put together my online course, which is more than online course, it's actually a mentor-ship. So John, the program. My goal is to help as many people go from students that junior designers as possible. And I've covered in the course every single step in the process that we just talked about. So this is just a little example of what we could do together. So over the course, I teach you all of the fundamentals of UX. More than this. So we go one at every single step in the design process, which I have one research information architecture than we talking about what you like, pop an interface design and analytics, how to analyze websites and apps, have some prototype them. And we then talk about really important things like accessibility. So we go over every step in the process so you have a solid foundation of knowledge. So that's those two ticked off. Then. The two main tools in the industry that everyone is using now is Figma and fig jam. So they're both the same company and they've both been bought out by Adobe recently for enormous amounts of money. So thick jam is what you use to make. It's not prototypes for different parts of the user experience and design. So I've, I'll show you now. So during the course, we create loads of different things that you can put in the case study that shows every single part of the process. So we create a, during the course, we actually make, It's an app for finding a local farmers market. So we take it from concept to delivery basically. So we start off, I give you some example data that you can use and from that data, you create a persona and fake jam. So that shows the hiring managers that you can analyze data and then you can create something useful out of it. Then you'll create a user flow diagram, then feed jam as well. That's where you show the journey of someone going through the app to complete the task. So it's how they log on to the app and then they find the local farmers market that's really useful for when we build out the prototype later. Then we talk about information architecture. That's how apps and websites is structured. So you do something called the cards South during the course. That's where basically at every page on the website and you organize them into groups. And then you give the group's names and then you can test that with your friends and family. And that basically shows how it's organized, like a top-level navigation of a website. So that's something that not managing designs are going to have in the portfolio. So don't let your style of there. Then we take basically all of this and create a wireframe for the journey. We do that who say jam. Then we move over to Figma, which is great for creating the high-fidelity prototype. That's gonna be something you can test on your phone. It's going to look like a real app. We're going to do all the interaction and we're going to do over ten pages in there. So you'll design. So from which looks beautiful and I'll teach you everything. I learned from some of the world's best art directors about how to design professional looking websites and apps. So it's going to look great because you get to actually watch me design and Sigma. I'm going to explain my thought processes go along. And that's the best way to show someone how to design is by observing and then just replicate it in your own version. Then after that, we take our high-fidelity prototype. We understand about user tested. And then you can take this and test them with your friends and family. And then you'll get some feedback and you can improve your design. And then finally, we look at the analytics of the testing. So we've improved that again. And then we talk about accessibility. So we take the prototype and we'll make sure it works for everybody. So 8% of the men actually a colorblind. So I'm going to appoint five sense of where mothers don't know why, but I upset them. Anaconda blinds. And we make sure that your app caters to all of them and we improve it again. So all of these you can show in your portfolio at the end of it, you'll understand the whole process and then you can replicate this out a couple more times and you'll have a portfolio. So the length of our course is actually appearing on screen now. So do you want to check it out? That's great. Hopefully we can build your portfolio together and you'll become a professional. Ux design it, and it is not, then that's fine. You can go ahead and you can do it all yourself. You can walk through it. But by doing it with me, we can have some accountability. Like I'll be there and you can watch someone who's actually been done that I haven't been in UX or three months, I've been an FFT in years. I'm not going to tell you you need a flashy websites. I'm going to keep things very simple and explain to you exactly what you need. So hopefully you can join me on the mental program. And I hope this has given you a glimpse into what a career in New actually be like. It's amazing. It's enabled me. I live in Wales with my with my wife and two children. You can work from anywhere in the world. It's a great salary. It's no stress. It's just, I couldn't think of a better career. So I really hope this has given you some energy and passion towards your career. And hopefully I'll see you in the course. Let's go.