 Yn ymgyrch yn oed. Felly, y web yw'r amgylch yn ddangos, ond byddw i'n ddim yn y ddim yn y gweithio. Felly, mae'n ddiddordeb yn y web yw ddiddordeb gyda'r ysgrifennu. A'r ffordd y ddiddordeb yn ymgyrch ymlaid ar y hoffa, dwi'n rhan o'n bod o'r SNF, SNF, ac mae'n gofyn. Yn ymgyrch, mae'n gofyn, ond byddwn i'n defnyddio'n ddifennu o'r web yw yw'r ysgrifennu, Mae'r prynsyll, drwy'r ffordd, iddyniaeth yn ei'r ysgol nesaf, ond mae hwyddoi all y dyfodol sy'n ei ffordd. Dwi'n d PSI yn ymladiad yw leid defnyddian o ddefnyddio'r prynsyl,順 mwy'r dda, ond rwy'r dyn nhw'n lle iawn, bod rwy'r hunain rydyn ni'n elwodraeth ei ddweudu'r rai rhoi'r erfod, sy'n gofio'r aranan o blynyddia ni i'r llif, loaded when I was working at the BFI, which is the British Film Institute in London. I was in charge of the creative direction when the web team was working on a redesign with an external agency. So it was a really long and complex process and it was incredibly interesting because I was involved working with very large teams on both sides and large budgets as well. I was illuminating, I learnt about personas, I learnt about user journeys and so on. So a lot of the mystique behind it was sort of revealed to me. I learnt also what made the difference between a web project and a creative concept. Sadly a BFI website is actually still as bad as it was 10 years ago, if not a little worse. Because that's what happens sometimes with large organisations. So in a way if you're smaller you can have the edge. Because changes are much easier to make. So when I went solo on the web and I had to work out how to create websites that helped customers, as well as the businesses, I asked myself, can UX help me? Can I find a way of adapting the process so that I can create websites that make sense, help the users and also help the businesses by making sales or capturing leads? Perhaps even more importantly, can I do all this on a small budget and with a very small team or no team even or a team of one? A short answer is yes. So if you're a solo agent or a small agency looking to improve your processes, then this talk will really help you. But if you're a big guy who has a girl who's worked with very large projects or with big teams then it's probably of no interest you already know and you probably have processes that are much more complicated than what I can possibly show you. So having made this premise, what is UX? UX for some designers or developers and especially clients, small business owners who haven't been involved in the process before. It can sound like a buzzword or a trendy term or even though actually it's been around for a long time now because I think that Don Norman at Apple created the first UX roles. About at least, I think about 20 years ago now. Well, what those two letters stand for, as you probably know, is very simple. It's user experience. So when we come to think of it, it's a really, really simple concept but it's also essential because what is a website without user experience? Simply put, it just doesn't exist. So whether you have thought about it or not, your website or your app or even your product will give your users an experience. It's as simple as that and it's pretty much inevitable. So when assessing the user experience of any project, there are three essential components to consider. So the first one is the look because visual experience is essential to establishing understanding together with credibility and trust as well as the good feeling that beauty gives us. Then it's how we feel. Is it a joy to use this website and interact with it? And then how actually usable the website or app or product is predictably easy to use and functional as well. To be clearer, let's have a look at a few examples of users experiencing real life products and having a good time or not so good time with them. This is an actual real bike path in the city where I live, Valencia, in Spain. And this bike path fail is not the only one but it's for sure the most spectacular in town. Moreover, it's a tiled path which makes for quite a bumpy ride at any time and very slippery when it's wet or raining or when they've cleaned the road and I have the scars to prove it, I can assure you. So what emotions does this experience generate? Well, first of all, it's frustration because we have to head back now, we can't go anywhere. The second one is bewilderment because you're like, who the hell thought about this? I mean, how can you do this? And then the blast feeling is definitely anger and I don't need to explain that, I don't think. So if you had planned this experience and if you had empathised with the users, you would have got a result that it's a bit more like this one. So, you know, this is a wonderful feeling of order because you know exactly where to go and where you need to be and what the path is for, then safety because the cars are safely completely somewhere else and then anticipation because I really look forward to the wonderful adventure ahead of me. So if you compare it with this other real-life situation which actually looks like something that needs a graphical treatment, doesn't it? So therefore similar to a problem that we might be asked to solve as designers. So first of all, I think if I were to park here, I would definitely first feel overwhelmed and then I would be, which would be followed by confusion and then in the end I was just to come to despair because I would probably give up parking in this spot altogether. I mean, there's no point. Compare with this instead. So here I get an immediate feeling of clarity because I can interpret with certainty what I'm meant to do here and then this all brings wonderful peace of mind and basically they won against the big guys. So the big lesson behind all this is ignore your users at your peril. So the online version of all this is vaguely and a rather daring comparison is Facebook because the final experience with Facebook is completely shaped by its users and it's developed in ways that the creators could not possibly have predicted. However, just like the previous example, this unpredicted organic environment is the result of a planned vision and that's what makes the difference because the vision behind Facebook was always to create user generated content so it's not a surprise. Because if you don't plan it could go like this. This is my favorite website ever and I invite you to also check the code, the source code and it's a living and breathing example of a UX that's so wrong. It is actually right, which can happen because this is a website that is conceived to be utterly over the top and it grew organically over the years and it's animated and garish and it really isn't about the user so much. It's all about Ling, the owner and it's completely unapologetic about it and that is its strength. But I don't recommend following the example because Ling is a maverick genius, she really is and she turns everything into gold and probably I wouldn't say no one else but very few other people in the world can get away with it and her business is 100% solid so she can do whatever she wants, but you know. So in a nutshell, whether you've planned it or not, your users will inevitably experience your site. So while unplanned organic growth does happen, it's not the norm and it tends to happen anyway within a highly planned project that is used in alternative ways by its end users. It hardly ever happens when no planning has taken place. So the difference is that if you have planned your user's experience, you're likely to first of all control it and then you give them what you want them to experience and you're also highly likely to give them a better experience. So 100% fail to plan equals the planning to fail. So just do it, plan it, you know, and you can totally do it, anyone can do it and really I maintain on any budget. So starting from the end, how do you know if a site gives good UX? What are the benchmarks for that? So we already know that it needs to have good looks and feel and usability. But then if you can answer these three questions, does the site or application give the user value? Does the user find the site or application simple to use and to navigate? And does the user actually enjoy using the site or the application? Very, very simple questions. But you can see immediately that there is one keyword that we keep repeating here fairly obviously at its user. So UX design is simply user-centered design and Don Norman, again from Apple, first mentioned it in his 1988 book, The Design of Everyday Things. So the colour travel projects and elsewhere, because he does it in various places and I'll have other examples that I'll spare you, all failed because the vanity of the architecture and other city planners wear at the centre of the project rather than the users. And I think this is the shift that we need to make, those of us who work with small clients. Because smaller clients tend to think that it's all about them and their product and about their business. And while they're also users and they're humans as well, so they also definitely play a role, it's not all about them, it's also, you could argue mostly but it depends anyway, about the end users. So this is the definition of UX design from the Interaction Design Foundation, which is brilliant and I recommend it to you if you don't know it. And I'm just going to read it. So user-centered design is an iterative design process in which designers focus on the users and their needs in each phase of the design process. UCD calls for involving users throughout the design process via a variety of research and design techniques so as to create highly usable and accessible products for them. And by the by, actually, you don't need to even be a designer or have a design degree for sure to carry out much of the UX process as we'll see it. So in a way the UX process can be adapted to a number of situations and not just web projects. So I think that this is what is revolutionary for a lot of old style designers, which I used to be. Instead of designing in our ivory tower, we really need to get down and out and mix with our users. With one caveat, to be careful and maintain your role and authority as a designer because you still need to be the one calling the shots you are the professional. So for the UX process, there is a methodology called design thinking that can be extremely useful. It has drawbacks like anything and detractors but I'll go into that now. It's very, very useful. So basically it's, by using a design thinking process you make decisions based on what customers really need rather than just relying on historical data or making risky bets or gases based on instinct instead of evidence. For example, a real-life situation that came to me, a prospect saying that wasn't my client yet, saying we need to increase our traffic. We don't have enough visitors to our site. And the traditional way of solving this would be to say, okay, well let's do a Google Ads campaign or a Facebook campaign or look at other methods of building traffic. But the design thinking approach is to ask why, which is also the UX design approach. The first question is always why. So when I asked why do you need an increase in traffic, the answer was that they're not getting as many sales as usual. So the next question is, why aren't you getting enough sales? Maybe you do get enough traffic but not enough visitors are converting. So why does that happen? So in the case in hand, I actually found out from the analytics that the website, considering it had zero SEO, zero anything, actually did get a decent amount, number of visitors, but there was absolutely nothing for them to do once they got to the site or to come back for. The content forms were buried. You couldn't actually tell the website was actually selling from visiting the homepage. So the need wasn't traffic. It was on-page optimisation. And without the initial why question, it would have been just easy to do what the client asked for and get them to waste money on ads or Google or Facebook. So then what I did is I ran a short survey of the, with some of the existing clients which confirmed my initial analysis, which was absolutely nothing for them to do and it was quite difficult to find the content form. And this is a boutique travel agency that only sells via direct contact. So they only talk to people that the sale happens offline anyway. So by putting the why question first and then asking the users I got to the real problem. And this is what design thinking is all about because it's human centric. It gives us a framework for the UX process and more importantly it makes users make sure that we put the users firmly at the centre of the process and that is empathy. So in the case of the website that I just mentioned a short-term solution because we were just not into the big job yet without a redesign was to first of all change the headline and actually explain what the website was about. Which is literally boutique walking tools on the Camino de Santiago, that's all it is. And adding an immediately visible find out more button and a testimonial for credibility and social sharing buttons. So this still didn't mean there was anything to convert to or that the photo still involved the users in any way but the experience of the users was immediately improved because we put them at the centre while the previous homepage had been designed simply to the taste of the users or the business owners that liked the image and thought that quote was so poetic. So this design thinking process that puts the users firmly at its centre, it's built on five faces and they're non-linear. So I'm just going to give you a very sort of quick overview because it's a big thing. So the first face is empathise which is with the users which is instrumental in defining the problem then you ideate the solution and you prototype it and then you test it. So sometimes you will need and this is the essential bit you will need to go from the prototype back to the idea or from the test back to the definition or from the test back to the idea again or sometimes from the test or the way back to the empathy face. That is to say we'll see it's the research. So what I call the abbreviated UX process because UX can be huge and you know take humongous teams and have loads of really the testing is just another way of calling it and to me research is what takes up most of the time because if you do that well then you will have less going back and forth. Not that there's anything, I mean the going back and forth once you've you get to the testing is essential is the best bit about it and it's what I love as opposed to print because in print when it's done it's done you know you see a type when you literally tell your hair out and there's no going back but with this it's fantastic because you can base your you can improve the success of anything just by going back testing, improving optimising and so on. So this is how the two processes are integrated so empathise and define correspond to research then ideate and prototype correspond to design and then test and validation are essentially the same the same thing, just the two ways of calling the same thing. Now this may seem like a longer complicated process when we're dealing with smaller clients who maybe have never heard of it so how do we sell it to them? Well there are so many advantages to good UX I'm just going to tell you a few of them here so first of all UX is a quality measure so it improves a business's refutation because the users are happy but if they're not happy then it could really be much worse so defining needs from the beginning, maybe this is the biggest one makes it much easier to complete on time and on budget and then it's much more expensively obviously to fix bad mistakes and thanks to the research you know what the competitors are doing and your product will be better for it and no point building something that isn't needed because you know if you don't ask first whether your users need something, why build it so just do it sometime, just don't sell it you could do it in a day if you want it's perfectly possible to the whole thing in a day, just build it into the budget and do it so also consider there are always two audiences in your UX process and that's the stakeholders which means anyone who any business owner or manager or even sometimes employees that have a stake in the project on the business side and then the users and we need to empathise with both so in a big UX project there's usually there's a big team as I was saying earlier where everyone, there's lots of different roles and lots of different faces to it but we can simplify hugely to a team of one and still get great results so the research phase is when you hold stakeholders interviews and users interviews and you need to find out as much as possible about your client's business and their market and you can do it with questionnaires or workshops because in my experience as some clients you just say I can't write, I can't be bothered to write so what you do is say okay great and give me an hour of your time and you do a zoom call or you see them in person and you just run them through all these questions about their business and usually when you start asking lots of questions so many things come up about their business they will inform the designer especially if you keep asking why things like well I want always I want a new website why, what's wrong with the existing one even the simplest declarations that seem self-explanatory always ask why even if you can see that the website is rubbish it's not responsive or whatever ask it because it may always unearth things that you hadn't considered that the owner doesn't even know and also another important thing to take into consideration so I'm just going to do this because this is where we get to the definition of the problem by asking the questions we get to the definition of the problem and also always find out who is going to be influenced by the changes by the new project because sometimes the business owners don't involve the employees and that can mean a project failing when the employees actually either feel disgruntled because they've been ignored or they use the product website, the app, whatever it is on a daily basis so they may have insights that the business owners don't have and also business owners sometimes suffer from proximity blindness because they're too close to their business so they always need to ask as many people as possible anyway so we're now in a defined phase but also we need to ask obviously the users to hold users interviews now this sometimes is a bit more complicated with small clients because some of them are not sorry I just threw a bit of time because sometimes a small agency or a startup may not even actually have users yet so just be creative you can use Facebook groups you can use with questionnaires and surveys you can do workshops as well when you have the budget and then this will lead you to the user personas and the businesses ask the owners because often a small business was created by someone who was a user and had that problem so they often can give you a lot so what you need to know in order to create user personas and this is really really essential so you need to know the who so their demographics you need to know even more importantly the why the emotions, the feelings the successful outcome the desire then the needs what do they need and the solution can we how can we meet their needs and then the flow where do they come from and what do they do when they get to the website and then give them a name always give them a name and do whatever you do for them so in the case of the boutique travel agency who is Sharon 55 North American retired and so on why is really important learning desire to complete the community Santiago to fulfill a promise made to a relative to pass away but they're really worried they're not fit enough and they also want to have a comfortable time they don't want to rough it out so in the research we get to the site map and the user personas that's where we got to now just as a reminder then we get to the design which is actually still the planning phase so nothing to do with the UI yet and site map and user so this is what the design phase means site map and user personas user flows super important and then the wireframes now this is what was done at first because now I am designing with Sharon in mind so it's still not a proper redesign but everybody can do the community of Santiago is what Sharon wants to know as soon as she gets onto the website I'm talking to her directly but we need to draw them in and sometimes she visits but she's not ready to buy yet however or even get a discount voucher however big and bright we make that button it's just pointless so we decided that a funnel with a quiz was a thing to do so we need to address all her fears and needs and that can best be done with a quiz because no one can resist a quiz and the answers in a quiz can really address the thing now this is the really really revolutionary thing which if you've never done I really encourage you to do because by doing I mean the site map is very useful but when you put yourself firmly in Sharon's hiking boots and you think okay she gets she sees the Facebook ad she's interested but sometimes she's ready or not ready so what happens if she's not ready I have to sort of rush through this a bit but you'll get the slides after this is what makes such a difference because if you do a flow like this first of all you will feel really really sure that you've considered all situations and then it makes the actual design phase so much quicker and then wireframes is what comes after the user flow which is an image or a set of images that actually is just everything that goes on the page without the styling you don't always need to do them yet because sometimes I do them when I have to hand the project off but if I'm doing everything myself there's no need, you can skip them if you're a team of one or if you use a page builder because if you use a page builder sometimes there's no points and with low budget clients we often use page builders so because I'm thinking like Sharon this is the landing page for the quiz because it will reassure her it asks the right questions and it has a photo that Sharon can identify with and that triggers the right emotions and then the quiz itself addresses all of Sharon's fears and questions she has again a photo that she can identify with and ends offering a free list of what to pack on the Camino that she will definitely find useful then the validation is where you test things but again you can test after you've launched you can do that on a low budget project so usability testing on a shoestringer or a deadline go into a coffee shop and ask people just randomly can you test this even if they're not a target audience your parent, your kids, your parents, your colleagues who haven't worked on the project your friends, their parents, their kids, anyone or Facebook groups Facebook groups are brilliant in this case I found colleagues that online who were 100% demographic all her husband parents, friends parents who were also the right people and a few online tours to carry out usability testing some of them are not they're all variously different things but they're all super useful and they're either very cheap or they're free so well not free but not all of them but they're definitely cheap so also bear in mind that sometimes five tests can give you the problems so try to find out enough with five tests you don't need that as many as you think so basically the whole point about UX is that it's not a solution that's perfect straight out of the box that's the whole point it's precisely the optimization phase so that's why methodologies such as agile or lean work so well with UX because deploy it quickly deploy it quickly and then go back and optimize all the time so make sure that your clients are aware of this expect perfection straight away as you launch because that's probably not going to happen but you get a solution out then look at the data go back and make it better so this is see the you know the design thinking process it's always about going back so basically back at steady right try again, fail again fail better thank you can I just say very quickly there's a Facebook group called design for geeks where we talk about these things all day long and also there's a free UX course coming up soon if you're interested thank you, thank you very much that was even better than I thought before so we have time for questions now let's actually try with the same at work in Europe if you have ever been there so we have one microphone over there and if you have any questions can you rise up and walk to that microphone and ask your questions from there we also have this funny thing that we can just draw on you if you want to check that out but if you have questions can you stand up and walk right before that microphone you must have at least one I do have one backup question if you don't have don't be shy you ain't all finished okay I have one question I just need to make that up now you were mentioning about user testing and you kind of already mentioned that it's it might be a little bit hard with the smaller companies or even the mid-sized companies because they don't have the resources to do that and you kind of mentioned what are the other ways of doing the user testing can you kind of walk that through a little bit more and another kind of related question that is what is the biggest differences in kind of stakeholder kind of interviews and with the user interviews or whatever you do with those for the usability I really think that usability is the scariest thing and I think that in a way is the easiest thing because when you think of user testing people think of big companies getting a focus group in a room and making them test a product and so on but I've been in focus groups I've used focus groups and sometimes they roll out things that shouldn't be rolled out in a way it's much much better to not have a focus group I think it's an advantage if you visit the website it's terrible and it still is and they've been trying to improve it for 10 years and they can't go past the focus groups and all the red tape so user testing really gets someone who's never seen the product please use a friend even if they're not the user the actual target audience it can be even better imagine someone who doesn't have a clue about what it is that you're building who for or what it is for and say what do you do when you see this do you understand who it is for it's even better and just like I said I had to run through it because I was late but anyone will do and then if you want instead if you have to test things that are much more specific to the audience then Facebook groups I mean you know love it or hate it Facebook can be very very useful and I found so much help in Facebook groups and she did stumble upon my absolutely perfect audience so it's actually what seems like the scariest thing is the easiest thing but to make sure that it's always that you find people who are as far removed from the project as possible because you will also suffer from proximity blindness and it will become very difficult for you to understand whether you may or may not be working there or yes, different stakeholders interviews and users interviews stakeholders interviews are really to find out about what's wrong with the business because even if it's a relatively healthy company if they come to you for any reason that means that there's always something that maybe wrong is the wrong word actually but something that needs changing that needs improving and as you probe and you ask questions things come up I mean it could be for instance that the two business owners are not getting on or that one of them is really thinking of being hands off the business and sort of that's why they're trying to build a different system so that's what you need to do that's your task is that that's why the why questions always why why why and then always ask them their main why because when you ask why as we were saying the difference between the who the who the demographics and the psychographics when you ask why to a business owner it's also psychographics you will find out what their successful desired outcome is which the same thing applies to both users and owners but with the users it is a little bit more difficult because they are a bit further removed from you so you have to put yourself in their shoes somehow and it requires I think a little bit more empathy because you are kind of more on the client side that you are on the user side so sometimes of course that's why people choose niches because when you choose a niche then you get to know them really well and then you understand them a little bit better and then it changes to that because I think that actually you may find yourself as I was saying again the proximity blindness or you may sort of be repeating the same solution for a certain industry whereas different even if it's the same industry different businesses may have completely different issues does that answer or less yeah it pretty much yeah thank you if there are no other questions from the audience can you work or we can we have the microphone, let's test that out just throw it to you hello, I'm Antti and I would like to ask you how would you use analytical data in the design process or does it have any value like Google analytics or Hot Char huge huge huge huge absolutely huge value this is sort of the second phase I see that this is a very abbreviated sort of story of the face before launch but definitely I don't I usually use someone external to do the analytics because that's not my strong I don't actually want to learn but it's such a complex area and you need to get it right you need to have someone that sets the goals correctly you choose a conversion or more than one Google analytics and then you look at the data and you think this is this was a guess we didn't actually back it up with evidence obviously it doesn't work which could be for instance the type of freebie that you choose it may be that the analytics show if no one downloads it it means it's of no interest to the end user so yes analytics are hugely hugely important but usually comes after so you launch and then style deploy, optimize and you keep going back and optimizing and seeing what works in this project I'm talking about which is ongoing it's live now I'm talking to them right now because I don't think for instance the big button with a discount does nothing I think if I take it out nothing will change but there's another discount placed somewhere else which is a pop-up when there's intent to leave and that works people go for it because they need a little bit more time they're not going to press a button the minute they land on your site so I'm optimizing that as we speak and I think I haven't used aggressive enough techniques to get the at the end of the quiz I'm not forcing anyone to give their email address in order to know the results but again don't be too attached to the analytics because even though a lot of people have completed the quiz not many have downloaded the freebie which is how we get their email address but what I'm thinking is this type of people get in touch directly and now they've taken the quiz they know that they can do the Camino they've learned a hell of a lot on the Camino by doing the quiz I think they'll come back the fact that they haven't we haven't got the email address now doesn't mean that we're not in their we're not their favorite travel agency for the Camino yet so I hope that does that answer the question basically yes analytics very important