 Thank you all actually for being with me here at the end of the day. I know we're only going to go get dinner and probably go to the after party. I'm Daniel Schussman, Google Technology Manager at Amnesty International USA. I'm going to talk to you today about, particularly about how we did the website redesign of AmnestyUSA.org about almost a year ago and how we used design patterns, really design systems and advanced customer fields. Pretty much anything we wanted to be able to do. I'm not going to go through my whole thing here, but that's everything about me for now that you're probably going to know. The biggest thing is just to understand that I've worked on about 50 websites for Drupal. I'm definitely over 100 doing WordPress sites. General WordPress sites are also like WordPress sites like that in my website as well. I've done around the block and I've done a few things. I've been doing this for almost 20 years and I've just gotten out of it. I came out to Amnesty International USA in May of 2016. When I came on, one of my first tasks was actually to do website design. To look at what we were doing, look at how we were performing and figure out how we could optimize it and make it even better. This is the comment that I kept hearing over and over and over again. Something like that, which was that our website looked so 2009. Here's what it looked like. It fit right inside that nice little 960 pixel area there. It wasn't responsive at all. If you looked at it on your mobile phone, you had to do that. It's kind of bigger to be able to see everything and click on things. We also had a really tough time getting your focus on what we wanted you to do. You can tell that at one time someone probably said make the logo bigger from the top left there. We made it much larger than it should be. When I came on, one of the first things I did was make it responsive to the website we had. I started looking at other Amnesty properties throughout the world. The way Amnesty works is we have different sections across the world. We operate in different countries, and so each country pretty much runs autonomously. We have our own websites, our own branding, our marketing materials, things like that. But we all share one common goal, and we also answer to one international secretary of its goal, which is basically our headquarters, our folks that give us the orders of what we need to be doing. This is the main Amnesty that ordered websites. It was done in 2015 or 2014. But it's kind of the direction we wanted to start going. We wanted to start doing a much more modern look. We wanted to get away from having so much yellow on the page. You'll notice the only yellows you're going to see here are the logo and maybe a primary button of sorts. We also wanted to focus on really kind of using a totally different design aesthetic of trying to use more white space. We really focused your eye on specific pieces of what we were trying to achieve. Here's another example. This was Amnesty Australia's website. It actually does the WordPress, which is pretty cool. I think they might have been the first Amnesty section to do a site in WordPress, which is pretty awesome. But there's launched just a few months after I got to Amnesty. But their whole trajectory and how long it took them was about a year or a couple months or something. So it was a big endeavor. I basically had somewhere around about six to eight months to really get something out of the ramping. So where do I start? Where do I begin? So the first thing I wanted to do was start with research. I wanted us to really look at what's working, what's not working, what literally is just crashing and not doing well at all. But I also wanted to find a design studio that would help us do these things. Design studios maybe have done similar types of projects like this, worked with similar organizations, kind of of our caliber and what we try to do. And so I found this great shop called Hyperact. They're social impact design studio based out of Brooklyn, New York. It just so happens our national headquarters are in New York City. So this wasn't a far fact for me to actually meet them in person if I had to and things like that. But also their ethos was just terrific. They're really, really good at design, really heavily involved in the design community with the IGA and things like that. And they were founded by two refugees. I don't think you can get a better story for us selling a design firm to work with. DeRoy on the left was from Cuba and Julian on the right was from the Ukraine. And I don't want to get stuck on that, but we chose them for that reason. But we chose them because they're really good at design and looking at human rights organizations like ours and transforming them into where they need it to be, rather than what you saw before on that website, which was just a whole lot of fluff and a lot of yellow. That's a lot of yellow too. So we wanted to really do this right. We didn't want to fixate on just two or three different methods of discovery. We wanted to do a good array of things where we could do a lot of it, but from a lot of different types of people. So we actually attended different embassy conferences. We have these regional conferences every year. We also have what's called annual general meeting, which is essentially like all the embassy folks from the United States getting together once a year. We told them what we were doing. We had workshops with them as well. We had several different stakeholder workshops both in New York City and Washington, D.C. We did group interviews, online surveys with actual member leader phone calls, where we would talk to some of our most involved volunteers and hear from them on what their concerns were and what they needed and things like that. We had one-on-one interviews internally and externally, and also with people who had never heard of Amnesty, who when we showed them our candle icon had no idea what it was, which is perfectly fine. We wanted to know how we could attract folks like that, too. And we did some of the more traditional things that were used in the web world. Analytics, heat mapping, search engine making, and stuff like that. Our workshops looked like this. So we did things like card sorting, we did things like content mapping. We really tried to think about all the different pieces that folks would want coming to the actual website. And it was made up of a mix of staff, member leaders, again, folks that may not have heard too much about us, you know, who we found just in different research groups and stuff like that. We also went through with the analytics event, and it's really deep diving on kind of figuring out what worked and what didn't work. We got about a million page views a month at that time. But the thing that was really surprising to me, actually, can anyone see what's so surprising there? And all that data? Let's see the one thing. The low bounce rate? Yeah. This is insane. I've never seen a site with 15% bounce rate. That basically means that most people are coming to our website, and according to our data, we're staying on there for 10 minutes, 20 minutes, stuff like that, which we're skewing all data from everyone else. So when we saw something like that, yes, that looks also amazing, and it looks like very cool. We're in a good position here. But the reality, too, is how is that possible? We have a lot of content, but we know that people are having a difficult time getting to it from different devices. We know people haven't had a difficult time finding that content on our website. So that, to us, was a little suspicious, and actually it was suspicious for a reason we found out later. We also did heat mapping like this, so it was just running on our site continuously. What I was looking at was clicks and also hover states. So as people are kind of mousing over things or clicking on things, we're looking at what they're mostly interested in and what they're doing. The biggest ones, of course, were the search, which is telling us they can't find the things in the navigation that they want to be able to find. Our work, which is like our main areas of focus, what we do, why we do what we do. By the way, we're a human rights organization if you don't know that. And then the other big one, you'll see at the bottom there, it's actually about us and careers. So the other two big things that people kept kind of clicking on. Dominate had some clicks up there. We do make a lot of donations online, but we noticed that folks just weren't necessarily going to like to that when they came to the website. We also use hotjar. We use hotjar for the heat mapping there. Hotjar is a great web application that you should check out. I think they have a free version. Sure, but if you just pay a little bit extra money, they actually have these really great tools that you can use. This one for us was really a great opportunity. There's this thing called incoming feedback. AJ Morris actually talked about this a little bit a couple of sessions ago today. We're basically on our website. All someone had to do was go ahead and put in there comment, right on the site, all we have is a little smiley face that shows up. So if you go to the site right now, you're going to see a little smiley face in the bottom right corner. And if you put a message in there, it's actually going to go to my team. So just so you know. But the great thing about this was it showed us not just what people were saying, but also showed us how they were reacting to the site, what they liked, what they didn't like. You know, our goal was basically to move it so that we're getting mostly green, you know, their hearts in there, green heart faces rather than the angry red faces. We also did an online survey and that survey, you know, we tried to make it as simple as possible. This is literally just a WordPress site spun up with some, was it grabby forms? And we just did this as a quick thing in campion, like a personal level or something like that. That's it, you know, just spun it up, got the data we could get to, send this out with our email folks to get people to actually fill out the information. And what was great was we didn't give them 50 questions today. We gave them three questions on two pages. That was it. So we wanted to know, what did you like? What did you dislike? And what do you wish? That's it. Because everything else from that was actually taking people away from actually filling out the form. They weren't, they weren't completing it and just weren't interested in it. We were getting much higher bounce rates and we had a lot more questions out of it. So with all of that research and all that information discovery, we realized we needed to have a design system in place. So this is something I had kind of, was also in my gut that I wanted to have this for us. I wanted to have kind of a, some type of way that we could be able to make, well, make our designs work better across the, across our microsites and our websites. So the main reasons we have for actually implementing a design system, the first one was we wanted to support the brand. So we make a lot of microsites throughout the year. I just rolled one out actually like two days ago that we made the week on WordPress for the week design and custom theme and stuff like that. We'll make about 12 to 15 for the year. So it's about one and a half every month basically. But with those microsites, we wanted to be able to also take the same types of design elements that we through the main website and use it on those. So we're not going to reinvent the wheel. We're having a really quicker time to be able to go from ideation to actual production of what we want to have out there. The other big thing about a team I support in the brand is we have this global brand that we work with. We all have common pieces in our brand. I'll show you that in a second as well. And so we need to kind of adhere to that. We need to make sure that we're using the right icons and things of that nature. And then the second part is that it's naturally agile. So what's interesting about the design systems is that we can actually create a new iteration of design very quickly. So we can create four or five different page designs in a matter of minutes just by moving content around and saving them as different traps and then sharing them across the organization to whoever needs to approve those. And then the last one is ease of use. So for us, having a design system actually made it easier for both the viewer so the person coming to the website to get kind of a regular calm and understanding of our visual language but also made it easier for the person who's administrating the WordPress. The thing I'll show you in our code in our backend is we don't allow people to actually add in specific images just anywhere into the website. There's really specific places in there where you can add an image. Otherwise, you have to kind of adhere to the system that we put together. So the most famous design system out there that we had known about was atomic design. How many people have heard of atomic design? It came out, I think about maybe three years ago now, Brad Frost, who's a web designer, had thought about this concept of basically breaking down content into smaller chunks so that we could focus on designing them in the pieces that make the most sense and then kind of mixing and remixing those as needed to come up with really interesting different types of visual ways to show your content. So it looks more like this. Practicality is like this. If you were doing a mobile application, you're going to break it down to creating icons, to creating what text might look like, to creating what images might look like, these just placeholders. They go a little bit further with that. Deciding kind of one of these pieces of content that we go together and how they'd be positioned. Then looking at even more pieces together, kind of like your core organisms, basically. Then these templates, and the final thing is the actual design of pages. We love that. It looks great, and it's pretty awesome. But you know what? Internally, for us to tell someone, what do you think of this organism? No one got it, no one wanted to kind of go that way. So we had to kind of adapt it to our own language to kind of break it down a little bit easier for everyone to kind of understand. I'll get back to that a little bit. The other thing that molded with that, so now that we're looking at atomic design a little bit on how we view the design system, the other element for us was that Bootstrap 4 was just coming out of beta, basically, or just coming into beta. How many people worked with Bootstrap before? So Bootstrap 4 is a framework of CSS, HTML, and JavaScript. And if you are a hardcore developer, you probably hate it. That's the reality. But the truth is for us, because we're limited budgets, we work with a lot of different developers, we're doing a lot of different applications and things like that, we need to have one common core system to work with, one framework that we could then duplicate, iterate upon, and keep reusing, and also contributing to one core system across all these different platforms with all kinds of vendors. So for us, Bootstrap 4 actually looks very forward and I think we've made a lot of sense, so that's what we've said before. So, designing the system. So we realized that, you know, starting out, we really have to look at our global brain and look at kind of what we have available to us and what we have to adhere to. And so for us, it was focusing on this thing called the big yellow book. It sounds like an Amy's Hack return, that's why I love it. But the big yellow book, basically, of Amnesty allows us to see all the branding guidelines of all of our sections that we're supposed to follow. So this is the kind of thing that I've just pulled out a few things that make the most sense for us to take a look at. So this is an example of how logos should be used, what kind of variations of the logo could be done, the next one being the language variations, what it looks like with our country identifier on it, and if you look at our website, you'll notice we have that out there as well. And then what, you know, a local placement based on different digital pieces, so a website or a mobile app, a global brain social media, and so on. So you get the picture, though. You get a really good kind of framework to start with. They gave us the good guide on what we kind of wanted to focus on and what we had to kind of stick with in. These constraints to me were actually helpful, not a hindrance to start with. One of the other great things about this, too, is just exactly what colors were in play. You know, what colors made sense for us to basically stay away from anything else. Some of the things that gave us, too, was specific fonts to use. We have our own neat font called Amazee Trick Outlet. That's what this is here, and we covered it into a web font, so we can use it on the internet. But our secondary typeface is aerial, which I was like, no. So you probably wouldn't see much of the aerial on our site at all. It was also good because it gave us some focus on what iconography we needed to use, and also told us kind of what the photography should be and how it should be working with it and what it actually should essentially represent. So what the visual should be of any photographic elements that we use across the web site. So with that, you know, with that there, and also going back and looking at the websites from the other sections, we started to kind of put together an idea of what this content would be. And for us, what we call them were four modules. Our current site that time is on Drupal 6. So we're already using things like modules on there, but don't let that confuse you. For us, modules were really just a chunk of content that should kind of be together. We figured in our heads that we could move these modules around on a page and make different types of pages on its own. And so these are just wireframes that hyperactive, putting together just, you know, little experimentation of what these modules might look like. Here's the other one kind of showing how we put images on a page when I link to other places, like a landing page or something like that. And then this is actually a result. So that first module we just saw, which is right here, actually converted into this, into us using a little true, a typography that we're supposed to use, a great iconography as well, and showing what the data looks like when we're actually portraying something. Same thing with this one, too. So when we're showing images in a certain place, and we just want to have the title, it's giving us that ability to do that right there. So once we kind of had a whole bunch of those figured out, we had all different kinds of modules, basically, that were put together. Some of these like navigation elements, this is like a variation of a navigation element that might be somewhere, stuff like that, go over to our work, these other piece of modules that we kind of have inside of there as well. So we're really playing down kind of all these different concepts of what these modules can look like in different ways when we're using things like that. Once we have those modules in place, then we start thinking about those larger pieces of content that will go together, and actual whole pages, what those might look like. And so we had Hyperact actually giving us specific wireframe mock-ups that would show us a little bit of if we were making these content pieces around, what they would look like, what they would be. And so for us, on the back end, what we were doing, we were labeling everything as well. So we gave that this example right here was banner one, the navigation affairs, the navigation array, and then the last part to that was for us to kind of marry that with the actual design concepts that they had. So we did all the concepts of these page layouts and everything, these wireframe layouts, as wireframes, sorry. But then, for this part, we actually just went ahead and coded that. We didn't go through and do tons of mock-ups every time for all different pages. We just made actual coded pieces of them. This is what the actual designers looked like there. Then this is all on the side of Sketch. So here's like variations in navigation, variations in banners. And so for us, getting these and being able to work with these made it a lot easier for us to think in modular terms, to think in terms of how can we take this, place it on a page, make it easier for someone to be able to create these different page designs using something like the main specimen fields. So the next part that we had to look at was how do we build this system? How do we actually do it? And I'll admit, we didn't actually know at first. We just went with it and figured out that we would build the bridge and then we would figure out once we got over there how we can see everything and maybe we could stay out. So we looked at different things. We looked at a lot of different static generator sites. Build Bands, the Tandem, Jekyll. We also looked at how do we want to upgrade in Drupal 6 and Drupal 8? Or do we want to move to WordPress? And ultimately for us it was moved to WordPress. The biggest reasons for us were really the fate of the maintenance that we knew that we could easily click a button to a plugin or a core, update it, and we wouldn't have any issues. We won't have issues most of the time. And if so, then there's no issues to be had. The second thing for us was it was easier development. Honestly, goodness, there's just a lot more types of plugins we've worked with. There's a lot more different developers we've worked with. There's a lot more information if something went wrong on it. And the last part for us was a robust community. Anytime we had an issue with WordPress in the past with other types of projects or whatever, you ask a question online. You go to WordCamp like this and you can get people to actually answer you. For us, we also chose Pantheon to put our website on. The biggest reason, and if you haven't seen Pantheon yet, the biggest reason was their hosting environment has a dev version, a test version, and a live version. And you can seamlessly push your database and your files and your code in between all those versions. And so the code I'm actually going to show you today and the example I'm going to show you are all running on our test version right now. I wasn't going to do it online. So we're on test. I just spun that up literally in the next room just in a few minutes right before this presentation. So it just makes it very quick for us to be able to make changes, very complicated and to work with. The DNS part to it, what we're using in our caching is all Cloudflare, just sitting on the back end part. And also too, if there's anyone who has a nonprofit in here, I'm also on this board called Project Galileo on Cloudflare. We offer free Cloudflare like business license for nonprofits. And then the other thing we focused on realizing we wanted to do in the back end system was we wanted to put it on being a new starter thing that made the most sense as far as being forward thinking. For us it was Sage, which used to be called Roots. Sage was already doing some experimentation even at that time with Webpack and some other stuff. We're still on the older version so we're using Gulp and Bower and Moostrap and all these little like do-anythings basically. If you don't know what those are, don't worry about it. The whole premise of it is it just makes our development that much quicker. We don't have to worry about all the nitty-gritty pieces of compiling things and making them run fast and giving them a standpoint that looked great. We just have to worry when us putting in our code and we're going to go there. So with all that said, the first part we started at and this is going to be fast was actually putting together just an HTML, CSS, JavaScript style guide built off of the Moostrap elements. And so this is us literally taking over all the Moostrap frameworks of the eventual pieces. So we're, you know, we're re-skinning their buttons, their mask heads, all kinds of stuff like that. We met in things like Google Maps. That's a real little map right there that we used throughout. But the concept was that all of these pieces, like this one for example, Module 1, all these pieces would then be available for us inside of the backend of WordPress. So when you edited a web page, you could choose Module 1. That's one element that you want to fill into there. You could choose if you want the image on the left or the right. And you can choose what the title's going to be because our history or about us or whatever. And that's where we were really going with this was to make it so that we could use the style guide like that and start with just the code part and then go from there. What's that? We looked at things like what the composer did. That didn't make sense to us. But then I started to go from Web Design Magazine that actually made a ton of sense. And I actually talked about using advanced custom fields with WordPress to make these unique kind of play-offs. And they want to you through the whole thing. It's still up there. It's actually the April 2016 one, which was I guess out in February of last year or so. So it's a few months ahead. And ultimately we decided to go with ACF. For us, the biggest thing was the use of these two things. Flexible content and the repeater fields. And being able to use those over and over again to be able to make things happen. So good. To the coding examples. So let me show you exactly how we kind of put those things together. So in advanced custom fields this is what it looks like if you make a group. In that group you'll notice we only have one field here it's called flexible content if you're doing just like this. Flexible content field. Instead of a field that's where you'll see all of our different repeater fields they kind of take over. So the first one you'll see is heading text. This adheres actually just as long as they choose a different type of letter that the user might want on there. The next one you might see is body text. The body text a lot of times on this side what signs they want their body text to actually be there. And it goes through and actually just adds in other types of models like that. Buttons, Bores on a line. We even put I think when you spastic WP alright we even put spastic WP in there so we can put a search basically and with multiple multi-faceted search on any page we want to as well. And then if we go down we have even more modules that are in there. This is the first module we're just looking at there and these are all the pieces to that module that we can allow someone to override. So in the case of a page like this this is the about us page when someone comes in here and they want to be able to edit it all they have to do is click on that edit page there open it up and it looks something like this scroll down this is the body text part so for them that's this piece right here and they can decide what size that should be this person may not want to be body one this is the first piece that's going to be on there but they could edit and change it to anything else they want to they also could change the actual margins at the top of the bottom if you want it to work to add padding to it there's like a background color on this or something it's the second body text piece we saw there that's right here and usually when someone's editing this by the way when someone's editing this usually we have these top of two clothes it's just easier to look at so if you just scan real quickly you can see oh there's the two body text elements now here's the module one that I have to work with and so the module one looks like this so we're able to add an image we're able to decide how they want to align that image left to right then we have the title we have the body and again that all goes back to groups that we have over here the fields so there's that title there's that body there's that aligned image these are just normal advanced custom fields that we put in there like there's an image type there's a radio button there's a text field and it all comes down to this so this is the image on the left there's the title and there's that body it all seemed you know when I was putting this together when I kept reading about it it all seemed very complex for us to do it seemed really difficult but once we actually got the concept and broke it down it's really really just ilk if statements at the end of the day so this is the back end part in the actual site of the code it looks like this so for us this is a just a page type of basically but all it's looking for is it's looking to see if we have any rows that have a module content that's that flexible field that we put in there and if we have a module content of one then we put in all that information basically from the custom fields what you'll notice is there's nothing crazy in here except for those edge statements this is all you know if you're working with an advanced custom field and a fully advanced custom field you know this isn't the most special part you've worked with things like adding an image or things like adding a subfield and a repeater field and stuff like that so at the end of the day for us what we started realizing was wow we could really take this even further and do it more with it so we've been rolling this out with microsites and all kinds of stuff like that which are building some kind of intro structure for us so for us now our future for this is that we're also using a similar approach to how we do the mobile application we're done with that dynamic framework with GraphQL but we're using GraphQL basically a little bit of how we're working with advanced custom fields and stuff like that to decide what we want on these other pages which is great we're also building a public-facing style guide which we've done in about a little February and the next thing for Apple Summit 2018 is a desktop application similar methods but using Electron for that type I tried to cram it all in you got it all in any questions first the people at WordPress search doesn't search post-meda so are you doing something for the search? yeah, we're using search WP so that was the easiest way around that any plans to move this all in the Gutenberg? oh, that's actually yeah, I do want to mention that but that was our next thing was to think about doing those Gutenberg blocks yeah, we already started kind of looking at that and seeing what that got to exactly where it was and the others kind of go over to you now yeah hoping to be able to launch so yeah so now it's time for this question about the new people so, does that mean and I've only very briefly looked at Gutenberg does that mean Gutenberg's going to play nicely with advanced custom fields? and how much will what is because you know where I work we use ACF quite heavily in the development side so that's going to so, planning for the future how much is that going to play? yeah, same with us and you know, when all the work I've done previously amnesty have always used advanced custom fields and even on the programmatic side I didn't get into that but we rarely actually do our fields in the editor in the back we actually committee them to get so that's how you know what's done but from what I've heard from the back team yes, I think things should play well I waited from ACF knows about what's going on so as far as I know will it be okay? I'm not doing all this sharing things differently giving us more more runway is a quick quick time frame to get everything done I think we probably would have given ourselves like two or three more minutes and a quick let's thank our speaker one more time a quick reminder the party starts in 45 minutes at the Hispanic Cultural Center