Nicole Weber – Keeping the flame alive: storytelling for open source #FOSSBack

In this talk, Nicole Weber, a staff designer at Mozilla, explores how to maintain creativity and authenticity in open source design. She discusses the concept of 'airspace', a term used to describe the increasingly homogenized aesthetic of modern cafes and digital experiences which often lead to generic user interactions. Nicole highlights the risks of prioritizing efficiency and standardization in design, arguing that this can lead to a lack of cultural meaning and personal attachment. She proposes the importance of storytelling, mission-driven design, and thoughtful visual elements—such as typography, color, and spacing—to add texture and personality to user experiences. Through a combination of practical steps and a critical mindset, she encourages designers to break from conventional expectations and create engaging, memorable interactions.

Yeah, thank you. So, um yeah, my name is Nicole. And I work at Mozilla as a staff designer. And this is a question I ask myself quite frequently, how to keep the flame alive. So, um today I want to talk about this question. Um and I'm here to chat about a few ideas I had around that topic, how to keep the flame alive, why storytelling and brand

are key to open source, and how to get started eventually. So, yeah, let me tell you a story. So, once upon a time, I mean, this is how all good stories start, I hope. So, once upon a time, I went to places and they all look like this one. I actually went to one that looked like this yesterday. Or they looked like this. And, you know, maybe

you know these places as well. Um and maybe you also go there and talk to the friendly barista. And you get your flat white. And it's all very pleasant and nice and expected. Um but they all feel strangely familiar. You know, all the places look the same, right? It's um they follow this neat color scheme. It's white, it's all caps, they have plants, they have concrete, there

is wood. So, how can that actually be? So, welcome to airspace. So, this is actually a concept that was coined by um Kyle Chayka, journalist, 10 years ago already. And he noticed, okay, airspace describes like this look of modern cafes, of Airbnbs, this is where the name is coming from, of co-working places around the world that all feel so similar. They are super clean, they're minimal, they're

Instagram friendly, and people just know what to expect when they show up there. So, I was wondering, what are we losing if everything, really everything looks the same? You know, maybe it's good. Maybe it isn't. But maybe it's this people are always and never at home. So, you know, you feel good, you know what's coming, it's very familiar, but it's also not very cozy. It doesn't offer

anything you feel attached to or you love. It's just like very generic. And this quote here is from French anthropologist Marc Augé, who describes this phenomenon, and he talks more about, you know, transient places like airports, um highways, shopping malls, more like impersonal stuff that lack any historical or contextual qualities. So, to exaggerate a little bit, it's like being stuck at the airport. I mean, it's a

nice cafe, and it feels much more curated, and it's very pleasant, but nevertheless, it's pretty much ruthless. Uh it could be anywhere, right? So, and maybe you know that feeling, too, right? Maybe you um not necessarily like the airport feeling, but the cafes. I saw saw some of you nodding. So, but maybe you also know that from a very different context. Let's say all the apps that

you have on your phone, or like the websites you visit. There's a sense of copy and paste. Everything looks strangely the same. So, you know, what's the problem here? So, the problem for me is that it's nice, it's pleasant, but it's also pretty dead. So, and it's hard to identify with something that is so very empty at its core. Or to put it in other words, so

this is from a science fiction book called The Three-Body Problem from Liu Cixin. Um have we succeeded? The prince asked, is that the proton unfolded into two dimensions? Yeah, maybe, right? So, I feel like everything is flattening, everything is getting pretty much flat. So, where did we lose the fun, Um and yes, it's common sense, but actually not much beats its uh readability. Has a bit of

a bad reputation, but you know, it's a good one. Um so, you know, maybe it's the numbers, stupid. So, everything looks and feels the same because everyone is optimizing, right? Everybody's looking for on the for the numbers. And um it's um it's optimized for efficiency, but not cultural meaning. So, everything is flattening out. And Rem Koolhaas, an architect, put it nicely. So, it's not just, you know,

a lot of people see that in different areas, architecture and so on. So, he said, if we simply let cyberspace run its course to a future determined by Silicon Valley, those libertarian-minded engineers will, paradoxically, lead us to cities shackled by algorithmic conformity. It would be a neural network, yes, but one that operates in lockstep. So, the same phenomenon we might see in digital also happens in the

cafes, also happens in the cities. what now, right? Um picture of a hungry cat. You know, I I want to use that moment as a bit of a prank because for me this feels a bit like preaching to the choir. You all work in open source. You all know how important the community is. You all know how important diversity and openness is and to just, you know,

