 Well, we're at 145, so I think we're gonna get started. Thank you guys for coming to our design strategies talk. I love that DrupalCon now is involving a lot of these content marketing tracks and a lot of these sessions that are less developer-focused, but I love to see that there are a lot of developers in the room, too, because we're gonna talk a little bit about how designers and developers can get along. So, hopefully everybody enjoyed lunch. I know that the post-lunch food coma is probably setting in, so hopefully we'll keep things lively here. Just wanna kinda run you guys through what we are gonna be talking about today. So basically we're gonna walk you guys through our framework or our process for how we go through researching and designing user interfaces as well as visual design. We really find that the key to success is starting with strategy, starting with research, and really digging into understanding an organization's goals, understanding the audiences that they're dealing with, and building workflows and user interfaces around that. And we're gonna talk about how that research informs the process of user interface design and information hierarchy on the page. And then we're gonna talk a little bit about how we test assumptions. Every project that you start probably has some assumptions built into it. How do you go through the process of using stakeholder interviews to actually ground some of those assumptions or change some of those assumptions as you go through the design process? And then finally, as I mentioned at the outset, we're gonna talk a little bit about the development designer handoff process. Oftentimes that can be a bit of a tough process, as we all know, coming from different sides of things. And then lastly, I just wanna point out there's a link at the bottom of the page here because we only have about a half hour. We go through a lot of this material very quickly. If you wanna dive into any of the topics that we cover in a little bit more depth, this will link you to a page where we've got a lot of resources for you. So just to do a quick introduction, my name is Andrew Goldsworthy. I'm one of the co-founders at Rooted. I've worked in nonprofit marketing and fundraising for almost all of my career. I have a background in doing a little bit of front end development. So I feel like I have a little bit of both sides of the coin. And then right now I focus a lot on marketing strategy and marketing technology with our nonprofit clients. Hi everybody. My name's Valerie Newmark McKellen. I'm one of the other co-founders of Rooted. As you can see here, I have over 20 years experience in brand strategy and art direction. And a lot of the work that I currently do with our clients is focused on communication strategy as a whole, bringing in a little bit of theory of change and kind of business modeling with them. And just overall doing a lot of community building and strategic partnerships with other organizations and other partners out in the field. And here's obviously my email address. I've also been the founding board member of two different nonprofits and now serve on the board of Full Circle Fund. Excuse me. So before we get started into the nitty gritty of things, we thought we should probably just define user-centered design a little bit. And these two memes are representative of the sense you should come away with is instead of talking about yourself, user-centered design is really about putting your audience members first, thinking about what they need, the conversions that you're wanting them to move towards and ultimately and foremost is what is gonna motivate them. So you're thinking through a psychological lens a lot of the time. And overall just the sort of tidbit about marketing is there's the 80-20 rule. 80% of the time you should be putting out information, what customers need and want and 20% you can broadcast how great you are. So the most important thing to do before starting any website project is to think about your audiences and stakeholders. We're gonna be using a case study around Pacific environment, one of our clients, to sort of talk you through how we revitalize their brand, guiding them through content strategy and ultimately launching a new website. So right now, first and foremost, we're gonna be taking you through step-by-step our research and discovery process. So here you can see how we start kind of doing a deep dive on audiences in particular. And the most important thing here is not to just do broad brushstrokes of who the audiences are and what sort of basic things you know about them, but actually go through and define individual human beings that you actually know interact with your website. Call them out by name, think about who they trust, where they get their information from, what do they care about, what are they coming to learn on your website. And then at the very end, you can think about what you want from them. Where ultimately, where are you trying to get them to go, what's the conversion that you're seeking? But again, it's really important to do a deep dive, like when you go into the resources that we provide, you see a much more extensive version of this spreadsheet and you'll see we oftentimes will go through 60 different audience members with clients because first and foremost, that deep dive is really important so that you don't miss any nuance. You're gonna be making a lot of assumptions and this way you know that you've covered everything. So once we have gone through and labeled all of these audience members, we start grouping them by their motivations. Here we just highlight what ends up being in the far right hand column that you saw on the previous screen and these were two different people and it turned out their motivations were relatively similar. And now I will have Andrew chat with you a little bit about the rest of the research that we do before we actually get started. Yeah, so one of the probably biggest overlooked areas for research often can be your existing website, which you may already hate at this point, or your digital marketing tools that you have, your digital analytics, they come in a lot of different ways, right? You can't necessarily see or touch that person but you can very closely track what they're doing on your current site and the types of places that they're coming from. So what we really like to do is start with the goals that you want them to achieve on the site, what you want them to do, whether it's signing up for newsletter, whether it's purchasing something or just reading an article or a sales page and we work backwards from there, right? We wanna figure out who are these people, why do they come to us and model for that? The second thing is using Google Analytics segments and again on that page on our website, there's a lot of information about how to use segmentation in your Google Analytics to understand behaviors, compare trends, compare different types of people, return users versus new users, what are they doing, the types of devices they're using, comparing desktop users to mobile users, things like that. It's gonna give you a lot of insights into who these people are, what they're trying to do, so on and so forth. Demographic information is becoming richer and richer. Obviously if you have a Facebook pixel on your website, you're gonna know a lot about some of the people that are coming. Google Analytics has built out a lot of their demographic information over the last, let's say five years or so, where they have pretty good information about who the people are that are coming to your site, where they're coming from, devices, so on and so forth. And then finally, I really like to break things down in terms of marketing channel. When you're thinking about your strategy, your marketing strategy, or your sales strategy, what are the different channels doing? Where are new users coming from? Where are people that are actually converting coming from? Which channels are most engaged with you? How do they behave differently, so on and so forth? So there's a lot that you can see in terms of your marketing strategy and ultimately in the way that you wanna build out your website and user interface that has to do with where are people coming from and what channels are they using to get there? So what does this kinda look like and what are you looking for, right? So in some ways, you're kind of just messing around with some of your Google Analytics data and trying to look for trends or anomalies. In this case, as some of our clients data, we found that there were 780 conversions through Facebook traffic versus six for Twitter. So it stands to reason here that Facebook is a pretty important channel for them and then therefore we need to figure out how to incorporate that into not only the marketing strategy but also your website strategy as well. And then another thing to point out here is that Google Analytics in the last year or two has really released a lot of their machine learning capabilities within analytics. So sometimes if you go into that interface, it's actually gonna show you things that it sees or you can specifically ask it questions, like which channel drives the most X, things like that, and it's actually pretty good. I think it's only gonna get better. So take a look at that. Switching gears back to the idea of audiences and creating personas out of those audiences, we have at this point basically a ton of audience data and we wanna pull out common behaviors, common motivations for these audiences and start to build what we call personas. So I always like to think of this phrase sell the hole, not the drill, which is kind of a weird phrase. But the idea being that we wanna solve for people's problems. What are the pain points of your audience members? We wanna figure out what outcomes do they want for themselves. And start to talk about features. What are the things that you're doing to help them versus, or I'm sorry, concentrate on motivations and outcomes for those audiences versus the features of your product or the features of your company or service. We're solving problems here, we're problem solvers. So when you think about, there are some common motivations here. This is not an exhaustive list, but three that I think come up very frequently, as I talked about before, are solving problems or pain points. So great examples of this would be like baby products, or hair club for men. These are pain points. Nobody wants to be a bad parent. Nobody wants to feel like they're a bad parent. And so what we're doing is we're trying to move them along to solve these pain points. Finding community is a second one. I think a great example of this for the crowd here is probably CrossFit. So working out by yourself is extremely boring. Nobody wants to go run on a treadmill by themselves. There's no accountability. You probably won't see a lot of good results. But when you join a community, when you're part of this community, you're working with people that are like you. There's accountability, there's motivation, and there's a fun factor that's built into that. You're hanging out with people that are like you. Community, common ground is a big one. And then finally one of the most powerful ones probably is prestige or status. People like me do X or the way that I want to see myself, those people do X. It's the clothes that you wear. It's the car that you drive. Or that maybe you don't drive a car at all. That says something about you, says something about the people that you associate yourself with. So these are some common motivations. They're very broad. There are obviously ways to get deeper down into what a specific pain point might be. But these are really good places to start. So with that, I'm gonna turn it back to Val and she's gonna start to talk about what were the personas that we generated in this particular case study. Thank you. Okay, so with Pacific environment, they do a lot of work and need to consider donors first and foremost. They do a lot of work around Arctic policy and so they need to be thinking about their influencers. And the last group that we kind of created out of our grouping of motivations through our audience deep dive is this person who is a connection seeker. They are out in the field, they have lots of organizations that they might be involved with and they have access probably to financial capital. So they may or may not be a donor but they will probably be somebody that is bringing different opportunities to the organization. So I'm gonna focus on the professional giver first. And this is actually good because whether you're in the nonprofit sector or the corporate sector, this idea of these particular three personas tend to spread out to everybody. The idea of your influencers and how you're gonna motivate them to get involved with your organization or company. And if you just replace professional giver as some sort of consumer or spender, then it translates right away obviously. So let's focus on our professional giver for a minute. When, if you remembered back a few slides, we had grouped some information into gold. And so she's the one that we're following through or the people that are focused in this sort of lens, oftentimes we'll even call them measuring sticks because they're going to oftentimes be just more interested in impact and sort of the partners that you engage with so on and so forth. So let's take a look at her. Here's our professional giver. Her foundation is looking to be more impactful and forward thinking in its giving. It's becoming more interested in the overlap of environment and social justice. And for Pacific environment, this is exactly where they sit. And so even though they're on the smaller side of nonprofit organizations, they play actually a very key role in the landscape with the larger guys. So here she's looking for more in-depth information on Pacific environments model, their impact, some of their allies in the field and ultimately their unique value add. The second piece here is the information and issues that they're working on. She wants a clear sense of their credibility and leadership in the field. And since Pacific environment is technically smaller than some of the other grantees that they usually give money to, she really wants to understand the depth of their impact on real people. So this idea of like return on investment, right? And then the last thing now we're thinking through the lens of, okay, what does Pacific environment want from her? They want her to follow on social media and sign up for their e-news. That's sort of the lowest hanging fruit, right? But ultimately they want this person to connect and request a proposal. They want them to engage and ask for some sort of partnership. So now that we have created our personas and we know what we're looking for here, it's time to do a reality check. Are the assumptions that we've been making actually true? The best way to do this is to take these questions out in the field and survey and interview audience members. So in this case, what we did with Pacific environment is we did a full survey of all of their constituents. We sent just a blast out to their entire email list, but since we had identified personas, we could actually identify then people that aligned as closely to these personas as possible and do individual stakeholder interviews with each of those people and talk about the things that we had come up with so far, think about the messaging, like we're not going over that in here, but we shared different messaging and approaches and ways we were going to tell their impact story with each of these personas to get feedback of what resonated with them. And even though a lot of these personas that we were interviewing were close to the organization, we still could glean a lot of information about other people and how to attract people similar to them. So now, how does this move into actually creating a website hierarchy? So you see here across, we have our three personas. We ranked them in terms of who was most important to the organization. And even though everyone was actually very close and equal value, you have to pick somebody because ultimately you need to direct your hierarchy appropriately. So here again, we're following with our professional giver. What was most important to her was the model, then the partners, then the issues and regions, then the impact data, cultural appropriation and stories. And then they sort of adjust for the connection seeker and the influencer accordingly. But this, by taking these sort of main areas of what was most important based on what was motivating to those personas, we're then able to create a really clear hierarchy, not just of the homepage, but the workflows throughout the site to get each of those personas to the conversion point that we want them to end up at. So here you can see a wireframe of our homepage. And on the left hand side, we have what we framed as the model for the organization. A little bit of blurb about who they are and what they do kept it short and sweet. However, across all of our personas, partners was next for the giver and first or second for the connection and influencers, which meant that we also needed to elevate their partners. Because they're small, we needed to show everyone who came to their site that they're connected with all of the big guns out in the field, right? So here we have what turned out as a little place where we could put in good testimonials from those different partners. And then the last thing that was high on our list was the issues and regions for the influencers. So right below that top section, we're still showing you the things that are above the fold. We have the three areas of their organization, the main things that they focus on, community and a variety of those different pieces. As we keep going down, we now show you the next area below the fold. At the top, you can see impact data was important to all three, most important to our professional giver. So the next thing below the fold is showing impact data. We use this kind of fun little slider thing so that because they're an organization that doesn't have a lot of quantitative data that's like really, really impressive, but they do have an amazing amount of qualitative data. So this way they got to have a couple sentences to be able to explain why the work they were doing was so important and show it on a timeline showing how long they have been out in the field doing this really incredible work. So the next area you see here is the stories. That was also important to all three of our personas. So we have these two at the top that show highlight boxes and then three below. Each of them being tagged with a location. So again, it's queuing back into the issues and regions. And then at the very bottom, because the way that our content structure was, there were some key issues and regions that we wanted to elevate where they might not have Russia in particular as a taxonomy for all the information on the side of the highest level taxonomy, I should say. But we knew that we wanted people to be able to quickly see all of their Russia work. So there'd end up being a tag here at the very bottom that can take you to all of that work very quickly. So now that we've gotten through our initial wireframes, we're not gonna show you all the internal ones, but you get the sense of how to build out a hierarchy. I'm gonna hand it back to Andrew to talk about our dev sniff test that happens at this point. Yeah, so we're gonna stir the pot a little bit. As I said at the beginning, oftentimes there's a lot of tension at the point of where design team and development team kind of need to do a handoff. So there are a couple of things that I wanted to address here in order to help reduce that tension and make sure that projects are done on time, on budget, so on and so forth. So design and development communications obviously can be really challenging. Transferring of knowledge, and I think specifically intention of designs or intention of the way that the site was designed is really, really important. So number one, we all know about the saying about assume how it makes a donkey out of you and me. Don't ever rely on assumptions. Everything needs to be communicated and probably documented when there's communications between the two teams. Check in early and often. I'm gonna talk a little bit more about what exactly that means in terms of a project process. One of the things that we found with developers is that you need to ask them, is it hard? Don't ask developers, is it possible? Developers are very solutions oriented, but they don't always do it in the context of a budget or a timeline. Our developer always says anything is possible with enough time and money. So on the other side of things, designers are very creative and they come up with very fancy ways of sometimes doing very simple things. And so you need to build these guardrails for designers to work within so that they make it actually possible to build whatever they design. So how do we do this, right? So first off, developer sniff test, we call it. We bring them in early on in the prototyping process to walk them through what we're thinking and basically say, hey, are there any red flags here? Does this look really hard? Does this look like it's achievable? Do you have any ideas about sort of the technology or the way that you would go about doing this? Start to talk to us about that. Number two, component-based design, as we've seen over the last five years or so, is really, really valuable in terms of establishing these systems of design so that we can establish guardrails for designers and also make it very easy for developers to then take those designs into production. And then obviously, when transitioning, although we've had earlier meetings with these two groups, it's really important to have a full team process or a full team meeting at that handover point and then obviously going forward frequent stand-ups from there just to make sure that no problems have arisen. Okay, so that's really, I mean, there's a lot going on there but this is really the essence of what we try and do in our project process to include developers in this design process to make sure that there's no problems early on. Okay, so now that wireframes have been complete, our dev team has signed off on them. Everybody is happy up to this point. It's time to take our designs or our initial designs and wireframes back to our stakeholders and do a little bit of testing again. Because oftentimes, and you'll, you know, we find this when you're working with lots of stakeholders and when you have your, you know, higher ups in the nonprofit world, your ED, your board members, whoever it might be, your for-profit CEOs, you need to pick the points in your process where they're gonna be involved and this is now the time where we bring them back to the table, we've collected all the information from them at the very beginning and now let's talk again. So we got together our client work group and we showed them our set of deliverables in which we found some glaring things that needed to be addressed. We of course now showed it to the development director who in the nonprofit sector, you know, they're like, wait, where's the donate button? It is not big enough and it needs to be eight times on the homepage kind of thing, right? So, but we found our way around that and we gave them three and did it in a delicate way but you can see at the top of the page and you won't have noticed this from our wireframes but you can go back and look. We changed to have a sign up, a take action and our donate button are the only three buttons at the top of the page that follow you throughout the site. Then halfway down on our homepage, we have a donate area and a sign up area so you get another call to action that's like right below the initial fold and then when you scroll down to the very bottom we made a more interactive footer that had, you know, the touch to donate buttons there as well as another stay up to date field and a little Twitter interactive area. So once we had talked to our stakeholders we realized that some of these things like signing up, boosting their email list, making donation higher on their priority than they had maybe originally thought that it might be, this was an important part in the process because we could still change things. We weren't getting so far down design that we couldn't come back and say, wait a minute and you'll also notice that our wireframes were highly designed as well and people can go back and forth of whether you think that's a good idea or not but for us because our process and we don't address this here but you can look in our resources. We've done mood boards and figured out the look and feel of the website at the very beginning of the process. We created wireframes that were more highly designed. So once we're actually getting to this point where we're now applying the visual language onto the wireframes, it's so much smoother because everyone knows what to expect. They already have sort of envisioned what the website was gonna look like in black and white in their minds. So the last piece that came up in our stakeholder interviews in our second round was you see the area where it had the partner quote. They realized that they wanted more than one quote that they'd like that to be a slider. So it was something that was a simple change but would make it possible to highlight multiple partners on the homepage and at various places throughout their website. So now from the designer's perspective, the dev handoff. So first and foremost, what we like to do is once designs are complete we go through and we erase all of the styles that we've created and we start over from scratch. Because ultimately in our case we usually have multiple designers working on something and they may have eyeballed a text size or they eyeball the color and this way we know that we're starting from scratch and we can clean everything up for the dev team. Next, we always check through our headers, what's gonna translate to the H1 through H6, thinking about body text and line heights and weights because oftentimes that's another thing that isn't precise throughout and even though we do it this way, there's always slight mistakes. And then last, again, getting your color palette solid so there aren't a million colors in different shades of almost the exact same thing. And the last part is then building out and updating your style guide so that now you're handing something over that's really useful to the dev team. For us the tools we use is a combination of sketch and zeppelin. This is the very minimalistic style guide that gets created but our dev team, since we are a smaller group and we can be a little bit more agile, this is what they have found works the best for them to keep it minimal like this. But everything depends on what's useful to your team. So that was the basics. That's the end of where we're gonna stop for here. We wanna give you all a chance to ask any questions and I'll come back to this slide in a second. I wanna also bring up the contribution opportunities that I'm sure you've heard it a million times at this point because we're all supposed to put it in our slide decks so you know how to contribute, be a part of the community, help out. And then the next part is tell us what you thought. You can find at the bottom of our session on the website, the URL to take the survey or to give feedback for the entire Drupal con. So that's it. Let us know if you have any questions. Here's more information about us, resources for this session and ways to connect with Rudin. Thank you. Any questions? Yeah, or we can just repeat it for you if you want. Yeah. I have a few questions. Yeah. The first is how do you design for your users when your users are primarily anonymous and in fact, in many cases, they're non-web users. So you try to bring them into the web. And secondly, how do you balance user design with editor design when it's kind of a predicate if you have four editors designed to use a 5D web for user design because your editors are going to create a crowd for you? OK. I'm trying to repeat that. So the first question was if you have anonymous users and so maybe you don't know things about them but you're trying to bring them in. What I would start with is you can always find user data by region or location. You can find information about there's, there's a lot of data out there in the web. So you may have to start with assumptions and then figure out from those people where they get their information from and then start doing testing. Try and put yourself in front of them and see what people click on. I mean, sometimes you can even use Facebook for this kind of thing where you can do kind of a pretend model that maybe you grab from a similar company or similar organization of what some of their users sort of look like but it has anonymous data. It's not showing any real people. Sometimes you can find people who will share that information with you so that you have something to start testing against. Is there anything else you could do? I think one other thing that comes to mind is the idea of taking a more agile approach. So doing a lot more testing on your site, right? And then you can learn through those testing. Granted, this could take some more time but you can learn through those either personalization or A-B tests what type of messaging, what type of layout is working on different pages and you could use something like that to really inform the direction. Yeah, that was one thought that I had. I'd say the last thing would be if they're people that you have any sort of like physical address kind of information like maybe these are people that you said don't use a website but you're trying to draw them. You can always buy lists and send out print mail like old school style. Or if you have their contact information, have a phone call with them or something. It just depends what content you have, right? Or what you can come up with. What was the second? Editors versus... What do you mean editor friendly like? Because you're scared the editors are gonna screw up your site? Like you'll get a rainbow of colors on the site? Which one creates editors with varying levels of content and experience the opportunity to, how do you engineer so that you're allowing your editors to create content that will affect you? So I think one of the great things about Drupal 8 is the templating system. And I think where we've landed as a shop is that using templates is better than using like display suites and things like that. In terms of CK editor, I think that's always, in my mind, been a little bit of a complaint about Drupal is that WYSIWYG editing interface. What we try and do is we try and really compartmentalize the content so that it's very field-based so that you don't have to train people on like, all right, in order to create this little thing here, you have to build it in the WYSIWYG in this way. Is that what you're asking? Yeah, I mean.