Erin Malone is the Chair of the Interaction Design BFA Program at the California College of the Arts. In this conversation, we focus on Erin’s long trajectory with design pattern libraries, including her recent work with the Anti-Defamation League developing tools and best practices to fight online hate.
Show notes
- Erin Malone (LinkedIn)
- @emalone (Twitter)
- Interaction Design Program at the California College of the Arts
- Anti-Defamation League (ADL)
- ADL’s Social Pattern Library
- Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience, Second Edition by Christian Crumlish and Erin Malone
- IA Conference
- Yahoo! Design Pattern Library (archive.org)
- Irene Au
- Christina Wodtke
- Designing Interfaces: Patterns for Effective Interaction Design, Third Edition by Jennifer Tidwell
- A Pattern Language: Towns, Buildings, Construction by Christopher Alexander
- An Event Apart
- Nathan Curtis
- EightShapes
- Brad Frost
- Atomic Design by Brad Frost
- Material Design
- Dave Sifry
- Creative Commons
Show notes include Amazon affiliate links. I get a small commission for purchases made through these links.
Transcript
Jorge: Erin, welcome to the show.
Erin: Oh, thanks! Nice to be here.
Jorge: Well, it’s very nice to have you. I’ve known you for a long time; we are friends; we are colleagues at CCA — but a lot of folks who are listening in might not be familiar with you and your work. How do you introduce yourself?
About Erin
Erin: Generally, I tell people I’m the Chair of the Interaction Design Program at California College of the Arts, but I’m also a longtime practitioner in whatever the flavor of the day is: interaction design, information architecture, user experience. I’ve been working in the field since the early nineties, before the web, so I’m really old.
Jorge: The first time that I became aware of your work was at one of the then IA Summits, now IA Conferences. There was poster night, which is a feature of these events. And I remember seeing this incredible poster that mapped — I think it was Yahoo!’s web presence. Is that what it was?
Erin: It was the Yahoo! Network. And in that particular map, I was the client. I didn’t actually do that work. I hired James and Branch Logic; that’s what they were called before I joined them. And I hired them to map the network, and it was really done as a project for marketing to make more informed decisions around the logo because there was both a word logo and a logo mark. And we were looking to see how traffic came in and out of various parts of the network in order to understand when we should use different pieces of the logo. And at the time, I was head of the Platform Design Team and responsible for the brand on the website.
And we learned a lot doing that map. But no common patterns emerged to give us the information to the question we were asking. We answered a lot of other questions. We ended up making copies of that map for every division, and they would put it up. And it was the first time many people who worked there had ever seen where what they worked on was in the context of all the other pieces of the network. So, it was really a useful tool, even though the question we were looking for was not answered.
Jorge: That’s fascinating. And I love it when that happens: you expend this energy to create this artifact, and it has all these unintended benefits. You used the word “patterns,” and I remember that you were involved with the Yahoo! Pattern Library, right?
The Yahoo! Design Pattern Library
Erin: Yeah. I was the founder of the Yahoo! Pattern Library. Irene Au was the head of the user experience design group, and she wanted to create a pattern library, basically instigated by Christina Wodtke. And Christina kind of talked me into coming over, and then she promptly left! And so I built the team. I brought a lot of people over from AOL, and we basically developed a pattern library based on the Christopher Alexander and the Jennifer Tidwell model of A Pattern Language, and looking at how different interactions and different ways of doing things fit within the context of the Yahoo network, and could there be a unified way of doing that interaction that could slot into the various contexts.
And it was tough going at the beginning because we had a lot of people pushing back, wanting to know why we were doing this; why what we were doing was relevant to what they were doing. And they were in the field with their particular domain of news, or search, or whatever. And it was this time of a major shift from the company having to do whatever it needed to do to survive the dot com bust, where they gave free rein to every GM to say, “you do what you need to do to make it in your market.” So, news, competitive to other news. Sports, competitive to other sports.
But now we were a few years later and realizing that the customers — the users of Yahoo — looked at Yahoo as just one thing. It wasn’t news being compared to other news sites. It was like, “I come to Yahoo.” And so there was this need to create a network way of doing things. And so, we were creating the pattern library — along with a bunch of brand guidelines — to make that happen. And over time, we did! We worked with the different properties and their research teams and design teams to use their research to inform how we were putting the patterns together and what got published. But it took a few years, and we went through three different pattern curators, Matt Leacock being the first and Bill Scott being the second, and then Christian Crumlish being the third.
Jorge: Was that the first of these?
Erin: It was the publically published pattern library from a corporate entity, ever. I mean, there were, like, Wheely? Their pattern and I think UX patterns or UI patterns where they had done patterns based on what Jennifer Tidwell had published in_ Designing Interfaces,_ but we were the first corporate. And then a bunch followed soon after. I think Salesforce came out pretty soon after, and a couple of others, but we were the first.
Jorge: Designers these days — particularly those working in the enterprise — might take for granted the existence of things like design systems and the advantages that come with that. But I think that this was — at least in my perception as an outsider — pioneering work that you all were doing there.
Erin: It was before design systems really came into play. Because I remember doing a talk for An Event Apart about pattern libraries and component libraries and design systems needing to be this whole thing and using the honeycomb diagram to show… And I bombed! I mean, it’s one of the few times where I’ve given a talk where the feedback afterward was, “It was awful. It was boring. I don’t know why anybody would need to know this. We don’t do stuff that way.” You know, most of the people at An Event Apart were web developers and designers, and it just was too early. And because I was coming at it from an interaction design standpoint and not a brand guideline, UI standpoint, it wasn’t presented in the right way.
And then things changed. Other people came along after, and I think a lot of the work that Nathan Curtis and EightShapes did really kind of helped move that forward. And then Brad Frost — Atomic Design — I think that was the lynchpin. And then Material Design. And now everybody has a design system.
Jorge: One thing that you were saying there — and I just want to reflect it back to you because I thought it was so interesting — is that when you all were working on this, you were trying to gain traction in a context where, because of the economic conditions of the industry — the dot com burst — stakeholders were maybe wanting to move faster and be more agile. And I can imagine you all being like the pattern police or something, saying, “No! Work within these guidelines.” And I guess what I’m detecting there is that there was a tension inherent in the fact that the people responsible for the products might not have seen how such a thing could help them act faster. Is that fair?
Finding those who agree with you
Erin: That is fair. We were not pattern police; we took a stance that we were never going to be the pattern police. What we tried to do was find stakeholders within the different properties who agreed with us — who were on the same page — to find early wins. And then, as the company grew and the user experience design teams in these different properties grew — particularly after we went public — people came to Yahoo because of the pattern library.
So, as the nature of the teams evolved, we got more and more people hired who believed in this idea of a consistent common way of doing interactions across the network. And so we had champions in each area that would work with us, and we kind of flipped it on them and said, you know, “Hey, why don’t you write this pattern because you just did all this research, and then we’ll help shepherd it across to the other properties?” And so, that helped a lot as well. But the traction really picked up after we went public, and then all these people wanted to work at Yahoo!, and partly because of the pattern library.
Jorge: What I’m hearing there is that the artifact served this ulterior purpose of driving some kind of cultural change within the organization.
Erin: Yeah. And it was painful in the beginning. It was really painful, you know? I would sit in meetings, and people — my peers — would ask my boss, “Why is that group here? Why are they here? Why can’t we just get rid of them and let us have the rest of the headcount?” While I’m sitting in the room!
Jorge: Wow.
Erin: Yeah! But, you know, I was hired for a reason, for a mission. And the other people just had to suck it up and eventually learn to work with us. But we did try very hard not to be the police because that’s just an immediate way to get doors slammed in your face.
Jorge: That’s a good reminder. And correction to self: don’t use that phrase again! My sense is that your interest in patterns didn’t stop there. You mentioned Christian Crumlish. And you and Christian co-authored a book for O’Reilly that is very pattern-oriented, isn’t it?
Designing Social Interfaces
Erin: Yes. It is a collection of patterns. Designing Social Interfaces. And, you know, we split the book in half, which a lot of people don’t know because my name is second. It is a collection of patterns that, when you put them together, create the ecosystem of a social experience. And because of that book, I’ve worked with a lot of startups and other companies, including larger enterprises, to help them and advise them in developing social features and making sure that they have all the parts because there are some pieces where if you don’t have that, particularly around moderation, it’s just something terrible waiting to happen. Because there are trolls, there are bad people out there, and if you don’t have the tools in place… Unfortunately, reporting and moderation are often the last thing companies add when it’s the first thing they should be thinking about.
Jorge: Remind me when the first edition came out because the impression I have is that that was very early days.
Erin: It was. It was 2009. So we wrote it over the year of 2008, and it came out in 2009, and then the second edition came out in 2015, which we wrote in 2014, really to get mobile better integrated. Because when we did the first edition, we were like, “oh yeah! There’s this mobile thing, and it’s coming.” By 2015, mobile was ubiquitous and everywhere. And so, we rewrote all the patterns, integrated mobile, got rid of certain things that turned out not to be true or important anymore, and added other things that we had seen over the five years that needed to be addressed.
Jorge: And to put it in context for folks who might not remember that, 2008 is not that many years after Facebook started.
Erin: It was two years after Facebook started. I think they started in ’06. I have it. I’ve actually been working on a social media history timeline “thing.”
Jorge: And there were social networks before Facebook, obviously, but I always think of Facebook as the one that really kind of drove this at a scale where it started having a really widespread impact. I would love for you to tell us about a project that you’ve been working on more recently, which, talking with you about it now, I realize is a complete continuation of everything you’ve been doing here.
Researching the ecosystem of online hate
Erin: It is! So three years ago — and I’ll just kind of give you a little bit of backstory here — I left the agency that I was a partner of, and I did two or three projects with a couple of startups, and I met a guy named Dave Sifry, and at the end of that summer, he went to the ADL, the Anti-Defamation League as the VP of their Center For Technology In Society. And the mission of that group was to work with social platforms. And also, he was hired to help build a little mini-product team to track and measure online hate in social spaces and social games.
And he brought me along for a couple of reasons. And I said yes because I realized that many of the problems that we see in social media today are a direct result of the way we were evangelizing and building social tools back in 2008 and 2009, and 2010. You know, back then, I was giving talks about how to make social more viral and more engaging by reducing friction and taking away things that got in the way of people being able to post. Well, that is the exact reason why we have what they call raids and troll-bombing and things like that: because there’s no friction to being able to post things and comment on things because we took that away. And the engagement model for the business model is all built into that.
And that’s a problem, as we’re seeing now because none of us ever realized that things would get to the scale that they are. I mean, who knew that Facebook was going to be global and serve billions of people? I certainly didn’t, you know? We were thinking about small little social places where you could have message boards and conversations with your friends.
And so, I went to the ADL, and the first project that I was asked to do was to map and model, and diagram the ecosystem of online hate. And what that meant was I needed to model the ecosystem of what social is and how people move through social and the kinds of things they do, the kind of activities and tasks and things they do. The kind of people who get involved, particularly bad actors, and the kinds of ways they target people. And so, I developed a series of models and a series of diagrams which are available on the website. And out of that — along with these relationships with these platforms and a lot of brainstorming around what are all the things that we think we should do to improve these platforms — the idea of a social pattern library to mitigate hate came up.
And this team has had a long relationship with trust and safety and policy people on multiple platforms across games and social. And I can’t tell you exactly who, but the team is often making recommendations for improvements, or they’re also… ADL is a trusted flagger where they actually will go in and find cases of bad things and report them. And because we’re a trusted flagger — because the organization is a trusted flagger — it actually gets more attention than just a general person, frankly. Unfortunately!
And in these brainstorming sessions and putting things together, I realized that many of the things we were asking for were the same across all the platforms. And, of course, that just says, “Well, there’s a pattern here.” And so, starting with many of the things from the book, along with these ideas to add friction, we started developing the social pattern library, whose main goal is to mitigate hate and harassment online. So it’s really about adding friction, adding pauses, adding places where people can stop and really think about that, “Count to 10 before you say something. Write yourself an email before you send it to the other person.”
And in the process, I also created a small advisory board, which includes some other people who are working in similar spaces. There’s a group called the Pro-Social Design, which is a nonprofit. I think they’re a real nonprofit now. And they’re working on some patterns, predominantly around privacy and data, but also safety. And they’re testing things first. We’re just making suggestions and then looking at the academic research and other research to support our recommendations. And then, wherever possible, I pull examples where platforms are doing what we’re suggesting so that other people can see how this could work. And then, we put together an interactive demo of how we think this thing should work. I think we’re about up to 40 patterns right now, and I’ve got another 15 coming out before the end of the month.
ADL’s Social Pattern Library
Jorge: And these are patterns that you can peruse online, right? Like, they’re public.
Erin: It is public, it is online, and it’s socialpatterns.adl.org. Anybody can go and read them. It’s not really listed as Creative Commons, but the intent is as a resource for any designer or developer to use. And if anybody is doing something with it, I’d love to hear back: how did it work? Because there are a lot of different ideas there, and some are going to work in some contexts, and some are not. It depends on the context and who the audience is.
Jorge: When you were doing this type of work at Yahoo!, my expectation is that the audience for the pattern library was fairly well-defined in the sense that you knew the portfolio of Yahoo! products. Who is the intended audience for this pattern library?
Erin: It is specifically for UX designers and developers. Most of the other work that the group that I’ve been consulting with gears their work towards trust and safety and policy, but they don’t build things, and they don’t design things. And having worked in-house for a long time, I can tell you, designers kind of scoff at the recommendations that policy people make, like, “Yeah, yeah. We’ll get to that.” Or “it’s on the roadmap.”
And that’s not to say that those people don’t have good intentions and don’t have good ideas. It’s just they’re not in the trenches building things, and they don’t always understand what it takes to make change. And so, this pattern library is geared towards the designer, where it’s really about, you know, “Here are the advantages. Here are the disadvantages. Here are things that could happen. Here’s how we think it should work, and here’s an interactive example of it.”
Long term, I wanted to be able to release the Figma demos open source, but since my boss has since left the organization, I don’t know if I’ll be able to do that since it’s not my intellectual property. And my current boss is an interim person.
Jorge: When you say that the audience is primarily designers, are these designers working in any kind of space? Or is it primarily designers working in social environments?
Erin: I think it is any designer working on a product that has a social component. So, you could be working for a news organization, but you have comments. You could be a social network, and you have all the things wrapped up in that. So, it’s really anybody who’s designing social pieces into whatever type of application, whether it’s purely social or something else that has social pieces to it, whether it’s identity or the ability to share things or leave comments.
Jorge: I get the sense that it’s still fairly early days for this system. You’re saying that you’ve developed, did you say..?
Erin: I think there are forty.
Jorge: Forty, sorry. But there are fifteen more.
Erin: And then fifteen more, and then we’ll be doing one last batch, and then my contract ends.
Jorge: Because I was going to ask you about what kind of reception this has had, but I got the sense that you haven’t heard from folks who are using it. Is that true?
Erin: From “in the trenches” with designers, I actually don’t know how it’s been… I mean, other than people on Facebook and Twitter and LinkedIn saying, “Oh, this is a great project,” I don’t know if people are using it. But I do know it has been used and upheld as a resource for designers in congressional testimony. So, the president or the CEO of ADL was testifying on Capitol Hill, and questions about the Pattern Library were asked, particularly around mitigation of bad actors and ways to mitigate hate online. But the Pattern Library was specifically referenced and asked about by a Senator. So, it has other purposes besides just being a tool for designers. Just knowing that there are tools and ways of doing things helps inform a lot of other people, even if they’re not the primary audience.
Jorge: When you were talking about designing social interfaces, and you spoke of reporting and moderation as being key concerns, what I was thinking of was all the discussions recently about Twitter and the nature of conversation in that environment. And often, it comes down to discussions about the degree of moderation and the ability of users to report things that they might consider inappropriate. And when you were saying it, it felt both prescient, and it’s like, “Well, we’ve known these things for a long time!”
The need for friction and mitigation
Erin: We have. But we have certain political things that happened and, you know, running up to 2016 that gave a lot of people permission to act like jerks online or even worse words, I would like to say. Whereas I think people held back, and there was a level of civility — I mean, even though there always was awful stuff online, there was a level of permission that was given because of the politics. And it’s like the firehose now; it’s really bad. Although you may never see it depending on who you’re friends with and who you’re involved with, or also depending on your gender or your race, you may never see it. If you come from a marginalized community, you potentially might have to get offline because it’s so easy to be attacked and to be harassed. And then there are people who take it to the extreme, and they take it offline, and they call the SWAT team on people. And people have died because of this.
Jorge: The other point that stood out to me when we were talking earlier, when we were recapping the history of how we got to where we are, was that back in the early two-thousands, I don’t think any of us could have predicted that environments like Facebook or Twitter would have the scale that they have now, right? And the counter-argument that I’ve heard there is that these things are of a scale now where they are effectively commons. Like they’re kind of like a public square, right?
Erin: They are, but they are also still private companies. That’s why you have this conflict that you see. The owners kind of butt up against this notion of what they may consider censorship, but also section 230, which treats these companies as just conduits, as opposed to having responsibility for what’s published on their sites. And so, it’s a tough one because if you lean too hard one way, it’s censorship. But if you don’t lean hard enough, then you have a lot of people who are traumatized and victimized, and hurt. And so it is a fine line. And I don’t envy the powers that be.
You know, I think from a moderation perspective, it’s like the teams that I’ve been working with; they just want the companies to follow through on their own policies. And in some cases, they just don’t find this stuff. In other cases, the scale and the speed at which stuff is being posted is just too much for their systems. And then you have the flip side where algorithms are just kind of going crazy, and they pull all sorts of stuff down that isn’t hateful or bad actors or whatever. But if they can do the nuanced things that they can do, say, for Europe around their privacy and data roles, I don’t see why they can’t do it here, too.
Jorge: It sounds to me like scale is an important factor here. And I know very little about this, so I’m going to be talking completely out of my comfort zone, but I would expect that the algorithmic moderation stuff becomes more relevant the more people you have on the system just because of the nature of what a team can do, right? But it sounded to me like the primary audience for this particular pattern library might be organizations that are not necessarily at the scale of a Facebook or a Twitter but just integrating some kind of social component, which makes sense.
Erin: Yeah. I mean, we use a lot of examples from Twitter and from YouTube and not many from Facebook, just a couple. Twitter, for all of its faults, is really proactive in its design team, trying, doing interactions that add friction or try to mitigate hate. They’re really good about that. And I think some things don’t come out as fast as we would like, but over the three years that I’ve been working with this team and on this, they’ve consistently been at the forefront, trying new things to help with these issues. YouTube’s been pretty good too.
Jorge: What’s your read on the situation? Is it getting better overall?
Erin: I think it depends on who you ask and what day because some of it depends on what’s going on in the world politically. The fact that they’ve thrown off the platforms a lot of really bad actors, like the extremist groups and stuff, I think that’s helped a lot. I think we see stuff happening in the fringe sites and in these dark corners, which isn’t good, but the audience in those spaces is so small, so they don’t have the reach. So I think in that sense, it’s gotten better.
Jorge: One final question before we wrap things up, I’m wondering how doing this type of work — and maybe not specifically the ADL work, but just in general your work around systematizing interaction design — how that has informed your own life? Your approach to things, maybe outside of work, if any?
Erin: Hmm. I don’t think it has. I mean, I’m definitely a big fan of not reinventing the wheel from a practicing designer standpoint. And when I’m working with clients, I do tend to start at the top, at the systemic level. I mean, my first question is, “Do you have a system architecture or some kind of system map of what you’ve built?” And most people are like, “No!” And then I’m like, “I can’t design or work in this space until I understand the whole.”
And whether they pay me to do it or not, I’m going to do it. And even if it’s just clicking on everything and looking at how everything works, because that’s how my brain works. And then, in the process of doing that, I can go through and see where we have inconsistencies of types of interaction that should be the same. And that definitely comes from having done patterns and being immersed in that. Whether that’s good or bad, I don’t know.
I tend to work pretty much web-based. I’m not one of these people working in the metaverse or doing crazy inventions of new things. I’m mostly like, “let’s just clean up the stuff that’s on the web.”
Jorge: The way that I hear that — and maybe I’m hearing what I want to hear — is that thinking about what problems can be systematized is a leadership skill, right? And you’re in a position of leadership at CCA, and I’ve taught in your program. So, I’ve experienced you as a leader from that perspective. And these organizational skills have come across. So, I would say that that’s a very interesting response and one that I can see the effects of it. So, where can folks follow up with you, Erin, if they want to find out more?
Closing
Erin: Well, to find out more about the pattern library that we talked about, they can go to socialpatterns.adl.org. But they can also find me on LinkedIn at Erin Malone. I don’t think that’s actually my LinkedIn name; I think it’s Erin Kat Malone, but I’m also on Twitter as @emalone, not Erin Malone; that’s another writer. But I’m @emalone on Twitter. So I can be found in those places.
Jorge: Well, I’ll include links to all those things in the show notes. Thank you so much for sharing with us today, Erin.
Erin: Well, thanks for having me. This was fun to talk about the common thread through my whole career, which I hadn’t really thought about some of it.
Jorge: I’ll tell you what, it’s much more cogent than most, including mine. It’s amazing! Thank you again.
Erin: Well, yeah! Thank you. It was fun to be here.
