 All right, I think we're going to get started. We are going to be talking about a, we're doing our case study for the U.S. Helsinki Commission website. It's a .gov site to give you a little bit of information kind of about who you're gonna hear from today and who we are. My name's Joe, I'm the Helsinki project manager. I work at New Target. You're gonna hear from Chris who's over here. He's our creative director about all of the kind of front end and the design and some of the strategy that went into the site. Then you're gonna hear from Sirot who's one of our Solutions Architects at New Target. More about kind of the backend, what modules we're using, what configurations we had to do. The U.S. Helsinki Commission site was a custom PHP application and we took it into Drupal 7. So we're gonna be talking a lot about that process as well. Just a little bit about New Target. We were founded in 1998. Our offices are right outside of D.C. in Old Town, Alexandria. We do Drupal, we do WordPress, we're an open source shop. But we do .gov work and we also do kind of commercial work, non-profit work, association work. I'm happy to talk more about that offline if you guys want. We kind of do everything from strategy to design to development. We do a lot of integration projects. A lot of migrations we do host as well. And we also work with clients after sites launch in their marketing. So the Helsinki Commission, for those of you that do not know, is an independent federal government agency. It's been around for a little over 40 years. And its goal is really to strengthen the legitimacy of human rights monitoring. Their site, really, and one of the things that they offer, one of the kind of highlights of their site, is that they have archives that go back all the way into the 70s. And oftentimes we hear from them, you know, their site is that library. It's the archive. They want to make things easy to find. They want people to be able to access briefings, hearings, press releases, kind of all sorts of information throughout their history. So when we got the, when Helsinki came to us, this is what their site looked like. It's a little bit dated. I'm gonna have Chris talk a little bit more about the old site. And then we're gonna look at the new site. We're gonna do a live demo of the site. The site was launched in June, July of 2016. So it's been live. We've been making some improvements on it. But overall, the client's happy. The Helsinki Commission's happy. We've seen good user engagement. And we think it has a really fresh feel. But I'll let Chris talk more about the process. Yeah. Yeah, so like Joe was just talking about, this is a screen capture of the Helsinki Commission from May 2016. So just a year ago, this is what they came to us with. And when we got to them, we sat down with them and we had a lot of strategy sessions on what they wanted this new site to be. But one thing I wanna show you with the old site, just so we can kind of receive the old site and see the new site, is just kind of the content that they have and the things that they needed. They have a lot of internal pages, but I wanna show you the homepage. And one thing you'll see kind of from left to right is you got the left hand navigation. Okay, we can work with that. I get that's kind of an old kind of trend. Below that, there's a search function below the navigation. It's kind of buried. Okay, we're gonna work with you on that. Let's see if we can get the search function higher up on the page. In the middle of the page, you can see this little sliver of a map. That's an interactive map. On the old site, you'd have to, you click on it, it would pop up. I think it was a custom piece, but it was something that they wanted because it showed their partners in Europe and North America and stuff like that. So the map was something that we had to kind of make sure we took into the next site. Okay, no problem. Below that, there are tabs. And this is what the Helsinki Commission produces. This is their content. It's called the newsroom, statements, hearings, articles. And they're all using a tab system there. Like, okay, and what they're doing is, I mean, they're supplying these things on the homepage. Not a bad idea, having these tabs structures and this is the content you want people to see. We're gonna work with you on that. Great. And then to the right, you have some social media. There's another search function over there. And you're like, okay, we'll work with you on that as well. And even having the commissioners on the left and right of the map was something important to them. All right. So we got all this information. You know, great. Where do we take you from here? Well, the thing that NewTarget does is when we start a design process, we do something called style tiles. And this gives us a direction pretty quickly. Okay, so we're gonna put together some fonts, some colors, and we're gonna see how you feel about a direction. Because they wanted to push it. They wanted to go to another level. They weren't quite happy with, called the brand of Helsinki. So the first thing we kind of put together, first thing comes to mind, okay, you're a government site. Let's try something a little modern, red, white, and blue. Keep it patriotic. We have a serif font, kind of feels traditional, but trying to show them a modern look. And they're like, you know, no, that's not us. I'm like, okay, first time out, I get it. Let's keep going. Second style tile. We tried some golds and some darker colors. Still using the serif. You got this editorial feel. It feels kind of like a new site. And they just, no, that's not quite it either. And then it was an interesting conversation because this is a government site. And it was really kind of refreshing when they're like, we wanna take this and we wanna make something, a government site that really pushes the envelope. I'm like, okay. So we go and we do a third style tile and we're using condensed fonts. We're using darker colors. We're using bigger photography. We're just trying some things. And they really liked it, you know? And we're like, okay, well, this is interesting. Let's go and design. Let's see all the elements that we have here and let's create this new experience. And so what I'm gonna do is I'm gonna jump out of the keynote. I'm gonna show you the live site because what could go wrong? And let me show you what we have. And I wanna show you this site that kind of came together here. And I hope you kind of remember some of the elements that we talked about. Okay, so one thing we kind of did was like, we kind of announced them. Here it is. Here you are. And we used the loop video to bring the site alive. You know, a lot of times we look at websites and their static. And it's been going on for 20 years. And we really decided to start to integrate video. And just in the background, it's nothing too crazy, but just a nice loop video to bring the site alive. And you have just their name right up front. Understand, where am I? No problem. Let me talk a little bit here. We took our navigation to the top. Mega menu type navigation. Kind of nice big fonts here. This is all the countries that participate by issue. No problem. And then search function. The search function, as we talked about, was lower on the page. Well, we decided to call it out and just make it an overlay. We had this idea, let's give the user like one thing to do at a time. So nice clean search there. Social media across to the right here. But let me scroll down. Here, you can see the navigation follows you. Gotta have the sticky header with these longer sites. And then we wanted to make sure we have the mission and we have the commissioners right here. And that is because very important to them have to be able to understand who these are and what the mission is. But before that, this is where we get to the content. The good stuff. And what it is, we went with a grid structure. We decided to take all those little tabs and create content types that were labeled. So you have your hearing, you have your press release, you have your articles, and all these things flow in a grid structure, which is, I think, a modern, nice way to view content. But we get it. We understand that you're not always gonna wanna look at a grid structure. Well, we're gonna make sure that we can do it by list as well. And you can just scroll down. You gotta have the articles and the tags here, no problem. But you can always go back and look at this. But then you're saying, okay, well, how do I get to what I get to? Maybe I'm looking for something that's really important. And we're talking about these archives that go back to the 70s. Well, we have our filters here. A nice kind of clean way to open, close. And we can do it by category. We can do it by country, issue, date, all those things. The thing I wanna show you, though, is you have the sticky header. But guess what? You also have the sticky filter. So as these things kind of come together, they click and they're gonna follow you down the page. The one thing we did was decided not to do an infinity load. We have the load more. We felt that some people get frustrated. And so the user is allowed to click a load more. But let them allow them to get to the footer. It's okay. We have some information, so a subscribe button and things down here. But if they wanted to, they could have a continuous experience right on the homepage. Couple things to kind of show you here. Talked about that map. Well, we gave them the map. And we gave them an interactive map here that allowed you to see the partners, right? So if you were to click on the Russia Federation, you'd get some information. But guess what? You're gonna get all the content related to the Russia Federation. It's all right here. It's easy to kind of just browse through all the things that you wanna see with this partner. So nice and clean, easy structure here. One thing I wanna talk about this grid here, and it's right, you can talk about this here in a second. This is an eight block grid. You can kind of see it here. One, two, three, four, five, six, seven, eight. That is a grid that the client can use through their own liking. So you can see here, you're gonna see these different variations. But we allowed the user to, if they want an article to take up two blocks, we can allow that. One block, no problem. If they wanna take up the eight blocks to have a feature, that's not a problem either. They're not doing it here, but it's their site. But I wanna let Sarat here talk about how we kind of implemented all this and how this came to life. So like Chris and Joe have mentioned, content was their main priority. People were, when we started discussing, when we moved to the requirements gathering, when we started meeting the client, their main issue with their existing site was, people were not able to find the content what they were looking for. Because they had like a tab layout, they didn't have any filters. So organizing the content was the first priority. So we basically like came up with taxonomy vocabularies. We looked at their Google Analytics. We saw what are the key terms that people were looking for. We looked at how the content was organized on their current site. We came up with ideas on, okay, these have to be the taxonomy vocabularies with which each and every piece of content on the site is going to be tagged with. So the filters that you saw on the home base, the category, the issue, the type and the date where the main taxonomy vocabularies that we came up with. And this site is not a huge site in terms of kind of types because it's more content heavy. They do not have like all different kinds of variations. They only have like a few kind of types, like articles, issues, statements and press releases. And then all of them almost have the similar structure and then they have the, they're all tagged with the same taxonomy vocabularies. So when they create a new press release or an issue or a statement, they're all tagged with the same taxonomy vocabularies, which is why on each and every page that you see on the site, be it the home page or be it if you go to like any country page, all you see in the bottom is the same grid layout with the same set of filters with the same taxonomy vocabularies. So that way you can easily figure out what kind of you're looking for and easily find that particular content on the page. So as you have seen on the home page where we have the grid layout, and like Chris has mentioned, the client has the option to choose what kind of a tile they would want for each and every piece of content. So what we did for that is we basically gave them a select list for each content type. So when they're creating a content when they're entering a title, uploading a background image, entering a date, entering the body copy, we also give them like a select list that has like, okay, choose the tile size. And the options can be like one by one, two by one, one by two, two by two, which basically dictates the grid structure in here. And then they get to choose which grid layout they want and they'll upload, we even provided help text like, okay, if you want to use this size of a, this kind of a grid layout, you have to upload a minimum image size of this size. And then they went ahead and created all that content. And what they wanted to do was they did not want like, they did not want a typical news landing page where all the content is sorted by the date basically. So all the newest content being at the top, all the old content being at the bottom. They wanted to pick and choose what appears on the homepage specifically. So what we did was we gave them a note queue basically. And then in that note queue, they get to decide, okay, which articles go where in that particular queue. So then you might be wondering, okay, what will happen if I choose like a one by one, a one by two, a two by one, be the first three elements in the note queue? How is the homepage going to like layout? There might be empty spaces in between because the grid structure might not be aligning properly based on how they chose the note queue. So what we did was we spoke with them, we came up with some of the articles or press releases in some blocks of content that we call them as fillers. So for example, the Twitter block over there and the map over there are like fillers for a one by one and then like a two by one block. So we basically created a custom module that basically looks at the note queue when it starts building the homepage, it will start aligning all of them. And in the background, what it does it, it will start looking for any empty spaces in between and starts filling those empty spaces with these predefined blocks that they have chosen. So that way there is no gaps on the homepage when the page is laid out with all different kinds of grid sizes. They're all set with those. They did not have those empty blocks and then we fill them up with the fillers. And then as you have seen on the map page, so we used something called AM chats. So how many of you have here heard of AM chats or used AM chats? So AM chats is a great library. You can use it for any kind of data isolation. You can use it to create maps or you can use it to create pie charts, graphs. You can like free the data and then have it display in a nice and fancy manner. So the map that you're seeing here is not just a map that's out of the box with AM chats. We also did some customization. As you can see here, there's like green on North America and the Canada. There's like purple, there's yellow, there's blue on certain regions. So these are the regions that are participating with the Helsinkiemption, they're partners, which is why only those regions are highlighted and the rest are white in color. So we had to pre-define those colors in custom code where we say, okay, if it's this region, when you're rendering the map, load it with this color. And then we also give the trigger action. So when you click on like United States or Russia or any other country, you are taken to that particular page where you'll see the mapping in and then at the bottom of the page, you'll see all the content that is tagged just with that particular term I would say here, which is the country here. And then search, like we mentioned, managing content, finding content easily was the main priority on the site. So we used Apache Solar Search and in the search we used the typical Apache Solar module and then we also came up with facets and filters with which easily, they can easily search the content on the site. Any questions so far? Yep, go ahead. AM charts. Yep, I can pull that up here. That helps. Yes. And then for all the grid on the home page to be responsive, we used Masonry API. So Masonry API also has a views plugin with which you can have like dynamic grid layouts and then they're all responsive too. So what we did was we implemented it only for the home page. For the internal pages, they were all a standard, they were all sorted by, just like a typical news page, they were all sorted by the date. Because they did not want to like manually maintain each and every internal page, the grid structure in each and every internal page, they were planning to do it only for the home page. So we provided them with instructions. So are you saying how do they choose the grid size and how do they lay it out on the home page? How are they coming up? Yeah, go ahead. And that's part of the design process. When we pitched this idea to them, we're like, listen, if we're gonna do this, we need to do it right and we need to start, it's on, the burden is on them. You have to start putting images with all your content. And they said, fine, we showed them subscriptions to Getty in places where they could get photos, to get video. But they also have their own content in terms of YouTube videos, in terms of other photos that are provided to them with the articles. So it was a little bit of a partnership in letting them, when you present something like this to them, you have to be honest and be like, well, this is your new look, this is how we think it's gonna work best. The other thing is, we also developed default images. When they just don't have time, when they just don't want to put an image with an article or find an image, we created default images, which is really kind of their logo in the background, a nice kind of look. But at the same time, they can't always have the default image. So there was rules we had to set up with them and they were happy, they were okay with it. I don't think every client would be okay with that. But there was this client that we were very happy to partner with because they were so willing to change. Unfortunately, we cannot log in here. Okay, one important thing that I forgot to mention in implementing this project is, this was not a project that we built out of, let's say, Vanilla Drupal. We did not just go to Drupal.org, download Drupal. So all the entire site, Helsing site is hosted by the house. So we did not have the option to use our own version of Drupal. So we had to go with the house version of the Drupal. And that was one of the challenges we had to face, basically. So there were some restrictions. You did not have access to the entire code Drupal, you only get access to the sites folder. So you basically have to develop the entire site and then you ship them only the sites folder and they will deploy that in their platform. So basically what we did is when we started developing itself, we downloaded their platform itself and started developing in that platform. So there were some of the modules, I don't remember which ones, but some of the common modules that everybody uses, but they thought it was a secure risk so we could not use some of the modules and then we had to go around and then try to figure out alternate ways. So since the site is being hosted then, it's not even accessible. We cannot log in from anywhere. We basically had to like we pin into their network and then only, we can only log in through that. So unfortunately I cannot log into the back end here and show it to you. And they wanted an easy way to edit any page and customize and then I'm sure most of you use panels. So we used panels editors there so that they can easily manage their content and edit content too. Yeah, there is. And actually as kind of our follow-up and we do a lot of maintenance with them and support after the fact, we have kind of extended into a few areas. We've broken out things that they call like internal priorities. They're kind of press releases but they don't want to be classified as press releases. They want them as kind of just internal priorities. I think we call them Helsinki documents and things like that. So it is very flexible when we constantly are doing that for them. We did restrict them a little bit in terms of vertical just, you know, I think partly just because maybe the complexity or even getting longer images. But you can see here, no, we only kind of went with the horizontal and not the vertical. We're looking at very beautiful homepage but you also changed the internal pages. How did you think about discover on those internal pages if that became important? Sure, I think one of the biggest things I heard from the Helsinki Commission won this and I still hear from them. We did a lot with Apache Solar Search and making sure that we were making sure the algorithms were good there. One of the things I hear all the time is the senator remembers a hearing from 1994 and it's on this topic and they don't remember anything else about it. And that's where the filtering option that we have has really helped them. And I think that that's made it a lot better. You know, this site really is an archive and it has all the hearings and all the publications and all the press releases. So the people who are using this are you're kind of more, I guess, educated senator, congressman, staff, people like that. We do have people who are also interested in the topics that are coming but oftentimes people remember one or two pieces of information and that's it. Any other questions?