 Hello, yes, I think everyone can hear me now. Good morning everyone It's my pleasure to introduce Matt Fenton who's the managing director of monkey and Lindsay Gaines who's their senior developer They're gonna give a case studies presentation on zoos Victoria Without further ado, I'll ask you to make them feel welcome and I hand it over to them. Hi. Thanks Yeah, thanks for coming along So today, we're just going to talk a bit about a large triple project that we built last year, so I'm Matt and this is Lindsay Lindsay is one of the senior developers who worked on the project and he was the the project lead so worked on it for about six months during the life cycle of the project and Continues to work on it today Just a little a bit a little bit about us Where we come from we're monkey. We're a digital agency So Dries was talking about some of the big agencies where sort of a smaller boutique agency around 20 people We're from Melbourne Otherwise known as under a rock. I think this morning that We we work with a lot of clients Countrywide so we work with the ABC Here in Sydney also the Australian greens as well as a few other clients so Some of the sort of things we do is a typical digital agency stuff. So design development Strategy as well as a lot of content management builds The sort of organizations we work with typically in the sort of arts cultural creative space, so People like the ABC. We've built a couple of large Drupal sites for ABC pool, which is a big community site and also Radio Australia, which is their big Sort of media and news presence through the Asia region We've also built sites for the Australian Center for the moving image ACME Which is at Fed Square in Melbourne the Australian greens as I mentioned and also breast cancer Network, Australia We maintain a large Drupal site for them as well There's us on a hill just opposite our office Don't spend that much time there, but it's nice to get out sometimes So yeah, just a bit of background on the project. So zoos Victoria. They're obviously zoo But they're also an organization that runs several zoos in Victoria. So they have three main zoos. There's the Melbourne zoo Melbourne zoos are really old Zoo, it's in fact, it's the oldest zoo in the country. It's the 8th oldest zoo in the world Hillsville Sanctuary Which is sort of out to the east of Melbourne out in the Yarra Valley. That's their sort of native animal zoo So you can get that sort of experience with you know kangaroos and koalas and native animals and then over to the west of Melbourne is the Werribee open range zoo And that's sort of the African plain style zoo with all the animals from that from that region So one thing about the zoo and you know, it's something that you know, when we first started talking to them We were really interested You know to to hear from them. It's something we were thinking about it's like, you know You know, what do zoos do these days like we probably all went to them when you know when we were kids And that was all fun looking at animals But you know, you sort of grow up a bit and you think is it good, you know That animals are kind of you know in cages and that sort of thing And it's like it's something that the zoo think a lot about as well And it's I guess as you know as time has gone on and they've matured as an organization They've they've realized that you know, what is it that we do and what do we stand for and I guess the prime thing that They stand for is sort of protecting animals and also protecting endangered species. So by sort of promoting and By sort of you know promoting awareness of these animals and certainly the endangered species and sharing all this information With other zoos and with other research organizations They're actually doing a lot of good in there and they're saving these species a lot of the animals that you find in Melbourne Zoo are rescue animals anyway So there might be animals that have been mistreated or that were sick and they've sort of nursed back to health and that sort Of thing as well. So their goal is to become the number one conservation organization in Victoria So it's sort of an organization that you know, isn't just a zoo it stands alone as a conservation organization So the website is it sort of as it's been historically. It's been, you know, hugely important for an organization like the zoo You know, obviously, it's a really big communications tool So anytime they want to broadcast messages about you know, new animals being born That sort of thing, you know, the websites the main port of call there along with their social channels It's also a huge revenue driver So I'm talking about ticket sales and also memberships and donations And finally as I mentioned before just promoting the conservation message So since the zoo is sort of realigned what they stand for everything that the website does and all the messages that go out from the zoo Have to be aligned with this conservation message So the website's been really important However, the old site had a lot of issues It was five years old when when we came on board. It was running on a on a dot net proprietary CMS called ADX They were having a lot of trouble with it. It was constantly crashing. It was constant downtime The user experience was really ordinary like, you know pages could take minutes to generate So it was kind of, you know, killing any kind of good experience in any good will They had from their users who are going to the site Had limited support for vendors. So in fact, I think when we were brought on board They were down to sort of the last vendor in Victoria that could actually Manage and maintain the site. So that's not a really good position to be in and I guess from an admin perspective The site you could sort of do whatever you wanted on the site like you could, you know Create pages and change the structure change the style You could do anything and there were a lot of administrators who had a lot of power to do this So the site sort of evolved organically into this sort of chaotic mess So they basically had too much control and they needed to be reigned in on the news site Finally, they had a lot of manual processes. So so the zoo sort of structure is there's sort of four properties There's the zoo's Victoria is an organization. Then there's the three Sort of property sites Melbourne Hillsville and Werribee. They share a lot of content This content was being double handled Manually so they couldn't sort of say all right, let's publish to this site and that site There's a lot of copy and paste or you know going via other kind of text documents and things like that So a lot of mistakes and things were creeping in like that There's the the old site there Showing its age a little bit It's that's just taken from archive.org. So it's actually missing one of the key images But yeah, it was look, I think it served its purpose for them for a long time, but it was obviously Time to change to a new site So when we brought on the we sat down and had a lot of workshops with with the zoo's Victoria And and here are some of the things that we we came up with which were the key issues It's a real high traffic site It's getting up to 20,000 visitors a day and those visitors generate 50,000 page views a day That's that's a lot of traffic It needs to be true 24-7 uptime and look, you know, it's kind of cool A lot of people say as I needs to be 24-7, you know, it can never go down With zoo that's actually you know, that's actually the reality because they're open 365 days a year So for us and for them We needed a lot of comfort to know that on Christmas morning for the people who are thinking about going for a You know a picnic at the zoo that day the site wasn't going to go down for some reason and we were going to get a call as we're Opening our presence So yeah, so there was a big consideration You know when they were assessing different CMS's that they really needed a CMS that was you know That was stable and could be up, you know 99.99% of the time As I mentioned before they've got a sort of a structure with you know, the parent organization the three zoos They've got a lot of complex content like they've got great content all these fantastic, you know Great images of animals and information on the animals, but it's complex to organize that It's also complex to sort of intertwine this conservation message as well So that was one of the issues we identified The site also integrates with a lot of other systems ticketing systems donation gateways And systems to control the screens around the zoo So there's a lot of things that Drupal needed to integrate with there as well The site also had a very limited budget for development limited time and a fixed launch date Last year was the 150th anniversary of Melbourne Zoo So they were determined that they were going to have a new site for the 150th anniversary We were brought on in February and the site launched seven months later So it was a really quick turnaround and they had a fixed date, which was the school holidays in September It's the busiest time of the year for the zoo And yeah, we managed to hit that date without any issues. So there was a real credit to Lindsey and the team for doing that We're gonna talk a little bit about the design of the site Later, but just so you've got some context. Here's the new site here This is when you go to zoo.org.au So it's the sort of it's the portal for the other three sites Obviously if you Google Melbourne Zoo or Hillsville Sanctuary, you know, you'll go straight through to that page But if you just type in zoo.org.au This is where it takes you So I think one of the interesting things hopefully we can talk about today is why Drupal The zoo was on a sort of proprietary CMS and that had sort of mixed experiences with that So I think you know We found it quite interesting as well Just just talking to them about why they had reached that decision that they thought Drupal and they thought open source Seem like good options and we when we came on we helped them sort of refine those recommendations I should point out that as a agency, we don't deal 100% with Drupal. We were an open-source agency. So everything we do is open-source, but we're typically building sites in Drupal WordPress Magento free commerce and also for other sort of more complicated sites with You know like complicated back-end systems for registration and things like that. We will deal with Zend framework So they're the sort of main tools we use So from the client's perspective, they'd done a lot of research They'd spoken to a lot of similar organizations And they'd spoken to Taronga Zoo who had already moved to Drupal at this point And what they discovered was this concept of open-source Was something the philosophy around open-source Like what Drew's was speaking about this morning So they really related to and that that concept of doing good So as a zoo they're sort of learning all this all these fantastic things about animals But they're sharing that with other zoos and other research institutions universities around the world So that concept of sort of you know of doing good of the community sort of contributing to something larger was something that really appealed to them It had a really good uptake from similar organizations, so you know other festivals and and events and destinations Taronga Zoo had had a really Positive experience with it Unlike their previous CMS it they felt it had a large number of vendors and so you know you can see there's there's a lot of people Say at Drupal con over these next couple of days who can build sites like this They're typical things like they were looking for certain features and plugins which which Drupal seemed to cover off on quite well and You know as with any sort of decision like this You know cost and time came into it It seemed like a really good cost effective solution for an organization without huge budgets They are a non-for-profit organization. So for them, you know sort of looking at you know Possibly something like site core which would have cost them say $50,000 in licensing that was appealing You know that they wouldn't have to spend that So we're just going to talk a little bit about why we sort of help them solidify this recommendation for Drupal So Lindsay worked with the zoo a lot during this initial scoping phase as well as the build and he's just going to share some thoughts on this Yeah, as Matt mentioned we work with a few different systems and obviously every time you approach a new project You've got to evaluate what they need and figure out what's gonna be best for them One of the big drivers for us to go with Drupal was the variety and complexity of the content that the zoos was gonna have on their site You know, they've got a bunch of animal profiles They've got events. They're running campaigns I think we ended up with something like 15 content types in the end So that's obviously something where it's a huge strength of Drupal The other thing was there were some really well-defined relationships between these different content types And when you can leverage those kind of relationships and help kind of place dynamic content on pages It's gonna be relevant or give people some more tailored calls to action on each page That's obviously a big win for them. And that was something that Drupal made possible Which would have been hard to accomplish in some of the other options that are out there The zoo's organization also had quite a few different user roles that they were gonna need They're a large organization. They've got kind of a marketing and promotional department But they've also got people there like zookeepers who are sorry Yeah zookeepers who are generating a lot of the content So we needed kind of a few different types of user roles All kind of under the umbrella of an editorial staff and then a final tier of the people who actually have the ability to Publish this content to the live site So again, Drupal has incredibly strong Features there and that was another really big reason that we decided to go with Drupal Zoo's Victoria also Has kind of a long-term strategy that involves not just their website, but things like mobile apps and other kind of content Consumption devices and we wanted something where the content was going to be portable to these other systems Obviously a lot of things are moving towards web services And we wanted to to put something together for zoos where they would kind of have one place for their Content editors to put everything and then we'd be able to pull it out into all of their other apps and systems Lastly everyone knows that Drupal is really popular due to its modularity Not only are there a bunch of modules already available But if you want to add new features to a Drupal site You don't really have to worry about messing things up when you roll out a new module And because they've got this kind of multi-year strategy with the website and their other tools We knew that we'd be doing ongoing development with some pretty major features So that was the kind of last thing that capped it off and and really solidified the choice for us I guess we'll talk a little bit about what we did during the project Take you through kind of the strong points So Yeah, so in a nutshell The sort of tasks we had to do for a site this size was a complete restructure An organization of the data so so there was a big content audit and we encouraged the client to throw out as much as they could And which they were quite willing to do but it you know It was a it was a big effort to do all of that We went through a really sort of detailed IA phase and really just looked at you know Finding out what their users were doing and then sort of prioritizing Those pathways and calls to action so that you know everyone could find what they were looking for quite easily We went through a new design phase, which will show you some of the designs in a little bit Obviously it was a Drupal 7 build and then a training phase and then load testing which actually ended up being a really Kind of crucial phase of this project as I mentioned, you know, they need this sort of true 24-7 uptime So everyone got a lot of comfort out of the fact that when we load tested we took it up to 3000 simultaneous connections to 3000 people like at the exact same time using it And that was it it survived fine even with that sort of amount of testing so So that was really nice to know and that sort of held it in good stead for some high-traffic events that they've had recently as well so then finally deploying and Yeah, they had a you know sort of Complex service set up a sort of you know production and staging and live environments, which wins you'll talk a little bit about as well So We had seven months to sort of plan design and code Yeah, it was a really short turnaround Thankfully, we had a client that was Really motivated and really engaged and was able to turn things around really quickly I think that was really important like have we not been working together and had they're not been that sort of level of trust Between each other we would have never launched on time So yeah, like the zoo's got fantastic content as I mentioned before And some of the some of the things we did in Drupal to sort of manage this content I'm just gonna get Lindsay to sort of go through so There were two main focuses for us with zoo's content first of all they've got great content They've got a lot of really nice stories Beautiful imagery. They've got a huge media database of videos and like really stunning photos So they've got this great content that great content also comes from great content producers It's a large organization as I said They've got zookeepers and a lot of different people who are involved in that because their old website was kind of this clunky Thing to put a page together You had to select a template and put all this stuff on the page for a lot of the people who were less Technically savvy on those teams it kind of drove them away and it it didn't encourage them to engage with the system So one of our big focuses and one of the things that Drupal really enabled us to do was give them a clear and easy to Use kind of content creation workflow that helped those people who are creating the great content really engage with the system It also helped us kind of reduce a lot of the kind of rambling hierarchy of content that they had generated over the years by kind of condensing what they had and Like organizing it in a better cleaner hierarchy We were able to really like just give them a much easier navigation system And then augment that with a few really key calls to action on several pages As Matt was saying we looked through their analytics data from their old site Looked at the most commonly requested pages and we also looked at a lot of the pathways that they went through Over like their visit to the site and made sure that on some of those key landing pages We put the calls to action right there to get them to the most commonly used destinations We had this short timeline and we had a lot of stuff that we wanted to do So we decided to go with kind of a phased development approach a lot of times you go pretty sequentially from IA through to design then you rack the whole development sprint before you let the client get into the system We didn't really have the time to do that So what we decided to do was as soon as the IA was finished We had our designer get to work on the visual designs while he was doing that We went straight into the back-end development and started putting together all their content types So that by the end of the first phase of development We actually launched a site to the live site that didn't have a theme or anything like that Obviously when I say live site it was our live environment, but it was still hidden from the public and their old website Was still like on their domain name What that allowed them to do was they got their content editors in there As Matt said they had this huge body of content from their old site They went through a massive content audit and what that involved was selecting what to bring over but also Condensing a lot of these big groups of pages down into maybe one or two more streamlined pages So they had a lot of work to do getting a lot of content into the site So in the second phase they were busy doing that on this pretty bare live system And in the second phase of development we worked on getting their theme set up a few last content types And putting a lot of the functionality and polish into the site So that when we actually launched our second iteration to the live site The database was completely populated with all of their content and images And when we kind of hit that deploy button and refreshed the main page on their live environment It went from like this blank site to like a fully formed website just in one go That was really pivotal for us to be able to get the site launched and running on time And we had done that once or twice with big clients before but it's always a bit of a risk But it worked really well for us on this project As I said, we kind of had to focus on this idea of content portability The idea of being able to get them to enter content say about an animal The animal content type on this site has something like 20 or 30 fields Everything from the name of the animal and some nice images and a little blurb Through to things like their species their family their genus Their conservation status as the animal extinct things like that One of the things that's really great about Drupal and specifically Drupal 7 that we built this in Is that each little piece of data that you enter in is stored in its own field When you go to render that either to a web page or pull that in a service to somewhere else You get to pick and choose, you know, which little bits of content you're going to display So for example on our animal page which you can see on the tablet there That's on the website it shows everything that they've put in But if you go to visit the animal that same animal on their iPhone app You know we've just got an image the name and like the text blurb And that's something that again coming from a system like ADX where a page is a page And that page includes template style and a bunch of content just mashed in It's really hard to pull out those little bits of data and use them across a bunch of different platforms Yeah so the main benefit of this obviously is that they're content creators They just have to put that animal in once into one system And we can push that data out to all of their other apps and stuff And it gives them kind of just one interface that they have to learn And one interface that they have to use That's a huge benefit for an organization like Zeus Our development workflow at monkey we use JIRA which is an issue and task tracker We basically just break those functional requirements into the tasks Assign them off to developers who work on the features, close the issues We've also got the client in JIRA so they're able to see at times the progress that we're making on a bug And communicate with us about how they want a feature to work Our version control is in spring loops which is a hosted subversion service And it's got kind of one click deployments and all that stuff Which it takes a huge part of the engineering of an organization like ours And makes it something we don't have to think about I highly recommend using something like that if your organizations are at all doing development All of our developers work on virtual box lamp servers So everyone's running their own mini Linux server on their desktop By doing that it means that the developers get a lot of flexibility They can set that up any way that they want It won't affect any of the other devs But it also means that the system that they're developing and testing on is as close as possible to the live environment That it's actually going to be launched to And it also means that the developers get to learn a little bit about Linux And the system that those things are going to run on Which is invaluable when something happens on the live site And you need one of the devs to investigate or whatever So once they've written their code and done a commit We deploy it to our staging site Staging sites where all the QA happens But it's all of the content is kind of dummy content It's not ever going to be pushed to the live site So they do all their QA there And then once each feature gets signed off We schedule batch deployments to the live site The live site is hosted on a VPS infrastructure That basically just involves a load balancer Currently three web servers and a single database server The load balancer is obviously really important When you don't know exactly how much load you're going to have at any given time You can start big and scale back If you figured that you've allocated too many servers Or if the load of your site is kind of growing over time Which they often do You can throw a fourth or a fifth one in there On each web server we're running Apache Which is where Drupal sits and renders all of the content But Apache also sits behind an Nginx instance on each server Nginx is serving all of the static assets So things like images, JavaScript and CSS files That don't change very often Nginx is really really quick at serving that kind of static content The other thing that Nginx is doing is it's caching The pages that are generated by Drupal With kind of a medium lifetime So that means obviously that when a page gets requested It gets generated by Drupal, stored in Nginx And then delivered to the client Under times of high load It means that that page is only going to get requested once And Nginx can serve like thousands of them per second So when the site's not under a lot of load It doesn't make any difference having Nginx there And then you've got 100 people requesting the same page Really quickly it means that Drupal doesn't have to do any more work Than just one page render And that was absolutely pivotal to being able to handle The kind of load that Zeus gets in their peak periods I'm going to quickly try to go through just a couple of the modules That we use to build the site This is the complete list of contributed modules that we're using It's maybe a smaller list of modules Than what a lot of Drupal sites get Because we decided that we wanted to shy away From using a module where we were only going to use Say 10 or 15% of the features that that module offers We didn't want to include like a lot of code blow into the system And we decided to only use modules where we were Either going to be using a significant percentage Of the features that that module offers Or we chose modules that just offer one Like key streamlined feature Everything else we tried to put into custom code To make it as streamlined as possible So we used the revisioning module Which is kind of an addition to your content workflow It gave us a lot of flexibility in our user roles In being able to give people the ability to create And edit pages, but for those pages not to be published So we segmented the publishing permission To only a small group of people who had the final authority To publish each of those pages And revisioning gave us a lot of what we needed Straight out of the box Entity reference is a tiny little module for Drupal 7 It just allows you to add a field to a content type That you can reference another bit of pre-existing content Again, because Zeus had a lot of these Really clear content relationships This one was a total no-brainer for us It's in almost every content type Because almost all of them relate back to The animal or a property And this is one of the things that really helped us Get those kind of contextual calls to action happening Which I'll talk a little bit more about later We used the media module for Drupal 7 Which is like a really great drop-in module For managing things like images and videos There was sub-modules for Vimeo and YouTube Which we used as well Because Zeus Victoria has a YouTube channel And a Vimeo channel that both have a lot of great content And it kind of gave us the ability To not have to worry about video players And it also gave a really nice back-end interface For their content creators To use to manage all of that stuff Lastly, we used the date module This is in so many Drupal sites I probably don't have to give it any introduction But developers try not to touch any date code If they don't have to It's such a tricky thing to get around So when there's a module that's as well maintained As this one that you can use It's absolutely no-brainer In terms of custom modules There were around 20 I think the majority of them were Ones that built or custom The majority of them basically were responsible For a single content type Or maybe two content types And would give the back-end interface A lot of the functionality and the front-end rendering Of the individual content type We also built a few small custom features Like edit in overlay It was one of the ones that made a big impact On the user experience We have a content type called an animal And we've also got an animal bio An animal bio represents an actual Individual family member Say like an actual lion at the zoo So some of the animals will have Four or five family members When you're creating the animal Sometimes you want to populate those fields But you haven't created the animal bio For each of the family members yet So the edit in overlay module Let's you basically pop up a new node Edit screen in the overlay Quickly tap that out, save it And it automatically gets related to the node That you were working on before The theme for this site was completely custom We didn't go with the base theme We built it on the HTML5 boilerplate Which is a great place to start For any website Obviously Drupal comes built in with jQuery So we use that for a lot of our JavaScript interactions Modernizer is a key part Of the HTML5 boilerplate For those of you that don't know what it is It's a JavaScript library that adds A bunch of CSS classes That tell you which features Are available on the user's browser Who's currently looking at the site So modernizer in combination With your style sheets and JavaScript Give you a lot of flexibility about the content That you deliver for that specific user And to do all of our CSS We used SAS And compiled down to CSS SAS is a bolt-on on top of CSS That allows you to use a lot of Really interesting features like variables And mix-ins Which were really really great For us because as you'll see In the themes later We've got these four distinct brands Across the one site So the Zeus Victoria and the three properties They have their own color schemes Things like that but they also share A lot of the theme So using SAS we were able to write Some generic things That were made available to all of our properties But still gave us the flexibility To change those things quickly and easily Without having to rewrite huge swaths Of CSS code So Matt will take you A little bit through some of the key designs On the site So we were really happy With what we were able to achieve During the design phase I think our design team did a really good job The client were really happy as well And it tested really well too So basically The fundamentals of the design When we were approaching it We worked with the zoo on a couple of mood boards So what a mood board is Rather than sort of diving straight into design You sort of put together some elements So that might be some types and colors Some sort of illustrative elements So we went with a couple of themes On the mood boards and then the zoo Sort of picked the ones that they liked And we were able to hone the design in that direction So what we came through out of that process Was a design that was modern and clean Really needed to be that way Because there's so much information on this site And that information Needs to be easily understood And also a really important aspect Was that it was a playful design Like the zoo's not all serious In fact, you know, it's still a really fun place So we introduced a lot of playful elements Using some hand-drawn illustrations As I've mentioned a few times The conservation message is really important The zoos have a philosophy Which is called connect, understand and act And just really simply that means Okay, so when a user, whether at the zoo Or at the website or wherever they are They're having an interaction with the zoo They're connecting with an animal So they're seeing, you know, seeing the animal Seeing a great picture of the animal Then understanding, so that might be just You know, just understanding one of the challenges That the animal faces from a conservation perspective And then finally act Which is a call to action on how they can do more And that could be a small thing It could be a large thing The other sort of aspect of the design phase Was they've got four brands Each brand has their own distinct personality And how to sort of tie that all together But still keep them, still keep them their own So here's the home portal page It's obviously the, you know It's the first port of call When you go to zoo.org.au As well as sort of providing that portal It does provide sort of key calls to action For things like education And they're fighting extinction message They've got a carousel here where they can You know, they can put in all this great imagery That they've got and link that through To the things that are happening at the zoo So this is the Werribee property site So as you can see, it sort of, it marries Up well with the portal site But it's got its own personality And this is the sort of illustrative design It's coming through to sort of represent elements Of the African plains Up in the top right I'm not sure if you can quite make that out I mean, but it's got the opening hours You know, it's really simple But research showed that it was the number one Thing that people were looking for Which would make sense Underneath that, there's kind of six items All around planning your day And that was the other thing that People were searching for most These are the six most searched for pages On each site And so they're, you know, front and center Easy to get to up there So you can see how the design flows In the properties, this is Melbourne Zoo It's got its own personality But it's quite different to Werribee Zoo as well And Hillsville Sanctuary, the native zoo Which we think is our favorite design actually There's a clear fighting extinction message And conservation message running through the site Lindsay was just going to talk a little bit About how we sort of achieve this With some of the themes It's quite interesting how Sort of the data sort of ties together With the content and the design Of the four properties, three of them Obviously represent the zoos themselves The fourth one is Zoo's Victoria And they're primarily this conservation organization So a lot of their content Focuses around fighting extinction You can see straight away On their site, they've got Really clear calls to action To fight extinction on almost every page But most of the people who go to the pages In the Zoo's Victoria site Are interested in that stuff So one of the other challenges Was trying to bring people Who are on the Zoo property websites Through to those conservation pages And get them involved So there's a few different options For how you can get involved with Zoo's Victoria Things like donating Or becoming a member of the Zoo Which gives you access to their zoos You can also do things like adopting an animal And again, we really wanted to focus On the animals and it's important That we kind of remember that If they're a Zoo, it's really It's always about the animals So that was a key thing that we tried To keep on every page Because the animal is the central We call it the primary content type On their site We really obviously devoted a lot Of time to the animals Everything relates back to them Across the entire site This is the animal aggregate page Or the animal listing page For each zoo you can go to this page And see exactly what animals Are there There's also an animal aggregate page On the Zoo's Victoria parent site That lists all of the animals From all three zoos We've talked a bit about their Amazing content They've got so many, like this huge library Of awesome professional Beautiful images of these animals And we really wanted to highlight that For the animal listing page So we built kind of a pin board style page This was using a JavaScript library Called Masonry Which made it really easy And obviously when that comes together With their awesome images It just looks great And it was really easy to use When we tested This is an individual animal page One of the things That I want to point out with this page Is to understand act philosophy And how that comes into practice So it was that philosophy Was kind of designed When they were designing the actual Enclosures at the zoo's What they would do is You get to the enclosure and you see the animal That's a moment where you kind of like Make a connection with that animal You feel some kind of emotion about it They usually then have a little placard there That has some information about that animal And specifically there's usually At least something about their conservation status And some of the challenges that they face In the wild So the zoo's tries to bring you into To understand what that animal is going through And then they also try to give you An action that you can take right there Because you're in that moment And they try to make it something that's achievable This is really different From the way that a lot of nonprofit Organizations operate You'll notice a lot of nonprofits using guilt To try and get people to take action When you're walking down the street And somebody grabs you And tries to get you to pay $20 a month And you don't have time to talk to them They really try to like shame you Into doing something And that was something that zoo's Victoria Specifically didn't want to do So they try to Get you to motivate yourself And they give you something small and achievable That you can do right away So taking that connect to understand act Kind of philosophy Specifically to the website On this page you're greeted with the imagery Straight away. You can look sometimes There's videos or look through an image gallery Then there's a little bit of information Again it's General information about the animal But it also usually does talk a little bit About their conservation status In the top right One of the things there Is their status Which for the seal is least concerned They're not an endangered species But the animals that bar is all the way on the right Because they're on the verge of going extinct And that really shows you like That sometimes critical action is needed And finally on the bottom right We've got our contextual calls to action These are They're not specifically placed On each page. The zoo's content People create a call to action And they'll use an image Of a specific animal And then using that entity reference field They will relate that CTA That call to action to an animal And then across the whole website Any other piece of content Like an event or a news article That's related to the seal Will show a specific seal call to action It saves them a lot of time Because they don't have to manually place Those things on every page But it also means that there are Contextually relevant calls to action That try to get you to do something Like donate or adopt an animal And it gives you that call to action You're already engaged with that animal So this is like A really clear illustration of that connect Understand, act, philosophy, and practice So Matt's just going to Talk you through some of the big wins That we had on this project And some of the things that were really successful Yeah, so it was a reasonably ambitious project Certainly with the time frame And the limited budget And the fact that it needed to launch On a particular date So, you know, on reflection We've got a really happy client And, you know, that's fantastic They're now sort of planning New things to do with Drupal And so that's really great They're actually looking at using Drupal To run a lot of other services Including other screens around the zoo And maybe even using it for their Digital asset management So they were really happy The site launched on time It's really stable and quick And the old site was just this You know, a really terrible user experience And now, you know, if you get a chance To jump on the site, you'll see It's really snappy and responsive And I think the work that the dev team Did with Nginx has really made A massive difference there It's able to handle high traffic events Which I'll just talk you through An example So this really cute elephant Is Mali So Mali was an elephant In Capitivity three years ago In January 2010 Whenever they have Like, it doesn't happen very often At all, but when they have Something like this happen It's a big media event So it was in the papers It was on, you know, all the news channels That night, it was a really big deal You know, so kind of everywhere you switched on You know, you were seeing Mali in these great photos Everywhere that is except for the zoo's website Because that was down most of the time It was, in fact, the day That they were getting all this publicity The site was down for five hours So it was really just a, you know A really bad situation To lose lose for them So it was It was really interesting A couple of weeks ago When we knew that there was Another baby elephant on the way And this was the first baby elephant That they've had since Mali Four years ago So even though we've done the load testing Everyone was just a little bit anxious Because they had such a bad experience last time But as it turned out The new as yet unnamed elephant Was born Two weeks ago And the site didn't have a hiccup at all It just kept on going And it was still really snappy and responsive So I think that's a real testament To the dev team with what they were able to do there So some of the learnings From the project Just to wrap up Phasing was really Essential to the project And the way we were able to run those Disciplines concurrently We wouldn't have been able to do the site In this time frame if we didn't do that As well as phasing We also used a sort of a staggered approach So we launched with Everything that was important To the zoo at that point If there was anything that they thought they could hold off On we said well let's launch that Post launch Sometimes people think that's some kind of failure But it was Certainly something that was essential And that everyone kind of worked together To make sure that that worked well And it did work really well As I mentioned before With just the example of the baby elephant Like load testing Just knowing that if you're working on a high traffic site It's going to hold up It does give you a lot of peace of mind And content We've spoken a lot about content Content really is king Just going through a proper phase Just to sort of analyze that And make sure you've got all the content Priorities and orders is really important The final one which I don't Have on here I think it's like when you're working On a site like this Between an agency and a client It's really important to have that mutual trust And I don't think we would have been able to do any Of this if there was sort of a distrust Between the two organizations Frankly we didn't really have the time Or the space to sort of you know To be kind of battling each other on things I mean sure you know have those important discussions But you know work through them quickly And then trust that you know Where the experts in some things And near the experts in other things And we just keep moving like that So yeah so thanks a lot for All the listening We've got a little bit of time If anyone had any questions at all Happy if you bump into either Of a sort of around the rest of Drupal Kind of if you want to chat as well So if anyone's got any questions Just let us know Donna hi It's something that as an organization We're only just starting to do And one of the important It's really important To kind of get the client involved In the open source philosophy When they're benefiting from Drupal It's something that we've done A little bit with A different organization BCNA the breast cancer network in Australia They have sponsored Quite a few bug fixes And future developments for the sales force Modules, whole modules One of the ones that we are going to look at Contributing all the time Yeah no it's definitely something we want to do And something that we will do And some of these projects had to travel at That's one of the things That's sort of next in line Definitely, yeah Did you have a question? Lindsay as well It wasn't actually multi-site was it? Yeah it wasn't a multi-site In the case of being on different domains It was a single domain And we basically had The main site and then we had Three sub-sites We worked on a few multi-site Installations in the past And this one was one where Because it's one organization We wanted to keep it still kind of cohesive What we ended up doing Is we defined a content type Called a property And that property represented One of the three zoos Or the Zoos Victoria Organization itself And we built a lot of functionality Around for each of those properties So the custom module that we built To manage that content type Is probably the biggest one Across the entire site It really wasn't All that complex We just did it based on URLs Property node Basically we just put a special class On to our body And we used that for all of the Different styling Everything else was basically Just based on menu structure We had one menu The root nodes And everything living under one of those And again that was how we done So we kind of went with a bit of a custom thing We had done something similar With a project, Radio Australia Previously That has seven different streams For different countries and languages Because we kind of had experience Doing it that way for them We just decided to do it the same way Since we knew it So the iPhone is something that Has a multi-year strategy Something called the web view So everything in the app is HTML and CSS It's all packaged in a zip file That the The iPhone app basically is Bungled with The iPhone app basically Regularly checks a URL On a server to see if there's a new Version of that zip file So when they want to bundle Some new content into the app What they do is A backend that's based on the Zend framework They make some modifications And they hit publish And that takes all of their new HTML Images and JavaScript And bundles it into a new zip And it puts it at a URL That will tell the iPhone app That there's new content available In the form of an app update What we're going to end up doing Is that we will replace that Zend interface With something that Pulls in content from the So the actual app itself Doesn't need to be connected To the internet It's not pulling things in Straight from Drupal We kind of go through an intermediate step Where we bundle everything for them Until they can do some of those Infrastructure upgrades That will let them get to work What if so? Not selling any additional things Inside there So they don't force you to use One of the first things we did Was we got them to undertake A content audit So basically that's A big spreadsheet that they worked through And they've got a lot of content owners From the different departments So they've got people like the zookeepers People who are in charge of the different Three properties People who are in charge of education So there's all these different content owners So we said go to your content owners And cull everything that you can So really just go through it Because this is probably the only opportunity You're going to have for the next Three or four years to do this So they were really good So we culled all that And then we brought all that back Into a workshop And just started to go through it all Then we just started bringing in All the content owners into this workshop And then just sort of interviewing them A lot of whiteboards We just started prioritising things on the whiteboard And then took all this information away It was like a four hour session It was pretty intense Took all that away And then analysed it Came back, sat down with them And said look this is what we think We iterated over that a couple of times And we eventually got to sort of have Knowing the content priorities And then through there There was a wireframe process Which our IAE architect worked through Then that went through a testing To get some validation From some third party testing That was really useful And it actually confirmed That we were really on the right track There was a couple little tweaks we made And then we got to the point Where we could start designing Based on those wireframes There's just something I want to say about that as well Which is that when you're working with an organisation That is really intimate with their own content For someone at the zoo organisation Who's been working with the zoo website For all this time They put a lot of different priorities That's what's foremost in their minds And a lot of times You just have to force them to try to take a step back Yeah, if you get a chance To evaluate the session Please do so And yeah, say hi Enjoy the rest of the conference