Keeping your sanity, doing all the things. There’s some sessions on that as well.

Nobody is in

like

your your the one

Right, I’m Paul Gilzow, uh, at the University of Missouri. I’m a programmer analyst. I’m in charge of the along with a colleague, uh, building, designing and maintain the web infrastructure that we have for all of our sites and that I’m the lead WordPress architect for our campus.

So I’m Nicky Massaro Kaufman. I work for Penn State University and my I worked as a programmer analyst and my current position I am doing development for the College of Arts and Architectures Office of Digital Learning.

I’m Matt Ryan. I also worked at Penn State. I worked for outreach and, uh, outreach and online education. Um, and Im e am the u i slash ux designer for that group for the for the web strategy group. And I sort of what? What it says on the tin I Do you, I and you x work both on bond. Do it. Quite a bit of both. Sort of the soup to nuts of user research to deadly designed work.

you been

Yeah, so what? I have mostly finished, but I, you know, there’s always things we can do to improve is the 11 y Dash Media Player or Dash media Dash player. It’s a, um it’s a media player that is built for accessibility for our online courses but could be used for other purposes. And everything about it is built from Web components, which means that it could be used anywhere. You just include the JavaScript and use the tag and you’ve got it. It uses progressive enhancement.

So if you don’t have the JavaScript, it’s just going to show up. You know, you’re using a video tag in the middle or a YouTube I frame or an audio tag. And so that will be, uh, that’s integrated within our hacks block editor project. The Hack CMS, which is an entire CMS built around hacks, hacks eleventy, which is the hack CMS plus eleventy and we have elms Ln which is a durable based, uh, learning management system that students authenticate into and that also has hacks in the video player.

And we have another project that I’ve been working on this year. Uh, it’s a redesign for our our virtual studio because I’m working with arts courses. And how do you submit your work online for an arts course? How do you critique it? How do you encourage students to provide feedback? And we do that with a version of the studio that Brian had to put together in two weeks time at one point. And now we now that we’ve gotten past some of the co vid rush we are, you know, I have some breathing space.

Look at what we want to do with that, and that front end will be entirely Web components based. It’s going to sit as the front end to our Drew pull based systems. But if we someday one of my great off of droop a little, it just needs, you know, uh, in the html tag, it just needs attributes for the data sources, and then it will just build the interface from there. Let me ask a

I’m going to call it Able Player inspired in that, you know, for our needs. There was a point where Able Player was the only thing that could meet that. But I wanted something that was more component ized so that I could style it and theme it a little more a little bit more flexibly. And so there are some features that I don’t have in it yet that Able Player does. But it was definitely inspired by the Able Player work. It’s kind of like if the YouTube player and able player had a decent looking baby,

So if you remember, maybe a couple of years ago I talked about that dream system where we would have a design system and as we built design system components, they flow into both WordPress and Gruebel. We’ve actually got that at a Alfa stage now toe almost a beta stage where our systems now actually can consume the design system. So as my colleague who is in charge of the design system updates things, he could push those out. Then I update from his system. Pull those down and it flows out to our base.

Theme is what we call it on. Those design system components are immediately available in all the sights as soon as they update. So that’s kind of the first stage. The next stage that we want to reach is to start swapping out some of those with Web components. Um, you asked you mentioned Gutenberg. We actually haven’t gone to Gutenberg. Still, the initial hesitation waas the accessibility of it. Um, it’s better now, I think from WP campus, and I forgot the speaker that talked about it.

There are about 66% completion of the different issues that were raised The challenge, though, being that as they fix issues, Gutenberg is progressing along. So Mawr issues were created, and so they’re kind of at this state of never quite reaching completion. And so one of the things we’ve discussed is taking the hacks CMS layer that peace and putting it on top of WordPress Andrew people instead of Gutenberg and using that and flowing that through the challenging needed that makes you

The challenge, the hesitations of ours, one we just don’t have the resource is to move as fast as we would like to do. I would like to go on the other Is is simply retraining content people in a new interface and how that works because they’re so used to the old interfaces

We really are in a very different silo. Penn State’s a big place, and there’s a lot of different groups. Um, and you know, unfortunately, Nikki and I have had little few opportunities to work together we, you know, sort of kept in touch. But I would say we’ve necessarily had more of an opportunity than before when I joined Penn State on Do some of that is perhaps due to co vid, um, eating at least large quantities of of my time. I don’t know about you, Nicky. If it’s eaten a big chunk of your work too.

