 So welcome everyone. I I know I have some front-end developers in the room. Yeah Today we're going to be talking about Some UX tips and tricks research techniques you can use so even if your job title is not UX designer you can still do UX you still do do UX. So that's what I'm going to be talking about today Just to introduce myself. My name is Suzanne Durgachova. I've been doing Drupal for a while this is my 21st Drupal con and I spent a lot of time going around and talking about Drupal and I'm excited to be talking about UX today actually I'm on the board of the Drupal Association and I also run a Drupal training program. So if you're into that Come talk to me. I'd love to Love to chat about Drupal training So I'm here because I I care about the human side of building digital I started out as a as a web developer coming from a music background and I Realized that I like hiding behind a laptop. I really like it But I also like going out and talking to people And so bringing the user experience side to digital is a passion for me And as we all spend more and more time on our screens, right? Actually the experience that we're building for users becomes even more important because do people go around on their screens and They're unhappy or they're happy like we'd rather that they be happy, right? So just I wanted to start off by defining user experience every organization Creates experiences you create experiences all the time you create an experience when someone comes in for an interview to your office or When you go and plan an event and invite people to an event they they have an experience You're all having an experience right now here at Drupal con and when we talk about UX design user experience design We're usually talking about building digital experience Which is just one piece of the puzzle and that kind of fits into this rubric here So we have an overall experience that we're creating. We're designing We're designing systems. We're designing customer experiences and within there We obviously have a digital piece. We always have a digital piece. So that's that's where UX design lies and then inside UX design I mean, you're also designing visual elements and as front-end developers we often get caught up on these UI smaller UI elements that go into the visual look of a digital experience But so UX is a little bit bigger than that it's more it's more a It's larger than just design systems in terms of like small button design But it fits within a larger strategy of an organization So building great user experiences is a great goal. We want to make people happy We we could make them happy really easily if we just you know put videos of puppies and bunnies on on our apps and websites So making users happy is not the goal of a user experience strategy The goal is to find that intersection between what users want and what your organization or your business wants And I showed this slide yesterday at my UX study talk. I think this is really key Asking the questions of the business. What are you trying to achieve and asking the questions of the users? What do you really want and As front-end developers We are often brought in at the stage where a lot of the UX decisions have already been made And this is this is the frustrating part right anybody not in here like you come in. There's already a design. There's already That someone's already come up with the personas or the mock-ups some and And maybe they forgot to ask these important questions So I'm going to run through through some things today and I'm going to try and give you tools that you can use throughout the Throughout the design and build process Understanding that like as a as a front-end developer. You're not necessarily the one driving the whole process So ideally you start off a project and you get to know What the business goals all every every business every organization has goals that they're trying to achieve And specifically goals that they're trying to achieve with their digital strategy So sometimes the goals are really clear right like you might you might be working for an organization that has Really obvious goals like you're an airline. You need to get your customers Made to be and you're trying to limit how much you spend right Sometimes goals are multifaceted because you have different audiences You have different kinds of users and you need to balance those goals and then some of you I know some of you work for Organizations where the goals are really diverse and it's actually really difficult to measure to measure the goals so sometimes the goals are less driven around transactions and and Specific targets sometimes things are hard to measure like you want to inform people or you want to keep The administrators at your big organization happy So that's just one side of the equation the business side Users are on the other side right so the other group of people we don't want to ignore here is Who's actually going to be using these interfaces that we create who are the target users? So this is another important question to ask so if you're starting on a project and someone passes you a set of Wireframes or a set of mock-ups, and they're like, oh, we're ready to go You know step back and maybe ask like okay. Who are the target users? Let's do a let's do a check here first And One thing that's actually a bit tricky about asking who are the users is Is prioritization so a lot of times when you're building out a digital experience? You're you want to make something that works well for everybody you you're trying to be inclusive, right? And that's that's a a lot of a goal, but at the same time you do have to prioritize so often If you ask okay, who are our users you might get back the response well everybody we want everybody to buy our product So it's it's good to nail this down and to really say like no really who are we building this for and In which users are the most important? Because without that it's impossible to focus and and build something that works well So those are the those are the questions you you absolutely need to know the answers to And then from there, there's all kinds of UX techniques that you can use so I'm gonna go through a whole list of techniques I've never worked on a project where we've done all the things so usually user experience Work you're you're doing what you have Time to do what makes sense to do at this point in the process What you have the money to do because sometimes these things take money And then also what what makes sense like what? You need to kind of prioritize sometimes what research techniques you want to use just based on what problems you're trying to solve So I'll run through it a few things and try and give you that sense of what to use and when so one of the easiest things that you can do Is to send out a server to survey to users to the users that you want and the users that you have And it's easy to do a survey because it's just like a link that you send out to people, right? You want to be thinking like okay? Who are who are the most important users? Can I get them to fill in a survey? Not that's always Really helpful thing you want to know a bit more about your users like what their background is and what they're trying to achieve And what you can help them achieve So obviously the questions in the survey it's going to depend on what what you're what you're looking for But just getting that context of who these users are and what what they want and what their prioritization is that's really valuable and That's going to help you prioritize your content and functionality that you're building out When you're getting us when you're putting together a survey obviously you need people to Fill in the survey. There's lots of ways to recruit users Even just telling users that their Participation is valuable. This really helps convince Convince people to participate knowing that you're going to build them something better So there's some key questions you might want to ask About what tasks they're performing What they like what's challenging what they think can be improved The tricky part about a survey is that sometimes the best questions to ask There's not like a yes or no answer So keep in mind when you're putting together a survey if you ask a thousand people a question and you get back a thousand responses if it's not If you're getting back qualitative answers, it takes a really long time to fill in that survey So a survey is easy to do until you start asking these open-ended questions. So when you ask what's challenging if it's a if it's a multi If it's a multi-choice Answer it's going to be easy to process that result if you just give them a big text area You're going to have to go through and parse everything out Sometimes when you do surveys you might also do a first round That's a bit more open-ended and then do a larger survey where you're asking a big group and you You give them some choices based on what you gathered in the first round Another thing you can do that's a bit more in-depth is user testing Now user testing is great like Actually going and watching users use your your interface a website or an app But waiting until you've built out a prototype or until you're finished your project It's not it's not always useful at that point right often like you can't you don't have something to user test Until you feel like you're almost on the project So one way to get around this is to do user testing with Competitors websites and tools so you probably already in the process of building out Project you're probably already doing competitive research at some point You're going out of figuring out like what are the other websites and apps that do something similar So you can test those you can you can create a user test where you ask users to do these most important tasks that you've identified on your competitors websites and just see how they do and what you're looking for here is What works really well that your competitors do that you want to emulate and things that don't work well that you want to avoid so you're looking for patterns design patterns labels things people like that where they're able to succeed and things where people fail and and have a bad impression of the interface And you can do that with your competitors Projects, but also with your own right if you have an existing Website that you're redesigning you can start off by doing user testing on the old platform a Card sort who here's ever? Participated in a card sort everyone loves the card sort because people really love sticky notes for some reason Which is great because you can get people excited and get them involved The best thing about a doing a card sort workshop like this in in person is that you you get people who are involved in the project To feel a sense of ownership So if you have time to do a card sort workshop, it doesn't take long And it really helps not just with gathering information, but also making people feel like they're part of the process So how it works or how you know there's many ways to run this But how it could work is you get people into the room representative users and stakeholders on the project so people who care about about the outcome and Get them to create sticky notes and you can create them for them With different aspects of what your your website or your app are going to include so this could be content tasks It could be functionality It could be content that you don't have yet that you think you might need to write So all kinds of things that you think you're any going to need to include And then the fun part is you get the the users to organize these and to kind of sort them by what's related So you find out in the room like who? Basically who thinks what's related to what and sometimes arguments will break out and these arguments are the most useful things So you'll have maybe one stakeholder What wants to put a sticky note in one pile and another stakeholder wants to put them in another and then you realize? Oh, this is a this is a conversation. We need to have So usually the piles look way more messy than what you see on the right side there Usually there's just these bundles and there's scribbles all over the the sticky notes And so it you know usually there's some processing you have to do afterwards and you figure out like okay We put all these things in this pile here They're all related to one section of the website but what do we actually call that section and Like what's the right label and do we need all the sticky notes in here? Maybe some of them are not relevant. So there's definitely some work to do after the the card sort workshop to You know have a final result You can also do card sort workshops online So there's lots of different tools you can use to do this if you don't have everyone in the same place But it's less fun and you don't get the arguments So I definitely do the workshop in-person workshop if possible So it's some I guess it's your job or if you're you know if you're working with other UX people Maybe it's somebody's job to take all those piles of sticky notes and to put them into some kind of information architecture and that might be a site map or some kind of You know plan for the architecture of your site. There's different ways to represent this So having a plan that looks like this is is great But I think it's it's a really valuable exercise to put this through the lens of User journeys so once you have a plan for like what's how is all everything going to be organized on this on this website in this interface? You want to actually go back to thinking through how different types of users are going to interact with with this So you go back to that question of who are our users who are our most important users And how are they going to go through this site map? So you can do exercises like fun ones like this where you draw the user journey out as a little cartoon Or you can just think it through and then take that lens and put it on the site map. So actually walk through walk through your interface kind of imagining that you are a user and kind of validate that this site map makes sense and What what I think is really effective is if you take note of which parts of this Information architecture are being used by each persona And then you might find that there's some parts of the site map that nobody uses none of your key personas So then maybe you don't need those sections of the site. So that's a good way like going through you the key user journeys and Taking that and Applying it to your site map. You might be able to identify some content or some functionality that you don't need and that's that's exciting right like if you don't have to build a section of your website if it's not part of your You know stuff that your key personas need then Your project suddenly got simpler Okay, so you're taking all this information That you've gathered like you've maybe done a survey you've learned something about your users You've figured out what they need in terms of the website, then you've tried to map it out into an architecture But then what you really what you're sitting there thinking is yeah, but I'm a front-end developer So I care about like, you know What what button goes where or like how how this visually all fits together Like you're thinking a little bit more like tangibly what goes on each page, right? and So it's important to think about what elements of the interface that you're building are influencing the user experience So within it within the context of a page you have things like the navigation The emphasis you're putting on different elements and what you're calling things And these have an impact as well So it's not just having a user journey where the user goes from page to page But actually within a page. There's a lot of things that are influencing the user experience So as you're building out wire frames, so how many of you here are Building creating wire frames some of you how many of you use wire frames like you look at wire frames and you're like, oh, I have to build that Yeah, so things things that go things that go into wire frames have a huge impact on on UX, right? but It's important to Kind of think through perceptions on the user side. So even without doing user testing There's a lot that you can do just through building empathy for your Building empathy for your users and thinking about what their expectations are So in terms of how a user assesses their experience, they're affected by by a bunch of things One thing that's often overlooked is time timing like how long something takes so as front-end developers You know, we're we're impacting the performance and how we build things and in some projects performances is key Predictability do does the user get what they expect when they click on a button, you know, and they move to another page Like are they surprised so an element of surprises? Like usually about usually you don't want surprises. You want people to have a predictable interface People like simple things but the simplicity has to be commensurate with the amount of Complexity that they're getting out of it. So if it's a really, you know, if they're buying a house Then maybe you can have a more complex interface than if you're just taking a cab, right? So it's like you have to think about How much work that the user has to do and whether it's worth it to them to do that There's also some more subtle things like tone of voice. So Part of UX is actually writing content. So how many of you hear like right? Text that the user is going to see on the site like you're writing button text or labels or Yeah, sometimes this gets left up to us as front-end developers And it's like, oh, nobody thought about this. This isn't really part of my job description But I'm writing the the user interface text because nobody thought to do it And the tone of voice there is really important So ideally on your site, you'd actually have a style guide to define this But if you don't you have to think back to those personas and those key key audiences who are going to be interacting with this and Then yeah, does the site have a connection with with these personas sometimes that's harder to measure It's more of like a the visual experience. Do they feel like they like they like this website And then success and failure like can someone actually do what they need to do So as you're thinking through all these things and assessing the wireframes that you have You can you can kind of put your wireframes through this filter to see if you know you think that they're doing the job But at some point it would be nice to do some testing. So This is supposed to be a video. Oh, nice. Yeah So you can do testing with wireframes like this like you can just show people wireframes and Get them to do tasks and ask them what they think and this is a simple way to Get started with testing and you can do this kind of testing with just a couple users and sometimes realize really important things about the workflow or the organization of your interface that Don't work or could be improved and once you've built out an actual Inter like a working prototype either using something like envision or actually like something people can click through Then you can do user testing where you sit someone in a room You have them sit at a laptop and again you watch them use an interface and the most important thing here is to listen. So One thing that I I train people how to use Drupal So I like to go and show people how to do things and answer their questions and help them But when you're doing user testing, it's kind of the opposite. So I'm usually the one when I do user testing you're sitting there taking notes and it's Because because I I have a hard time just Listening and watching somebody because I want to help them So it's really important to to listen to see what people focus on And to just pay attention to their pain points. That's what you're trying to figure out What what are things that are challenging when somebody's using an interface and when you're doing? user testing the User testing, you know, it doesn't have to be a lot of users. You can go and do user testing with five users You can bring them into your office one by one and just sit them down Or you can do this online You can use video conferences and you know record the sessions and ask the users to to do the tasks and And that works really well too You don't need a ton of users To find the most important pain points and the most important Things that work well So what takes a long time is not so much for doing the user testing It's taking all of that feedback and turning it into something useful for the team to iterate on so Don't underestimate the amount of time it's going to take you after you do the user testing So for some of our projects, we have time to do user experience work like I've been describing and for some of our projects we don't so some projects the timelines too tight or You know, we just don't have the There's just a list of things we have to get done and UX just gets always pushed to the bottom Or we get brought into the process too late, and I think this is one thing that often is Front-end developers we struggle with right and it's nobody's job to do the UX It ends up being our job, but we don't have enough time to actually do it so one project that we've kind of Started at evil at evolving web at my company is we run UX events and the format of this I think you could you could do You could do anywhere you could take this and run with it. Basically we have a few projects people present prototypes or working demos of of websites or apps or whatever they're working on and we get a group of people together and After the presentation could be a three-minute presentation where you're just showing one part of an interface that you're having trouble figuring out and The group goes around and gives their first impressions They give positive feedback what they think works well, and then they talk about and then they give Critical feedback things that they think could be better things that look like they could be improved And it's kind of like doing user testing in a group So you don't get quite the same Level of Details when you have somebody using the interface sitting next to you But you get a pretty good Feel for these first impressions and what people are thinking of of the interface And even just going and taking your project and putting it up on a big screen and showing a bunch of people You're probably realize yourself a lot of the pain points that people have So this has been really useful for us as as a UX Tool and so we use it. We use it as one of the many things in our toolkit And I think what works well about this process is that it involves listening So what the way it works when I've done presentations is present for a few minutes listen to everybody's feedback and Not respond to them and say oh, yeah, but you don't understand the you at the Prototype is supposed to do this. You have to just listen to the feedback and take it in and write it down and You know kind of reflect So if anyone's interested in Implementing something like this. Let me know if you if you're interested after and I can tell you all about it So I know some of you here are Looking for a toolkit like what are the actual tools? What is the technology that's we're all Technologists and we like tools and you're all getting out your phones and taking a picture of the list This is not a complete list. It's just a few tools There's so many tools out there for UX now like it's exploded. I could probably put all the logos and it would be like a Crowded screen of logos. So there's lots of tools out there prototyping tools You can pick whichever one Envision is what we've used but there's obviously other things just like it AXR is up there. That's or at Azure AXR. That's that allows you to do a little bit more interactive prototyping A Figma is a design tool that's actually used for developing designs for Drupal So if you're interested in getting involved in the Drupal UX process That's a cool one and then in general, you know use use the Google tools use Whatever you need to for running online tests You can even just use something like zoom to do video conferences and record them So the simpler the better in terms of your tool set Don't try and get too complicated Don't let the tools weigh you down. That would be my advice there So takeaways you want to empathize with your users you want to get in there and get some Some information about the project when you're starting the front-end development process And you want to do a mix of quantitative and qualitative research Qualitative research is better for convincing stakeholder. Sorry quantitative research It's easier to convince stakeholders when you have numbers But qualitative research is going to give you a better feel for the actual purpose of the project and help you make decisions More quickly Also quick note who is going to be here tomorrow? I know you are all into UX now So I see you with your hands up there We're doing some work on the UX of Drupal So if you want to come help out with that come to the admin UI table We would love to have you and if you just want to get involved in some user testing Just to see how that works as either a tester or a or like someone Doing the test being the test subject you can sign up for that UX study and see how that works and Also, I encourage you to give feedback on Drupal con and this session at the URL But that's that's going to be sent to you in an email like a whole bunch of times So just at some point click on it and fill it in please it would be very helpful Thank you very much And as promised, I think I have 90 seconds for questions Yes, okay Yeah, that's a really good question. So the question is How do you communicate to front-end developers about the UX research that's already been done? I'd say like don't under don't underestimate a front-end developer like they can understand the results But they're not going to probably have time to go and wade through like a spreadsheet where you've done testing with 20 people and there's notes So having some kind of an overview where you're telling them about the personas and kind of consolidating that information like like what are the What are the key calls to action? What are the users actually trying to achieve? That would be useful having that site map with the user journeys mapped on to it I think that that would be a really nice outcome for front-end devs and then maybe even just to have some examples so That might involve some like training for them from your perspective of like what one of the most important things to look at in terms of the Basic like personas and site map and then how does that translate into a good UI? But yeah hard hard problem to solve for sure Anything else? Well, we have the room Okay, well if you want to come and talk to me afterwards. I'd love to chat more about this. Thanks