the pluralism, to make it colorful, to invite everybody in and to look outside of the boundaries. I'm just here to, you know, just start this conversation. Probably have more questions than answers, but that's okay. I would love to, yeah, start a conversation with you all and entangle this together. And now I want to move us from meatspace into cyberspace, which are both very funny words. So, you

know, we are all familiar with like these tools and frameworks. They make all our lives easier. I'm a designer, so maybe I put something there that doesn't quite make sense to you, but I was like seems popular. you know, make some of that stuff really makes my life better, more efficient, but all these tools have decisions built in, assumptions, right? And I'm not even talking about all

the large language models and the new tools that that we have coming in. And it makes my life easier, but it I also give away agency. It makes a lot of decisions, you know. We used to pick my libraries and follow Apple's humans interface guidelines or material design, React, Next.js, Node.js, Tailwind CSS, you know, all you have like colors, everything predefined and that's good. But, it's not

just the frameworks we use. You know, it's also how everything looks, right? Every app has a feed. Um it's it seems to default. It's the endless scrolls. There are the little cards. Everything is has a like and a share and a save. And the algorithm defines what's on the top and what's at the bottom. Lots of decisions that are taken for me from someone. Um and all

of that is optimized to suck me in. To you know, I want just wants my my attention. And if you look at that, you know, everything looks basically the same. You're like, "Okay, if you use these apps every day, you're like, "Oh, that's uh whatever, LinkedIn or something, right?" Um but if you don't know, you're like, "I don't know. Could be anything, right?" Also, onboarding, it's very

standardized. You have like the three to five cards. You can swipe them. And then you have like the value prop whatever company it is and and they ask you for permission. In the worst case, they make you log in. Maybe you just stop using it right then. But it's a very ritualized entry. And um that's not adapted to the audience or anything. It's just like, "Oh, everybody's

doing it. Okay, let's do it, too, right?" I mean, it's not it's not bad. But is it is it good? I'm not sure. Right? So it feels a bit like the the pull of the average. Everyone does it. Everyone is copying it. And instead of just taking a step back and and like, "Do I need onboarding right now? Is that the right moment? Should I do it

now?" You know. Um even the fun is standardized, right? People are like, "Oh, wow, we need more fun." And then confetti shows up. So, yeah. I mean, I've been there, too. I also added some confetti somewhere. And um yeah, a few more. So, you know, all the apps have to have these very minimal save UI's. They have the neutral backgrounds, the little cards, the corners go from

round to not so round, a few years later again round. They have like their subtle shadows, they have their sans-serif fonts, and everything feels the same, you know? Our even our engagement it's it's gamified. You always feel like you got a push notification, you got to close all the rings, you got to you know, you can't break that streak, it's always ongoing. And last but not least,

this makes the experience feel really flat. It's like driving on the Autobahn. You know, it's it's okay. Car's going, but the landscape flies by. And uh, it's pretty uneventful and pretty boring, actually. So, before we continue, So, this is more for me than it's for Okay. It's very relaxing. I stole that from Headspace, actually. So, breathe in, and breathe out. So, you know, we've all come a

very long way, baby. So, I This is um, Fatboy Slim quote, I didn't make it up. Um, so I'm not saying, you know, throw it all out, let's pretend it's 1989, let's just, you know, nostalgia all in. That's that's definitely not what I came here to say, because it's 2026. I remember that. So, and on the UX design side, you know, we have like all of these

things and much more. We we do like continuous research, we have great accessibility standards, people hopefully all follow. We have usability heuristics and design system, and we We simple language, we experiment, we work together, we look is it performant, we try to be inclusive, you know, we do rapid prototyping, we do journeys, and we do experience metrics, and we measure, and we also improve, and we do

all of that. And yes, yes, right? Yes to all of that. I think that's great for a lot of people. But also give it texture, right? That just don't make it so flat. So, adapt it to your reality and your context because that makes it real. And now it is super duper technical part, um how to texture in three steps. So, it's also three M's. I was

like, that's that's good. Should use three Mission, mantras, and manifestations. So, but what does it mean, right? So, you know, uh let's start with missions. And um that's kind of like what's your story, right? Why is Why is the Why is the product the feature you're working on in the world? Um and what change do you want evoke in the world, right? What Why are you doing