Oh, yeah, less so than the people who are instructional designers who are on the front lines when faculty say, put this stuff online. But they’re they’re definitely effects. You know, People want this new studio redesign people who didn’t have arts courses online from the beginning. And we definitely we had issues Where, um, where when people first went online, we, um we had a you know, systems were running slower, but the web components were so fast that there was there was sort of a disconnect between the components that we were working with.

So we had the to do a little bit of re factoring. So, for instance, the the meat of the 11 y media player, um, was using the YouTube ap I. But I hadn’t thought of, you know, the way I was doing. It didn’t account for YouTube delay in rendering that initial I frame

eso last year in 2019 I did a presentation on Cem usability work we did with with Gutenberg, and this is something that the I I think it’s I think what you’re talking about is really a piece that that a lot of us who are kind of already pre familiar with many of the concepts behind Gutenberg don’t really recognize, um, the extent to which Gutenberg represents. A. You have

to have a

completely different mental model for how you interact with your Web content to use to like Gutenberg, and that for folks who are familiar with sort of classic queasy wig’s style editors, the learning curve is is much steeper, I think, than than, um, than than many people recognize Onda. We saw that some of the some of the big challenges had to do with, um, just this fundamental idea of thinking of things as blocks.

Um, that took a lot, a lot mawr for people to sort of actually sort of get their heads around that, um and, uh and Gutenberg Good. Birgit, sort of, through its design, obscures many of many of those sort of fundamental bones of of it. In its desire to also be wheezy wig as well as structured, it hides the structure to make it look like the page. Everything, like all of the discovery ability, is through mouse over and things like that.

And so and so many of the afford Ince’s and many of the sort of visual cues that might help you understand the structure of the thing you’re working with and might help you like understand that you have these blocks to work with are, um, are are sort of subordinated in the interface. Um, and I think I think if Gutenberg had a learner mode where it was not so with the wig and where, like, there was much more sort of sign posting and much more sort of omni present, um, user interface elements,

Um, it would it would really like make that learning curve much softer for users. Then people could turn it off once they’re like, you know, I’ve got this. I want sort of this more with the wig mode, but it’s sort of like at least the way it’s currently designed. We actually ended up. I ended up creating a WordPress plug in that just uses CSS to kind of at least provide some visual. Um, some more visual cues about what’s going on.

yeah,

and Gutenberg does have a

tour. But in our in our user research, no one ever used it. So that didn’t help all that much. Its existence didn’t help. It really needed mawr. Just sort of, like always there. Interface changes. Um, you know, I think going through it to where it would have helped people a lot, but, you know, we were, and training obviously helps, but we were sort of wanting. They wanted to get up that raw usability, the of the untrained user and to see what they would do. Would they take the tour? Um, but they didn’t take the tour.

So that’s an interesting question, because one of The things that that my co worker Brian has been working on is improving the performance of the systems that we’re using. And we’re now heavily, heavily alleged, leveraging dynamic imports. And and so, you know, in typical Java script framework land, you’re bundling up everything you could possibly use, plus your framework and loading that the first time a new user goes to your very first page, where what we’re doing with with this dynamic importing technique is that we have a cdn of Web components and all their dependencies.

And there’s none of the scripts really load other than this script that watches for which components are on the page and then loads any definitions that aren’t already cashed. So you’re only getting for each page the definitions that you have that you need, that you don’t already have, and we’ve seen a lot of performance increases are, you know, performance enhancements from that and, uh, anecdotally.

Ryan was also teaching a new information sciences and technology course when covert hit, and so some of the international students had to go back home. One of his students contacted him and said, It’s great that you’re content has been been on this hack CMS thing that you’re working on because I can’t The the third party LMS that we’re using Learning Management System is a react based monolith and from India. He was unable to access it, but he could get our course content.

And that’s that’s the sad part is you know there’s this So there’s always that build vs buy, But a lot of the built products are using frameworks. And what we we wanted to be able to have open educational resource is that we are content. You know, we have open source tools. We wanna open source the course, content to drive down the costs of textbooks. And so we had. We had built a lot of these systems so that we could author lot of continent scale and be able to share it across. We have.

