Transcript
Unknown Speaker 00:00
So this is a modular approach to building multiple websites. That's the fancy title for this. What it really is, is the story about how me and my friends and colleagues at the Minnesota Historical Society went about rebuilding our historic location websites, we have 26 historic locations, and it was a ride full of adventure and some drama. And so these are the ups and downs of that particular transformation. Um, a little bit about myself. My name is Malik Davis. I'm the senior designer developer at the Historical Society. I work with a team of three designer developers, to developers, and we have one department head. I've been working there for about five years, which makes me the most junior member of my department, because folks there stay there a long time. And a little bit about the historical society. We were established by the territorial legislature, which means that we're actually 10 years older than the state of Minnesota. We are solidified in the state constitution. And we are a quasi nonprofit status tution which means that we are partially funded by the state. And then we're also funded by income and by memberships as well. We're one of the larger historical institutions in the country. We had over 1,100,000 guests visit last year, we got 24,000 members and roughly 2.6 million people visit our website 4.7 million times. And so even though we're small state of about five and a half million Minnesota, we worked earnestly to make the most of the 1000s of years of nationhood for the Dakota and Ojibwe nations, and 161 years of statehood. So to that end, we have a lot of history and Minnesota Historical Society strive to preserve it all through our collections. We have over 70,000 rolls of microfilm, what that means is every newspaper that was ever produced in Minnesota is required by law to give us a copy of their newspaper. And then we turn that into microfilm. We have 250,000 physical objects, 500,000 books, 53 terabytes of born digital items. So that's everything from digital photos to GIS information.
Unknown Speaker 02:26
And we have 26 historical sites. And it's these historical sites that we'll be talking about today.
Unknown Speaker 02:37
So, like most institutions, we use the web to market our websites and also to give out printed information about them. And when Historical Society started, most of the web pages were built using HTML and cold fusion. About nine years ago, we started using Drupal a content management system. That's an open source content management system to start consolidating some of our webpages into a more sustainable platform. And when I joined Historical Society, the websites for each of the storage locations was built using a custom designed template. And within Drupal six, the templates offer flexibility for multiple pages, and a consistent interface for displaying pertinent information such as address and location, and also upcoming events. And it also had this really nifty weather bug on there was truly high tech. But unfortunately, the websites were not able to visualize the uniqueness of each of our locations. So example here, this is the website for Mill City Museum. This is our second largest museum. There's over 12,000 square feet of exhibit space, there's a theater or courtyard and work in grain elevator. All this is housed in downtown Minneapolis in the ruins of what later become the flagship mill for General Mills, it looks like this. And this is the website for marine mill which is an empty field and used to house a sawmill. So like any parent, you know, we don't necessarily want to favor one side over the other. But you know, sometimes you want to shop in the Husky section and sometimes miss shopping section, just want to make sure that your sizes fit. So at the same time that our storage location websites were experiencing growing pains, we also begin the larger task of trying to update and tackle our security issues that we're facing some of our older servers. And as will be some of our rather excuse me, all of our websites, our historical websites were located on these older servers. So as a local Minnesota hip hop group atmosphere says When life hands you lemons, you paint them gold and in the spirit of season With golden opportunity, we decided was not enough just to move our content to a new server. As stewards of state history and content, we need to be mindful of how we preserve this content, and how we would serve it to our constituents. So besides the display content in a flexible manner, and the urgency to address some pitting security issues, and one of the more high level issues we need to think about and talk about was accessibility. So we're a public institution so much as designers and just decent human beings, it means that we want to produce content that is available to the widest group of individuals. And it also means that we want to make it as accessible to the widest group of individuals. So I figure a lot of you folks actually probably work with a sixth stability. And a lot of you actually probably know more about it than I do. For this group conversation, we'll talk about some of the larger issues that we had to tackle. So one of the more interesting data points that are looking at analytics that we noticed was that 50% of our users were starting to use mobile devices to look at our websites. So what that means is that not everyone's using a desktop, a lot of people actually get their internet, nothing broadband, but they'll get it through their cell phone service. And so 50% of our users are seeing this. So this is literally not accessible to half of our constituents. And they're not able to access our websites in a meaningful manner. So we decided to double down and really commit to accessibility. And we work with the excuse me work with the consultancy. Many of the individuals there had the various access issues that our constituents would also display. So this range from mobility to sight impairment. This helped us to start a process with an increased awareness of accessibility, and to really think about some of the more high level issues we could deal with. So some of them are alt tags, which is, you know, kind of a low hanging fruit, when it makes sure they have alt tags or images so that screen readers can see them. screen contrast, this will be for individuals who have sight impairment. So make sure that that lit the language is legible. And importance of proper semantics over presentation. So that just means that when you have headers, you want to have your header one on top, you want use your h2, combine that with its own content. And what you don't want to do is use your headers as a presentation tool. So a lot of people use our site, we're using headers, because they like wanted to bold their information, and was messing up our content.
Unknown Speaker 07:37
We also want to have video transcripts and transcript pages and access to YouTube as well, because the YouTube embed would produce an iframe which is not accessible to screen readers. And of course, text overlays that have graphics, you don't want to use graphics rewards when a text overlays so they can use for yours as well. So during our discovery process, we worked with a diverse group of stakeholders to determine our approach for the new historic site web pages. Our first step was wireframing. So we decided perhaps maybe a little bit unorthodox ly to these PDFs, or a wireframes. So there are multitude of wireframing tools. And we actually settled on this because we thought PDFs would be comfortable for our stakeholders. And also be comfortable for us because it would allow us to use some of the design tools that we're used to. And then we can move portions of content around. We also want to be mindful of ensuring that our wireframes were black and white or gray, that they didn't have a lot of extraneous like colors or whatnot on them. So they would really focus just on the content, and not on whether it was the right photo without putting the right or wrong place.
Unknown Speaker 08:56
So our meeting with our stakeholders produced a couple of requests from them. They wanted their basic information upfront. So pertinent information, like hours and direction and pricing, we want that to be prominent marketing, we wanted to be able to plug their events and promotions when necessary. And they also wanted that information to be able to coexist with interpretive content. And we also needed to display prominently alerts. So there was a weather alert or if there was a promotional alert, we wanted that to be able to be shown prominently and then taken down by site managers if needed. And it needed to be sustainable, which meant that not just the web department can do it, but other people could do it as well. So we didn't see a reason to reinvent the wheel for our framework for this. So we actually did use Bootstrap to do the, our web framework. And we liked it because it's a responsive framework. And also there's a nice suite of design tools and design elements that come packaged into fit. And we also use something called paragraph bundles. which is a module available through Drupal. And you don't have to get too technical. But basically, the paragraph on node B is just a tool for chunking together content. So this allowed us to say, Okay, you have an image bundle, putting images in it, you have a text bundle, you put text in it, we have a layout bundle, which is just like a layout tool you might use in a layout program. And then you can put your content inside of it. And this really allowed us to chunk and move around our content.
Unknown Speaker 10:34
So during this process, we also started gathering content. So this meant meeting with the various site managers going to the individual sites themselves, and also sending out a survey to the site managers, because they help people and have the most information about what their constituents need and what the experience on the website would be like. This is myself and get our senior designer, we are at the state capitol capitol, excuse me, looking at a painting, I believe, of Arne Carlson is one of our governors. And it's Tuesday, so I guess it's plaid shirt day wearing that, maybe that's the uniform in Minnesota. So after the discovery, we started building our first site. And we did this in a dev environment. And we did this because we wanted to make sure that users wouldn't accidentally stumble upon our development site on the live site. So we built everything, had it vetted, had it edited. And then we copied it and built it again, in our live site. So that was our first site. And this is where we get to more of a lessons learned aspect, because I would not want to repeat that process. Again, you can, the idea of rebuilding something that's been built once took a little too much time. So it did take us three months to build this first site. And so this does not include the initial discovery process in three months really isn't a long time for building a website, if you're going to go to a designer and say, can you build a website for my dog walking our dog washing business? It's a very big and large dog walking, washing business, three months would be reasonable. But you take three months, and you multiply that times 25. And then all of a sudden, you can get 75 weeks. And 75 months is an extremely long time. And I'm reminded of a story when I was walking down the street in Minneapolis, I ran into the civil engineer, and he was cleaning and painting a streetlight. And I asked him well, how long was it take you to you know, to do this, and he told me there's 3000 streetlights in Minneapolis. So by the time I finished doing the last one, I come back again, and start the first one. It would take us six years at this rate to do all of our sites. And at the end of six years, we would just finish, rinse, wash and repeat. That's a specifici journey. And it's not one that I would want anyone to do. So to that end, we had to find ways to move a little bit faster. So we started working with established page types, we knew that we're going to do some pages over and over again. So we started setting up templates for those. We expanded the functionality of our paragraphs as well. So we took our two column paragraph, which then gave that made into a flex column, which meant that we can then change the amount of percentages and the sizes of content that we put in there. So we had a 5050, a 6633 and a 2575. We changed our three column bundle. So a three column bundle is what it sounds like, basically allowed us to put three chunks of content in one column, we changed that to a gallery. So this meant that we could have overflow now. So instead of using three columns, to three column bundles, we could just create as much content as we want, and then move around whatever content was inside of it if need be.
Unknown Speaker 14:08
And we developed something called a mobile or modular box. This is what's interesting because the MOBO is a formalized container. So it's basically it's it's more of a design element. And we did this because we were getting to a point where we're starting to over engineer our paragraphs, which meant that we're trying to solve a problem for every edge case. So what if somebody wants to have a border around it? What if somebody wants to have a search field or more field? And we found that instead of doing that, it might make more sense to just have this design omit that we can plop it if necessary, and then keep our other content as clean as possible. So this would serve as both a content chunk and a layout chunk, which is to say that it fits inside of a layout. So this is a mobile right here. In a hole, but it holds content as well.
Unknown Speaker 15:08
So these were the tools that we ended up having in terms of our layout tools, we had our layout bundle. So this will be a full web bundle for hero images as big, fancy images that stretches screen, single column, which would be for text or whatnot, whatever margins on the side are two column flex with what that in the gallery. And then we had a text image in our modular box. If there was a situation where we did want to put some extra code in there, we would just put that in our text box. So we use text boxes. For instance, if we wanted to embed video. We also decided to provide an easy way to drag and drop items. So this functionality was rather nice. So if the site manager decided that the museum store really needed to push their products a bit more over exhibits, which you shouldn't do, of course, because it's if it's more important, but perhaps you have to make the quota for sales, that we it's easy drag and drop here, and we can move items around quite easily. And that's something that the site managers can and would not have to have the web department do it for them.
Unknown Speaker 16:18
You also had control or whether a particular chunk of content would display. So we set up what's called Display yes or no. And this became really helpful for situations where we would know that content would be coming down the road, let's say there seasonal hours, that would change in winter or spring, instead of developing them live at the time, we would set them up as soon as we got those hours, and then just turn them on whatever the season came. And then when the season ended, we could just turn them off. It was also helpful, excuse me for that. For live design, where if we want to see how an item would look in one particular setup, like with two columns, we could turn that on. And then if we had something with three columns, we could turn that on as well. And whichever one appeared to look the best we could use. Okay, so no process is perfect. And around the time of our fifth or so site, our department went under when it transformation, and we went from a waterfall project management to agile project management. Our project manager who been helping was still involved, but her capacity changed. And I should say that we were probably semi agile, because if any of you can tell me how you can be totally agile, I would love to hear about it. It's a it is an imperfect art from what I understand. But we worked at it. And we also were part of a larger institution. And the Minnesota Historical Society is fabulous. But it is not agile.
Unknown Speaker 18:02
But one a transformation that was that we started having our sprints. So we would have a two week sprint now, which was nice, because then our stakeholders who have that opportunity to talk to us after every two weeks spread, they can review the content, and they can tell us if there's any updates, we can then add that to our next sprint. We also started using Trello and Trello is it's a project management tool. But you know, really, we could think of it as just like post it notes, when we started assigning particular pages to those post it notes, because we knew those pages would be used over and over again. And those systems will be used over and over again. So a particular page or section would then have its tasks assigned to it. And then we can assign whoever wants to do it. We've done 25 times. And that way we're not reinventing the process every time they want to do a new site. So now that we're doing, we're kind of moving with some speed here, we worked with a consultant, who then stopped us our tracks again, because he was a guest was shocked to find out that we were putting our styles, so our CSS, we were adding them into the code, or rather into the content of our pages, which was sort of a rookie mistake, but you thought that since we had individual sites and pages, we could probably get away with it. So at this point, we stopped again. And we separated all of our styles instead of a stylesheet for each of our sites. This allowed the content to be repurposed and also kept the code out of the way the content because if you're like a site manager or whatnot like you don't care about trying to update how something looks what you want to do is update that content. So now everything was in its place in portable. So after about 18 months, we finished all of our sites and we got a pizza party you know when pizzas breaking pizza Tuesday at work, and it's you got to tell your kids about it. So the net result of this is that we had a formalized approach, reducing our historic sites allow for process that was repeatable and modular and allowed for the site's themselves to be constructed in virtual premises use me efficiently, or display the unique aspects of the sites. Now, where you will, looks like this, we understood that there wasn't a lot of content itself to talk about with the sites. But there was still some nice visual aspects that we could display to talk about the hours, and we could talk about accessibility.
Unknown Speaker 20:42
Mill City, then had the opportunity to talk about future upcoming events, we could talk about things you could do there. So you could see the movie there, you could also see the exhibits there, you could go and see the flower, no space for pretty good video that was produced by our wonderful friends in strategic communications, at admission information. And so all together, you get an idea of the robust nature of that physical location in this virtual location. So since a lot of our sites, our content has been updated by site managers, a newly hired Content Editor in the marketing department, and various other members of the site management team, our template has been used for a one off events, and it's been used for exhibits as well now. And just sort of on a personal note, it's also really sort of allowed interpersonal relationships that are placed to sort of improve on this because we've been working so closely for so long on a pretty intense and pretty Test Project. And so it's kind of nice to reconnect with my colleagues become friends, again. So we have some time that I haven't had any questions you guys might have? A question? Sure.
Unknown Speaker 22:18
So we do something similar historic sites for the state of Carolina. Okay. issue we ran into is once we made all the sub pages, when we got down to SEO, a lot of them had friends and support groups. And so there was this competition in Google searching that would direct people to the other pages. Did you run into that with any of your orders? Do they have we, you know, we had a couple of migration was like, if not Microsoft, that we used to dribble,
Unknown Speaker 22:50
okay, we severe? We have maybe two or three friends groups, which we did link to. Did you we did a lot of work with like the OG module. So we did like a whole console. And then the deals for sort of the Google ones. Because, sorry, meta tags. Yes.
Unknown Speaker 23:16
So So we ended up having to go back in and update a lot of the meta tags or fix the metadata and stuff. But I just know that that was one of the issues we ran into the triple was it wasn't intuitive. Like, how you how it worked, when it did like Google rankings and things like how it went into SEO?
Unknown Speaker 23:34
Yeah, it actually we that was about that probably could have been like another section of this where we actually had to go back. And we had to sort of like update, like the meta tags and sort of make it a lot more robust. And it's true, there's like probably, like, 99 or so different fields that you can go out there. Yeah, we did tie in a site summary in a page summary, what we'll use for the Google summary. And so that was kind of nice. And then we always made sure that when we're generating our content for the site, that the content editors would write the summary as well. So we can collect that as well. So there was like a package of content that wasn't necessarily available to the users that we also applied to each. Yeah, so
Unknown Speaker 24:17
that was my question is we did similar at all we had, like admin, like admin, or pay difference for each one for each of the sites that they had access. But they didn't realize like when they would update stuff, they weren't filling in any of those things. So do you have a team that goes back and reviews those?
Unknown Speaker 24:33
Yeah, so actually, that was
Unknown Speaker 24:36
there. So we actually had one of the tasks that we didn't have in our total order. Here. It's not here, unfortunately. Yeah, yeah, we
Unknown Speaker 24:47
actually made that be a task for each page as well. And so there'll be a checklist of all the various fields you had to fill out. And then there's a field, excuse me a field for the for the summary information that had to be into it as well. So yeah, so we did that we did that from an admin level. The original content would come from the site manager level, but the input didn't happen on that
Unknown Speaker 25:11
level. Yeah, I just I was that was, for anyone looking into this. That was a huge pain point for us. Yeah, we migrated over with that many sites and sub menus and things like that. But getting people trained to utilize those additional back end at a day was,
Unknown Speaker 25:29
yeah, yeah, there was there was some hand holding for that, for sure. And there was also just us doing it too.
Unknown Speaker 25:40
You mentioned working with consultants at various points. Was it just that you mentioned two points? Is it just those two points? Or was it through the entire process? At certain points, but what what made you decide to work with them? And
Unknown Speaker 25:55
how did you go about? Sure. The first one was, was we worked with a accessibility consultant. And we were just at the beginning stages, really trying to reproduce and
Unknown Speaker 26:08
a lot of firm building.
Unknown Speaker 26:11
And accessibility has really been a big push that historical society from a web level before, we had recently hired someone in accessibility specialist there. So as institutions
Unknown Speaker 26:24
started
Unknown Speaker 26:24
to develop a lot more. So then we that we can
Unknown Speaker 26:31
really good opportunity for us to start with, but as well, our project manager that looked up this particular disease,
Unknown Speaker 26:41
and they were doing a similar system to the thought that before we pushed the whole process of traveling, so that was the first one. And that was that was super helpful, really good to matricies towards that to see someone else's goals and see them on screen. Because I thought it was nice experience. The second one was we had gotten probably a year into the
Unknown Speaker 27:15
process. And there was a lot of stuff going on outside the department, our servers.
Unknown Speaker 27:22
And it just really became obvious that to get on the current processes for our building sites and how they're structured, and focused to ensure conditions, we actually follow that process to build it as well.
Unknown Speaker 27:40
So there's still
Unknown Speaker 27:42
assessing how we're doing things. So the assessment process as well. Typically, it's like charts. Some people are intuitive, and some are
Unknown Speaker 27:54
extroverts and whatnot. So that all happened at the same time. But once again, it was more than it just became obvious that we're going to be mindful of how our content sites because we're producing so much technical debt and starting to make sure that going forward, we're using more technical debt to place the size of a seven didn't want to like take as many points. But, but yeah, but that wasn't going to lead
Unknown Speaker 28:34
to accessibility related questions. Did you have any problems with Bootstrap and accessibility we're learning which got the terms of the built in modules extending economic you know, we did end up the hand coding
Unknown Speaker 28:57
stuff so especially when we started like working with tables were not
Unknown Speaker 29:03
as tables so we
Unknown Speaker 29:09
went and sort of combined some of our code that we cooked up with Cody, Scott
Unknown Speaker 29:16
the paragraph bundles that we use
Unknown Speaker 29:20
we would add extra comments there on top of that, but outside of that we didn't have a lot of
Unknown Speaker 29:41
second question was about YouTube using their existing iframe content, I suppose. So how did you start like Yeah, so when we if you wanted a video a YouTube video so let's say
Unknown Speaker 29:56
Okay so we had a video here, this is actually, this is one of our test models, and then we put the embed code in there. I mean, see it. But what we have underneath here is a tag that says do transcript. And that would take you to a page that has a transcript written out just about the video again. And then there's another thing that says view of YouTube. So then you could go to YouTube and watch it there. Were
Unknown Speaker 30:40
some of the videos accessible in Firefox. Yeah. Because it's an iframe. Yeah. Yeah. So you know, so yeah. So if you were there, you would go to the wire was it like to transcript the transcript and then go back to.
Unknown Speaker 31:09
So let's say that you are going to stick right next to us. So 12 historic sites. We'll call it, let's just call this a township. And the historic sites, websites are in dire need of fixing bugs, the marketing departments decided a long time ago that they need to look exactly the same, because branding is more important. differentiating the experience you might want to make.
Unknown Speaker 31:49
That's my next presentation, web versus marketing. You know, like, I'm not going to trash talk marketing, but
Unknown Speaker 32:06
part of it is really having to explain that, that historic location settings aren't many things. I think that accessibility means not just
Unknown Speaker 32:19
making sure that you've got a site that's built to yours, that means that you're making your site was accessible to people, maybe connect on a physical site. So the website isn't just a means of generating income or getting people
Unknown Speaker 32:36
it was a means of preserving history, and you want that experience accessible to entire state. And because of that, we're missing some flexibility in the presentation. And
Unknown Speaker 32:53
you can carry some brand elements, and we certainly tried to keep consistency with the colors, and with the logo. But I really think that you need to argue for the unique nature of each site, and how they would suffer under sort of this vision of similarity. So between that sets, accessibility and the uniqueness of the sites, and sort of like the
Unknown Speaker 33:20
typify the marketing and
Unknown Speaker 33:24
marketing is a very strong Big Boss. So, you know, there might be some leveling up. But yeah, it's that's an ongoing conversation, sometimes. And sometimes
Unknown Speaker 33:35
you don't want to live with of organizations. Actually. Do you have any quick examples of somebody who has been delivering ads when content from a particular site, it's not relevant to other ones? So we were saying, you know, the argument for having separate sites is part of it is in your development, you're delivering the content. So like ours are somewhat interesting things on particular sites on the others.
Unknown Speaker 34:16
Well, it's great to see. So glad to be here, I guess, this and we can say,
Unknown Speaker 34:37
we know that we want to sort of keep reading. But we have different pieces of content that we want to emphasize a bit more. So if we were to say, you know, we always want to have
Unknown Speaker 34:51
stellar images. And sometimes we really need to push like a
Unknown Speaker 34:57
critical role here first. So for this because that's going to be opening up pretty soon. And we thought it was really important
Unknown Speaker 35:03
that we're going to practice without understanding the relationship that we're gonna promote idea that the Family Circle was a full plant for the state. And sort of some initial
Unknown Speaker 35:19
inclination there. So that's truly different than say
Unknown Speaker 35:26
something like first ad where it's a different type of experience, and we thought, you know, you can have a video and emphasize the more visceral side
Unknown Speaker 35:36
visual experience
Unknown Speaker 35:40
is tie ins with a smaller narrative on the bottom, two different volumes they like.
Unknown Speaker 35:52
You know, everyone knows spreads. For that, which is what's happening is we do have some other sites where we do what's necessary for us to add up sort of a robust amount of content on our Fort Snelling site. Probably four different sections, they should talk about the different divisions as well.
Unknown Speaker 36:17
For the capital, we had to set up an art gallery because that particular location didn't just have sort relevance as a state building. But also there's artwork all throughout history.
Unknown Speaker 36:32
How we treat people, which is such a small things, but those as well, so that we actually get there so much.
Unknown Speaker 36:45
Experience. Most of wondering, before you chose Drupal, did you have an evaluation of a platform to use to build a project now? Why did you settle that one over any other things? You don't actually I wasn't chosen.
Unknown Speaker 37:06
I do know that it was. It was kind of snuck in there. But just to say when you are building our depart with agents and stuff, and then one of our developers was like, Hey, we should try this and started. I have had that experience with people, which is why
Unknown Speaker 37:28
I took the job and got the job. And so there's a full cycle all the time. But institution and simply triple the source, which is non profit, tied in with the resource community is huge, it's robust, it's got a huge community, people are constantly working on it. It also relies on those people to update as well. So we have people within the department by patches. So
Unknown Speaker 37:57
there's a sort of a social philosophical belief in that particular type of platform.
Unknown Speaker 38:03
It's tried and true. So it's been used for a lot of profits as well.
Unknown Speaker 38:07
And since it has all sorts of different modules, it is much so that five plus four, but I do we're hearing about how when I first started working for an operator would It would it have been your choice had you been involved
Unknown Speaker 38:37
in it would have been because of whatever? Well, you can certainly well we could have we could have continued on the path of working ourselves with PhDs to make our own assumptions most of
Unknown Speaker 39:01
us but so I would say well, this matches I agree with their mission as well as the description but the trick with it is that it is a genuine frustrating and frustrating from that perspective. It's not always reachable. So you have to do work to try and in the back end
Unknown Speaker 39:30
and that's that's a large
Unknown Speaker 39:35
but that's just department departments. Your process
Unknown Speaker 39:53
well, I will be here for Medicare testing companies out around the conference I really wanted to talk to you guys about the the questions you might have or about trying
Unknown Speaker 40:15
but thank you so much again