 Hi everyone who's joining us. Welcome welcome. We're going to give it a few minutes to allow some more attendees to join before we get started. Hope everybody's having a great morning. Looks like we're filling right up. We got a lot of people joining in so that's wonderful. If you'd like to chat either with the panelists or potentially with each other, you can go ahead and use the chat window. There's a button at the bottom of the screen there. And then we'll also be using the Q&A feature for anyone who has questions which is another button at the bottom of your window where you can go ahead and drop in questions as we go. We'll probably answer those at the end. But as I said, we'll give it a few more minutes as we have a couple more folks joining in and then we'll roll in and get started. Yes, I see the question in chat. So the regular attendees are all muted by default. So if you need to do any ask any questions, then you'll need to raise hand or put in a Q&A question or something like that. And if there's some reason you would need to do it by voice, you can type that in the chat and I can let you do that. But use the Q&A buttons or the chat features, and otherwise you should be all set. Okay, I'm going to give it another maybe 60 seconds here and then we're going to roll into it. So awesome to see the Jupecon excitement going on in chat. It's going to be really good. We have a library summit going on for the first time as well actually. So it's going to be great. Very topical given a few more folks a little time. Okay, I think we're going to go ahead and start rolling into this. I'm just going to make sure our recording is all set up and we are all ready to go. Okay, well welcome everyone. It's wonderful to have you here with us for this webinar. I think you're going to find the story of Powerful One. So my name is Tim Lennon. I'm a guest on Drupal.org. I'm the executive director for the Drupal Association. And we're really proud to host this webinar in collaboration with an amazing Drupal end user organization like Georgia Tech and their partners at MediaCurrent. The topic today is going to be engineering stacks. Georgia Tech Library's Drupal 8 transformation. And before I ask our speakers to introduce themselves, I do want to add just a couple housekeeping items. So number one, if you have any questions for our speakers throughout the webinar, please feel free to use the Q&A feature. This is a button at the bottom of the Zoom window, which would allow you to ask any questions you might have and I'll read them out to the speakers at the end and make sure we can get you your answers. Number two, if you're excited by this topic, please do consider joining us at Drupal Con Seattle. That's April 8th to 12th. And as part of the conference this year, we're having a library summit for the first time. So very topical. If you're interested in this, that'll be a great opportunity to learn even more. And with that, I will hand it over to you, Heather. Thanks so much. Thank you. So I just wanted to quickly introduce myself. I'm Heather Jeffcoat. I'm the Web and Discovery Management Librarian at the Georgia Tech Library. I have probably, like most of you, I have worn many hats in my time as the Web and Discovery Management Librarian, everything from UX designer to developer. So when it has come to the previous web redesigns, I have pretty much dealt with all of those various aspects. So when we undertook this project, it was imperative that we hired a partner that could help us with this process. So I'm probably served as the project manager on the web redesign project, and I'm very grateful to have worked with Media Current as our partner. A little bit about the Georgia Tech Library. We are primarily a digital-first organization averaging more than 4 million downloads a year from more than 35,000 databases. We have one brick-and-mortar library that consists of three interconnected buildings. We have the Clough Undergraduate Learning Commons, Crosland Tower, which just opened in January 2019 after renovation, and Price Gilbert, which is currently undergoing a renovation and will open in the spring of 2020. We wanted to have our new website to coincide with the opening of Crosland Tower. So the new website launched on January 6 shortly after we opened the building. Hey Justin, why don't you introduce yourself as well? Talk about your role in this. I just realized I was muted. I apologize. So hello everyone. I'm Justin Rents. I am a UI and UX designer here at Media Current. I've been working for Media Current for just about two years now. In my role as a UI and UX designer, I work between our digital strategy and our development teams to plan and build digital experiences for our clients. Outside of Media Current, I am an adjunct professor at Keene State University in Keene, New Hampshire, and I teach a web design course in their graphic design program. I live in Keene with my wife, two kids, and two dogs, and I enjoy music skiing, running, and spending time outdoors. Just a little bit about Media Current. Media Current is a full-service digital agency that implements world-class open-source software development strategy and design to achieve the fine goals for enterprise organizations seeking a better return on investment. We're a mostly distributed company with a core team working from our headquarters outside of Atlanta and everyone else working from their homes or co-working spaces across the country. We are actually hiring a UI and UX designer, so take a look at our site if you're in that realm and are interested. So our agenda for today is this webinar will be an in-depth case study of the strategy, design, and development of Georgia Tech Library's new Drupal 8 website. First, Heather will discuss the project overview and timeline, the requirements her team gathered, and the personas and use cases they developed to guide our project. I'll take it from there and discuss the design process of the site while touching on some relevant development details. After that, we'll give you a demo of how the Drupal 8 site works from a content editor's perspective. And finally, we'll leave a few minutes at the end for Q&A. So let's get started. All right. So I'm going to give you a brief project overview of how all this got started. So back in the fall of 2016, we underwent the library underwent cover start doing project management. And this was one of the initial projects as part of our portfolio. The project consisted of three phases, the service design phase, the technology design phase, and implementation. Here you'll see a big timeline of how this all laid out, so our journey. It started, as I mentioned, with the service design. We had a team that consisted of three librarians representing library IT, our library learning consultant, our customer relationship librarian. The team also consisted of an archivist and a public services associate who was working on the front lines and so was all the time interacting with our users. As part of the service design phase, we met with stakeholders and we determined requirements. And that was ran from September 2016 to October 2017. As part of that technology design phase, that team consisted primarily of library IT. And that's where we focused on evaluating frameworks. Georgia Tech is a big Drupal user. And they had provided us lots of handy tools and templates that we could use themes. And we had attempted in the past to implement those themes and templates. But they required such a high level of customization that we just didn't have the manpower and the bandwidth in order to tackle it. So we had never been successful with transitioning our static PHP and HTML-based website into Drupal. So when we started evaluating frameworks, the campus was of course using Drupal 7. And so we talked about utilizing those tools and launching with Drupal 7. But we knew that Drupal 8 was on the forefront. And so we decided to go ahead and pursue Drupal 8 and skip Drupal 7 because we didn't want to develop in Drupal 7 and ultimately have to redo in Drupal 8. And obviously the transition from 7 to 8 is not that simple. The second part of our project phase here consisted of submitting the RFP, receiving those proposals and working with Procurement. All the while we were consulting with our Institute Communications Department, which is our communications and marketing department. And we were also in close contact with Procurement because we're a government organization. There's lots of rules and regulations for what we can and can't do. So if you are in a similar situation, I encourage you to seek guidance from your main campus communications and marketing and also ask lots and lots of questions from Procurement because they're here to help you and they really helped streamline our process and made that whole daunting RFP process a little smoother. With our RFP, we submitted that on February the 13th. It was submitted. The proposals were due from potential partners on February the 28th. We made the final partner selection on March 31st. The procurement process happened in April and we were fully engaged with our selected partner, Media Current, in May 2018. From May 2018 till we launched on January 2019, Media Current was doing the design and the development. And as they were developing, we were pretty early on, we had a pretty robust framework that we were able to start building pages out. So we were doing page build out in-house as they were still designing and are still developing. And also during that time period, we received Drupal 8 training for our in-house IT folks that really helped out with the launch. And then finally, January the 10th, we launched our site. So from the time we engaged with Media Current until we launched, it was a fast seven months. So as part of that service design phase, that initial project phase, a large part of that was establishing our requirements. I mentioned that we had met with stakeholders. The dean was a key stakeholder. We met with her regarding her vision for the future of our web presence. We also kept in close contact with institute communication regarding branding guidelines, the campus-wide CMS options and any development plans that they had from transitioning from Drupal 7 to Drupal 8. We also met with our IT department, both library IT and our central IT regarding any sort of internal requirements. We of course met with library faculty and staff. And then we held focus groups with GT undergrads, grads and faculty. So what came out of all of that was this list of requirements. We, when we wrote the RFP, the critical requirements were must-haves. I mean, those were, and they're pretty, you know, cut and dry. They had to, we needed a design that was going to adhere to the new GT branding guidelines. We needed the site to be responsive and mobile friendly. We needed to meet the accessibility guidelines, and we wanted to be providing only updated content. We had done a content audit in-house by analyzing our Google analytics logs. So we had a long list of pages that really weren't even being accessed by our users. So those pages of course did not get included in our redesign. You also see that we had many high level requirements. Those also were incorporated into this new site. And then the low priority items were things that were nice to have. Another key component of our service design phase was the persona research and the use case development. The, we had previously worked with Bright Spot Strategy on user research related to the library's physical transformation. As I mentioned earlier, Crosland Tower just opened on January the 6th. And our other, one of our other buildings, Price Gilbert, is currently undergoing renovation. Oops, excuse me. So we had already had some personas that we were able to rework for the purposes of the rub redesign. And we developed these personas for our key users, which are undergrads, grads, faculty, and then we also included an archives researcher. The personas highlighted behaviors, activity on the site, and pain points that these users might experience along the way. Being a library, of course, one of the main pain points is deals with searching. Other pain points included access to subject experts, finding and reserving library spaces, and the ability to easily suggest purchases. So a little later when Justin's discussing the design, he will talk about how these pain points were translated into design elements on the new site. Another key component of our service design phase were use case scenarios. These use cases or user journeys were another key deliverable of the service phase. They were written by members of the project team, and they represent scenarios in which the specified actors interact with the library website in order to reach her goal. The two examples here, one represents a grad student navigating the website using a mobile device to reserve a space, renew a book, and check the time of a workshop. And all three of these scenarios were addressed as part of the redesign. The other use case displays a subject librarian updating content on the website using a CMS, in our case Drupalate. And Drupalate gives us the ability to assign content owners and give them the ability to manage their own content via a streamlined permission-based WYSIWYG backend. So now I'm going to hand it off to Justin so he can talk about how these requirements became design components in our new site. Awesome. Thank you, Heather. As Justin's getting set up, I'll remind folks that if you do have any questions for our speakers, feel free to use the Q&A feature at the bottom of the Zoom link. And yes, a recording of this presentation will be made available after the event. So you can expect that to be coming out soon. And Justin, I'll let you unmute yourself and take it away. Unmute, yes. Okay, great. So thank you very much, Heather. It was a great description of all the process that the library team had to go through. Now I'm going to discuss the design process. And along the way, I'll touch on a few of the development details that were required of us to bring this whole project to life. So to start, here is a little before and after. What you see here is the previous site's homepage, which is a hard-coded HTML site with a bit of PHP. From a Georgia Tech visual brand perspective, the site's design was roughly two versions behind the institute's guidelines. Also, responsive design was not a thing when this was developed and the site had not been adapted to accommodate devices beyond the standard desktop display. Fast forward to today, and here is a scroll down the new site's homepage on a desktop. And here is a scroll down the new site's homepage on a mobile device. Everything we do at Media Current is designed to accommodate the multitude of devices available these days, including phones, tablets, spablets, widescreens, etc. The library had also made sure to include responsiveness as a critical requirement, ensuring that the experience was mobile first. We'll dig into some details in a moment. So I'll just let you soak that in for now. Looks like we have probably gotten to the bottom of that scrolling gif. So so to take a step back, to me, a solid and successful design process doesn't just start with getting out the crayons and markers to make to start making things look pretty. Partnerships, planning and research are critical aspects to the success and or failure of any project. So I'm going to start there. For me, the library was a dream client for a number of reasons. First of all, they were prepared with a body of smart and well-conducted research and a solid list of requirements that Heather just talked about. They clearly value and understand the end-to-end process of building websites. Their core project team not only included a web developer and a content strategist, but those folks were engaged from day one and remain so throughout the entire project, and they still are today, in fact. Most importantly, I think though, was that the library approached us as a partner and not as a vendor. So we weren't competing for maybe who was right or things like that. And I would be remiss to not mention that I once upon a time worked for Georgia Tech, so I do have a soft spot for those yellow jackets. So now with as much information as the library provided, it's always tempting to just dive in and get started and see what we can come up with. But with a large and complex project like this, planning pays huge dividends. Here's an excerpt from the RFP that outlines the expectations of the library team. All of these items align very closely to how we manage projects at media current. Our internal planning for this project focuses around numbers one and two, advanced discovery and audit, where we define the scope and schedule of the project while benchmarking against the institutes, brand standards, and general UX trends and best practices. Advanced discovery is standard practice for the media current team. We begin our process by thoroughly reviewing the RFP and provided documentation in order to write a comprehensive functional spec. This 13 page document was written by our lead architect, Dan Pellant, and outlines the features, functions, technology, and deliverables that could realistically be implemented within the project's budget and timeline. It includes things like which Drupal modules would be necessary to make the site work for their needs, specifics around third-party integrations and APIs, and most importantly, to me, a list of pages that would be used throughout the wireframing and mock-up processes to address the user journeys and persona research. The pages included in the spec were selected as pillars of the experience and include the homepage, persona landing pages, category landing pages, staff profiles, and a staff directory, among others. While the spec was being written, I addressed the audit item from the library's list. This item aligns directly with a common first step in my personal design process, which is conducting general and peer qualitative market research. During this time, we reviewed a number of peer sites that included functionality we were looking to build and sites that appeared to have addressed similar UX challenges in different ways. We looked at examples such as Harvard Library's beautiful new website, and the amazing Find a Space tool that includes to find and reserve library spaces around their campus. We looked at the University of Wisconsin-Madison's bold and minimal homepage. We looked at UT Austin's clear and succinct site navigation. And we looked at details like the University of Washington's helpful sidebar of popular services and persona targeted lists. We took note of all of these items in a Google Doc and included screen grabs of specifics as documentation and reference as we moved forward. We also dug into Georgia Tech's institutional brand and web standards. In order to ensure alignment and in the spirit of collaboration, we arranged a meeting with a representative from the communications team to ask questions, expose them to the project early on, and extend an opportunity for feedback once we made progress. To make things really interesting, we learned that Georgia Tech's Central Communications Office was in the very early stages of a top level web redesign. This meant that a lot of information we could often gather from internal resources wasn't necessarily accurate. At that time, Institute Communications provided us these drafts of a revised header and footer as the only brand required elements we had to incorporate, comparing these to the current top level site that you just saw in the previous slide. Clearly, we can see a major shift in brand colors as well as the introduction of a new typeface. The exciting thing was that with the successful launch of our project, the library would become the first unit on campus to launch a site with the latest iteration of the Institute's visual identity. So before we dive into the specifics, I'd like to level-set on the concept of component-based design. I can assume that many people on this call or some of the folks on the call might be familiar with component-based design. Some of you may already be doing this. I can also assume that others of you may have heard the term as somewhat of a buzzword and maybe aren't intimately as intimately familiar with it. I feel like component-based design has become a way of life for folks like myself who work with this stuff every day, but can still be rather abstract for those who don't really do the same things as I do. The concept of component-based software development isn't really anything new. It originating around 1968, this practice strives to compose cohesive, complex systems out of independently built and reusable parts. This idea was much more recently applied to the visual side of things and popularized by Brad Frost with the writing of his article and subsequent book Atomic Design, which is a great read and I highly recommend to anyone on here who has not maybe read this book. You can get it online. You can even read the whole thing online, I believe. His theory uses a chemistry metaphor to frame how the front end of websites can be broken down into discrete pieces and put back together in somewhat endless combinations to create the templates and pages of websites, apps, and other digital properties. The outcome of this methodology is a design system of components that are highly reusable and promote visual consistency. All right, so now we're going to dive into how this came together for the library. Media occurrence design process follows this modern component-based approach. Through the design phase of the project, we used the pillar pages mentioned earlier as a means to create a system of flexible, reusable components that could not only be used to construct these specific pages, but could also be used to build out all of the pages and content that would be added over time. Here's a short list of tasks and actions that we needed to address among the components that would become the library's design system. From the start, navigating and searching were two sore spots that were at the very top of our list. We also needed clear paths for users to discover library services, resources, content, and events, while being able to connect with experts as well as reserve and utilize the wealth of beautiful spaces that the library has to offer. Navigation in my mind is always a good thing to nail down early, so we're going to start there. Here's a look at the site navigation conundrum we'll call it of the library's previous site. The homepage presents a site navigation on the left with categorized links. Maybe a little old-fashioned in execution, but not terrible overall. Then I end up on a page where the left nav is completely different, and the other is nowhere to be found, so that's not great from a UX perspective. Then I end up on a page with no nav at all, or at least no nav in the same place that the other two were. There are some links there, but so as a user, I may feel like the shruggy. So we started addressing the main navigation by generating an information architecture. We use Google Sheets for this, actually, and then we apply that to wireframes and mock-ups using Sketch. We share our designs from Sketch using Envision. In terms of components, the site's header and main navigation are one of the most reusable components, and is a good one to, again, get nailed down early on. This process allowed us to settle on four main sections of the site and distill the number and names of items included in each of those sections to the most meaningful and helpful pages of the site. Given the information overloaded the previous site, this was a true exercise in pruning and compromise. While site nav is necessary, users often navigate a website in other ways. When I visit a new website, my tendency is to scroll down the page that I land on, and I look just take a glance over what's there, get a lay of the land, and see maybe where I want to go from there. So to help guide users, we also examine page layouts to consider ways that they could find what they most often need without having to rely on the assumption that everyone will first look in the main or global site navigation. So what types of reusable components could we create that can speak directly to our personas and guide them to the things that they most often need? Looking at this wireframe excerpt, quick links could be content targeted directly to different groups. Get help in library spaces can be bold and easy to find at first glance. As we progressed through the process, we ended up with three distinct reusable components to address this sort of on-page navigation experience. First, a component simply called a link list that we see being used here on the home page to explicitly address different user personas, the mobile view. Here's another example where we pair a single link list with an image on the left. You'll see in the demo that not only have we introduced the concept of components to the Drupal admin interface, we've also introduced a means of adding a layout to the different components that they're able to use as content editors. There's the mobile view. A second component to again address this on-page navigation experience is what we've called a visual CTA, which can be used to call attention to and direct users towards a specific page, service, action, or piece of content. This can be used as a single full-width version, a two-up version, and even a three-up version, again, applying the layout method that we have built in. And these are fully customizable in the admin interface, is the mobile view. Finally, to again address the on-page navigation, there is a component called an icon CTA band, which displays a full-width list of four items paired with corresponding icons and is used to highlight the most requested library services. Both light and dark backgrounds are available for maximum flexibility. All three of these are fully customizable within Drupal and can be added to any part of a page as you'll get a glimpse of in the demo. The next big elephant in the room for us was searching for resources and information. I'm sure we can all agree that a helpful search experience is of utmost importance for any library these days. So we not only considered searching for materials that can be borrowed, but also searching the site for library-specific information, as well as the staff directory, news items, and events. For the site-central search feature, we all agreed that a bento style approach was essential. This pattern offers a unified search field where users can choose either everything or a specific database from a select list that is part of the search form. If the everything option is chosen, a results page like the one you see here, is displayed to users where the top results in each of the incorporated databases are highlighted. The bento term applies to the results page where the results are clearly divided up into individual sections, much like a Japanese lunchbox. On the results page, we paid close attention to displaying atomic-level details from each database, such as the type of material and its availability within the system. The bento results page uses React and returns results from the Primo database along with the site's own Drupal database. We also built in dedicated searches for spaces, news, events, and staff directory sections of the site. Each of these feature one or more select lists of options to help users narrow their results from the start and more easily help them find specific information they're looking for within those individual categories. From a component perspective, we examine not only the search form controls, but also the display of an individual result, a group of results, and the page that each result leads to in order to create reusable elements that form a holistic and familiar experience across devices. Out of the staff directory, we were also able to create an experts listing that isolates the library's team of subject experts and gives users some searchability to find the person that can help them the most. We then filled out the rest of the site with some decorative components such as different page header styles, and we also defined what the details of an article and event page look like. We also examined their archives, which is an extension of the library, and applied these components to create a new experience for their homepage as well. In the end, as design details were being refined and finalized within the static mock-ups, the front end style guide was built using a tool called KSS node. Then this suite of reusable components was integrated with Drupal for the library to build out the site entirely on their own. I'm going to exit out of my slideshow and I'll just pull up quickly, Heather. I think I'll pull up the style guide real quick, click around there, and then we can transition over to the demo. Okay, that sounds great. This is that okay? Awesome. Well, we're bringing that up. Just thank you to all the panelists who've been putting in questions in the Q&A channel. Again, that's the button at the bottom of your screen. We'll answer some more of these towards the end, and I see that Heather's been answering a few of them live, so you may want to take a look at those and go from there. Okay, to catch you off there. So this is just the glimpse at what we call the style guide, the pattern library. You'll hear it referred to different things in different places that you look, but this is a page, or this is created again with a tool called KSS node, and we see over here on the left we can see components, and each of the components that is integrated within Drupal is represented here. As we can scroll down this page or we can use the navigation on the left to look through the different components. Another feature of this is that there's a show all markup button, and it will show you the markup for that particular component there. It also includes kind of atomic level details like the fonts are in here. There's the layout information. We have some icons, and again, the different bits and pieces of the site. So I think I'll pass it back over to Heather, and she can log in there to Drupal, and we can see how she's able to build a page with the whole of these. Quick question for you, Justin, as Heather's getting that ready. Is that a pattern library for Georgia Tech? Is that a publicly accessible page? Yes, it is a public link. It's part of the entire code base that we in the end handed over to the library. So again, they have developer-owned staff. So once everyone's up to speed, they're completely able to update this pattern library with anything new they may want to add to the system over time. Great. Maybe we'll drop that link in the chat. I see a couple people asking about it. Cool. Thanks, Justin. Go ahead, Heather. I just wanted to point out that's related to that. I'm in the process of building a page that has links to those style guides. So in addition to the style guide that Justin showed, we also have a layouts page. Are you seeing that here on the screen? It also illustrates the different layouts that we can achieve with the paragraph-based or the component-based site. Awesome. So I'll have a link to that, and then it'll also contain all of the links to our project documents. So if anyone is interested in our RFP, our personas, our reviews cases, it'll all be on one page. So I can send that link out after the webinar. So anyway, now we wanted to demo and show you how easy it is to build pages in our new site. So as you can see, I'm logged in. So you see I've got an admin bar, and then I have these tabs that allow me to view, edit, delete, and see revisions. So I'm going to click edit. So you can see how the these components come together to form a page. So obviously all pages have titles, and then once you apply a title, the next thing I like to do is go over here to the URL alias, and go ahead and sign it in alias. The first thing that we do is add a headline ban to the top of each of our pages. And so you can see the headline ban here. And if I click edit, you will see the components that it asks for. So it asks you for headline text. We're able to select whether we want that to be styled as an H1, an H2, or an H3. We can provide some body text to this headline ban, which when I go back out to the view, I'll point out how it's slightly different than just regular text. It displays, it's kind of like a subtext or a subtitle. It displays a little bit larger than just regular paragraph. We can apply a background image to our headline band. We can choose to underline the heading or not. And then we have some options for our margins that are part of this component. So let me just go back out to view so you can kind of see how that renders. So this is the headline ban area right here that we're looking at. So you can see that background image back here. You can see the H1 style text. And then this is that body text. So you can see it's slightly larger than this text down here, which would be regular paragraph text. So next up, we're going to talk about this two-up layout. So in the back end edit, you see here two-up layout. We have options of just a regular full width layout, a two-up layout, or a three-up layout. Within the two-up layout, you have options for what you can add there. In this particular two-up layout, we have chosen to use CTA cards. And CTA stands for call-to-action. CTAs are really useful. Well, they are what they say they are. CTA is called to actions. So in this case, we're calling out the open access policy and then our institutional repository, which is known as smart tech. So you see content first, which would be the left column and content second is the right column. We also have a layout ratio that we can apply to the two-up layout. We can choose 50-50, which of course is even, or a wide right or a wide left. And I believe that's displayed further down the page. So I can show you how that changes if I choose wide right or wide left. And then within the CTA component, we are asked for body text, a background image, a URL, which is the button link, and link text for that button. So now let's go back out and see how all that renders. So this is that CTA as it's built. It's in the two-up layout 50-50. This is the body text. You can see the background image and then the button. Obviously this one is built the same way. So next, we'll look at this component down here, which is a headline band and a text HTML component. So we'll go back in here. We see the headline band. It's a little bit different than that first headline band because it's an H2, not an H1. It doesn't have any body text. I didn't apply a background image. I did choose to underline it. So that's a little bit different than the other one. And then this is the text HTML component. You can see I have a WYSIWYG editor here. I just plug in text. I'm given bold italics, block quote. I can link things, I can bullet number. This is, I can embed media. This is a font awesome module that's very handy when we need to embed icons. And then of course I can be the source as well if I need to do any sort of fine tuning in that area. So we'll go back out. That was pretty basic, but you can see this text is slightly smaller than the H1. I've chosen to underline it. This is the text HTML. This is another component option. It's a narrow layout. So again, it's it's similar to a two up or three up. It's just a single layout, but in its narrow. So it's kind of self-explanatory. This is a full width CTA. So I'll go back in and show you how that's built. But before I do that, we'll go over these components as well. Justin in his design segment mentioned the link list. So this is a link list component. And this is utilizing a two up layout with a link list on one side and a media element on the other side. So let's go take a look at how those elements are built. That's awesome. Heather, while you're in there, we do have a question that asks, how would you add a new element if you needed to somewhere within that page and decide where it goes in the layout? Okay, I'm going to show that in just a second. So just bear with me. So here's that narrow layout you can see here. And again, with then the narrow layout within any of our layouts, I can add components within layouts. So that to the person's question, there's a drop down menu here within each of the component areas that give you options for what you can add in that specified area. This one here would be for the adding a new component to the page itself, not within a layout area. So if I added one of these components right now, it would be in the full page width. If I wanted to add a component within the two up or the three up layout, I would add the layout first and then to add the components within the two up or three up. So for instance, here's a two up layout. So first you add the two up, and then within the two up layout, you add the components that you would want in each segment of the layout. So here's where that link list was added. And here's where the media was added. Link lists are very easy to create. You're asked for a title, and then you're asked for the URL in the link. So again, it's very simple, easy to put together. So back to the Tindy's question. So let's say I wanted to add a new CTA down at the bottom. I would add the CTA card. This is going to be a full width CTA. And then I would add some body text. And then I would use our media library. I can either choose to upload a new image, or I can choose an existing media item from our media library, and we can browse or search. So I will search, and I will pick an image here, and hit select. And then I will make a link. And then I click save. And if we scroll to the bottom of our page, we will see that CTA that I just added. So that's how you add a new component to a page, or how you would start building a page. It's very modular, very easy. I can spin up pages in no time. And then you can also move these components around. So say I wanted that CTA card to appear at the top. I just click and drag it and save it. And now that CTA is the move to the top of our page. I see a few questions about this, and I'm sure we've mentioned it. But this interface, this admin interface and experience uses what's called the paragraphs module. Some of you, in a sum, are familiar with paragraphs. It's pretty hot module these days. But what it allows us to do is to, again, integrate the components that we built into Drupal as paragraph types, and give the editor those customizable options there. Of course, that's all built in with our developers. Get all the specifics worked out. But we use the paragraphs module, which allows us to break away from the traditional kind of node edit form that gives you a title and a body field, and that's about it, maybe an image upload or something. So paragraphs gives us the ability to define different sections of the page and rearrange those as you're seeing, Heather, do that here. And there's another question about the accessibility. When I upload images, it asks for an alt tag. So those are mandatory. So I can actually show you that. Let's see if we go in here. This image has already been, here we have something that's not showing. So you can see it's required, alt text, and then we save it. So anytime we add an image to our media library, it requires that alt text is associated with it. I was going to show you this, how the profile pages are built out, because they're pretty, this is another view that we have, another content type. So this is one of our librarian pages, profile pages. So if I click edit, when I'm building these pages, I'm asked to plug in a profile image. I'm asked to plug in their title. I can do a summary if I'd like a phone and email. I select their department from our department drop downs. And all of these drop down menus that are throughout the backend are all editable via the admin. So if we get a new department or department name changes, I can go in and easily change those in the list of departments. And then I've asked for body text and a first name and a last name. And Justin mentioned that we have a special experts display on our website. So Kathy is one of our experts. So I have this box checked. And then I select what her specialties are. And then those feed into that experts page. So I'll show you that here in a second. So I hit save. That builds her profile page. And then if we go to the experts page, we'll see Kathy here. And it's listing out her specialties that I have selected in that mini box. And then this link links back to her expert page. Could we talk a little bit about the news section? I think that might be interesting to some folks. Unless you had any more on that topic there. The thing I wanted to point out on news was that so they have a content type in the Drupal backend to add news items. But they don't actually really ever have to use that because this Drupal site. So Georgia Tech has a central database of news and events that they call Mercury. That there is a Drupal 7 module to pull that feed into a Drupal site. There's not a Drupal 8. So we had to develop a custom Drupal 8 module for this. But the site dynamically pulls in content from the central news and events database. So Heather and her team never really have to create news items or event items within their Drupal site. They enter them into the Mercury database. And that's pulled directly into the library website. Previously with the old site, they would have to add a page to their HTML hard coded site with the event. And then they'd also have to add that into the central news and events database if they wanted that to be populated throughout campus on their services and digital displays and things like that. So now they've really been able to streamline that news and events content by just giving one entry point there. Which I think was pretty unique. Yeah. As an owner of a fairly large set of Drupal sites ourselves over at the Drupal Association, anything that means we only have to enter it once and display it everywhere is a fantastic solution. Clearly removes any sort of error prone content entry. And that's been a huge increase in the efficiencies to our workflow because we were inputting that those news and events in multiple places. And so it was this is really streamlined that and has really been nice. Plus it gets our news and our events in the campus system as well. So we're getting even more exposure by being on the campus calendar and the campus news application as well. Fantastic. I like to just I enjoyed the question about accessibility. So I just wanted to touch a little bit on that. We did over the course of this try to pay as much attention to accessibility as we could, especially within color contrast. Another thing like Heather just had that article page up. Some things from a design perspective that at least I think are kind of overlooked, but maybe simple things we can do to enhance accessibility of our sites are like, you know, the default font size that the browser will give us is like 16 pixels, which I think in reality is a little too small for for most people, especially we consider people that may have some degree of disability with reading things. So we increase the base font size. So you may notice if you look at the site that things seem a little bigger than they may on other websites you visit. So just paying attention to details like that, we had to dig into the institutes brand color palette and revise a few things if we wanted to use some colors just to ensure that the contrast was going to be enough to hit those kind of accessibility guidelines that were included as part of Heather's RFP as a as a requirement for us to follow. Awesome. Thank you, Justin. Heather, do you have more to show or should we dive into Q&A? I was just going to point out a couple other things that were really awesome that were developed for us. So on the home page, these library hours, we're on spring break this week. So typically we are open 24 hours, but the media current programmed way that we can update our hours and the if we're closed, it's a closed book icon and the color changes to a more reddish brown color. So that's very handy for us having that be programmed in there. And then also when Justin showed the style guide, they also programmed us an announcement banner. So if we have any system outages or if we're closed unexpectedly or anything that we need to announce site-wide, this banner here will appear at the top of all of our pages. And then you can dismiss it and once you dismiss it, it does a display for you again. But that's been a very useful feature to have as well. So those were the last two things I wanted to point out and we can answer questions now. Fantastic. And I know you've dived in and answered some of these questions already in text. I want to read them out loud to make sure that they make it into our recording as well. So one of the first questions was just will there be a recording of this presentation? So they sure will. We'll send it out to all attendees and feature it on our YouTube channel. The next question was about the new site being very performant and wanting to know a little bit more about the technology stack. Justin, you had some comments there. Can you just recap that real quickly? Yeah. So I could slack with our lead architect right now if we had maybe more time and get really deep into those specifics. But what I can offer and, you know, we are presenting this a similar session to this at the DrupalCon Library Summit that happens, I think it's the Tuesday before DrupalCon actually begins. So Heather and I will be presenting, but we'll also be joined in that case by the lead architect Dan Pellant. And we'll have a slightly more technical spin on this presentation then since he'll be there. And we'll be there all day to really, you know, not only to give the presentation, but also to, you know, participate in any conversations that are happening around these ideas that we have here, any technology that. Awesome. Thank you, Justin. But the next sorry, the next question was a quick one from that you answered a bit already, Heather, which was just about why the card catalog, which I remember, but perhaps some of the current students there might not remember. You want to talk just briefly about that fun little detail? So when we first started down this path, part of the initial service design project, I created a design comp for what our new website might look like. And it was just one of my attempts at humor was to use this image and our leadership liked it. So this is the image we decided to launch with. It is easily changeable. We just haven't changed it yet, but it is something that we will update, you know, on a regular basis. So say goodbye because it might not be up there very much longer, but it might be one that we bring back from time to time, just because it is. Well, we'll miss our Dewey Decimal. That's right. Let's see. The next question was, is there a module for that bento style display of information? And you did answer that, Heather, but if you could recap that a little bit. Okay, so that is a React application that's embedded in the Drupal page. It was something that Media Current developed for us. They wrote a custom PHP script rather than use a Drupal controller. And that was to reduce the load on the database. And the website search bento, which is the one that appears in the bottom right, that one does bootstrap Drupal and is cacheable. But as Justin mentioned, Dan, the lead architect, needs to really get into the nitty-gritty about those sorts of things, because I don't know a lot about the inter-workings of what's going on behind the scenes. Sure. I'm not really a front-end designer, so. Maybe, since we'll probably have to leave that to the future conversations with Dan, but maybe you could speak, if not to some of the technical solutions, to maybe what some of the challenges were that you knew you had to address going into performance with a site of this scale. So the bento box itself, or the bento search, so let me just do a search here. I'll do patents. It's searching our discovery tool, which is Primo. So it is doing three different searches within that application. So it's going out to our library database and doing three unique searches. One to search for books and media, one to search for articles, and one searching for journal titles. And then this one, of course, is searching all of the content, the Drupal content that is in the backend. So I think that is the reason why Dan chose to go a different route with that, because that would have been a huge, huge load on the system. And as part of our handoff, so I should note we do house our servers in-house or maintain our servers in-house, we're not hosted. So there was a lot of, there was a week where they did a bunch of load testing and that was done between Dan and the developers at Media Current and our in-house DevOps team. So again, if you have specific questions about that, I can put you in contact with Chris Helms, who is one of my colleagues, and he handles all of the back end so he could answer those questions for you. Fantastic. I'm just going to skim through for our last couple questions here. Some of these cover topics. I've got quite a few. I'm trying to keep up there. Yeah, some of you covered these already. So the style guide link we shared with you all in chat and other folks watching this later, eventually you'll be able to find that linked on a public page that Heather's building on the site. There was a question about the front end and back end theme. I can answer that a little bit just because I recognized a lot of that back end as kind of standard Drupal admin, but it looks like the team at Media Current helped integrate some of those extra tools related to their paragraphs implementation and things like that. We talked about the search box in Primo, Web Services, talks about how components were added. Justin, can you talk about how media management happens? Is this just Drupal 8 core media? Yes, I did confirm with our, again, architect that, yeah, it's just using the core media module. There's nothing more fancy than that going on, other than maybe how it was used with paragraphs, you know, and just across the admin in different ways. In terms of integrating it with each of the components, I think that makes sense. I think, let's see, the one more question here. Yes, it looks like this team has offered generously to talk more in-depth about any of these solutions if you're there at the library summit or there at Drupal Con. Please. Please, yeah. We'll be there all day. Like I said, but we'll be. There's also a question, I guess this is probably a Georgia Tech policy question, so I don't know if you know the answer, Heather, about whether or not the RFP that you use to kick off this project is publicly available and something that other institutions could maybe model some of their own things on. So yes, the RFP will be part of that page that I mentioned that I'm building. So yes, and it is, I'm happy to share it. And that's the other thing, if anyone wants to reach out to me directly, please feel free to send me an email. I'm happy to set up a time to talk to you or point you to in the direction of any documents or information that we have, but all of the documents regarding this project will be available on that link that I'm going to be out. So I think we have two final questions and then I think we'll need to wrap up for time. So the first one was just when you were doing content transfer from the old just HTML plus some custom PHP site into the jubilee site, how did you move content over? Was it a kind of a rebuild from the ground up? Was there a migration process? It was a rebuild from the ground up. So we did not, we did copy and paste a little bit just but we would have to have the old site up and then paste into the new site. So we and I worked closely with our communications manager. He's kind of like our content watchdog. So he likes to put his eyes on all of the content that we're putting out publicly to make sure it has a common voice and that it's not too verbose and that sort of thing. So he really helped with that. He would take the old pages and really pare down the content in a lot of places and then just would plug in the edited content. So yes, it was all manually transferred and we put eyes on every single thing because it was from the ground up. So in some sense you were using this as an opportunity for a full content review, not just a platform change. Related question was were, were those old pages in that kind of HTML question PHP site, did that have another CMS on the back end at all or was it purely custom? It was just all static. Gotcha, all static. Yep. It was 11 years old. Understood. Okay, so there was one last question. I think I'll sneak it in if I can. I don't know if this will be answerable, but accessibility around PDF was there, if you have a PDF content that comes into these databases, was there any special attention to how you manage accessibility and that sort of content? So we are still working on the PDF and video accessibility for mainly items that are in our institutional repository. So that is still an ongoing project and as anyone who works in libraries knows it's a enormous project and so it's something that we continue to work on and we're still trying to address. So we do still have PDFs that aren't fully accessible and we do still have video content that's not fully accessible. So makes sense. I imagine that'll be a hot topic at the summit. Well, I think that we ran a little over time, but I think it was totally worth it because these questions were fantastic. So thank you everyone who attended and it looks like that's all that we have time for today. So thank you so much everyone who joined us. As I said before, we'll send out this recording shortly and it'll be posted to the Drupal Association YouTube channel. I want to thank Heather from Georgia Tech and Justin from Media Current so much for presenting on this information and sharing this case story with us. And again, I want to invite everyone to join us at Drupal Con Seattle April 8th to 12th and the Library Summit specifically is on Tuesday the 9th. It's pretty much an all day event. It's separately ticketed if you wanted to come for just that one event, but it will probably sell out. So if you do want to do that, jump on it soon. But yeah, thanks again everyone and I hope everyone has a great afternoon. Thank you. I'll just add at the end are my email address and Heather's are on the slides. So if you have anything that wasn't covered here, specific, should meet email and I'll act as I can. We'll let people find that from the from the recording. Thanks so much everyone. Bye-bye. Thank you.