We have 20 departments and, you know, and like, 20 some campuses across the state. And so to be able to share somebody teaching, you know, a basic music course at our campus we wanna be able to share. Once Kobe, it hit with the people that might be at a branch campus who teaches music course and all of a sudden put this stuff online. And with these model a third party systems, there was no way thio extract and remix that content because faculty I’ll like to teach a little differently.

I always talk about teaching as, um, it’s a lot like wearing somebody else’s clothes when you’re taking someone else’s content. It’s not exactly your style, and we are is remix herbal. So it’s like going thrift ing to put together your course.

there was a tweet heard round the high end community about Web performance Ah, a couple weeks ago and it was related. It was a New York Times piece about students during the pandemic on the fact that there were students that not that I know of locally, but students who are going without groceries because their cellular data cost of having Thio take classes from home during the pandemic pandemic. You know too much for them to be able to do and keep themselves fed. And I think that underscores.

You know, universities always have, you know, really great Internet access when you’re on campus in the same way that Silicon Valley has really great Internet access. But when you’re talking about anywhere outside of that, lots of rural areas leave the United States all of a sudden, bandwidth becomes a big issue.

Yeah, and I think a lot of the ah lot of the focus has been on performance, and performance is important from a US perspective. But once you’re talking about data caps and once you’re talking about, you know, people’s people on on spotty connections, you know the actual quantity of data then becomes and you know the number of round trips and other things that aren’t necessarily performance per se.

You know, maybe it’s all stuff that’s happening after the you know, your first content, propane or whatever, but like it’s still it’s still charging against your data plan.

Oh, yeah. I don’t know if we’ve done necessarily. And research, we definitely can show. Ah, number of FTE hours saved by doing this. In fact, you’re you’re asking about success is one of the successes that I’ve that we’ve seen. One thing that we’ve tried to sell administration for years is if we can stop treating everyone with website request as a special snowflake instead, take that time that we would spend on it and build common features, common wants and needs.

We could get to the point where we can churn out sites really, really fast. You know, if we have the stomach to tell people you want to side, I get that you’re gonna get 80% of your needs met, you’ll get another 10% will fudge it, right. We’ll figure out that other 10% but you’re gonna have to compromise on that last 10 and you’re not gonna get any of your wants right now. We actually finally got to do that. We were able to spend a big chunk of the summer building out functionality in these based themes that meet 80% of the needs.

And we were able t o in the later times as we started going back to class on, we had people coming and saying, We need to cite within a week. Well, in the past, that would have been unheard of. There’s no way we could have gone through the process of figuring out what they want. Build all the custom stuff, give them aside. In this case, we actually were able to start turning outsides in less than a week and giving them 80% of what they need right out the door and then fudging that last little 10%.

But then taking even that fudge and going back and saying, Okay, what do we need to adjust in these based themes to build out mawr of these needs or middle doubt that functionalities people need? So now we’re able to term really, really quickly, especially because we’re losing more and more of our own resource is.

he’s using fractal. Yeah, that’s right.

was on a pattern lab, and then something didn’t work with Pattern that shifted the tractor. And that’s what it’s on town.

it is, uh, opened up the open W C. Has their own implementation of storybook specifically for Web components. Before they had that I struggle to get a storybook up and running, and then any time, something that’s very dense, it was, Yeah, and it’s a

It’s It’s very nice once you dio we have a lot of so that that Web form with all of the controls. Basically, they call that a knobs, and they control slots within Web components, which is just the inside of a Web component and the attributes on the tag properties. But you can play around with those within those fields and then that would, you know, update the component.

And we’ve added pieces that give you the code snippet that you could just easily copy so that once you’ve tweaked that within our instance Web components, that p s u dot e D u. Um, if you play around with our components and you play around with those knobs you’ll get a customized version of that that you can just copy and paste. Um, on the developer end of it. I started writing a a set of scripts that allow me to write these stories a lot faster, and thio add sort of a random ization element it SSM of these.

I call them Laura, um, data tools. And so it throws in. Right now, it’s just using, um, these TV series community. So there’s a lot of community quotes and some of the random stuff that shows up, but it’ll give random accent colors, random numbers, random icons, and that helps us see how things look to.

