Transcript
Unknown Speaker 00:00
Good afternoon, everybody. My name is Alexis opionion. I'm the creative director and Technology Strategist over at mingei International Museum. And I'm so excited to be talking to you guys today about something that we've been working on for, it seems like forever. I'm joined today by Reagan, they have been really our partners, and building helping us build out all our public facing aspects of our digital strategy that we've been working on for so many times and are for so many years. And I'd like to give Stacey and Dalton opportunity to introduce themselves.
Unknown Speaker 00:37
Thank you. Hi, everyone. I'm Stacie Edelstein. I'm the co founder and design director at Reagan.
Unknown Speaker 00:45
Dalton Rooney. I'm the co founder and Technology Director at Reagan.
Unknown Speaker 00:51
And we are based here in San Diego. So if anyone needs tips on where to go for dinner tonight, please don't hesitate to ask, we'll be happy to share with you. But a little bit about Reagan and who we are. Dalton, I actually got our start in Library and Archives and working at StoryCorps. Back in the day, we were the in house design and development team. They're working on the web, website and brand. Then about eight years ago, we pivoted to running our own design studio, where we're working with museums and cultural institutions and nonprofits through strategy, design and technology. We got connected with mingei about almost four years ago, and we've been partnering together ever since to make their digital presence accessible to their audiences with started with online collections, and then moved into the website redesign this year. So today, we wanted to share our journey that we've taken together as partners, to really bring the museum's website online and to connect with as many new audiences existing audiences as possible making accessibility at the forefront of our work. And it truly has been a journey. And as we've discovered, you know, when it comes to designing accessible experiences, no aesthetic sacrifices really are required. Beauty and accessibility can coexist and are interrelated. And we've discovered that, you know, accessibility is just as much an editorial consideration as it is technical, and has as much to do with design and content as it does the technology. And, you know, as we found, it's really, you know, a study a study and empathy. And we hope to share you know, our findings with you today and and invite that conversation going forward. So I'll hand it over to Alexis to tell us a little bit about mingay. And get us started.
Unknown Speaker 02:53
So, mingei International Museum is located here locally in San Diego and Balboa Park. And we're an institution that champions human creativity by exhibiting folk art, craft and design, I basically say we get to show all the cool stuff that we have in our collection, and with the goal of inspiring creativity and others. So when I came on board, to the museum in 2011, shortly thereafter, we did a long range plan as museums like to do, what are we going to be doing for the next 10 years. And part of the that long range plan was identifying core values or pillars, as we like to call them that support that plan. And one of them was accessibility. And thinking back at that document, which I laid out in InDesign for like three weeks. A lot of the things that I was looking at, you know, if we're truly accessible, we're going to double our visitors in 10 years, and we're going to blah, blah, blah, blah, blah, blah, blah. And I think back to that now, and, and really the ways that we've really been kind of hitting that accessibility mark, really had nothing to do with anything that we were planning on way back then not to say that we weren't successful, but it's just when you're making we make the decision. This is what our institution values, this is what is going to be guiding our decisions. It's gonna surprise you how, how you're gonna express that. So one of the ways I like to talk about is free resident free resident Tuesday, which if any of you went to Balboa Park on Tuesday, I'm sure you were oddly surprised by how crowded it was. Because a lot of the institutions are free on Tuesdays. So you know, this is kind of one of these things that is difficult for museums in the park because, you know, the frontline staff are heavily impacted. You have to check IDs, you have to ask, what's your zip code? What's your mother's maiden name? Like what the and so in terms of just kind of workshopping from Have a visitor experience point of view, like, we got to get better at this free Tuesday thing. We also were kind of confronted with what our community needs. This was, I think we had a conversation, early 2016. Nothing especially important happened then. But just thinking about the word resident having a different meaning than it did before. It's not who's local and who's a tourist, and had further implications. And if we are truly valuing accessibility, shouldn't just it be, well, shouldn't we just be welcoming for all? And so we kind of disposed with the resident word and just said, Hey, it's Tuesday. We're free today. And everyone is welcome, which was great for our frontline staff. Because you don't have to have volunteers checking IDs and getting in people's business. And you're able to have your frontline staff answering questions, like Where's the restroom? Or what is a MinGi? Or, you know, all those things, and that allowed? You know, did we plan for that four years earlier? Like, if we're accessible, we're going to be free to all Razak, you know, to everyone on Tuesday, no, but we knew we wanted to be accessible that was important. So this sort of metaphor, if you will, is going to guide us through our discussion today. So really, accessibility was a core value that our museum decided to invest it.
Unknown Speaker 06:30
Absolutely. And that framework is what we took through the entire website design process, you know, wasn't really just about code, it was, what is accessibility? What does that mean? How can we get into that mindset. And we wanted to share some of that, that framework with you walk through it, and hopefully give you some really great takeaways, I just realized, we have a fantastic handout that I forgot to pass around, which will, will do at some point, it was very rushed. Yeah, let's pass it around, we actually did put together a really great handout or refer to, you know, throughout the the presentation with a bit of a deeper dive into accessibility. But anyway, this framework, I think, can help address the stages of our work together. So like we mentioned earlier, accessibility really is a study in empathy. You know, it's not something we wanted to add on after the fact. But rather, something we wanted to bake into the process of really understanding what our users wanted, what are the goals of of the museum? And how can we make sure accessibility permeated everything we did, and will continue to do to make the website as open and accessible as possible. And another thing we learned too, was that, you know, it's not just a one and done, we're, you know, we're excited to share how we're continuing to learn, and make incremental improvements to the site over time. So really getting a handle on, you know, what our users need, who they are, how we can best solve them, was that sort of that, that empathy study. And to us, you know, accessibility, there's, there's a lot of checklists, there's a lot of definitions. There's a lot of acronyms out there. But really the easiest way that we understood in our minds what accessibility accessibility was, is that it's really about access, you know, we're talking about usability, to make something accessible is to make it usable, and it's to really to design experiences with intention and empathy for those with disabilities as well as those without. And really core to our process to was this belief that making something accessible makes it better for everybody.
Unknown Speaker 08:52
So So with that in mind, you know, making something accessible for everybody. Sometimes when you think about accessibility, you're thinking about your visitor, right? You're thinking about your customer, you rarely think about your friend down the hall that asked you for an image of this object in your collection two weeks ago, and you'd like to have an edit it in a web friendly format. You're like, oh, yeah, I need to get that to you. We rarely think about the internal bottlenecks that we have. Because a lot of our institutions, everybody has that capacity. We're all kind of working hard at our jobs. We don't have time to like, do our jobs. And also think about like wait is what is the most accessible way that I can store what I'm doing for everybody else in the institution? Should they need it at some point in time? No one's thinking that way. So when we embarked on a digital strategy, we just did an audit of how does information move through our museum? What's you know, what are the biggest pain point? biggest pain point turns out is access to images that are edited, which fell under my responsibility for quite a while. And understandable like it was just wasn't an you just don't have enough, we actually now have a part time photographer, that's all he does is take a photos and edits and I'm like, How did I ever manage. But thinking about if you don't have a good if you don't have accessibility internally, public facing accessibility is never going to be fully attainable. It's really something that we had to take a look at and say, if we want to solve for, you know, having a really beautiful, you know, accessible public facing digital platform, I'm using all the buzzwords today, then, you know, we need to be able to have a really beautiful internal facing content platform. And so that's what we were able to do, we were given a lovely IMLS grant, which if you want to hear about more of that, please send attend the session tomorrow. I think it's like a 1030. And hear more about all the deeds. But basically, we used three out of the box, SaaS products, slack for internal communication, Google Drive, or just like a universally accessible repository of all of our data, and airtable, which is our workflow and just how we share work product with each other. And that is something that took us a while to kind of get situated and kind of like Goldilocks, you know, not too hot, not too cold, just right. You know, it's not about just getting the most powerful piece of software and throwing it at your institution, you'll get good findings. I mean, it's truly meeting the needs of your institution and your staff members is really important. And then once we kind of had that baseline, we were able to say, Okay, what works really well with what we have in place, when we're looking at designing our public facing platform. So we'll get more into that a little bit later. Yeah, and craft. Yes, craft is the CMS we ended up using. And so once we kind of got aligned, in terms of how we work together as an institution, we needed every needed to kind of get on message with all the projects that we would have moving forward. So that includes a renovation, digital or digital strategy, or rebrand, we had a whole bunch of projects, somehow all kind of funneling through my department and just realization of that, not the renovation. And so we we, we, a team of us wrote our creative brief, namely, my boss, Jessica York, who did some beautiful writing. And in there we defined really, truly defined our key audiences, who are we going at? Who are we trying to talk to? What does that mean? You know, what are they thinking? What do they want? What's our objective? We know our mission, we know our vision. Okay, so the let's put that in an actual bowl, like, sentence like, what is our objective, what's the key idea, and then a tone checklist, if we are on brand on mission, it will sound like this, it will look like this, it'll feel like this. And then we came up with about a dozen proof points. Like if we're doing this all correctly, these are some things that will stand out. And a couple that really resonated with our project was, the museum is going to make opportunities for the community to participate in our content creation, not just, here's what we did, give us feedback, but kind of asking for input before we move forward with something. And then the next is
Unknown Speaker 13:50
making sure that all the touch points in our and how we engage with our audience is accessible at every point. So it's not, you know, if you really want to know our institution, come to our building, experience, an exhibition, also a workshop, also visit our store, also talk to like one of our docents, you don't have to do all that you can just follow us on Instagram, which I encourage all of you to do. And or you can you know, read a story on our website or, you know, kind of noodle through our online collections and just kind of go through all of those steps. We wanted to make sure that they were accessible. So that means we had to think differently, which you know, museums are known for that. And not those joke you're supposed to not think how many have you how many of you have started a project with I want to do x and this is the resources that I have. Right? You think resources first, here's the resources that I have. So this is what I can do. So we're we had to think what what is our Audience one, how do they want to engage with us? Where are they at? And then, okay, this is where they're at how do we get there. And we had to get that information because we don't have a huge budget for user research. Understandably, we did some empathy interviews, and they were super low fie budget, as in me, going to somebody's house and being like, hey, I want to talk to you about how you spend your free time, and how what influences your decisions, I think I was only able to do five or six. And all of the information is like on legal sheets in my office. So I wasn't able to really share out that data. But it informed some assumptions that we were making, like, actually people who really love our museum, don't check with check in with us that often, someone was like, I really love your museum, is that exhibition still up the Ackerman exhibition, I'm like, close to 2003. No, by Egypt, check out this exhibition that's on you right now. And she's like, Oh, you just like, I'm just like, you know, I just had a hard time, like, I have a hard time keeping up with you guys. So knowing that already, that the the tools that we have to communicate with our audience don't always reach. So just having to, you know, having something that's accessible was super, super important. And that also informed, in some ways, how we decided to transform our spaces. This is a rendering of our plaza level. And I kinda want to get up and start pointing at stuff, but I won't. So we typically, if you look at the very bottom, you'll see there's like 123456 entrances to this space. And there's also another one on the back. And that is up, we're up, like five entrances from the one that we had that also, like, in front of our door was like, also the back wall of an elevator. So it was like, come in, if you want to. And now we're just opening up and just really making that whole first level free. So you can kind of stumble in and like, just kind of walk in and browse and you're not asked to pay you're not asked to like make any decisions, I like to call this the floor of Yes, like just do whatever you want. Um, and that also, like that kind of thinking also informed, you know, the digital transformation that we'd have to have, because when we embarked on this renovation, we knew we were going to be closed for at least a year. And our website was not able to handle that kind of engagement. So we knew we needed to to, like, get it together. So that included a look at our brands, look at our user experience just changed some stuff. Just like we needed to, like, get it together. This is our this was our or logo before a rebrand. And I like to say that this logo
Unknown Speaker 18:04
just is an expression of all the insecurities are of our museum. No one knows how to say our name. So let's make it super big. Which made everyone not know how to say our name even more. Um, you know, like, international doesn't really fit in our museum. It makes it sound like an airport. So let's make it illegible. Also, we're a museum. So this was awesome. There it is. That's what we got. And that's again to solving for solving for problems that really aren't problems, right. Um, and so this I had to work with for about five to seven years, seven years, and I had the math in my head real fast. And when I had the opportunity to redesign to go through a rebrand, I was like, the first thing I want to address is typography. I want people to be able to read our museums name completely. So we worked with this type designer, his name is Jamar Cousteau. He's great. He has crazy hair. He's awesome. And he developed this mono type typeface, which you know, feels very handcrafted. I could do a whole hour presentation on how this typeface came to be come find me I will tell you all about it. But just the the fact that this is like a custom typeface that only we have. Just typing the name of the museum is enough of a brand expression that we don't need, like a logo logo. I mean, we have one, but we don't need one. I can just type mingei International Museum on a piece of paper and this typeface and I feel like that's branded. Now that could be because I'm lazy, or I'm genius. So if you look at the next slide, this is sort of like you know, our museum name and we have different variations. We have like this really fun responsive shape that it pairs with sometimes you can align it to the left you can align it to the right right so I don't know, you can make a circle with it. All of these explorations, TBD. But just looking at it compared side by side with our previous logo, it's just so much more legible. I was like sick, and I just, I couldn't like breathe when I see this. So this was something that I was just really, really happy about, really, really excited about. And then was like, Okay, so what's the rest of the brand. And we're not gonna get into it. But one of the things that was really wow, on that screen, it does not look accurate. That is brown. So read the text, not the circles. So what we decided to do is just make a really subtle change, instead of doing black and white, let's do really, really deep Indigo. So it kind of looks black. And a really, really off white kind of, we have a lot of textiles in our collection. So we have these really cool muslin ribbons that I'm obsessed with. So I called the color Muslim, because I'm clever. And so we so we did. So that kind of replaced our black and white. And then we pair it with a high contrast color. That really kind of pops. And I like to keep our color palette responsive too, because we have all kinds of different objects in our collection. Depending on the context, it can be weird if it's paired with a hot pink, or yellow, or whatever. So I like to keep that kind of a flex color. But the orange and the off white and the
Unknown Speaker 21:31
green. Indigo really is sort of just with that subtlety with our typeface is really a strong expression of our brand. So I sent all this stuff to Stacey. And I was like a tie tie. You do the website. But we got together Yeah, no.
Unknown Speaker 21:57
All right, my turn. Yeah, so I think you know, throughout this whole process of of, you know, empathy, interviews, content planning, brand redesign, and really this examination of like, who are we as an organization, we were involved throughout that whole process as the digital partner, because we wanted to make sure that the values that were being discussed from the very beginning, and the choices that were being made in type and color, were all something that we use to inform the website design, the website, you know, should be an really the expression of the brand, it should be the defining, you know, platform for, for who the brand is what it stands for. So it was really important that we were involved in those conversations, you know, and providing feedback, all throughout the process, which was really fantastic. Here's just a quick peek at some of the, like, crazy sketches we were doing, and some of our content strategy and information architecture phase. You know, we didn't even really do high fidelity wireframes, we sat in a room together for hours and did paper sketches all over the walls, we put up big post it notes, and said, you know who based on the research that we've done based on those empathy interviews we talked about earlier, based on the strategic vision of the organization, how can we organize content, according to our user needs in a way that they're really going to understand and be able to find the information that they need. So at some point, this made sense to us honestly, looking at it again, I'm like, I don't even know what that means. So then, you know, with, with those wireframes, kind of in place, and the type and colors and that brand really formed. One day we made this. So this is the new homepage of mingay.org that we really were proud of, because since we had done all that work diving into the brand and what our users needed, we, you know, we had talked extensively about type and color, this came together in a really organic, beautiful way. You know, again, we wanted to make sure that content organization was really easy for people to find what they needed. Focusing on, you know, six top level navigation items, really helps people to quickly scan the information and, and dive in to where they're most interested.
Unknown Speaker 24:31
In and that's really another example of how we're thinking user first or customer first or visitor first is just what is the high level things that you want to do if you come to our website, you probably want to come visit us you want to know what's going on. You want to see the art we collect. And then you know sort of like a bonus link that we're like, hey, you need to see this. Versus I don't know if you've ever experienced this where every department kind of wants their button on the navigation. And you're like oh listen Yeah, that's what you want, but does like why? Like, why would they need to know like about archives right now on the homepage? Like, can we like, ease them into that, like, lead them there versus like, you know, in terms of top level? Because once you get too many things up there, like, it's just like they see nothing. They're just like, Where's your phone number? Where are your hours?
Unknown Speaker 25:24
Absolutely. Yeah. And I think also, one of the things that, that we've gotten really good feedback on is the hierarchy of links. Also, in the top navigation are for sort of big main landing pages are a lot larger, and then membership and donate over there on the right, a little bit smaller in all caps, all of this using mingay. Mono as a web font. So it just created a little bit of hierarchy of information. We also didn't hide the the main homepage information behind a carousel, you know, a slider, according to a lot of user research, you know, carousels only have the highest click through rate on the first slide. So slides 234, barely get any clicks compared to the first slide. So you're spending time creating content that people aren't really engaging with. So rather, we decided to focus on pulling out these really beautiful collection objects, highlighting really key important information that people could click on signifying links with some icons there. And then each time you refresh the homepage, a new a new collection object pops up. So there is a little bit of, you know, some fresh content there. But some, you know, just really easy to, to, to navigate. So again, navigation content, organization, color, contrast, and combination, just a little bit of checklist items. We've also included a lot of this information on your handout, too. So you can kind of use that as a checklist when evaluating design work. And one of the really great interpretations of accessibility is this idea of creating context, context for your content. And the way we did that one of our favorite sections on the site is stories. So it's sort of a reimagined blog post where the museum's writing longer form narratives and interviews with current working artists that the museum is trying to promote and support. So there's beautiful photo essays, videos, or not videos now, soon, TBD. But there's capabilities to post that they wanted. So it was just a really great way to showcase the museum's mission and work in a way that's really relatable, and, and relevant for for everyday people. On the back end here, this is a quick view of craft CMS on the back end with this story. The great thing about craft is that it's highly customizable. And this is actually a shot of the Live Preview feature. So on the left hand side, that's the content editor. And then the right hand side, you can see the content changes happening in real time. So it's just a really great way to create these really beautiful layouts very quickly. The content blocks are stackable and movable. So the museum has the ability to create photo grids, pull quotes, Banner photos, all styled to match their brand, but infinitely customizable and flexible, you can reorder them in any order. And then you'll also notice the photos that were uploaded on the left are all different sorts of proportions. But when they're displayed on the site on the right, they're cropped by the CMS automatically to fit the particular proportions and design styles that we set out earlier on. So, you know, in terms of accessibility, it's just really great for the staff to update and, you know, create these stories without any need to, you know, write code.
Unknown Speaker 29:06
Yeah, just to hit on that internal accessibility as well. It's really easy to onboard people to the CMS, I would say is just as powerful as some other. CMS is out there that aren't very user friendly, like you have to be. You don't have to be a developer to use this CMS, you do have to be a developer to set it up, I think. But it's, yes, plug plug plug. And I think to you know, in terms of breaking up that content and blocks is so helpful, because in terms of accessibility, you don't want to just get like give your, your visitors just a big wall of text to look at, you know, as someone who's dyslexic, I see that and just like my eyes crossed, and I'm just like, Nope, I'm next like too long, didn't read for real. But this helps us to a, you know, mix up the content a bit, pull out some quotes that we think will help people dive into that long form reading and do spend some time on it. And then hopefully encourage them to like keep browsing through the site.
Unknown Speaker 30:05
And then, of course, one of the major pillars of accessibility is responsive web design. So the site, you know, is able to scale down to fit any size screen or browser that the visitor is using. And that's something we're going to talk about a little bit more in a minute. But it was really important that no matter what was available on desktop is also available on mobile. And one of the ways we also wanted to ensure the mobile experience was as as accessible and operable as possible, was we made sure that with things like images, the mobile site isn't or you know, when you're at rather, when you're accessing the site on mobile, you're not loading the same large images that you would on desktop, we made sure that the site was loading more optimized assets for mobile making the performance a lot faster, which is, you know, really is important to the user experience. And then lastly, this is one of my favorite features on the homepage, Alexis wrote those clearly, do you have any thoughts or feelings you'd like to share about our new website, we want to hear from you. So Alexis gave herself of direct link to website visitors to be able to get in touch and really share, you know, what, what's working for you what's not, and, you know, give opinions.
Unknown Speaker 31:26
So since I've been with the museum, we've gone through, I want to say four different iterations of our website. And every single time we've done an iteration, or kind of redesign or re refresh. They found me somehow, and they're like, here's what I hate about your website. And, you know, I used to take it personally, I just feel like it's so easy to just like, click and then like, go here, and then like, you'll see it, and then it's just there. But then I had to really change the way I think, you know, you don't want people to learn how the wonky way we set up our website, calendar, exhibition page, whatever we want people to get to the information is easily and as quickly as possible. In some respects, if someone is, you know, out front, and they want to know what your hours are, let, let's not have them dig for that. And so I was like, you know, what I want to hear, you know, we don't really have that much funding to like, do NS and NS and NS of yours, user testing. So if you have thoughts or opinions, I want to hear from you. Nobody has contacted me.
Unknown Speaker 32:36
I mean, we have gotten feedback about the website. So far, so good, but you know, it's just one of those things that, you know, a lot of times, you don't need resources to make some of this stuff happen, you just need to be a good listener. And really just think it and just really be aware of what your, your audience wants.
Unknown Speaker 32:57
Yeah. So again, just a quick checklist of things we went over, you know, providing narrative and context for things like collection objects, can really help. You know, visitors understand and feel knowledgeable about who you are, and what you do, headings and subheadings, as ways to break up long, long pages of text. Thinking about your site as a flexible design system, rather than just a collection of pages, is a really great way to make sure that everything on the site is is really well designed and accessible. Consider including the calls calls for feedback. I think this last one is also really important. This idea of editorial governance and training, making sure that everyone you know who's updating content on the site or contributing content, knows, you know, your accessibility standards. And, you know, what, what is appropriate content for the museum to be publishing. And so one example we have of that, I'm sure you've all heard of us, and then working on image alt text, and you may want to take it away,
Unknown Speaker 34:11
we're gonna do something kind of fun, or at least for me, I'm just to illustrate the importance of something as simple as all tax. I'd like to ask you all to close your eyes. And I'm going to read the text of an object in our website, and then see if you can envision what the object is and those of you who are not closing your eyes, fine. Okay, you guys already. Okay? The alt text reads. Chair. Okay. Now you're envisioning what that means. What that could be. We're a museum of Folk Art Craft and Design. So it could be anything. All right. You want to see the chair? Is that what any of you pictured? No, why? cuz I probably didn't do a good job of explaining or describing it to you, right? And, you know, description for screen readers, and the caption of this could read chair, Nikita, st ball 2000 mullum and gifted of the artist, does that explain to you what that chair is? No. Um, so really just kind of being more descriptive can really help. So we're going to do this one more time with a different object. Oh, do you want to do you want to read the old texts?
Unknown Speaker 35:36
I don't know how to pronounce this word allah Hebrew. And Allah Hebrew is a brightly colored Mexican folk art sculpture typically depicting a mythical creature. This la Hebrew has the body of a caterpillar, it's green with yellow spots, and its underbelly is pink with red vein spidering out. It has large human like ears antennae on top of its head, its face has large expressive eyes with stripes on its face, and its mouth is open, exposing his sharp teeth.
Unknown Speaker 36:04
So you guys all have a picture? Is it that are close. So we could have just had a Hebrew, which, who knows how a screen reader is gonna pronounce that word. But we can do such a good job a better job of describing what the person who doesn't who can't see what's in that image. Because if you're visually impaired in some way, this may be the only really effective way that you're gonna know what's in artwork, or what we exhibit or textures, colors, expressions, things like that. Now, not to say that every single object in our website has this kind of descriptive text, we're working on it. But we know that in order to solve for accessibility, we don't need, you know, some like super fancy fill in the blank, we just need a good writer. And luckily, we have one on staff. So this is something that we're really taking seriously and putting a lot of time and effort into.
Unknown Speaker 37:16
Yeah, we're gonna go through some of this a little quickly. And we on the handout, we talk about what some of these terms mean, W three C WCAG. These are like the standards bodies and recommendations for how to implement accessibility standards on your website. Accessible assistive technology is the actual tools that you might use to access the website that are a little different than maybe a desktop computer or even a phone, we're talking about screen readers, keyboard input, which is an important one. Even Braille readers, there are lots of different ways that someone could be accessing your website, that's not going to be in a traditional sort of desktop computer mode. So instead of going too deep into the technology, we'll do a high level view of this framework, which is the acronym is poor, which is perceivable, operable, understandable and robust. So perceivable, is simply can every audience member access the same content? So if you have a screen reader, you're still accessing the same website with maybe a different way to visualize an image, but you're still getting a description of that image. So that's one example of perceivable. Also, two forms have the labels so that someone with a screen reader can know what to put in each form field. Operable is really how does it function on these alternative devices? If you're using a keyboard input, can you tab through each item in the navigation and hit enter to get to the next page? Can you open and operate buttons with your with your voice control, those are all things that if you if you're not thoughtful about how you're implementing this technology can easily not work correctly. Understandable, is really more of that contextual sense of, or using a lot of jargon or acronyms that your audience isn't going to understand. And I love the idea of using the word art instead of collections in the main navigation, how many more people are going to see that and know what that means, and want to click on it and experience the museum in a different way than they would have before. And robust. This is just talking about failing gracefully. Sometimes maybe you're on an error page, maybe you click something and it doesn't do what you expected it to do. Maybe your web connection is really slow. Does the user still get something useful out of that interaction? Can they find what they need? So failing gracefully is how I like to think about it. These days, we have a lot of really great built in tools with HTML. 1020 years ago, when you were coding websites, you really had to know a lot about accessibility to do it right. Now, it's so much easier if you're using the right tags like an Heading tags and navigation tags, screen readers understand these tags intuitively and they know where to go on the page. So as long as you're using the most up to date and, and kind of intuitive standards, your site's going to be 100% more accessible. A very simple example of this is also the skip to skip Content link, which not every website has. But every website should, it takes about five minutes to implement. It's just if you're using a, either a screen reader or even a keyboard input, the first item that you that you see on the webpage, or that you focus on on the webpage, is a link to skip all the navigation and all the extra stuff to get to the content, and will actually demonstrate that in the voiceover I think. And I cannot stress hard enough third party software, if you're using let's say WordPress, and you're just installing plugins or a theme, or even if you're, you know, a developer and you're using, you know, JavaScript libraries, not everything is built with accessibility in mind. And you really need to vet those tools and test them and make sure that the people who created those tools are thinking about accessibility in the same way that you are. And I can not stress enough testing with real excessive assistive devices. And so Has anyone here ever used a voiceover or a screen reader of any kind? That's good. I mean, listen, it's more than I was expecting. Actually, I was we did a little screen reader test with one of the story pages. We can these microphones pick up a lot when we were down?
Unknown Speaker 41:49
There it's our audio is broken. Okay, so I'm sorry, we won't, we won't do that one. But anyway, you know, testing with real assistive devices, real, actual screen readers, and making sure that everything makes sense Button Labels, heading tags are a really important part of the process. Can
Unknown Speaker 42:14
I just do here, oh, my gosh. I'm so sorry. It just renders live, real quick click on the little green button.
Unknown Speaker 42:32
And finally, checking your work proofreading having another set of eyes. In our case, we actually hired a third party firm, a local developer to take a look at all the code and tell us what we did. Right, tell us what we did wrong. And we learned a lot, we found out that our first effort was very good. But there were definitely some things that could be better. And we went through and we actually implemented all those changes very recently. And we're really happy with the result of that, that collaboration.
Unknown Speaker 43:05
Yeah, here, I would just like to call back to or did the work we did in our digital strategy here, where airtable is where we keep a lot of information, do a lot of work, feeds directly into craft. So like our staff list, if we update it like this is now your email addresses. Now, your phone number, this person no longer works with us, this person just got hired, we only have to update that in one place, internally, and an automatically pushes to our website or exhibition calendar, or, or list of exhibitions that our team works on, that automatically pushes to our website. Same with our events. So because we did the work of of getting streamlining how we work together, we were able to like add another kind of not like another piece of software in our tech stack to just kind of automate some of the things that would be like, Oh, I just hired someone, and I forgot to put them on the website. But they're also responsible for media contacts. So I don't have to worry about that. It just automatically updates.
Unknown Speaker 44:09
And so, you know, we're just really excited that, you know, with all the work that we're doing and continuing to do, you know, like we said, it's not a one and done thing. It's not something you achieve one day, it's something accessibility we're working on constantly to make sure the site is, you know, is updated, and following best practices and standards. This is a tool is this lighthouse lighthouse that you can use, those are built into Google Chrome, right that you can use, we have a 97 rating on on the homepage. So we're kind of excited about that. We're gonna just continue, you know, working, working on page by page, making sure that the site is continually updated with the latest accessibility best practices in mind. So to wrap it up, and then well, we'd love to open it up for question. shins, but you know, again, what we're learning. Practicing accessibility is a constant process. You know, it's, it's a journey that we're excited to keep going on together, and keep integrating it into how the museum updates the site and its content. And, you know, sometimes it's just about identifying one step that you can take and just keep building from there. On the handout that we gave you, we included all of our, you know, all of the steps that we're taking, that we took during the design process, but also that we're currently taking every day. So we hope that it can also serve as a really helpful checklist when you go back to your your organization's. And accessibility is a values led investment, it's really an opportunity to reach a lot more people, it can have really great SEO results as well, you know, updating alt text, cleaning up your data, you know, this is, this is something that's super valuable. And again, it can just be a guide for developing and maintaining assets on keeping up with clean data. So it's really a win win for everybody. It's not extra work. It's just working smarter, right. So we're all we're all about it. So thank you, yay.
Unknown Speaker 46:25
And I just want to reiterate how essential it is to have good partners again, Stacy and Dalton, we're partnered with the museum, we before we even started any of this work, and we aligned on our values. So yeah, any questions?
Unknown Speaker 46:51
amazing result.
Unknown Speaker 46:54
Every time. Every time we we when we take a when we're working with websites that haven't really put that much effort into accessibility. Usually, the side effect of that is poor SEO. So when you build a website, and you put that at the forefront, metadata, alt text, also things like heading tags are really good for SEO. And they're also really good for screen readers. Making sure your site performs well just as fast and loads fast. That's good for people with slow connections. That's also a really good signal for Google that you're trying hard. And so those signals help you rank organically. It's not something you have to pay somebody to do. It's not something it's not spammy. It's a really natural way to show that you care about your content.
Unknown Speaker 47:37
Yeah, I think there was it was about I can't remember when we took this stat, but it was we saw about an 85% Jump in Yeah. So next search traffic,
Unknown Speaker 47:48
we closed for renovation the day after Labor Day 2018, and the Overlord. And our website traffic dropped 85% just immediately next day, they're like, we'll see you when you're back. And once we launched our website, I want to say the following October, or actually, no, it was it. October, May, May. It's just a blur. Guys, I can't even tell you. Sometime later, we launched this website. And I mean, we've gotten back 80% of what we lost. So just that that huge jump and a lot of that is new traffic. A lot of that is people who we have a lot of people that come over from Pinterest, because apparently if you'd like to quilt, you're on Pinterest, well, all of those links are broken. They've been broken for since I got here. And we don't have the resources to like invest in in that platform right now. So just even putting up a helpful four a four page, it's like, Hi, were you looking for our collections link helps that helped, you know, kind of maintain some of that traffic and get people engaged. So So yes, yes. 100%? Yes.
Unknown Speaker 49:10
Okay, so that's a good question. Um, I will say that we had a steep discount. I would say that there are quite, I would say it's not as inaccessible as, as it previously was. I think if you work at a museum, a lot of designers want to do something for a museum. I don't know why, but I'm just like, Sure, fine. Cool. Yeah, come on in. It was something we definitely had to get a grant for. But I have to say is so worth the investment, especially if you are working with someone who's really like you have a brief you have requirements. You're not just like, allowing some typeface designer to be like I have this typeface I really want to do Give birth to in the world. Yeah. Yes.
Unknown Speaker 50:03
Actually, basically what we did is we allocated money we had set aside to hire creative agency. And instead, you know, we knew we had some in house talent assembled and good partners like PlayStation adult, we really reallocated instead of hiring an agency
Unknown Speaker 50:21
with a flexible system around
Unknown Speaker 50:22
it. Yeah. Yeah. Which I mean, I think if you know, agency work get way more out of that typeface, and we will agency work.
Unknown Speaker 50:42
Yes.
Unknown Speaker 50:55
How best to communicate some of those decisions that need to be implemented downstream of engineers, which are essentially design decisions to help screen readers, for example, the fractal border and things of that nature. Did you find a good process for being able to send?
Unknown Speaker 51:16
Sure, yes. Yeah. I think that's a really great question. So we're talking about process, how do you sort of translate design for the developers and make sure all those details are caught in the process. So one of the we sort of, we sort of like zoomed through that that part of going from like wireframes, to all of a sudden we have a website. So there was sort of a mock ups process, you know, in there, where, once we took the paper wireframes, we created mock ups. And then we use a prototyping app called Envision to take the static mockups, and then essentially, create a clickable kind of prototype of what the website could look like. Within envision, there are some tools where you can itemize and create notes that get sent to developers to indicate, you know, this is why this decision got made. So you're kind of creating that the the artifact of the notes directly in context of the markups. So it just makes it really easy for our team to look at the designs and then read that layer of notes on top of it. We also work, you know, our design and development process is pretty fluid, too. So a lot of the times we might, you know, indicate a certain design in a mock up and then move into code and correct it in the browser together. So there is a bit of that fluid process to where we're designing a little bit in the browser.
Unknown Speaker 52:55
And I would also say like our design process, like Dalton's included in that Dalton is, are like the kind of the developer lead, and I think to like having like sort of developer empathy and just sort of like, understanding like asking questions, like, how hard is this to implement? How much time does this take to implement? Is there another way to achieve this? I think we, when we design, we, we were cognizant of the implications on the development side. And I think for something like getting craft and airtable to integrate, I really pushed hard for it, because I knew that it would pay off, like, you know, kind of afterwards. But on other things, I was just fed up kind of like, okay, we there's a simpler way to get to this than other than what Yeah,
Unknown Speaker 53:41
I think having a developer through the design process is super helpful, too. And I wouldn't show anything to anyone without running it by Dolman development team to make sure that what we're creating was, you know, in fact, going to be buildable and not just look good. Yeah.
Unknown Speaker 54:00
Sometimes, oh, you know, here's my wireframe.
Unknown Speaker 54:04
Right. Yeah.
Unknown Speaker 54:09
Thinking about the extra line, which is totally
Unknown Speaker 54:21
right, yeah,
Unknown Speaker 54:22
I think the designer needs some constraints, like they need to, like we have that creative brief that have those sort of like that checklist of what a good design that's on brand requires. So I think it like again, that shared value like we know we're solving for not only a beautiful website, but accessibility it needs to be useful that was like, you know, kind of one a one b beautiful useful to gather Have you actually took the time to rehearse with the team? Consultant? So we've got an understanding of developers while they're working with the service that I think would help us understand. Yeah.
Unknown Speaker 55:32
That criteria to having that.
Unknown Speaker 55:37
Here your question in the back of me, do
Unknown Speaker 55:47
you want to triple A or double? Sure. Yeah.
Unknown Speaker 55:54
Yeah, well, I think, at this point, double A is the is the minimum standard that you need to look to achieve. And there are lots of different I personally, I've read through the WCAG website dozens of times, and there's still things I don't know 100%, how to implement. And that's where we're relying on other people's interpretations who have done it well in the past is really helpful. So, you know, there, there are some accessibility consultants who put out ebooks that are that turn that sort of technical language into something that's more understandable that we can all then sort of use as an assessment tool. And then just having a checklist a worksheet to check against, and using good, good audit tools. Google lighthouse is great. It's there are lots of tools out there. Some of them are more user friendly than others. There's something called Andy, which I actually just discovered recently, but it's a it's an open source tool. It's published by the United States, federal governments. Surprisingly, it's very easy to use. And it's very informative in terms of Andy a NDI that one's on the worksheet, actually, because it's just a browser bookmarklet that works in any browser, and you just run it on any site. And it'll tell you contrast ratios, it'll tell you missing alt, Texas, it's really thorough, and but just also easy to use. Yeah, it's a great tool. Yes.
Unknown Speaker 57:24
on an ongoing basis, how did you adjust your workflow to incorporate to craft the right tags?
Unknown Speaker 57:33
Yeah, um, I think so just utilizing all of my team. So again, we have a part time photographer, full time content producer and a part time graphic designer, and sort of anytime that they're contributing assets that touch the web, that I, you know, they have a list of things that they need to do. Also, to go along with how airtable plugs into craft, if you want to publish a web an event to our website, you have to include an image and that image needs alt text, and everybody knows my expectations for alt text. So um, you know, that's been just the easiest way to kind of inform people take the time to train them appropriately bring them along. But also, we have firm constraints, unless you do this, this doesn't happen. So that has really helped. But also just, you know, when we did the accessibility audit, a lot of the things that came back as problematic were things that I realized I hadn't trained my staff on yet we had a full turnover in our team. And I was just like, oh, yeah, I didn't tell them about that yet. So you know, a lot of that is just sort of kind of keeping the pace and keeping your team educated and letting them know why it's important. And, you know, it's it's one of those things that it takes time and effort, but it's not an achievable.
Unknown Speaker 58:56
First one is listed some screen readers on here, I was wondering, what do you recommend are the three things were brave enough to just go in and listen to our pages,
Unknown Speaker 59:05
the ones that are on that list are all built into the operating system. So there's a Windows one, Android One, and Mac slash iPhone one, those are all free, those are built in. Those aren't the ones that everybody uses, but they're the ones that probably are the most accessible as end users for us. And then they're less I'd say, a little less specialized. So if you know someone who has a true vision, disability and relies on the software everyday may have a preference for something that's a little more custom, some of them are actually very expensive, hundreds of 1000s of dollars, so, so that that's why we start with the tools that are most accessible to everyone because we know a lot of people are going to be using. You
Unknown Speaker 59:42
can also work with the communities that assist people with disabilities like we were one of our next steps is to reach out to
Unknown Speaker 59:51
San Diego Center for the Blind
Unknown Speaker 59:53
and he goes intern for the Braille Institute. Yeah, to have you know, have them kind of do a stress test on the site and see, you know how But it's measuring up with that community.
Unknown Speaker 1:00:04
You were mentioning, load time for images, size images.
Unknown Speaker 1:00:09
But we're moving away from having multiple images. For AAA,
Unknown Speaker 1:00:14
I don't know, those are large images, just
Unknown Speaker 1:00:18
triple if works a little differently because it loads tiles rather than a whole image at once. So you, when you zoom in, you're actually loading Higher, higher resolution versions at each. At each load, right? Like your, as you zoom in, you're, you're getting a smaller piece of the picture. But that piece is a higher quality, versus the way that we do images on the mingay. Site. Because this is not for the collection, we're talking mostly about more of the marketing, marketing and public facing part of the website, is it's called responsive images. And so responsive images are the you define several different sources at different sizes, and sometimes a different aspect ratios depending on so if we know this person's on a mobile device, it's probably rectangular and tall. So the aspect ratio is going to be different, the pixel size is going to be smaller, because it's a smaller screen. And you have, you know, you can be as flexible as you want, we usually do three to five different image sizes per asset. So the browser then determines based on the network speed and the dimensions of the window, which asset is going to be the best to pick
Unknown Speaker 1:01:25
and that's automatic in the CMS. It's
Unknown Speaker 1:01:27
100% automatic, you upload one image, and you can choose
Unknown Speaker 1:01:31
one image and then and then the CMS resizes it depending on the size of the browser. Yeah, so.
Unknown Speaker 1:01:40
Yeah, I'm sorry. Yeah. So on the editor side, you're adding one image, and then the template makes all these decisions about. And then the other thing that you can do that's really cool and craft in particular, is you can set a focal point for the image. So as your window gets smaller, instead of just cropping the center, which is often not what you want, you can say this person over here on the right is the focal point of the image. So if you've got a widescreen, you get the whole thing and got a narrow screen, you only got that person's face, you know you. Right, exactly, yeah. It's a great feature.
Unknown Speaker 1:02:13
I love craft. I want my it's amazing fish should check it out. Any other questions? Yes. It's actually that I was just going through trying to find the craziest chair. So that is actually on our collection, our online collection database, which I will get to, and like, it's on my list. But all of the images on our website, like we have sort of curated like kind of mini collections. And all those have very descriptive alt text, thanks to our content producer Ashley?
Unknown Speaker 1:02:50
Yes. So in terms of like assets, and images, and things like that, so the CMS has its own repository for that.
Unknown Speaker 1:03:10
So what happens is, is we attach an image in airtable, let's say I have a event, a teachers event, so I put a picture of teachers getting down at our museum, and then that then kind of goes, automatically links in our CMS. So it takes that asset, and then it does the three to five versions of it, and all that good information. But if we want to switch out that image, all we have to do is switch it out in air table, and then it re uploads. So this Google Drive. Google Drive is where all of our marketing all of our images live. Yeah, Google Drives. Sorry. 26,000 objects. Yep. Well, yeah. Oh, oh. Okay, so the authoritative sort of image of record is in Google Drive, that then also lives in our collections database. And then that has a website facing interface, so that you can see that image there as well.
Unknown Speaker 1:04:26
They're not really tightly integrated yet. That is on on,
Unknown Speaker 1:04:29
it's on the list. We gotta get there. Like I said, accessibility is is decision to decision it's step by step. It's a journey. It's not a destination. There's a lot of things on my list to get to for sure. Any other questions? I thought I saw one more. No, no, thank you guys for staying.