The home team talks with designer, coder, and anthropologist Maggie Appleton about her path from academic ethnography to leading design at HASH, how she balances creative expression and usability in front-end design, and why UX researchers are really anthropologists by a different name.
HASH, where Maggie works along with Stack Overflow cofounder Joel Spolsky, is an open-core platform for creating simulations that help people make better decisions.
Explore Maggie’s writing on everything from digital anthropology to best practices for illustrating invisible programming concepts.
Maggie recommends the Nielsen Norman Group website as the best resource for folks getting up to speed on research-based UX.
Today’s Lifeboat badge goes to user Sten for their answer to Detecting transparency in an image.
Maggie Appleton Have you guys seen block-based interfaces like Notion or WordPress, Gutenberg are kind of the really big popular ones.
Ben Popper You're talking to a Notion fan and a WordPress user here so we're all over it.
MA Excellent. Good. Okay. You're onboard. So one of our goals is, you know when you type slash in WordPress, you have your picker list of blocks, and it's a limited list of blocks. It's whatever the Notion engineers and the WordPress engineers have the bandwidth to build themselves. And there's all these other components available in NPM, right? If you search for React components in NPM it's thousands and thousands. But you can't, as an end user, as someone who's not a programmer, you can't put one of those components into your blog post, because you don't have the ability to, you don't know code. But what if we could have blocks that were interoperable between platforms?
[intro music plays]
BP Hello, everybody. Welcome back to the Stack Overflow Podcast. I am your host, Ben Popper, Director of Content here at Stack Overflow, and I am joined as I often am by my wonderful co-host Ceora. Hi, Ceora.
Ceora Ford Hi!
BP It's good to see you. We have a great guest today with us, Maggie Appleton. Maggie, welcome to the show.
MA Thanks so much for having me. I'm excited to be here.
BP So Maggie, I am a former journalist who now works mostly in the world of software, writing about it, podcasting about, being really terrible at trying to code anything. How did you get into this world of software? And to what degree do you balance that with sort of writing and opinion and essays?
MA Yeah. I guess I've been 'techie' my whole life. I was the kind of kid that got into HTML at 12. I was of the millennial generation where we kind of had the internet come into our lives at maybe 13 or so, and so I've always played with computers and just been very curious about learning new software. But I'm not necessarily a developer, I'm very much a designer. I develop tangentially, or I'd call myself a really terrible developer, I do it as needed. But yeah, I mostly came in through design I'll say. I came in through visual design, web design, and then I do front end engineering only in order to build websites that look cool and are fancy and have animations. I'm mostly interested in it from an interaction design perspective.
CF Very cool. I have some questions. I went onto your website and I read through your bio, which was very well written by the way. It's interesting to hear you talk about being interested in tech since you were younger. Tell us about what it was like entering the tech industry for the first time. Because from what I gather, you have a background in anthropology first, but somehow you made your way into the tech industry, so can you tell us a little bit about that?
MA Sure. Yes. I definitely have a strange path. Well, I feel like most people in tech have a strange path into this place. So I studied cultural anthropology for my undergraduate degree at a liberal arts school, but I also specialized in digital anthropology, which was kind of a subdiscipline of it, so looking at how digital objects and digital mediums change our cultural practices or our cultural beliefs about the world. Even though I studied anthropology, I was always interested in the tech side of it. And then when I graduated with a cultural anthropology degree I had very few job prospects other than continuing my waitressing and barista career from university. But I had been building websites on the side since middle school/high school and kind of realized, “Oh, people will pay me to design websites for them.” So just immediately out of school I went into freelancing and web design and then out of necessity had to learn CSS and was like, “What's JavaScript?” I had to learn what that was. So I ended up in tech quite quickly but still even to this day I'm always looking for the anthropological lens on how it all works. That's really what fascinates me, like, how does our whole front end software world have like cultural belief systems? What is it that people are implicitly assuming about certain situations? What are the different metaphors people are using to talk and understand different situations? I'm really interested in the cultural belief system that lies underneath all of programming and specifically front end programming.
CF That's very smart sounding.
BP The metaphors we web by –I was checking that out in anticipation of this– and what I loved about that was the idea that we're still stuck in many ways on the web in this sort of paper mindset, this print mindset, and this office mindset. I've been trying to work on a piece about what cities and offices could or should look like in the future now that the pandemic has shown us we can clearly be just as productive remote. And as a city person who recently moved to a rural area, what potential that opens up. And it's amazing to go back and look at some of the old software design systems and how they were really just trying to recreate like an office desk. You know, here's a file folder, here's a copy machine, here's your drawing tablet. Everything is just taken from Xerox PARC the actual place, as opposed to the UX, UI, the GUI. I’d be curious to hear a little bit about what you see out there that you think is exciting, like people who might be pushing the boundaries a little bit there, or new ideas or metaphors that get you interested in in sort of pushing in a certain direction.
MA Yeah. I love this topic of metaphors of interface design, it's kind of one of my pet interests or like obsessions, something to that effect, especially of the web, because the web is so interesting. Like, how do you conceive of this thing that has so many dimensions and aspects? Especially being part of the front end programming world we kind of know too much about it, but there's so much detail we know about browser APIs or just like frameworks, there's too much for one human mind to conceive of it all at once so we have all these various metaphorical lenses we apply to it in different situations to help us understand the aspects we need in that moment. In terms of interface-wise, like the kind of interfaces I'm seeing that get me excited, I guess I focus more on web ones but it really does apply to any software at this point. The line between native app and web app obviously gets very fuzzy. I'm really interested in the spatial interface space. So like you mentioned Ben, of course we came from this world of very literal physical metaphors that we recreate in the screen, and we still do that to an extent. Every drop down menu or carousel, we're still using the idea of paper. I mean, obviously Google's material design has been a huge influence there– that we have this idea of like stacks of paper is kind of what our current web looks like. You have like slide overs and everything has like subtle shadows so it just kind of looks like a stack of cards that are all moving in various ways, but I'm really interested in the space where people are now using more open canvases, like the Figma approach, those are really interesting. And then you kind of get into different interactions of how you are allowed to move around that space, not necessarily 3D, but just bringing in more than the linear page, which is the historical legacy that we're kind of not struggling against, but are so enmeshed in it's very hard to break out of it. We’re very used to opening a web page and we call it a document, it’s an HTML document, so we expect it to start with linear text on the left that goes to the right and then progresses down in a straight line, versus being something that maybe goes in all directions or comes towards us or away from us, or having that be part of the dimensions of the page.
CF I think about this a lot too as someone who's kind of on the front end side of things, occasionally. And I also have a lot of friends and family who aren't in tech and I just happen to be the person who is like the tech support. Like, “How do you work this app?” How do you, whatever, whatever. And I find the topic of how to make design of a website or an app intuitive while also allowing yourself as a designer or as an engineer to be as creative as possible. There's a balance between the two, because sometimes you'll see a website that's very visually stunning but you hand the website or the app to a regular non-tech person and they have no idea how to use it. So I'm wondering, you have a very creative style, you have a very unique style. So how do you balance having your creative freedom with also, I know you've had experience with interactive design and things like that. How do you make something as usable as possible depending on who your audience or user base is, while also still maintaining that balance between being creative and being able to express yourself with your design? That's something I struggle with sometimes. You'll see things that are so cool, but it's like, “Can people use this?” I think that's kind of a big question but if you have anything to say about that I would love to hear your thoughts.
MA Sure. That is definitely a very large question, especially in the web design world. Personally, so for context for people who don't know, I've been an illustrator in the tech world for a lot of years, so I kind of illustrate explanations of how programming concepts work. So I’m literally just drawing pictures on an iPad and then putting PNGs on the web, so it's not necessarily like a web native technology. And that I think of as maybe why I'm a bit more free and there aren't as many rules, because I'm drawing an illustration. It's a lot more of a visual expression of creative ideas. And I put that in a very, very different category of work to when I am designing like a UI, like a form or a drop down menu. And there I don't know if I really put creative thought into that in the same way, and not to say that you can't, we've all seen the crazy wonderful experiments people do with like weird slider interactions or strange buttons and I think those are important to play with in context. Like I think of CodePen as a wonderful creative community playing with that stuff in a sandboxed way where they're just doing it to push the medium of the web. But I think it is important to keep that very different to usable web apps that need to be accessible for everyone and responsive and correct color contrast. And the amount of responsibility we have when building interfaces I think always has to take precedence over creative expression or creative play and exploration. Which is sort of like the boring adult answer, right? It's kind of true. It's like when someone's designing roads, they can't get too creative with it.
BP Right. I hear what you're saying and I do feel like when I see interesting and creative web design it's often in the context more of art or experimentation where someone is saying, “This was my intention here.” Because I think even now we're taking more and more stock of everything from the visual design and color scheme to all the different elements of accessibility. Like you said, it's becoming more and more almost rigid in the sense of like, we really need to build in all of these things so that everyone has equal access to this web content, as opposed to the wild days of the nineties, or even some of the stuff with responsive web design that happened where people were clearly just getting experimental. Ceora and I have discussed this, we're a few years apart in age and kids going into college programs now sometimes struggle with the metaphors of file and folder and stuff like that because they come from a world of just using smartphones and tablets. Why does it have to be organized like that? They've never been in an office. These metaphors aren't necessarily useful to them and they're not intuitive. And I had one of those humiliating experiences as a parent the other day where my kids had taken my Zoom and they had changed the name and put all kinds of emojis on there and I had to do a work meeting and I was like, “How do I get rid of this stuff!?” And they just were like, “Here.” They just went into the settings and just changed everything for me and I was like, “Thank God they were here to do that.” And for them, everything on mobile is now intuitive. They can navigate around Zoom or Roblox with ease and I can't.
CF Yeah. I was actually interested in hearing your perspective on this too, because one of the first interactions I ever had with you, I don't even know if you consider it an interaction, but the first time I ran into you was when I went to Women of React. It's a conference that happens annually, I think. This was like in 2020 and I was super new to tech. I was still in my learning phase, and you gave a talk that was called ‘Drawing the Invisible,’ and I thought it was really impressive because you talked about creating metaphors that explain and help people visualize abstract coding concepts, and I thought that was so fascinating, especially as someone who was learning and trying to understand these abstract coding concepts. But I think Ben brings up a very valid point when it comes to illustrating things, especially for educational purposes or usability purposes, whatever the case may be, that it's sometimes hard to find a metaphor that fits that a lot of people will understand. Because depending on where you're from, what language you speak, what generation you were born in, that changes constantly. We had a podcast episode where we literally talked about how newer generations, like the generation of people coming out of university now with CS degrees, may not understand the whole folder file structure that well because they grew up with being able to just search from anywhere on your computer or phone. So how do you balance this as a person who creates very intuitive designs and metaphors and does these visual essays? Is it something that you'd build with like, “This is what I wish I would've had when I was learning,” or how do you find that balance between creating things that are usable for everyone, understandable for everyone, or as many people as possible? Because I think about that a lot, and I think that's hard to execute especially when you're in the education space or in the space where you're trying to build something that's usable for as many people as possible.
MA Yes. That's a very good question, and one I've spent a lot of time thinking about. It's funny, it has a strange parallel to user research for products, right? When we go to build a product, we make sure we interview users, we research our customer base, we think about what their needs are, what they currently have, what they currently know. And when I go to make an explanation of a certain programming topic or framework or something, I just go onto the community Reddit, I search for it on Twitter. What I go and look for is the specific language they’re using to talk about it, because metaphors are always baked into language, and this is kind of a principle that comes from the cognitive science world. Most of the way that we form and pass metaphors around in society is through our languages, through the words we use. Everything we say almost always has a metaphorical background to it or like a hidden metaphor we're not really seeing. There's all kinds of turns of phrase or just the way we phrase things are always baked into metaphor. So yeah, most of the time when people say, “Oh, you come up with metaphors that really make sense,” I think the reason they sometimes work is what I've done is I've looked at the way people have spoken about that technology on forums and in the documentation obviously. Docs are always a really great place to be like, “Okay, this is what everyone's reading so they all have the same mental model built from the words in these docs,” and use that to be able to create illustrations and visuals based on those metaphors, so what were already there that people were already using and passing around.
CF That makes so much sense.
BP Not to tie it all back, but this sounds like cultural anthropology, right? You go into a community, you see what language they use to tell their own narratives about how they live or work or play, and then if you can mirror that language back to them, they have this sort of intuitive understanding of it, right?
MA Yes. Yeah, very much from that. It took me a while to connect the dots, like I had kind of studied all this stuff about ethnography is what we call it in anthropology, where you go and sort of live among communities and just watch them essentially in as little of a creepy way as you can for years, and take really detailed notes. It does come off as creepy. And then like halfway through my career I started learning more about UX research and UX researchers and kind of UX in general and I just kept having this feeling of like, “It just seems like they're anthropologists with a different label. All the things they’re talking about are all the things anthropologists do.” And then I found out there is a strong pipeline from anthropology degrees to UX research. There wasn't when I graduated, but people graduating now, they are definitely hiring anthropologists to come do UX.
BP Very cool.
CF That makes a lot of sense. I actually was going to ask how your background in anthropology has impacted your career, but I think based off of the questions that you answered already that's very clear. That's so cool. I think sometimes people imagine that the only way to be successful, or not be successful, like when people think about getting started in design or in tech in general, it's like, “I have to have a graphic design background,” or, “I have to have a background in CS,” or whatever, but there are so many ways that different things that seem like they're totally unrelated can actually tie back to the work we do in tech in a really meaningful way that can impact the way that you work in a positive way.
BP Yeah, I totally agree.
CF Like even Ben, I think your background in journalism helps you now in your career.
BP Yeah. Well you're coming from the humanities and in some ways you're trying to like humanize tech or make it more approachable or make it more accessible. Not just the fastest algorithm or the best deep learning model, but something that works for all people and is hopefully healthy for them, you know?
CF Yeah. And one of my probably biggest complaints about engineers is that sometimes I think their thought process is like, “Let me build the thing that's the most visually impressive, the most impressive with the code that I've done,” and everything like that. And they forget the user, like the person who's actually going to use this app. There have been so many times where I know of developers on a certain team at a big company or whatever and I know how they talk about the work that they do, and then I also know everyday people who use their app and have no idea how to use it because it's not intuitive. And they probably wouldn't imagine that anthropology, having that kind of user research kind of mindset, would have helped so much in building stuff for people to actually use. So I just think that whole thing is really interesting.
BP Maggie, I want to change tacks for a second and talk a little bit about your current role. Can you tell us a little bit about what it is you do? And I think we should probably say there is a connection. Joel Spolsky, who was the cofounder of Stack Overflow, now works at HASH and that's where you also work. So tell folks a little about where you work, what it is you do, and sort of what that company is all about.
MA Sure. So I'm currently Head of Design at HASH, which yes, we have a common cofounder. So Joel Spolsky founded HASH with David Wilkinson who currently runs it as chairman as well. I'm trying to think of our elevator pitch instant phrase, but essentially we are building platforms that help people make better decisions, and that manifests in a number of ways. We worked on simulation software a lot previously, so there's like a free modeling software where you can put in a ton of data and it'll run simulations of possible outcomes for you which is really neat. We're currently working on a platform that is more around data integration on ontology, so that's like teams or even individuals being able to import data from all the various sources that you have data from, like Asana and GitHub, Snowflake, even the bigger databases, put it all into one system and then create what we call ontologies on top of it, so that's defining things like people, companies, maybe PRs, whatever things that are concepts in the human world that we need to tell the computer exist, it's a system to be able to create that and then to use that model data to then be able to run queries, to write up documents that have dynamic data in them. So it's kind of like an all-in-one decision-making workspace. But one thing that we've been working on kind of related to that that we launched earlier this year is called the block protocol, and this is something that is complementary to our more main product but is an open source protocol that is currently in a draft spec, so it's not a fully finalized released version. But it's a protocol that allows essentially components, like React components, web components, anything that we consider a singular block that does a single thing on the web, it allows it to talk to applications, a third party one I should say too. Any third party component can be embedded into any application as long as they both follow the protocol and it allows them to do CRUD operations between the two, so, create, read, update, delete are the kind of standard programming operations. So imagine an iframe or oEmbed that has the ability to read, create, update, and delete data, obviously with the app’s permission. But it's trying to create a protocol that standardizes that for people.
CF Very interesting.
BP So, this is sort of like if there was this common language then there's almost like an API relationship between all of these elemental units that people are using for web design, and maybe in that way things can be more interactive. I have this iframe and it's on my website, because I love basketball every morning it pulls the top video from XYZ because it can speak to that other website or app or database.
MA Yeah. So the components, we call them blocks, and it's very much framed around the idea of, have you guys seen block-based interfaces like Notion or WordPress, Gutenberg are kind of the really big popular ones.
BP You're talking to a Notion fan and a WordPress user here so we're all over it.
MA Yeah. Excellent. Good. Okay. You're onboard. So one of our goals is, you know when you type slash in WordPress, you have your picker list of blocks, and it's a kind of limited list of blocks, right? It's whatever the Notion engineers and the WordPress engineers have the bandwidth to build themselves. And there's all these other components available in NPM. If you search for React components on NPM it’s thousands and thousands. But you can't, as an end user, as someone who's not a programmer, you can't put one of those components into your blog post because you don't have the ability to, you don't know code. But what if we could have blocks that were interoperable between platforms like Notion or WordPress or any block-based application? That's kind of what we're going for. We think the protocol will enable, especially with these block-based editors, users to have access to a much wider variety because independent third party developers could build blocks, and as long as these blocks follow the protocol and the websites or apps follow the protocol, the blocks can be embedded into the app without any developers having to do the grunt work because it has the data protocol written in.
BP Here's the new elevator pitch: So we built a custom block that embeds at the bottom of every post that has the latest podcast. Ceora could take that and put it in her Notion file– don't you have this thing that turns it into a webpage now?
CF I do!
BP So then you don't have to update your personal webpage anymore, you can just grab our custom Stack Overflow Podcast block and boom, it's there for you.
MA Yeah, yeah. That's exactly it. That's a good one.
CF That’s really cool.
MA And Notion’s really interesting in that people are using it as a website builder, because there’s another kind of group of these like Glide or Retool or there’s a few others where they're making it more like the whole point of it is to build a low-code no-code website and these building blocks are usually a large part of that. So I'm also really interested in it from the angle of empowering non-developers to be able to publish more interesting, more interactive, more rich dynamic media to the web without needing to know HTML and JavaScript to do it.
CF I love that. I'm all for making that kind of stuff easier for everyone to do. That's really cool.
BP This podcast is all about making your personal website better, Ceora. That's what we're all about here.
MA That is the goal.
BP That is the goal.
CF I wanted to ask you, you worked as an illustrator, UX designer at Egghead and then moved to HASH as the Head of Design. What has that transition been like?
MA So I was at Egghead for a fairly long time in tech standard years where everyone moves every six months. So I was there for five years and I spent the first three years as more of an illustrator/art director and the last two years I moved into more of a UX and product design role because I was just more interested in that side of things. I still love illustration but I was so drawn to the kind of anthropology side of doing research and understanding of products, more like business and marketing kind of tactics. So the jump to HASH was a little bit of a change in that I got to step into that more in terms of thinking about, on a product level, how you kind of make design decisions that are very much influenced by market research and the overall company's goals, rather than just being focused on like, “What color should the shadow on this dropdown menu be?” You kind of have to do both. And I had done quite a bit of hiring designers at my job at Egghead, so that helped me a lot with more of the management and leadership side of things. And we're still small at HASH, but hopefully we'll be growing soon. We're currently going to be raising our Series-A at the end of this year, so we’ll hopefully be hiring so I don't feel too unprepared for that, but it's definitely a role I'm expecting to challenge me in many ways and get to grow into for sure.
CF That's awesome. That's very cool. What I wanted to hear is if you had any tips for aspiring designers, or designers who are trying to figure out their style or who want to improve, stuff like that. Any tips? I think you're a designer that a lot of people know of and admire so I'm sure a lot of people would be interested in hearing if you have any tips for that kind of stuff.
MA I suppose the best thing I can pitch is the Nielsen Norman Group website, I think NNG.com. It’s essentially like the Bible of all web design, UX design. It was founded by Don Norman who wrote the book, The Design of Everyday Things, which a lot of people might've heard of as kind of like one of these original texts. It’s founded by these two people who kind of invented the field of UX and they do really wonderful, original research and are constantly publishing posts like, “Exactly how to do modals in all the ways that we've looked at through user research.” You know, “How to do drop down menus” with tons and tons of examples. I feel like you could pretty much educate yourself on best-in-class design practices by just reading that entire website.
CF Wow. Cool, okay. Awesome.
BP Amazing what people give away for free on the internet these days.
[music plays]
BP All right, everybody. Thanks for listening. It is that time of the show. I'm going to shout out someone who was awarded a lifeboat badge on Stack Overflow. They came on and found a question that had a score of -3 or less. They gave that question an answer, now their answer has a score of 20 or more and that question has a score of 3 or more. Saved from the dustbin of history, spreading knowledge in the community. Today, the award goes to Sten, who explains how to detect transparency in a PNG image. What's the most efficient code to achieve this? We've got an answer for you. Thanks for listening everybody. I am Ben Popper, I'm the Director of Content here at Stack Overflow. You can always find me on Twitter @BenPopper, at least as long as Twitter is a thing that people use. You can always email us podcast@stackoverflow.com. Email us there and we'll shout you out on the show. And if you like what you heard, do leave us a rating and a review on your podcast platform of choice. It really helps.
CF My name is Ceora Ford. I'm a Developer Advocate who doesn't belong anywhere as of right now. Hopefully that'll be changing soon. We'll see. If you want to hear more from me you can check me out on Twitter. I spend the most time there online. My username there is @Ceeoreo_.
MA I've been Maggie Appleton. I'm Head of Design at HASH, and you can tweet me @Mappletons or at maggieappleton.com. I rant a lot about metaphors and interaction design on there.
BP Awesome. And if people want to check out more about HASH or they heard you're hiring and they’re interested, where should they go?
MA Hash.ai is our website. And if you're interested in the block protocol stuff we have it at blockprotocol.com.
BP Very cool. All right, everybody. Thanks for listening. We will talk to you soon.
CF Bye!
[outro music plays]