Well, just personally, you know, one of the things that has been, um, a big part of this year for me has been I came from a place where I was very, uh, you know, I had I had become a jack of all trades, and so I was just personally stretched incredibly thin. Um, I was, you know, I was doing everything from, um you know, uh, back end development to, you know, I I was putting together our pattern library, Um, in pattern lab. I was doing you x and design work I was doing, you know, e I was the accessibility expert.

I was I was the everything in my previous role, and, um, I am now able to focus on the part of my work that that is sort of my strength. And so, um, that’s that’s that’s personally been incredibly gratifying. Andi enabled me to do some things which I’ve wanted to do, you know, for forever. It seems like one of the things that that I’m currently working on is a pretty large scale top tasks, uh, survey, Um, because none has none has ever really been done that I’m aware of.

There’s, you know, there There’s other kinds of surveys that that that get at, um, sort of measuring the temperature and of of our our this is sort of thinking, particularly about our perspective students. Um but we’ve we’ve never really done one that’s that’s aimed at getting a really solid quantitative sense of you. know what’s most important to perspective students. Whenever everything, our site on DSO you know that’s gonna be, I think, a really great foundation moving forward.

That’s, you know, it’s still in progress. We haven’t launched the survey yet, but just, um, you know, being able to work on that, being able to work on it with a really solid marketing research team who is able to, you know, sort of sort of take it to another level then I would have been able to do all by myself has been really great. So that’s that’s been something that just personally, it is really thrilling toe work on stuff like that

Oh, yeah, absolutely. I mean, and it’s not all on me to, you know, to make that right decision. When when there are other people in the room who, you know, probably have more expertise about about, you know, certain aspect on DWhite where I I don’t have to always be the expert about everything.

E think this year? The biggest thing is, everybody wants something and everybody wants it now and has to have it now. The core group of developers for all of the things I’ve described, hacks, the studio elms, Ellen the Drew, Apple based, um, the dribble based content system hacks, CMS all of that, and the beauty of Web components is that we’ve been doing all of that with a core team of for developers. But that also means now that everybody wants us to work on all of them.

Now, what we’re really interested in is having contributors, and, you know, we’ve been talking about how we’re doing this so that we could benefit all of higher head and its component ties so people can adopt, you know, maybe they just adopt the player and they don’t want to adopt anything else because they want to figure out this whole Web components universe. Maybe they just want the hacks. Ah, block editor. Maybe they go all the way to the CMS and everything else that we build.

But, you know, we could do so much more as people become aware that this is here and there’s so many levels to contribute, whether that’s the documentation or just submitting an issue in the issue queue. We have a developer in France that is doing some accessibility and internationalization stuff for us, and we welcome that. I really love it when people tell me my work needs to be fixed, because that means it’s going to get better.

It would be like me walking around with something in my teeth and nobody telling me. So I know you know, people can be really touchy about getting feedback and critiques, but, um, the Elms Ellen community loves contributions,

Yeah, and it’s a friendly community. I mean, I’m I am, you know, Anno over 40 female type. And you know, I know people talk about toxic developer communities. This is this is the farthest you could be from toxic. So it’s It’s a place where, if you’re new or if you’re not sure if you’re welcome, you belong with us. Trust me

Go read some documentation. Go look at what they’re doing. Um, and you may surprise yourself.

We’re sort of having a Halloween party next week on Friday, um, in the elms Ln slack space that anyone is welcome to join, we put out an invitation to a zoom call, and it’s We call it an UN code review. Basically, it’s anybody can bring up a topic, whether it’s something they want to show off or if they have questions.

Even the most basic questions related Thio to our projects and Web components were happy to answer. It’s we get such a variety of people. So if that’s something that somebody really wants toe, try something new, join us for our big Halloween party.

presented and um on Web components in a 10 minute talk and got a lot of interest in it and one person you know reached out to me and said, How do I get started? And this has happened a couple of times, but it made me write a getting started article from the very beginning. Like, just I’m not even a developer. I just wanna, you know, play with your stuff with HTML code. And I went back and I told that person, thank you. Because this your question makes it better. Even the fact that you asked a question.

