 OK. Thank you, everyone, for attending my talk. I want to talk about UX, UI, opportunities everywhere, taking the leap from a different role into UX. Who am I? My name is Kaleek Ray. I'm the Senior Interaction Designer for the Red Hat Developer Program. I have 10 years of design experience. I'm a self-proclaimed foodie, and I love storytelling. So film, VFX, animation, video games, and writing. My responsibilities for the program is developer advocacy, user experience and user interface research, visual design, and art direction, specifically for the site, videos, and content design. These are some of the industries that I've had the privilege of being a part of so far. So you have the food industry, film production, game development, academia, broadcast news, software design, e-learning, and VFX. So what is my goal today? To teach you how to take over the world. No, just kidding. This presentation is for people who want to break into UX or for people who also want to expand the UX knowledge. Let's start with the basics. What is user experience? User experience is the design of the process of building products that provide meaningful experiences to users. This includes branding, design, usability, and function. What is user interface? UI. That is the process of building interfaces and software and devices, but focusing on visuals. Usually what you're trying to do is you're trying to create user interfaces that are easy to use and pleasurable, which is a subset of UX. Apologies, it's actually raining over here, but we should be fine. Next, we want to talk about human factors. Human perception is limited. We only have a certain set of eyes. Some people are taller than others, depending on the environment that you're in. You may be distracted, so all in all, human perception is limited. Also, when it comes to doing activities, the same set of motor skills that you use for, let's say, using a pencil may not be the same thing that you would use for a phone. So when a person is switching or a user is switching their activities, they're prone to having errors. And then lastly, when you're talking about products and services or tools that a user is using, if they make an error, the error is the fault of the designer, not the user. I repeat, the error is the fault of the designer, not the user. So let's talk about the three levels of design by Don Norman. Don Norman, who's an American researcher, a professor and author, he's also a creationist named UX, apologies. Don Norman proposes that we perceive the world through an emotional system. This consists of three different levels. The visceral, behavioral, and reflective. So let's start with the visceral. This level of design refers to the perceptible qualities of an object and how it makes the user or observer feel. Basically, how does it look? Say take this for instance, even you probably haven't been to this location, but looking at this image, you immediately get a gut feeling of what does this image smell like? You already know what that smells like by looking at this. You could say the same thing about this image too. I'm sure a lot of people know the smell of wet grass. Next, we have behavioral. This is the practical and functional aspects of a product or anything usable that we can use in our environment. Basically, how is it used? Another example, going back to the visceral level, you have here, this is a car. Yes, it looks nice, but truly the only way you can test to know if a car works well is if you drive it. Next, we have reflective. This considers the rationalization or intellectualization of a product. Can I tell a story about it? Does it appeal to my self image or to my pride? Basically, at the end of it all, once your user uses your product, how does it make them feel? So for instance, if you ordered a meal and it came on time and it was delicious and it was warm and you loved it, you're more likely to buy from that same restaurant or use that same service. And so that's what you wanna keep in mind when an end user is using or trying your product. How does it make them feel afterwards? So why is UX and UI important? It creates outcomes. For example, if you don't have a hands-on developer experience for your users, you're gonna have less developer engagement. Furthermore, if you don't even have a download button on your UI, you're gonna have less developer engagement because they can't even download your product. Both outcomes are facilitated by user experience and user interface. Furthermore, it's more than decoration. User experience defines KPIs key performance indicators so that we can improve experiences. User experience also is inclusive of not only the user but also the stakeholder as well. For instance, many people think of, you know, that UX is a relatively new field. However, it's been used in food service industry for decades. For one example, you know, when you eat at a restaurant, many of the menus are optimized in a way to yield the maximum amount of profit. You also have it where they actually will take items on the menu and arrange it in a way to maximize profit. So while your stomach is getting bigger, your wallet is getting skinnier. So when we talk about the benefits of UX and UI, if you're a developer advocate, you're basically gonna be able to have a deeper developer advocacy. And if you're a developer, you'll be able to make better software for developers and customers. So let's talk about the four steps of practicing UX. This section is for those who don't have a UX portfolio or for those who are looking to add, you know, more inspirational projects. So first, identify the things that you like. So for me, film animation comes to mind, video games and learning. Next, you identify the UX and UI in your likes. So for me, film animation is VFX for video games, a user interface, and then for learning, courseware, which is an educational learning experience. Next, you identify the companies that make the things that you like. So for me, film animation is continue creative. They do a lot of the visual effects for a lot of the Marvel Studio films. Furthermore, you have Capcom, who's noted for their games like Mega Man and Street Fighter. And then you have IDEO, which is a design agency that focuses on human-centric design thinking. Next, you create UX projects inspired by those companies. So going back to film animation, you can do what is known as a FUI, a fantasy user interface, which I'll go into detail in a little bit. And then you have video games, a game UI, and then learning a learning module, which allows a user to learn a topic or subject. So we're gonna use my past side projects as an example. So here we have AMMA, Pot Escape, and Apple Blackboard, and we'll go into more detail with those. So the first project, AMMA, this was a short film that I was tasked with working on. I had to create a AI that was for a fictional ride-sharing company. The design had to be grounded in real existing technology, but seven years down the line. And doing this research, I realized there's another subset of UI called fantasy user interfaces. This just means fictional user interfaces designed for television and film. So I have some several notable examples that you probably recognize. In addition, here's some additional ones. I would suggest that anyone check out these great series, Westworld, Mandalorian, and Cowboy Bebop. Also, even further down in my research, I found that since this involves AI, the script called for the end user to talk to the interface. So that's another subset called voice user interfaces. And so I looked at several real-world examples. There's Amazon Echo, there's Apple Siri, and Google Assistant. And we ended up coming up with this design here. So as you see in the demonstration, we were able to composite this in BFX and we wanted to kind of make this scene a little bit more sinister based on the script. So I had to figure out a way of using the UI to do storytelling. And so if you look at the scene with the camera, what we did was we found out that the AI is supposed to be monitoring the user. And so we decided to put a heart monitor in the scene. So that just further shows the invasiveness of this AI technology. And so that's what we were supposed to convey in the short film. Next, here's an example of when we were building the 3D model. I built this in Cinema 4D and we were able to take the voice actor's performance and map it onto the geometry of the animation of the 3D model. Anytime that the voice actor spoke, the 3D model would move. You can do those things in Cinema 4D, however, you can use open source as well. Blender is a great choice. Many game studios and VFX and film production studios are using this tool, so it's free to download. So I'd urge you to check it out. The next project we have, which is Pod Escape. I collaborated with the Red Hat Game and Community of Practice on this. You can check out all of their open source games at rk.redhat.com. The main goal was to take an approach to a storytelling narrative around one of Red Hat's products called OpenShiftDue or ODIA. This is a command line tool that allows for Kubernetes deployment. And so when you do a deployment of a cluster, you have a unit of software called a pod. Kubernetes provides graceful termination for pods when they're no longer needed. So that termination is usually 30 seconds. And so for that time, that pod will exist, but then after the 30 seconds are up, it disappears. So we looked at game inspiration, the 2D retro side scrollers. So I looked at the tech art direction of Mega Man because you're talking about a robot in a robot world fighting other robots. Why not use that as inspiration? Also, we had Super Mario, which was a simple game loop. Basically, don't touch the bad guys. If you do, you lose. And then lastly, look at Sonic the Hedgehog for its expressive character acting. So we looked at the structure of a Kubernetes node and we decided that we wanted to focus on the pod, but at the same time work on conveying the same shape language. We ended up with this character design. This is auto, the pod. We ended up creating examples. I was able to animate these different scenes just to show the user what part of the game that they're in in terms of the state. So here we're showing the expressiveness of auto, showing that he's a program that basically is created by multiple containers. Then we have the character in idle animation and then here's a death animation as well. So here's the level design. I also implemented some of the same shape language of 45 degree angles from the hexagon throughout the stage. We also wanted to use the UI in a way to communicate the grace period, basically meaning how much time you have left and also show the score of the number of collectibles that you can get during the game. Here's a test build of it. It was fun getting a chance to see this go live because this is really one of my first main games that I've actually worked on in an open source way. And so it was really inspirational for me. Next, we were talking about some of the open source tools that we used. Some of the vector art, you can use Inkscape for that. It's free and open source. You also have GIMP that help and aid it in us being able to edit some of the animation frames within the character states. And so you can use this. This is basically like the equivalent of Adobe Photoshop, but open source. Next, in terms of our sound design, we used Audacity, which is free and open source. I would urge anyone to try that out when they're trying to implement sound design and they're on a budget. Next, we have the project, my third project, Apple Blackboard. This was a learning experience design. I wanted to learn the actual prototyping software. And so I created Apple Blackboard. It's basically an employee learning module for Apple Associates. And this is another subset of experience design called learning experience, which basically is the process of creating learning experiences that enable a user to achieve a desired learning outcome. So here we have the front page login. I wanted to kind of show that you can gamify this further by rewarding associates who took the time to learn the subject matter and product information. You also have like a dashboard. So you can kind of like keep track of what resources you've studied and which ones you haven't. Also, we want to include like different features for video. Sometimes people don't learn just from text. Some people learn from visuals and some people need both audio visual. And we also had specs as well. Once the person is progressing going from left to right from the product, they end up into the overview and they have a quiz that basically reinforces all the information they just learned. I would also say when it comes to prototyping, you don't have to use closed source tools like Aksure. You can actually use ones like PinPot. This is an open source design prototyping tool and it's available to the public. Now that we've learned how to practice to implement UX in our portfolios, I want to show how I do it on my day-to-day work with Red Hat Developer. So here we're always implementing ways that help users to have access to the most meaningful information at all times when it comes to our website. We also, in terms of the art direction, anytime I'm designing any artifact for user experience, my main goal is always aiding developers and getting the information that they need to solve problems. And also, I always try to make sure that I have design consistently throughout civil assets. So if you're going from a video to a graphic or to a swag item like a t-shirt or a bag, they all have a similar design language. Here are some ads that we created for content design. We wanted to make sure that users could perceive the added value and understand that you don't have to take things so seriously. In terms of engagement and metrics, we saw a 100% increase in engagement based on these ads. Also, when it comes to video content, we try to find ways of gamifying it and giving pleasurable experiences to very complicated topics. So here we're talking about Reactica, a software architecture, and so we're showing how many of the different microservices connect and software. Here we have UX that you wear. Going back to what we were talking about in regards to the three levels of design, this touches on the visceral behavior and reflective. The multicolor design pattern and the cleanliness of the lines communicate that this is a cool design. Furthermore, there's a behavioral aspect of it. If you're a developer who knows CLI tools, you'd be familiar with this 65% mechanical keyboard. And then lastly, the reflective, like I said, it conveys skill. Not only the best of us can actually use this keyboard. Next, we have UX that you can read. For these book covers, I actually had to sit down and install a Java framework, Quarkus, onto an IDE. And I got a chance to see how it worked and uses tools, the live reloading feature. And so I wanted to feature it in the practicing Quarkus. And so I used the speedometer as a metaphor for that, its speed. And then when we're talking about the understanding of Quarkus, you have to look under the hood. So I use that as a metaphor as well, like for the engine. Final tips that I can give, get passionate about UX tools, prototyping, Figma sketch, Inkscape, Pimpot, whatever, pick your poison, but I will say too, if you don't have any access to that, you can always use a pen and a paper. There's also animation. I like Blender, because right now that is becoming one of the major tools of choice. You also have for augmented reality in VR, OpenXR, Adobe, GitHub. There's many products out there to experiment with. For game engines, there's Godot, which is open source, there's Unity, and then there's Unreal. And then lastly, if you don't have any user experience research experience, just try to participate in it. Go to Nils and Norman group. They're always looking for opinions. If there's a survey, take the survey. We always want to hear your opinion. Also learn editorial illustration. Editorial illustration is different from art because yes, you can be expressive with it, but when it comes to editorial, you have to design a visual that supports a story and needs to support content. And then we have this last two, which is font awesome, it's a CSS font toolkit, it's open source. And then we have our very own design system, Patternfly. So yeah, get passionate about those, learn more about those, and then you can grow in UX. Also, my next tip is networking is key. As I said before, we have arcade.redhat.com. There's the Red Hat gaming community of practice. They're always looking to collaborate with other game developers who want to make open source games for all. We also have, like I said, we chronicle all the different games that we make together on this site so you can play them on your own time. We also have okd.io, which is a community distribution of Kubernetes for OpenShift. So they're always looking for people to contribute and practice and collaborate on the best standards and practices for Kubernetes. We also have our own website, developers.redhat.com. It's a free resource where there's a lot of content on different programming languages, and it stands in practices. Hopefully it can become useful for you as well. We also have Game Jam. So if you're a person that, for me, it's kind of hard for me to kind of grasp a lot of UX UI concepts. So what I had to do is I had to put it close to something that I love, which was video games. And so I was able to get a better understanding through making a game. So we have our own Game Jam called openjam.io. And then there's also gamejam.com where they feature many different ways where you can collaborate with people. We have usually like 24 to 48 hours to develop a game and you can meet great people at the same time while learning different facets of game development, but then also software development. We also have AIJ, which is the professional association for design. For some of those people who are maybe in more traditional roles, this may help in terms of transitioning you from that traditional role into UX because AIJ is creating more content around user experience and user interaction. We also have IGDA, which is the International Game Developers Association. They do great work and content and events where you meet and network with people in the game industry. We also have for interaction design, specifically the interaction design foundation. They're the leading open source repository for user experience literature. You should check it out to read and gain more knowledge. They also have UX courses and boot camps to increase your proficiency in user experience and user interface design. There's also the User Experience Professional Association. This is an international organization. They have many chapters. So look online to see if you can find your local chapter and get involved. My last tip is how can you design for a better world if you don't know how the world works? So you need to learn empathy, ethics and get involved. So here's me and several Congress people and academics raising awareness about wealth inequality and the racial wealth gap in the citizens in Washington DC. Here is me working, doing a local food drive from our community at the time. When it comes to getting involved, you need to know about accessibility. There's many barriers when you're creating products and software. It could be economic barriers. It could be language, culture. It could be neurodiversity. People with certain perceived disabilities, this gender, age, race, ethnicity and casteism. So we have to, if we're gonna be designing for a 21st century world, we have to be able to address 21st century problems. There's also dark design patterns which are highly unethical. Here we have an example of where terms and services are hidden when you're checking out for a certain product. And in doing so, you're creating dark design patterns. Furthermore, there's things that are non-transparent in regards to things like loot crates for gaming. There's now talks about regulating this because it's creating, loot crates can create addiction in younger gamers because their brands are developing. So we have to be mindful of these things when we're creating these products and services. Also AI facial recognition and racial gender bias. When you're making these AI learning models, are they using limited data sets? You also have less accurate outcomes for darker skinned men and women. And so we have to be mindful of who's getting a chance to even work on these products and tools. So we have to keep that in mind. And then lastly, we're talking about wealth inequality. The share of wealth held by the top 1% rose from 30% in 1989 to 39% in 2016 while the share held by the bottom 90% fell from 33% to 23%. Wealth, the value of household property and financial assets minus the value of debts is not income. Furthermore, wealth dictates outcomes in health education and access. And it's wealth inequality itself stifles innovation and it happens worldwide. Let me show you why. Here we have federal federal investment and innovation. The moon mission was a top priority for government funding. NASA had government funding and expenditures of $5.2 billion at its peak which today's money is $46 billion. This money was invested in over 420,000 jobs for people indirectly and directly working for NASA. More than 18,000 of those people were employed at the John F. Kennedy Space Center. That's roughly the same size as NASA's entire workforce in 2013. With those investments, outcomes were created. Here, when people think of NASA, they think of the rocket engineers and scientists. Here, we have a seamstress who used to work for Playtex at Broad Company because of the investment that was needed for the space mission to the moon. This woman here went from sewing bras to sewing spacesuits. So we can see how what happens when investment is put in areas that creates better outcomes. So for example, because of those investments, they resulted in drastic advancements in computing, upward mobility for workers, and quality of life for society. And that was only $5.2 billion. For the New Deal, which was from 1933 to 1940, we in America invested $41.7 billion in federal spending. So you can imagine outcomes that change the lives of many people. But one of the things about wealth and equality is that yes, it changed the lives for a lot of people, but many people were left out. So here, we're talking about the racial wealth gap. Today, this is numbers from 2017, but it's probably far worse. The median black family has a net worth of $1,700 liquid without depreciating assets. The white median wealth household has a wealth of 116,000 by 2017 standards. These outcomes are a direct result of historical inclusions and exclusions from public policy investments, like for example, the FHA or the Homestead Act of 1820. Here, I wanna give you an example of how can it affect you and UX. So due to market forces, for example, your company's banking app needs to increase mortgage loans to black borrowers. You know, you as the user experience designer or user interface designer, you're making UX improvements to the app to solve the problem. However, despite your strategy, you were unaware that the banking app's algorithm uses the same exclusionary criteria that the FHA used to block black Americans from getting homeless in the first place. As a result of your failed approach, your department receives less funding next quarter and then people are laid off. So these outcomes affect everyone. So for me, when it comes to these 21st century design problems, I'm always thinking of strategies. One is to always rely on the public record. You know, there are people that will give you opinions and hearsay on things, but you can always look at the public record, which means that, you know, organizations, research papers that have been published will give you performance of different metrics going on in the economy and in society. Furthermore, you have public policy. We just saw, we were talking about, you know, when NASA invested $5.2 billion, how that drastically changed computing. If that didn't happen, most of us on this call will probably not be talking right now. We also have stratification at economics where if you look at the Federal Reserve data, it breaks it down by, you know, wealth data, by race, gender, ethnicity, poverty. Like you have income, you have different ways that wealth data can be broken down. And then lastly, we have political science and sociology. Political science is a study of who gets what and sociology is how we came to be. Ultimately, let's just work to make a better world. Any questions? That's pretty much it. Thank you. Thank you so much for that very informative presentation. We have a couple of people asking for link to your slides and resources. What I would recommend is adding these links to the chat, of course, and as well as to your chat profile. So if anybody looks you up in their conference schedule, they will be able to access these resources. Okay, so just add it to the chat. And the chat, like the chat.com profile that you use. Okay, I probably would need a little bit more help with that. This is human error going on, but yeah, I can definitely do that. And send you a direct message for the link where you can add it. Okay, thank you. And you can post it in chat as well. So our viewers can see it. Okay, so it would just be the presentation itself. Whatever that you would like to share. Oh, okay. So I will post that content in there. Yeah, was there any questions? We should be good to go then. Yep, was the very presentation super clear? Let's see. There's also a breakout room. If you want to discuss with people about this. Okay. Or if people are willing to come to that room, I can post a link to the breakout room in the chat and people can go there. Okay, perfect. Yeah, let me just work this out. Like I said, human error once again. Yeah. So we'll do that. If there is, was there any additional questions or anything? I do not think so. I don't see anything. Okay, perfect. So, okay. Well, let me know what we need to do next. I just wanted to come in and hopefully this presentation was helpful. I really liked it. I enjoyed it totally.