 that it's 3.15, so I'm gonna go ahead and get started. So thanks for coming, welcome. This is my 30 minute presentation on the measurable impact of visual design. And it's for generalists, so maybe designers might find this a little bit 101, but I'll try to have something in there for everybody. And I'm Austin Ednanda's, my pronouns are he and him, and I'm currently a visual designer at 18F, and I've been working in tech for the past 12 years in both the US and in Europe, designing from anywhere from large international corporations to small startups, and I started as a front end developer working on Drupal's sites in 2008, but now I primarily focus on UI and UX design, so that's what this talk will be about. And the agency I work at is 18F. It's a civic consultancy for the government inside of the government, so I'm a federal employee, and we help modernize the government by teaching federal agencies like the US Forest Service or NASA, National Science Foundation, to use sustainable and modern web and tech best practices. And this is the overview of the presentation. I'll talk about how visual design impacts bias and behavior both on and offline. Then I'll walk through a case study that I did at 18F and go through some design methods and free resources that you can start using in an agency, presumably right away. And last, I'll be showing the results of usability tests that we did that demonstrate how you can measure successful visual design. So let's start. Quickly, with a show of hands, which book would you buy? How many say A? And how many say B? There's always one. And would anyone mind sharing me why you picked B? Cause it doesn't look like A. Looks more underground than Indy. It looks like it can be what? Funny, yep. Exactly. So the first point I'd like to make is that we judge books by their cover. There's several studies like this one that conclude that as humans, we make strong lasting judgment on appearances in less than 50 milliseconds. And then we assign abstract concept to appearances. Like this book appears more generic or this book appears like the real thing. And if you chose book A, maybe you were thinking that it looked more exciting or more familiar. And if you chose book B, it's probably because it looked funny or it looked generic like a product at a supermarket. But how do you know that book B is actually funny or book A is actually exciting? You don't. It's a specific aesthetic that we associate intentionally with cost or with excitement. And there's no right or wrong answer in preference. So the best design is completely subjective and it really depends on a whole host of factors like trust, needs, frame of mind, who you're designing for and what the goal is is absolutely key in making these design decisions. And these concepts apply to people as well. So in the blink of an eye, you've assessed whether you would eat this pizza. And if this location is where you'd have a party. As humans, we have visceral reaction to people, places and things and we quickly decide what to expect from them. Like this location seems unsafe unless you have primary evidence to the contrary. And Julie Steele who is an expert and writer at O'Reilly Books that talks about visualization says that we've evolved this way to see things and make snap decisions. It's a survival tactic. So we make a lot of assumptions based on a combination of instinct and past experiences without being fully consciously aware of why. It just looks that way or it feels that way. And the same principles apply online as well as off. So whether you're looking at a screen or you're walking around in the world, your brain is constantly assessing and making judgments on people, places and things. For example, I've styled content using a peach color background and cursive and sans serif fonts and it doesn't look bad but something doesn't feel like a monster truck rally and this is the same font and the same color, just different content. And it feels more appropriate because it aligns more closely with the convention that we're more familiar with. And with websites, designs, advertisements, it's the same thing. When something doesn't look right and it doesn't match up in our brains, we notice it in milliseconds and it immediately creates confusion for users. So visual inconsistencies create design, cognitive dissonance and that just means that when we see something and it doesn't match up to what we think that it should mean, it causes measurable confusion and distrust and frustration. So it's important to create websites and apps and designs that focus on the way that things look just as much as they function. And if you can't read it, it's also a visual design failure. So even though I'm gonna be talking about visual preference in this presentation, it's really important to note that good visual design meets accessibility guidelines and it works for people with low vision impairments, color deficiencies, and those who use a screen reader. So here are two pictures of the same room, no need to reply, but which one do you think had the higher booking rate? And image B had the higher booking rate. I'm sure a majority of y'all assumed that because it was brightly lit and had a better angle. And this is from a study done by Airbnb in 2016 that looked at 100,000 different listings with professionally shot photos versus web properties without professionally shot photos. And they found that nicer professionally shot photos had a 40% more higher booking rate. They were booked 26% more often and could charge a higher nightly price. And this is the website of clinicaltrials.gov in the year 2000. And in government we often see websites that look like this. And some of the initial thoughts and reactions I get from people when I show them that image is auditory responses in less than one second. Kind of like the way that y'all laughed at the monster truck rally. A sort of sigh of nostalgia are grown for the poor users that had to look at it. And then when I asked people about their first impression of the site, a lot of assumptions are based on the functionality of the site without ever even touching it. So things like it's difficult to use or it's clunky, it's confusing, and they've never touched the interface at all. And this is because our first visceral reactions to a site design impacts how we perceive the relevance of it, how we perceive the credibility of it, and even the usability. So how something looks just as important as something functions. And if you're aware of this concept, you can design for more effective digital products. And so this is clinical trials what it looked like in 2017. 17 years later, the design certainly improved, but there's still some critical design flaws with it. And one of the biggest design flaws of clinicaltrials.gov was written about the New York Times March 2017, where three women either went blind or permanently lost a majority of their eyesight because they found a study on clinicaltrials.gov incorrectly assuming that it was safe, government approved, government sanctioned research. And that might be due in part to something we call prominence interpretation theory, which says essentially that because users make judgments in an assessment so quickly, nothing on the site jumped out at them and said, hey, this isn't safe research from the US government. So after about four months of research and design iteration, this is the design direction that we ended up with. Again, it's not the most glamorous, but we didn't want it to be. That's because we didn't think that this site should look like a safe resource for you to find clinical study information. But we were really successful in solving some of the usability issues with a simple and clean and straightforward interface. And at the end of our engagement through qualitative research, we found that our redesign helped new and experienced users understand that the studies listed on clinicaltrials.gov are not government endorsed. And we achieved some of these things by moving and increasing the disclaimer text to the left-hand side. We made it feel more like a library resource or a database and less like a medical publication. And then purposefully changed the logo in the upper left-hand corner to include the National Library of Medicine as opposed to the National Institutes of Health, both of which are responsible for clinicaltrials.gov. So the way that visual design can help solve some of these usability problems is listed here. But this is only to show context and help visualize that there's science and psychology behind visual design. And we're not just like, oh, I really like orange. So clinical trials should be orange today. But all of that stuff really matters in how we impact and perceive visual design. And it's also important to note that a good designer is part of a team and we don't just make arbitrary decisions. Design solves a real problem and it's inextricably linked to business needs, user needs, and the technological constraints. So they need to reflect user desirability, technical feasibility, and that it's viable for the business. And so that was me trying to cover the why behind all of the visual design principles in just like 15 minutes. But that's been my whole career, essentially. But what I wanted to do was just give a broad overview of the importance of visual design so that you could start thinking about how these concepts impact how you are perceiving things, even me right now. So here's how we did it and some methods that you can use and apply to do things like this yourself. So this is a free resource I will be talking about throughout the presentation. It's methods.18f.gov and it is a free collection of tools that describe how our teams put human-centered design into practice. And they look like this. So this is the method name along with the why and the what and the how, how to do it, and then some additional resources. And they're 100% free to use and they're focused on digital services, but you can use this for non-technical design projects as well. And to design, we use an agile process. But to be honest, it looks more like this. It's agile-ish. And visual design is involved throughout. So basically, you wanna figure out the problem, align your team, start with something small, get it working in in front of people and don't wait till it's perfect and then you improve as you learn. So it's more about getting a consistent feedback loop early and often rather than following a one, two, three, four process. And to follow along with what method I'm using at the top, hopefully you can see that it says the discover phase of the project and then interview and cognitive walkthroughs are the method that we use to collect this information. So this is the background research that goes into visual design and it really helps us understand what problems that our users are facing. So we interviewed 29 folks that were users of clinical trials and seven stakeholders that were clinicaltrials.gov stakeholders. And then we categorized all this user feedback to pull research themes and plan as a group what we are going to focus on first and this is using the method affinity diagramming. And now we have the main problems of what we're trying to solve and that really determines how we're going to measure success throughout the project. So essentially users had trouble finding what they were looking for, new and experienced users had the wrong idea about what clinicaltrials.gov did and the content could be difficult to understand because it had to be written in legal terms and not medical terms and the features are all there that users might need but they really had trouble finding them. So the first thing we did was we turned these users that we spoke to to represent actual human beings. We did personas and user types. So this really helps the team empathize with who we are designing for and who we need to talk to when we're making these decisions. And the crux of how we're going to measure success is the design hypothesis. So we look at what's the problem? How do you think we could solve it? Who will we test it with? And how do we know if we were successful? And that's just the scientific method of design. And here's an example of how you would build one out. So we believe that creating stronger visual prominence and typographical hierarchy for patients and their advocates will result in increased findability of core information. And we'll know we're right when users can find core information like contact, info and study location faster and with less barriers. So I believe that we could make some of these fixes pretty easy just by organizing content better. So to figure out what I wanted to change, I did a heuristic evaluation, which is just a quick way to find common usability issues. And again, on methods.18f.com you can learn more about what, sorry.gov.not.com, don't go there. But you can figure out what more about each method so that you can do your own heuristic evaluation. But the things that I saw that were just glaringly obvious to me is essentially what a heuristic evaluation is, is that there's no typographical hierarchy. So important information like contact and study location are difficult to find in this block of text. And there were too many words and characters per line, which makes it really difficult to read. And this is a screenshot of what we tested with users. And it's important to know that we couldn't legally remove any text. So nothing was removed, only rearranged. And I added header styles, added more white space, added background colors to separate out text, side navigation so users could figure out where they were in this block of text. And with type, I just emphasized important information and de-emphasized not important information. And then we were able to take those two users and observe them finding information on the site. So just with type and layout and balance, all of which are visual design principles, users said that it felt easier even though functionality was the same. And it was easier to read even though I didn't remove any text or change any of the language. And users found important features that they were looking for for the first time, like ways to filter long pieces of content. But those features were there all along. And so the second hypothesis was the bigger issue and what I talked about earlier, where we wanted people to not assume that clinicaltrials.gov is safe and government approved research that you can go and do and it will cure you. And I thought that we could address this with visual design as well, but that meant changing preconceived notions that people had as they came to the site. So everyone going to clinicaltrials.gov assumed that they were safe trials. So my first guess was to make it look less like a medical site and more like a library so that people were less confused. But because visual design is so subjective and you can't design in a silo, it's really important to keep the teams aligned throughout the process, but these are methods to help align teams. And that's because that visual design is a language like any language and you misunderstand when you're not speaking the same language and that's not clearly communicated. And that just gets more and more difficult as you go through the project because people are thinking library means X and other people are thinking library means Y. So to get people thinking about the same language and talking as a team, we use design principles which is another method and they're based on research and they just help us create a line in the sand of what clinical trials should do and make sure that as we develop stakeholders, designers, developers, all of that are on the same page. And so once we know the principles and the research and what we're trying to achieve, we can start to unpack what library resource means. And a method you can do here is a comparative analysis where you do a broad visual audit of everything that you think is relevant to the site that you're trying to design. So here I just Googled best clinical trial site, best library site. And I found screenshots of different things that I used as ways to communicate with the team, the visual direction that I'm thinking about. So I was looking for websites that looked impartial like universities. I was looking at websites that returned large sets of data so that I could structure the long forms of search results better. And from these, we can create something called a style tile. And a style tile is essentially a blueprint that you use to get people thinking about and visualize your research. So first you wanna show users and your internal teams, does this look like what I'm trying to achieve? Does this look like this is public information and it's non-bias and it's well organized and clean? So these are kind of the abstract ideas that we're trying to put into visual design. And an example of how you can see the stark contrast is this is a style tile where we're going for a more dire and cautionary tone, which is absolutely not what we went with. But this is just to get you thinking about how you can really set the tone of the visual design just using a style tile. And here's one that's going for a more calming mood because we knew that a lot of the people using the sites were patients with terminal illnesses that we're going there to find if they could find a cure. So we really wanted to be empathetic to this user group that might be in crisis mode. So we used more calming colors, Helvetica and more spacing. And the impact that you can measure here is more around your project team and you can track the time and the efficiency and the cost of projects by making sure that your teams are aligned and figure out like how long did it go from making a decision to revising that decision because everyone is now starting from a shared language and you can avoid feature bloat, you can point back to the know we decided on style tile two, we're not talking about style tile one anymore, you can talk about how that's not in the design principle. So all of those things are measurable with the speed and efficiency that your design team is now working with. And with style tiles, brand principles, user research, all that stuff, I can start prototyping to show to users. And I use the US web design system which is another free resource that ATNF offers to prototype. It's open source and it's just layout templates, accessible components and everything that you would need to start prototyping right away out of the box. And they also have sketch files which are important for designers like me who don't code. And this allows me to just start from a consistent, thoroughly tested foundation that I can add styles on top of. So what that looks like is the USWDS, the US web design system, the base, and then I add the styles on top of that and then we get a prototype to test. And it's also on, it's a project on Drupal. So you can find more information on Drupal.org slash project slash USWDS. And this is another redesign that I worked on for the National Science Foundation and it's currently being built on Drupal right now as we speak. And you can see here that it has a very, very different goals, set of goals, very different style tiles. But this is just to illustrate that the web design system is flexible and it doesn't have to look like a plain clinical trials.gov. And then we can make these prototypes relatively fast because we have the US web design system as a base. And here we're just trying to figure out if we were successful getting users to realize that this is not government approved studies that you can find online. And we did that with a multivariate test. It's also called a A-B test where we just show users A or B and watch them try to accomplish these tasks and see which design they had an easier time achieving tasks with. So users liked aspects of both. And when I say like, that's a little bit subjective. So it's really more that they accomplished their tasks easier and faster. But they preferred like the tab approach in layout A and they preferred the disclaimer text or they noticed the disclaimer text more obviously on layout B. And because the US web design systems makes it so easy to prototype, I could evolve the designs right away. So that's kind of the design iteration that it went through. And it was easy to pivot to a design that worked. So we just added combined the things that the users were successful at in both designs and came out with a new one that we could test the same hypothesis with. And at the end of that version, we addressed all the initial problems that we were trying to solve for that users could now efficiently use search to find what they were looking for easier. They dispelled common misconceptions that they had. The content wasn't rewritten, but it was a range smarter. And we added tools like a glossary to help define terms, commonly misunderstood terms. And users found information that they needed that they couldn't find before. And at the end of four months, we didn't solve every usability problem that ever was and ever will be, but a designer's work is never done. So we would continue to do these processes until the end of time, essentially. But hopefully this presentation helped provide context and tools for demystifying design, understanding more about visual design and running usability tests, and creating some design artifacts that would be useful to getting design buy-in with your team. And that's all I got, thank you. And then the plugs, contribution opportunities here at Drupal. My colleague, Fury, can help you out with that. And then also, if you would provide feedback on this, it would really help. As designers, we love feedback, so we can improve. So thanks a lot, y'all. Come find me afterwards if you have any questions about anything. Thanks.