Um, I have actually been having to figure this out. Previously, I had been doing most of my research in person and oftentimes very guerrilla style, just, you know, like sitting at a table in, you know, the student union or sitting at, you know, sort of grabbing perspective students in the admissions office. I’d say the biggest challenge has been recruitment, um, with, you know, with with in person, particularly students. It’s very easy to recruit using pizza, but that doesn’t work online. So so, sort of.

A recruitment efforts have had to be a lot more formal. The actual you know doing of the you know, if you’re doing just a standard usability study, it’s not really that different. You know, just using any screen sharing software seems to work really great, actually, for you know what, observing observing users there’s, you know, there’s there’s Maybe if if we were trying to do something, that was a little bit more, uh, contextual analysis, where we’re like wanting to see the workspace and that sort of thing, that would probably a little more challenging.

Typically, you know, in a previous life I’ve been used to being able just to go into people’s offices in terms of challenges, other kinds of challenges. One of the big challenges has been I’ve been part of a group. The big part of our work, typically in in our group, is supporting Penn State World Campus, which has been which has not been dramatically impacted by by co vid. But what So there’s two things that have that have really changed.

One is that some of the research that we want to do that sort of Maura about attitudes is very hard to do right now, because because we don’t know, we can’t necessarily bank on anything. We come out of that kind of research continuing to hold true for any period of time. You know, it’s so it’s so particular to this moment on DSO that’s that’s really challenging. And there’s actually a fair amount of qualitative research that we’ve just put on the shelf that that we you know, we’ve just tried to figure out other ways to do it.

In fact, this top task for these church is part of the reason why we’re focusing on that right now is because it felt like a kind of mawr structured kind of research that we felt like we could still get some really useful and, hopefully Mawr like durable insights. The other thing is that we’ve is that our group has been, has been tasked with maintaining the continuity of learning and continuity of teaching sites for Penn State. And that’s been a much like larger amount of work than I think we had anticipated.

You know, the pandemic being a larger thing than most people anticipated beginning, of course. But the one of the real challenges has been when when we enter a new realm, we oftentimes don’t apply the expertise that we already have. We’ve already built up in other realms to that new realm. We we sort of act like an absolute beginner, and we don’t sort of transfer that those skills over.

I think that’s true for institutions to, you know, institutions that maybe have built up good governance and good, um, sort of processes for their sort of their their their their operationalized Web work for in in this crisis communications in this like extremely long term crisis communications situation that that we’ve been in ah lot of that has has, You know, it’s sort of like it’s like that that that stuff doesn’t exist. Onda We are kind of back at square one of governance and process.

And so, you know, we’re in the we’re in that situation that you you never want to be in where there’s umpteen different stakeholders all just sort of helping you with things that you didn’t know We’re going to show up and it needs to go on the on the website the next day. And I think probably a lot of people at a lot of institutions are in that situation with with the right process and with the right sort of governance in place, you know, it could have it could have been a different story.

And so, you know, we’ve been, um, you know, trying toe trying to sort of make ourself persons out of our sow’s ears.

I think Matt hit the nail on the head with the, you know, transferring that old knowledge to a new situation. And, you know, because I’m working in the, you know after somebody’s actually decided to go here and has opted to go online. Our courses have been designed from the get go to be online. So the typical pre co vid process for taking a course and saying, Here’s my course.

I’m gonna start working on it and I’m gonna put it online takes a couple of semesters toe actually happen, and that’s because there’s, you know, instructional media that’s involved. There’s thinking about how that transfers to an online space. There’s a lot of planning that goes into that. And then I I really feel for all the educators who had toe up and do this. So there’s there’s going to be a difference.

There’s a whole generation of people who are gonna think online learning is something different, because what they got is that the TV dinner version and what we usually do is prepare a five course meal. So there’s a There’s a big difference between the courses that are offered and, ah, lot of people don’t know how to transfer that skill, and you see a great variety. A lot of people think it’s just putting up power points or putting up 40 minute videos, which is really bad user experience.

And, you know, part of the reason that we got into this the block editing and the authoring that we’re doing is because ah, lot of course content management systems that are out of the box assume a face to face environment where you’re just uploading your slides and that’s it. And maybe taking a couple of tests, it doesn’t allow for that media rich interactive lab and simulation environment where, you know, one activity is this.

You get some information and then you try it out. It’s not a lot of online LMS is that are offered to people are not, are not built for for the ideal way to learn online. And so we built the block editor for that reason. So what you’re getting the best is yet to come. You know, if people start to figure out that this this stuffs available on this is how we’re gonna have to learn