it? What do you care about? What are your values? And what do you want to transmit through your product or through your community? And uh because I work at Mozilla, you know, I put like this uh Mozilla mission here, and I use that as an example to illustrate it. So, Mozilla's mission is to ensure the internet is a global public resource open and accessible to all. An

internet that truly puts people first and where individuals can shape their own experience are empowered, safe, and independent. So, that's great. I didn't write it. Someone write it wrote it a long time ago, so I could just take that one. And then we we thought about like, you know, how can we make that more actionable? Because it's it's a very long sentence. I can't even remember it.

I have to read it. So, we need to extract the important bits out of that. And so, we ended up with this list, right? So, keywords, it's should be global and public and open and accessible and people first and they can shape their own experience and they are empowered, safe, and independent. And this is how we want Firefox to show up. So, we went from this list

to these mantras, you know, Firefox is crafted with care, it's delightful, and it's empowering. And what that means is I should make more breaks, right? So, um yeah, crafted with care is our baseline. That just refers to we want to keep it open and accessible and we put that deliberately front and center because that's the foundation where everything is on top of. And um delightful indicates that

Firefox is warm, it's approachable, it's human, it's people first, it's designed by people, it's designed for people. And empowering makes sure people are in control. They can shape their own experience, uh you know, they feel safe and protected and they can customize how they want their browser to behave. and now, you know, how does all of that manifest actually? So, I'll just put focus purely on the

visual. Um there was a pretty good talk earlier today about um more the content side of things. So, I would if you haven't seen that, it was really good. I would recommend that. Um and uh so, now I want to talk about how to translate the mantras into a visual language, so typography, color, spacing, shapes, and so on. I will keep it more like high-level. Um, so

let's start with typography, right? So, let's look at all of that each of these tells its own story, right? These are all different types you can select. And each has their own personality. Some are more formal, some are more boring like the first one. Some are more fun or serious, right? So, Firefox for example uses this custom sans-serif. It's very geometric, it feels very heavy and very

confident and independent and also it's it's very simple but also distinct and someone put a lot of care in that thing here. It wasn't me. But so that it comes across as empowering and confident as it needs to be. Um, colors, that's a big one. Don't be afraid of colors. I mean saying saying the person wearing all black but you so you know, colors are they are

like a story, you know, they help us to convey a mood. It's like it sets the tone, it tells the visual story. It's just it's a indicator people get pretty quick. Um, and you know, you can use like more warm, use like red or orange to indicate or create a sense of, you know, also excitement and or you can use like more blues or greens if it

should feel more calm and so on. So, at Firefox we went all in on purple because we feel like purple speaks to the imaginations, gives you a sense of protection and so people I feel empowered and and can imagine can or feel free to imagine and explore. And then really quick because I think I'm running out of time spacing, right? So you can have like a bigger

grid or a smaller grid if you are more like you utilitarian app or you have like a dashboard kind of thing, you know, you want to reduce the space. Also shapes, right? Shapes are fun. I really like shapes. They create contrast. They break the grid. They draw a lot of attention. And then there is much more, right? This is was just scratching the surface, but with all

of these visual tools being mindful about it, you create a sense of hierarchy, you create drama, you create you guide attention and you tell your Last but not least, icons, pictograms, similar to typography, there's just a bunch of different ones and they all tell their own story. Oh, yeah. And if I have folks We we just got this new mascot. It's called Kit and it's kind of

kind of cute, so I couldn't you know, I wanted to just put it in there. And here is Kit saying saying goodbye hopefully and then jumping into the little you can do it yes hole. right and then it's coming back yeah, because it's a loop, but that's kind of so we're almost there. So you know, we looked at all those nice cafes and the airports and we

talked about science fiction and typography and colors and spacing. We saw Kit just a few minutes ago and relax we relax or I mainly relax somewhere in the middle. we've all come a long way, right? So if I could have a wish, I would want us all to relax much more all the time, you know, don't watch that video on 2x. Just just watch it in the

normal time and don't you know, don't fall for average. give it texture. Keep it fun. Maybe don't use that confetti, but you know, create memorable moments. Just think about it. Break break with the expectations. So, challenge the default. Don't accept something because it's already there or you know, someone else thought it's a good idea. And I think this critical mindset creates tension and tension creates friction and

friction is good, right? It it, you know, makes space to create something new and maybe something better. Yeah, and I really love this word. So, be delivered especially in these times. Uh think something through uh slow and careful, intentional and planned. And yeah, go and write your own stories. Think about the values you care about and then make them tangible and experienceable for everyone. Thank you. Nicole

