 From there we move into the design phase and in design this is where you really start to get the creative power of thinking about how we can solve the user's problems and there might be many ways to do that so coming up with ideas around how we Solve the user's problem in different ways and getting to that ideal design at the end of the day And we'll talk here about idea generation and how you do idea generation as well as the tool of wire framing Also, then you move into prototyping and we'll talk about different levels of prototypes and the value of starting small and growing momentum as you iterate through this process and then testing Getting incremental tests as you move along not just testing once you've built the whole thing And so how do you test? Internally and then with users as well so that you can validate that your product or your design ideas are working And of course this is an iterative process and we will address how you Start at the beginning and then how you can kind of grow and refine as you move along the iterations So starting off with concept This is a part of the process where once again you're really trying to define what is the purpose of The product that I'm building and so if everybody on the team doesn't understand some of the basic questions About what value is it's going to bring to our users? How will their life be improved? How is this different from other solutions out there on the market? It's very likely that you're going to create a product or a solution at the end of the day That isn't really that compelling to the market So taking the time to really understand Why you're building what you're building and making sure the whole team understands not just the product owner Can really make sure that everybody's driving towards that same vision The next step of this is understanding who your users are so In user experience design we do a lot of user research We'll go out and actually sit next to users watching them use what they they do today kind of identifying trouble points Seeing them in their context. So you start to see things like Okay, you know this user is using my product while also answering the phone and getting interrupted by five people and Whatever else is going on within their context? And so really doing research understanding who your users are their environment and their needs can help drive Design decisions that you make later on so for that very interrupted user You might need to design the system in a way that they can Leave their task in the middle of the task come back and still have a clear status of what's going on Because they've completely forgotten where they are in the steps And so in user experience design we call this process user research and then out of user research We typically create something called personas and personas are exemplar users. These are something that the development and design teams can use together to Discuss our users in a common format. So also part moving into the definition phase We really encourage all teams to use user stories This is very common in agile development And so most people who are doing agile development are very familiar with this format But even if you aren't using agile development the use of user stories can be very helpful so that you start to think about your requirements in users terms So why does a user actually? Want this feature what's the reason behind it and which user wants this feature? Maybe all of your user types need this feature Maybe only one of them do but having that discussion and truly understanding How it's going to be used at the end of the day can really help drive the design and what you? implement and You know I caution you here because so many teams Rush through the step you want to start building and I get it You know we're all makers we want to build it But if you don't spend the time really forcing the teams to get to the level of detail that's needed here It means that you're not all on the same page, and you're going to kind of end up with a disparate implementation Also in the definition phase another tool that we use in user experience design is user flows And once again, this is a step that a lot of people skip past And go right to design But the value here is that by really thinking about your user flows You're going to start identifying some of those areas where you might have touch points between systems either internally between your team or Possibly even externally between other teams other systems websites that pass off to you Could be a variety of things and it really helps you understand the full path that the user is going to take and Communicate with other teams potentially about what you what you need from them and what they need from you in a more Consistent fashion and not at the end of the day is going to produce a better experience for your users Moving into the design phase This is the fun part from my perspective, right? This is what what we love doing as designers, but So this is where you where you start off with divergent thinking you really how can we create Something that is different that is unique that is Maybe outside of the box. What is something that we could actually maybe use even as a? Competitive, you know Improvement upon what's in the industry so far so really think outside of the box here come up with lots of different designs get other people Adding in their designs if you're creating something just for your team Maybe get other team members who aren't thinking about it also creating some designs because through the divergent process That's where you're really going to get some new ideas and change the way that you think about the problem But this has to be time-bound. We can't just go create You know all these different options forever at some point we have to decide on something and move forward so It needs to be time-bound and at some point you're going to start converging On a couple of ideas and it doesn't mean that some of the ideas that you're not converging on are not good And you might come back to those in the long run, but you want to choose a few ideas that you think are useful and Might really be something that you can implement and Get could use our feedback on and start moving towards the implementation of those So a tool that we use in the design process is called a wireframe Wireframes come in a lot of fidelities, so they can be very low fidelity They can even be you know sketches on paper sketches on napkin who cares Or they can go all the way up to being extremely high fidelity where it's actually an image You know pixel perfect sort of image of what the system is going to look like when it's implemented We highly encourage you to start very low fidelity at the beginning and only work towards higher fidelity as you're moving along those iterations and By starting with low fidelity what it means is that you're getting the basics you're getting your basic ideas out there without getting caught up on the details And you can start testing those basic ideas and validating them before you commit too much time into it So then you start moving into the prototyping phase Once again, you want to you want to take this in an iterative manner How can you really start thinking about Implementing this in the minimal way possible and that actually might mean no code to start with and actually encourage it to mean No code to start with a best practice is actually to create something that You can put together in a day or less with no code to test with users first So here's an example that we did actually with the UX team We tested the Red Hat storage dashboard at the Red Hat Summit in Boston last year So we had gone through design iterations of the individual Graphs and metrics that you see here. So we are fairly confident about those which is why they're pretty high fidelity We had already iterated and gotten user feedback on the graphs themselves What we weren't confident about is how storage users wanted these assembled onto their dashboard in a way that was Most compelling to them as users of the storage product so we printed these all out and We allowed users to come up and actually to start moving them around and talking to us about them And so this was no code It was very simple to put together and we got a lot of very interactive good feedback from users that really impacted our design at the end Of the day. Sorry, that's been crackling the whole time, huh? All right As you go through the iterations once again, you'll you'll start increasing the fidelity increasing the code and working towards full UI development and Serena will be talking to you a lot more about this phase So I'm gonna continue on and then testing this is This is the bread and butter right here The more testing you can do the more feedback that you can get from users the better off you're gonna be So there's two Levels of testing that I wanted to point out one level of testing is internal. It's really just saying all right We built something did it meet the criteria that we set out at the beginning Does it actually meet that user story doesn't meet the user flow we defined? So make sure that you actually implemented what you talked about at the very beginning So that's step one But as you can see here a lot of times this actually falls apart especially in those handoffs Between different systems or different Teams and so it's really important to make sure that we we do End-to-end test this make sure it meets the user's flows as we expect it to meet them if you Get that basic check then you can move on to usability testing with usability testing there is Once again a variety of ways of doing this you can do it from you know Taking your design down to the cube of somebody down the hall and just getting feedback that way Or you can go for a full-out usability testing that user experience professionals do And That's where we you know We'll do The the full-out way of doing it is we have an actual usability lab We bring in users we watch what they're doing. We record what they're doing. There's it's quite timely What we do most often in the uxd team these days is actually remote usability testing and This allows us access to a very wide audience, which is great And you can do this as well with your systems on your own So you just set up a WebEx or webinar type Set up you share your design you hand the mouse access over to your user You give them a few tasks to try out and see what happens see how well they do Yeah, okay You guys hear me, okay? Okay, great So how does ux solve problems? So I guess the first thing that I want to make sure everybody understands is UX and UI are two different things, right? So UX is the user experience. So what does the user? How do they feel? How do they encounter that the UI as they go through where the UI is actually the product itself? UX is a number of different disciplines. It includes you know content strategy information architecture user research interaction design visual design and usability And then if we wanted to break down interaction design a little bit more The pieces that we focus on a lot, especially within pattern flyer consistency giving relevant instructions to what you're doing Making sure the visuals are appealing and make sense you know color is used in there the right circumstance at the right time and Also another one that's biggest customization options, right? So users always like to customize their own environment But where does pattern fly focus for the most part we focus on visual design interaction design and user research So I'm going to go through that a little bit But before I do I'm just curious if you guys but can show your hands How many of you know have heard about pattern fly before? Wow, okay How many of you guys are interaction designers Okay, and Developers Okay, excellent So, you know, how do we go from either an existing product that might not look so Currents or from a wire low fidelity wire frame to something more that's like on the right hand side And we're promoting that you do that with pattern fly so pattern flies an open source project So we started it in the red hat uxd team Probably in about 2013 but in 2014 was the first time that we Put something in get hub that was accessible fire from everybody It promotes design commonality and an improved user experience across enter enterprise IT products Our color scheme is essentially tested and built for that and As well as a lot of the newer components that we're putting inside of our pattern library Lately and if if you guys are familiar with it, you'll see in the last three to six months We've been adding a lot of dashboard components, etc. And that's going to be continuing in the future Currently we use it at red hat to unify the styling and behavior of all of our products www.patternfly.org is our URL. I'm going to actually show you that a little bit later on But first wanted to just talk about the goal of pattern fly Again promotes consistency and usability it reduces cost and time to market And the reason we say this is because there is you know proven design patterns in there some of them More complex than others and often times many of them are also usability tested so from a interaction design perspective You can go find something there. It'll explain why to use it when to use it But then you'll also have for a coder You can go and find the reference markup and pull that right into your application if you'd like to put one of those Design patterns into your app it improves consistency within your own application if you're using the same component Also for it if you're using pattern fly within a Portfolio of products obviously it will also improve consistency and it increases usability It also allows the user that the learnability is much quicker because it's consistent So as I mentioned earlier or asked a question about designers versus developers The reason I asked is because we have two distinct areas One we have a pattern library with usage guidelines like I mentioned We also have you know color palettes a set of icons We we include font awesome icons, but we also have some custom icons that are just for pattern fly Also talk about typography and where to use what styles when We also give some guidance on terminology and wording as far as You know what cut what sense and if you should use sentence style capitalization or that type of thing in different areas of the UI And then as I mentioned for developers there's reference markup and the angular JS directives So we have two flavors of pattern fly. We have a base pattern fly Which I'm going to talk more extensively about but then we also have an angular version which is a different flavor So what is base pattern fly and what does it include? Essentially built on top of bootstrap and how many I'm assuming how many of you guys know bootstrap about bootstrap? Okay, great We say it's pattern flies bootstrap plus extra love the extra love is supposed to be you know UX Involvement usability testing as well as we have some additional components. So we've got a number of bootstrap Extras that have been put on as well as some jQuery Components we also as I mentioned included font awesome, and then we also have lately included C3 and D3 charts I think we did that in the fall of 2015 and those all have you know a pattern fly styling built on top of them As I mentioned we also have the angular JS And there's a different repo for that angular JS was actually created as grassroots effort effort within another area of Red Hat and then in the last six months our group has started to increase Contributions to that as well if anybody's interested on the design architect of pattern fly and there's a Leslie Hinson Who's also at Red Hats product owner? Where are the ones who do you know requirements gathering dated Leslie does day-to-day management? I'm going to talk about the process a little bit as we are using Jira Our board is you know completely public anybody can go there and see what we've got in the pipeline We have two-week sprints, so we are currently publishing every two weeks a new release And our stories are very you know they're based on coming up with conceptual designs first We blog about what we're talking about Building we look for the community to give us feedback Then we create a design and we have the usage guidelines posted on the site then the next sprint We create Marfan's markup, and then typically the next sprint is angular So you know we're we're kind of in the same kind of cadence As far as getting things out incrementally This is pretty much already talked about so yeah for the pattern library, which I'm going to show you a little bit It's so I'll show you exactly where these things exist on the site. I Just wanted to show you a couple of the different components I had mentioned some of the charting components we have so we Catherine it actually showed you the Testing that we had done at the red hat summit and what we were doing were a lot of our products were using different Dashboards, and we were trying to look for common Common dashboard cards to use within the application, so we've come up with a couple of them So you know the one on the top is just a trend card But it has the ability especially in the angular implementation has the ability to change some of the Location of the percentage or if you want to use a an actual value versus a percentage The one on the lower the lower left is what we call aggregate status cards It's essentially the ability to give you a count of how many objects are inside of your Environment and then maybe be able to show you either errors or object status of certain a subset of those And then the one on the right we call a utilization trend card Because it's showing you the current utilization the bar or the arc is colored based on thresholds So hypothetically you would set a warning and an error threshold So if it's has not met a threshold yet It's green once it's met a warning threshold it's orange and then goes to red if you hit the error and then it also has an Associated trend line for the like the last 30 days or whatever you choose to have And one of the other things I just wanted to focus on was the different view types So currently we are supporting tables We call this a list view and then we also have card views coming up soon So there's there's some of our various patterns and the list view has been like really It's been getting a lot of attention actually in the community lady lately asking as our reference markup is just getting released this week So All right, so I'm going to give a demo, but it's in it's recorded Good thing I recorded it Yeah, we had internet challenges, but I would have had worse challenges with my Mac, so This one sorry there you go. Thank you. All right, so this is I'm gonna This is essentially what I'm what I'm doing is using bower to install pattern fly created a new directory It installs pattern fly And it was a little slow because I was doing it outside But once it installs pattern fly what I'm going to show you is just how quickly it It is to actually bring something in and build a quick app So I'm just showing you on the left hand side. There's a directory called our components on the right hand side I'm touching an index dot HTML, and I'm using vi so excuse me for that I Bring up the index dot HTML I go into bower components because there is a Underneath bower components pattern fly. There's a Quick start file and inside that quick start file It tells you what you need to include into your HTML to just in so that you can use pattern fly I'm gonna grab that in a minute Now I'm pulling everything in just because I didn't have time to pull out what I didn't need But I'm just pulling everything in and then what I'm going to do is bring up the pattern fly website And once you go into pattern fly website, you can go into the pattern library And within a lot of the elements in the pattern library. There's something that's called reference markup Our reference implementation. I forgot what we call it right now. Yeah reference markup You can open that up you have the associated code So what I'm going to do is bring in those aggregate status cards Right into my HTML and then I'm going to bring up the browser Bring up that index dot HTML in there Oh, I typed in one line and save it and then bring it up on their left And you can see how quick it is to bring something in So there we go. There's the aggregate status cards So then I decided to go back over and pattern fly look at the utilization trend cards Where there's a row or a strip of three of them. You'll see below Actually, that's the one so I choose to go down to the three And I pull out that reference markup Copy it again So And once we copy it you'll see the the result so again like this this is great for two reasons in my opinion and one is you know For the code, it's great, but it's also good for prototyping right so you can say take something that you see that exists inside of Pattern fly and build something really quickly that might not have the back end working But you can actually visually see it and see what it looks like And even get some interaction with it. So that's actually the end. I was going to try to do one more thing, but I I'm not going to do that What I'm going to do quickly is just show you pattern fly itself and just go through some quick areas Ten more Okay, so Actually, I'm also going to say this is this is the site design that's currently out there We're also working on a pretty big site redesign That's going to be much more usable in the future and I think people are going to like it more It's going to be more focused on Kind of delivering things for the designer designer and developers separately where now right now It's a little bit more convoluted So if you go into I'm going to show you the widgets area first so in the widgets area is everything that we have that's either a bootstrap or jQuery or C3 and D3 charts so you can see anything that we've done here and have the code associated with that So so you can get the reference markup for forms there and in the patterns area This is more of the these are more patterns that we've created in design specifically for specific Use cases I would say so we've got different types of things for The dashboard we also have different types of charts. We have something called an empty state So if you you know if you have a table that when you start up The table of users for instance there are none that exists So we have a pattern that it would would show that you could use that will say why there's no users and maybe allow you to Hook up your main action to be able to create a user We have things like inline notifications toast notifications All kinds of things like this so again with all associated reference markup that you can grab and Then the other thing is we do have the angular Currently we have our angular documentation that's on a different URL, but there's also sample code for the angular there as well Now Okay, thanks So we do have monthly pattern fly meetings So if anybody's interested in attending we give a demo of what's happened in the last four weeks We talk about what's coming up in the next sprints And people can give requirements or even talk about being able to contribute. We'd love that And that's right now is the end of a presentation wondering if anybody has questions Yeah, we don't not at this point I'm sorry Yeah, do we have any plans for a wireframe tool that with drag and drop that would be Integrated essentially with pattern fly is what you're asking and no we don't we do have Some templates for some of our low fidelity wireframe tools that we currently use It's I think that's an interesting thing to say we could we definitely could Look at doing that is something that we have started building in some components for Our team internally either for low fidelity and for high fidelity for Photoshop So I think over time we could look at kind of putting those out through pattern fly right now They're not I would say they're probably not organized well enough To share but I think we could get there. So that's great. Yeah, because we've done some with balsamic But we don't have anything Thank you Well, there's styles that are There's styles that are in a subdirectory right that you're referencing and some through some of that code And those are automatically updated etc with each release If you're a lot of what pattern fly has Some of its styling on top of existing bootstrap and jQuery components But others are like built-in components that we build in from scratch So it depends on which ones you're talking about really, right? Well, so and in the angular you would get those automatically so we like I said, we have two different flavors So an angular you'd be using the directive which is all-encompassing But based on what you're picking in base pattern fly it might differ So on the part of the red hat that I concentrate on a lot, we do have a lot of teams who use Google tool kit and other other frameworks as well and The the short answer is we don't have something for installed applications. We've concentrated on web applications We think that's where the most power is in the future for applications to live But there are a lot of teams who have taken the pattern fly styles and they can take HTML CSS From those and basically kind of refactor them for Google tool kit or other frameworks We have not brought That work back into pattern fly at this point because we haven't done that in a standard way Each of the teams have kind of done that uniquely based on how they've implemented it And I think that's one of the challenges is there's so many tool kits out there that it's hard to standardize How we would do that and and that being said though I mean it is open source and we you know, we had an angular version created So if people are interested in the community to contribute into something like that, you know And there's enough interest I think we'd be interested in taking contributes contributions like that as well So I think we have two minutes left I just want to say that we have a bunch of t-shirts and stickers if you guys want to grab them on the way out And I didn't know if there's any last question I think yeah, it's it's easier, but It's a it's different context, right? I mean this is I think base pattern fly is easier for For many applications to pull in if you're using angular, I think You should take a look at angular pattern fly Because it's more componentized Thank you very much It's so nice to see you I I Have your large Extra large Great job Connecting If you have room on your left or your right please squeeze into the middle of the room So we can pack as many people as possible into the room So we don't want any back-end seats here Please make new friends and