For me, there’s some It sort of came in and there was there wasn’t there wasn’t a strong existing library of, you know, pre built design components in any in any design tool. Um, there was a bunch of illustrator files on DSO. You know, it was it was sort of like, Well, you know, pick what? You know what ux design tool you want to use And so I got, you know, it’s kind of a fun chance to just play around with, um, Cem Cem, various options I’d already been using sketch a lot.

And, you know, I got to play around the stigma, which I like. Um, in the end, so far, I’ve I’ve settled on on X d. Um, just because it’s something that I can you know I can I can transfer with colleagues a little more easily within my setting. Um, but that’s just been kind of a fun process to play around with those tools on. There’s definitely things that X is still pretty rough around the edges, but it has some some very like, powerful stuff going on.

Um, and and so I’m you know, I’m appreciated that the things about it that are there to appreciate, um, also have have been ableto dive a lot Maurin toe optimal workshops, um, offerings on dso That’s been, you know, it’s it’s been good. Thio just sort of more broadly used some of some of their tools recently did a bunch of tree testing, um and, uh, and and also helped, um helps w p. Campus a little bit with some card sorting and treat testing work they were doing for their their website redesign, which was fun.

Yeah, I found pigment to be really fun to use. We we used it for the for the WP campus redesign and just being ableto sit with, you know, to other designers on a on a call and simultaneously, you know, move things around and and and throw together wire frames and stuff like that was really fun. You know,

The thing if I have a big grape about x d it z the typography and type handling, which I’m so I’m so shocked about because this is adobe like I would think they could just, you know, just pull that stuff in from, like, just pick one of their other products. Right? Um but there, you know, you You cannot, For example, in a single text block you cannot apply different textiles to that block.

You cannot apply different line heights even though you can apply different font sizes on dso. You know, there’s just this, like it just feels like this incredibly crude aspect of the software. I’m hoping they’re working on it.

Well, one of the things that I really miss is a lot of times the people who are local to my team would just meet at a local Starbucks on campus sometimes because we were, you know, two of us air in the arts college than two of us are in the college of science. And, you know, eventually we were picking up some other people. Um, because Brian teaches courses their students who get really interested in the project and the ethics behind it.

And I call them Brian’s Disciples. That would stop by people from other departments that were curious. And it’s, you know, so you could do some sort of like shared coding environment. And I It wasn’t until the pandemic that I really used the live share feature on DS code, and I’ve been using that toe. Sometimes I’ll block off my time to get some other people on campus who want to start contributing sort of up to speed. It’s nice to have that one on one talk. I could let them drive, but still have the ability to to step in if needed.

Well, that’s reminded me of I’m still looking for a good tool. I heard mentioned that I had Web Miro as one sort of, ah, digital white boarding collaborative tool. But, um, you know, if either of you or anyone else has any good suggestions for that, that’s something that particularly given the fact that that I’m remote. I’m a remote employees for the long term.

So you know, I’m going to need I’m going to need something like that, a big part of my design processes, collaborative sketching, white board work. And so, you know, it’s It’s something that I’ve been ableto work around to some extent. But I do feel that pain of not having that,

So I’ve been using because I don’t have my big white board. I bought myself a white board or a dry erase notebook because I had tried. But you know, when the pandemic first hit with just a bunch of note papers and I you’ve noticed I have desk cats and they don’t like my stacks of paper. But this wonderful dry areas notebook has been a way that I don’t have toe convert a bunch of my wall space. The white board and I can, you know, still whiteboard ideas.

Thanks, everyone. I’m at M Ryan. D m r y a n d on Twitter. Um, and that’s probably the best way to get in touch with me on, uh Yeah, Happy toe. Talked about any of these topics or anything else

on. I’m Nikki Massaro Kauffman. You can get me at NikkiMK on Twitter. Um, that’s also how you can get to me. Nicky. M p s u dot e d u other I also have the Penn State alias evil genius npsu dot eu. So if you’re feeling like you wanna send in a very fun way, you can catch me that way. And our project hacks web dot or GTA has more details on how you can get involved with our work. And don’t forget the elves. Ellen Slack Elms, Ellen slack dot com