Weber Olsson, everyone. Thank you very much, Nicole, for your um talk. I really enjoyed it. I had some fun. Um I was wondering when I saw the mission and uh what you uh like the next step was seeing what what could what could be the mantra. And when I looked at it, I was thinking, "I yeah, I could do that with AI or so." Um but that's

not what you did, right? uh so, it's it's uh isn't it the other way around? You first have these keywords and then you build the mission on the keywords. Isn't that the way you do it? Not not just having a mission and then drawing the keywords in order to have them for the mantra. Maybe. I mean, in our case, the mission was already there, so that was

not debatable, really. Um, and then I think I think you have a good point that you I mean, we could just throw it in AI and some average scenario piece would come out. But I think the point here is that you got to um get everyone on board and make everyone believe in it, and you do that by just making everyone work on that and just use

their little brains uh to just think that through and also have like this conversation and discussion. You know, why should we have Crafted with Care? Isn't that like how we work, right? That seems weird. Yes, but right, and then you have this discussion. And then after when you come out of that process, people are much more likely to know what it means when they just see one

words because they have like the context. But I think right, if you're starting from zero, you probably start with the words. You're like, oh, I feel like we're this and this, and then you make it bigger from there, right? Yeah, that's a good point. Thank you. I've got a quite rebellious nature uh at the core. And for example, when we're designing in our startup the, you know,

brand identity, the the website and all of that, I wanted to go all in on, you know, on being crazy, on being creative, and being like that weirdo, 80% of rebel. But on the other hand, I've got my team saying, "Hey, you know, we're working with the public sector, we're working with the, you know, regulated industries. You cannot be rebel in there. You need to be boring.

You need to be that plain white with some, you slight accent. You cannot be rebel. Hide yourself." So, how to, you know, marry like being deliberate to our clients and to our reception, to our society versus being true to our nature and expressing it in our, let's say, website or communication. Yeah, is it good one? I don't think it's it's it's not a binary. It's like either

you're totally boring or you're totally off or or so I would just push push it a little bit, right? just make the space a bit bigger. Don't you know, also do like oh everybody wants boring. Yeah, why? Really? Or who said that? Is that really the case? I mean, I wouldn't subscribe to that that I think it's a question of experimentation and then just seeing how far

you can push it. You can push it every time just little bit further, right? Yeah, so this is a question related to an immediate need of mine. I'm actually designing some slides for an upcoming presentation and I'm wondering and and it and it sounds really cool creating like a mission statement for the presentation and then coming up with a mantra and trying to manifest that. But do

you have any more sort of practical advice for how you can kind of use these principles to create slides that will stand out and create memories for people and not not just be the generic kind of yeah. Yeah. Yeah, I mean I think it depends on the context. So first question, who's your audience? What what do you know, what do you want them to get out of

that? And then you you can you can see how far you can can push it, right? Also what makes you comfortable in the end because it's your presentation. So I would start and then the rest kind of like fall falls maybe hopefully in place from that. But it's at least a start, right? And that's sometimes the most difficult thing. So thank you. So we're keeping the flame

Also I think in in false when we create stuff for like end users, not necessarily development tools or things like that, Sometimes we are basically replacing a commercial tool like our first step is get to the same point where the commercial tool is. And then the question is like at which point the should we think from the beginning about the texture because in the beginning we are

just trying to make a proof of concept or something get adoption and so on. So where where do we start trying to put put the texture in it and do you have like good and bad examples in in force where you saw nice texture there versus very bland is maybe not getting adoption because it's bland or something or or because it's just a straight copy so people

don't understand it. Right. I mean I work at Firefox so I'm in the same boat um kind of uh because we always you know we have all these big competitors and a browser is for most people utilitarian app, right? They they don't sometimes even know in which browser they are what and so you we kind of learned over the years that yes you need to have like

be you know near the expectation that people have coming from one of the other browsers. But if you don't manage to stand out they'll will forget you, right? Why should they stay around? So I think kind of like yes to both. I I totally get it that you need to match what's there but you know don't match too much and then you can think of like I

mean if you have like research is always great or just talk to people, right? Like and then figure out what what do they actually need or what what's something they don't get from the other tool. You don't even need to start building. You can just put them in front of the other thing and then be like how is that going for you? And then learn from that

and then you know just uh small small steps and see see where where you end up. Yeah. Huge round of applause for Nicole Weber.