 Happy Sunday, everyone. Thank you all for coming. So we'll talk about engineering intuitive experiences My name is Teresa Novotna. I'm the interaction designer at Red Hat working on the management portfolio satellite insides and cloud forms I've been with Red Hat for it's going to be a year And I'm Colleen Hart and I'm an interaction designer with Red Hat as well Working on OpenShift and it will be about three years. I'm out of the Boston office and I'm based here in Bernou USA team has about hundred people and entire Red Hat and we cover We make our products more user-friendly and we keep the user experience consistent across the products So we will cover today. We'll talk about empathy and how it is a first step in user-centered design We'll talk about some Failed designs and how not to do it, but we'll provide you with five tools how you can make your products more user-friendly I have a question. How many designers do we have in the room? How many engineers? Okay, good to know Well We'll start All right, so empathy is seeing through the lens of others and as we saw there's a number of engineers in the room so thinking about empathy and being empathetic with you all as word designers we Think about from a business sense why empathy is important because of course the customer is central in this idea and from a Presentation standpoint. It's important to know your audience So we have to be empathetic and understand where you're coming from and from a design standpoint It's very central to understanding your users and what they're looking for first and foremost so we asked a number of our colleagues other Red Hatters who are engineers developers to fill out empathy maps and These are just a subset of some of them So we asked another number of them to fill out an empathy map Which basically asks what they're seeing what they're saying what they're doing hearing thinking feeling So let's take a look They were seeing these are real quotes. We didn't didn't make these up messy desks alternative technologies bugs and broken codes sometimes They're saying we need compatibility this migration might be a headache Nobody understands They're hearing I don't get it maybe from us there's their hearing we need to meet the deadline different groups advocating for different tools of course and They're thinking or feeling Bugs are annoying. We change process too much and people maybe sometimes deadlines and broken code are painful So this is kind of an idea to help us Empathize where engineers are coming from and get us kind of in the right frame of mind to present So we try to empathize with you the engineers because empathy is the first step in the user-centered design Ux design is the act of planning evaluating system and evaluating system to maximize good user interaction But rather than jumping into the solution. It's important to understand our users needs goals Validated in assumptions, but also ask for the right feedback You can see how the designer attempted This journey to be but what the user experience actually was Even in our designer job we design things, but if we don't test it on actual users We don't necessarily get it right so we need to validate assumptions I Wonder how hard what there was to get some money from this ATM in This case, I think I would rather take the stairs safety first If I'm charging my mouse, how am I going to be charging it at the same time and using it very helpful These are a few pictures from Boston where you can see that it's really easy to figure out when I should park Or so how to get to specific locations So if you solve the wrong problem, it doesn't matter how well you solve it And we want to solve the right problems and validate our assumptions Has anyone here participate in a usability test Nice So you have gotten to the feedback loop So we show user experience at the center of this diagram kind of as a balancing act so balancing business goals, of course maybe from a PM level trying to figure out what we're what we're solving but there's going to be technical constraints involved and We're focused on the user needs so balancing these three components is Hopefully gonna lead to a great user experience, but it's not easy and not always simple so The how do we get there and the process? looks something like this similar to Andreas showed something very similar yesterday, which really is Dumbed down to an idea, so we'll call it design But it doesn't necessarily mean it comes from a designer. It just means there's some idea. It's it's some design then there's Some validation of that idea or design and we'll call it the research or feedback and Then there's some implementation and we'll say that's the build so these three components work together to Hopefully be an iterative process and a cycle not just let's design something and throw it over the fence And hope it works when we implement it so starting with some design Maybe it's just jotting down an idea on a piece of paper to kind of help explain your idea or Create a wireframe. Maybe a more advanced sketch Maybe it's then moving on to validating that idea with if you're working with a UX team you could work with researchers and run a Usability test or if you're not that's okay, too you can still get some form of informal feedback on a paper prototype or early early design early sketch or at the point where you're implementing something and going back to validate your assumptions and Get some feedback on that implementation. So anywhere in that process is a great time to get feedback. There's no Time that's not a good time for feedback. You can always implement it Hopefully somewhere in that process of your your past the idea phase and you have something maybe on paper or your you're all the way Hopefully before production and testing something there. So there's always a good time to get feedback So of course, yeah, when you're when you're building one of the main things here Why we show the arrows both ways is It's not just design and then research then we're building We we'd also like to go back and test you might find something different in that case So maybe when you're testing on a real implementation, you're finding more bugs Whereas early on in the process you're kind of validating The flow and kind of earlier concepts So hopefully this this loop continues and it's an iterative process where we we learn So that first diagram that Teresa showed where the design was meant to be this nice gate And the experience was really just another path that users made we can learn from that and say, okay We need to pivot make a change Then revalidate our our assumption everyone plays a role in Improving the user experience. I believe we all want to use user-friendly intuitive products and That is why we want to provide you five tools how to make your process Easier and include these tools into your process So we will talk we'll talk about paper prototypes community boards user drawings cart sorts and design systems Each of these tools could help to you make products more intuitive So the first one is wireframing or paper prototyping It's a really simple one where you can choose just piece of paper or a whiteboard and Draw out your flow just ask the questions Where would I click if I'm trying to accomplish this and that and then show it to someone And then get that feedback Use boxes squares arrows and just draw out and visualize what you think how the screen could look like Because when you put it on actual visual you can that's the way how you translate it so people understand what you mean This is a wireframe That is hand-drawn, but we will show you an easy way how you can just get a quick feedback So Colleen, where would you click if you were trying to add a provider add provider button? I think it's a button well done So you're adding a provider you are in a step three right now. You're adding some configuration data But I think you forgot something on this step to how would you get there? I guess I'd click number two and change my information. Oh So I thought you were going to click the back button. I haven't thought you can click on the top That would work too. That looks good. Okay And here you are all almost at the end reviewing and submitting your information What would you expect to see when you submit? Maybe my results my new provider. I hope it works. Let's see so you get a notification great job your provider was added, but I think you had a great point that The actual provider should be shown this screen as well So this was a short example how you can quickly validate your sketches wireframes It's always better to get more people involved. So at least Let's say not one person but get more points of view but it can be that easy as Just asking a simple questions about the flow So the second tool we'll talk about is user concept drawings and it's kind of similar to I guess the first but the first being You're drawing and wireframing sketching your own ideas and trying to convey them to somebody else whereas user concept drawings or mind mapping is You're kind of asking users or other folks to describe their ideas to you. So maybe it's just still simple Squares circles boxes and lines arrows. It can be really simple, but they're at least explaining Some idea to you how different objects relate to each other and you can get a better sense for How they might want to use an interface that that you're building and I'll give you an example of how We did something similar at redhat summit last year because we were working on an application topology view and We thought okay. This is could be a complex view. We better understand how users Think about and visualize their Application topology because it was a visual interface and an interactive one So we wanted to be able to ask users at summit to draw on a white board or an easel there How they visualize their application topology and we we asked follow-up questions about oh, okay What action might you want to apply here? What would you need to see in order to accomplish your task? so just a couple of examples of What we got from those users and it was it was really helpful and people got pretty into it So if you can sit back and kind of let folks Explain their ideas and give them some time to draw it out. You couldn't really learn learn a lot on the other side, too So the next example is card sorting, which is probably more more familiar and often used for things Like navigation but finding a better navigation on a website or some interface Maybe it's to help prioritize different items in a list or group or categorize things And so let's it could be done with simple sticky notes like this example Let's say we work for Netflix and are trying to figure out how users want to interact with that interface Do they care about genres and they want to search by genre? Do they care about Going from TVs to movies to documentaries or they just want to know I want to look for something funny so better understanding how users search for something or how they group Items can can help you early on in the process So this would be kind of a way you get feedback on an early side or you Revalidate maybe an implementation you already created with some navigation So I'll give you an example of this We also tried at redhead summit last year to in this case not sticky notes We use blocks because they were more fun But same idea and same thing with online tools you can use there's plenty of them to do such a thing But we got some great feedback not only how people group these different groupings, but they named them too So in some cases we got people to further identify what how they consider these different groupings and It helped us understand. Okay. They want to work with these items together Or maybe if they're a developer they care about a certain group of items, but an administrator Prioritizes another group more highly. So how it helps us understand their their personas a bit too Another tool could be community discussions Redhead culture is based about community collaboration and open source So there are a lot of chatting tools That we can use to get feedback such as RC slag blog post and or Community forums so this is an example from foreman Community website that for minutes very active has a very active community So we were trying to figure out what should be the new login page. So we Chatted about and show the designs how that could look like give some options and the community had a chance to vote on the Designs and figure out which one is the best so using our community is a great way how to get more feedback and Become even more active in the community. So definitely take advantage of these active communities and the last one Number five is design systems. So taking advantage of design systems that are out there So whether it's bootstrap material design, there's there's plenty that you've probably heard of and the design systems really just Collection of components. So there's you can use the design of the components and you can use the implementation of the components But there's often Explanation of when to use different buttons items So there's there's information out there where you don't need to reinvent the wheel for how to use a drop-down or a button You could focus on the bigger problems like Creating a topology view, but the these design systems all help you create Usable consistent experience that your user it's familiar to your users and We have one at Red Hat So similar idea to the ones I mentioned ours is called pattern fly and many of you have probably used it I know there's some contributors in the room too And we help we use it to help us remain consistent across our products So we try to contribute to pattern fly from our products and we also use components from pattern line pattern fly into our products To do the same. So it's a good resource If you don't want to create everything from scratch So I know you all enjoy using intuitive progress products to the word intuitive sounds great So does sound the word cloud? So we wanted to connect these two buzzwords So you can remember better our tools. So Create paper prototypes learn from user drawings organize card storing activities use community platforms and design with already Existing design systems if you use any of these you're making your products more user friendly I hope you remember to empathize with users gather feedback and also validate assumptions So even you can start now creating more intuitive experiences Thank you all for coming and if you have any questions we have probably two minutes to answer them Yeah, definitely at least card sorting there's a lot of online tools So you can have you can create them online and that free software tools that you can create and actually just have people kind of They're they look like sticky notes, but they do the same thing just virtually so you could do this on the screen sharing You know blue jeans just watching what they're doing Maybe maybe record the screen if they're okay with it to see the end result For yeah for concept drawings. It's a little trickier because often you kind of get the best Concepts from just handwritten, so it's I think it's hard sometimes that early on in the process but yeah, these were done in The card sorting both but the user concept drawings were done in person I've done some car serving online, so it can be done I Couldn't share that later with you Any other questions That was mostly Yeah, I think I think it's a good question It's I think it's always helpful to get the feedback It may depend on the particular use case So, you know, of course, I guess you're gonna you're gonna have the final say if you're implementing it But I think maybe it's it's worth providing some context or getting feedback Maybe just even if it's the you whoever's providing feedback, maybe just understanding their role could help because maybe they're their answers will differ if they're Highly technical not as technical or they're an administrator and they have a completely different view versus maybe a developer who is only seeing Like one project versus 500 projects So I don't know it it might depend gathering some of that information up front could help But yeah, it can be tricky for sure if the if the answers are all over the place It's definitely great to get feedback but You are if you are asking that question you are in charge of making the decision then so feedback is just like collecting different opinions You try to ask like ease of use ratings or intuitive ratings on things But I'm sure things like logos are really tough because a lot of that's just opinion like what looks the best so we try to stay away from that type of thing and focus on what's Specifically usable or like under his example something really specific if possible like which icon is more intuitive to you To demonstrate favorites, you know something really specific Thanks. Thank you all