How Firefox's New Mascot Kit Was Designed to Represent Privacy and Playfulness

We debated a lot about the tail-butt connection point. It just wasn't right. Hello and welcome to Outside the Fox where we explore what's happening online and why it matters. I'm Kim Horcher. And I'm Steve Flavin. And if you've updated Firefox recently, you might have noticed a little bit of a glow up. We have an adorable new fox mascot named Kit who uh you actually got a little sneak preview of a couple months ago. Yes, I secretly got to meet Kit and now the world gets to meet Kit. The Kit is out of the bag and in fact uh we had the opportunity to interview the brand team and unpack everything that goes into uh the creative expression and um just all of the work and

thoughtfulness that goes into something like this. Right, there's a lot more than I thought. So, let's check out that interview. Hey everyone, it's so exciting to catch up with you today. Um just a little context for the audience. I used to be on the brand team, so these are my old colleagues. Um do each of you want to give us a little intro? Yeah, I can start. I'm Mary. I'm a senior brand lead on the brand team. Uh Steve and I have been working together at Mozilla on Firefox for years now. I think it's been 7 years for me. I'm based in Minneapolis and really excited to be on the podcast.

I'm Jane. Uh you could call me an honorary member of the brand team, but uh I sit on our UX side thinking about how the brand intersects with product uh and through our design system. Uh I've been at Mozilla for 4 years now uh and really love everything we do here. Yeah. So, let's just dive right in. Um internally, we all got a sneak peek as some of this as you were working on it and particularly our new mascot Kit um who kind of stole the show and our hearts. Um can you walk us through this uh brand refresh and the role that each of you played in bringing it to life? Yeah, so it uh it started at least a year ago and we wanted to make sure

that it was extremely cross-functional throughout every facet of the company because it was going to be really important that people who work in marketing really know how to use this new brand. People who uh work in the product side. People who work in engineering strategy, like kind of all over. And so, we made sure that it was a very like uh large group that kicked it off. And the way that we wanted to do that was designing a brand that can really signify those things that we stand for. And so, that needed to come to life in a spirit of being fiery, fiery about our mission and the things that we're doing for the betterment of the internet for humanity's sake, not for shareholders and um you know, all the greedy

billionaires. Uh so, that we can be playful. The internet is supposed to be joyful and wonderful and funny and quirky and surprising. And it's starting to get kind of a little bit uncertain with the way that it's headed and all of the ways that it's hard to know how to trust it. And we also wanted to be really genuine and make sure that people understood that we understand what it's like to be a user of the internet cuz we are too. So, we wanted to create a brand that's really for people. And so, everything that we did was with that in mind of the betterment of humanity. And so, the brand that we landed on is a brand that really connects with people at that emotional level, really reminds them that you can trust Firefox, it has your

back, it has your best interests in mind, it's backed by a nonprofit foundation. And so, it is all about fulfilling its mission, which is to keep the internet open, accessible, transparent, and free for all. And so, that was really at the cornerstone of what we were trying to do with the new brand. I'm thinking back to what Mary said about that first day we were all together. And you know, there was so much energy and we weren't quite sure what we were going to do. But we knew we were going to come out of this with a mascot, I think. Um which is really exciting. Like something we all felt is like we have this character, we have this logo that like for a long time was like a fox around a globe. But we're like, who is this really?

Uh and I think this was the moment to define that. Uh and we had to like figure that out as a team. Uh and really like build those details. Um and then think about what we were going to do in product to tell that whole story. Like it's not just something we wanted to do on social media and like have this fun little character. This is something we wanted everywhere. Uh that like tells a real story about what we're about. Totally. Um you touched on this, Mary. Um I want to unpack a little bit. It's worth noting that we updated the brand expression for Mozilla a couple of years ago. Um and in fact, I was still on the

brand team when we kicked that work off. Um so, it was really cool and inspiring to see that roll out. Um and now we've done it for Firefox. Something that I think a lot of people don't realize is that brand is more than just visual. Um a lot of folks hear brand and they think about a logo. It's a little bit more nuanced than that. Um Mary, can you unpack that for us? Yeah, I mean honestly, if you really wanted to distill it down, brand is vibes, you know? It's it's the way that you feel when you're using a product and even besides the product itself. Of course, we want people to use our product. It's wonderful. But we also want our brand to transcend that. And so, it can play in the zeitgeist. It can be in social media

just being funny and talking with other brands or just entertaining people and giving people a sense of the personality of the brand. And having people really feel that personality, too, so that they kind of get to know it and they know what to expect and they remember it, too. And they would even want to like see what your reaction is going to be to a certain video that somebody made about browsing. They would want Firefox to pop in there cuz they know Firefox is going to say something cool or funny or irreverent or whatever it might be. So, having people know that vibe of your brand and having them love it and appreciate it and

remember it is super important. And I think that's what differentiates it from just the experience of using a product itself. Yeah. Um Jane, I wonder if you can expand on that a little bit. Um uh you mentioned um you know, to a certain degree, but um about how brand and product work together. Um and in particular, how we value accessibility and inclusivity and um how we're thinking about those things um as they relate to the Firefox brand expression. Yeah, it's really in Mozilla's mission to be accessible. Uh you can interpret that in many ways. So, it's accessible to like all devices or

accessible to all users. Um and so, we really thought about that for the brand work. Um Making sure that we put something out there that everyone can access and we continue to think about that in the product as well. Thinking about like anytime we have animation, how do we make those animations delightful for someone that um uses reduced motion, which is basically like it'll turn that motion off, but like still have little aspects of it. Um there's ways to do that in a branded way, so it feels like it still fits, you know, all of the Mozilla story, but then meets the user where they're at. Um and really gives that moment of delight that ties to how they use the product. Um and I think that's really exciting.

Um it's a lot of fun to think about how can our brand show up in different ways in the product from like color contrast to motion um to even how we talk to people. it's all a big piece of that. One of the big ones I remember, too, was the um we had to really watch out for the way that the tail, Kit's tail, interacts with typography and letters and headlines and stuff like that because the you know, as a designer, your impulse is like, let's use that tail, you know? Let's weave it in here. Let's get fiery. Let's get fun with it. Let's like really make it like lick around all the letters, but that's not very accessible for people who really need a little bit of clarity to be able to read a word, you know? It can be inaccessible

for anybody with eyes if there's too much tail. And so, even just something as that seems kind of silly is actually really important that you don't want to go overboard, you know? You still have to make it readable and have fun at the same time. Yeah. Well, that's a great segue actually into uh circling back to Kit and um talking a little bit about the process of creating Kit and maybe some of the key design decisions and um you know, considerations. I'm sure you both have a POV on this, but do you have any um you know, anecdotes or uh discoveries or learnings uh during the process? Jane, do you want to go first?

I will. I will say I've never had so much fun in my career before. Like coming to work every day and thinking about how to like create a creature that's this cute, but also like has so much like importance and like story in every piece and every uh like movement and bend has never been more fun. Like I uh even like every day now as we discuss like how does Kit's head bend or like Kit's tail move? It's just a continual like delight. One of the ones that I thought was uh most hilarious was we debated a lot about the tail-butt connection point and how sometimes it just wasn't right, you know? It would be too thick, too thin, skinny. Like the connection needed to really feel solid, but also like agile

cuz Kit is, you know, running around and leaping everywhere. And um as Jane mentioned, it was really fun to like think about all those various body parts and, you know, nuances. And it was also interesting, too, because um JKR, the agency that we worked with, when we first started kicking them this off to them, we'd initially gone like pretty blue sky. We were like, "Show us what you got. Like, what if you could just kind of redesign Firefox from the ground up, what would it look like?" We always kind of knew we wouldn't go all the way, but we wanted to see what they had, you know, just to see like where we would maybe need to like reel things back in. And they did go blue sky. They showed us

things that um I think they might have even shown stuff like without a fox, but then they showed foxes that were like, you know, just an outline or a silhouette. They showed foxes that were very cartoonish, some that were more realistic, some that were like, you know, oranger than others. I mean, there was just tons of variety there. Um they really like were creative with it and gave us a lot to work with. We ultimately decided to try to stay pretty true to our roots. Our logo is one of the most recognizable, iconic pieces of our brand identity, so we knew we didn't want to like walk away from our logo. And they definitely proposed logos that were wildly different than the one

we're all familiar with. Well, we knew that our logo needed to stay because it's it's the thing that people can remember. If they're going to go onto [clears throat] their phone or their laptop and go browse, they need to be able to like instantly see that logo, fire it up, and know that they're there, you know? But if you change it, they might not be able to find it as easily again. So, that's kind of a real risk to the product and the brand. So, we wanted to keep the logo, but pull the little critter out of the logo and really like just see what it can do and bring it to life. And so, that was super fun. And even having that constraint of the way the logos the logo looked helped us

understand that we wanted to stay true to it, but evolve it a little bit and see like how it could move and the shape that it would make. And we're still learning about like what does it look like to look at Kit from behind, for example. We just are reviewed a drawing last week that was like Kit from behind where it's like mostly tail and the butt and then Kit's off, you know, if Kit is trotting off into the sunset kind of a thing. So, we're still learning a lot about just different ways that Kit can appear in illustration and animation. And not only that, but in IRL, too. We've got our Kit plushy, which I know all of us have. I see it in the background of Jane's Oh, hi there. Oh, yeah, we've all got like multiple Kit uh you

know, IRL uh full plushies. So, it's also one of the ways that Kit can come to life. And we're working on making a mascot costume, which is going to be awesome. Uh it's, you know, looks a lot like this, but imagine like a giant one. Human-sized. Yeah, I love it. Um speaking of logos, actually, um you touched on this a bit. I um I love the current iteration of our logo. So, I was delighted that we're keeping the logo and it's sort of an extension of um you know, the colors, the gradients, the um the flavor um that was already in our existing branding.

There's actually another logo from 2019 that we don't use anymore, and I would love to officially address it in this video because I still see it pop up from time to time, like in press articles or even agencies that work for us um because they do a Google search and they find it and they think it's our new app icon, and it's not. They're very confused. What actually is this old logo and why did we move away from it? Yeah, that was created back when there was an idea around trying to position Firefox as more of a parent brand over uh you know, multiple products, which I think it could to a certain extent still be, but it didn't really leave room for Mozilla to still also be a parent brand over Firefox and over things like Anana

and you know, other parts of our business that aren't necessarily have anything to do with a browser. And so, it didn't make sense to try to represent that parent brand when we have Mozilla doing that job already, and I think a lot of people were starting to get confused by that parent brand logo because we still always had our Firefox logo that didn't go away, but then this parent brand logo started floating around there and people didn't even really know how to use it cuz it just wasn't clear, and a lot of people mistook it for the actual logo itself, and they thought we killed the fox, and there was a whole bunch of fervor about it. We did not kill the fox. We're not going to kill the fox. We love our fox.

Our fox is here to stay. Uh but the parent brand isn't really serving us anymore, and it just wasn't as useful as I think people envisioned that it could be, and especially when we redesigned Mozilla in 2024, that really solidified that like Mozilla is our parent entity, and we've got Firefox in there, too, as our um key product and um the pioneer that we know it to be. Yeah. That's interesting, you know, it was a moment in time. There's there's different explorations and learnings that come out of that. Um and so, um yeah, I appreciate you breaking that down. On the subject of Kit, um I noticed a few comments online wondering if Kit was some kind of virtual assistant like Clippy um pops up and gives you suggestions. Um

can we officially dispel that rumor? We can. Kit is not a Clippy. Kit is not an AI chatbot assistant. Kit is not something that's going to like make you do things or, you know, try to like involve itself in your life. Kit is meant to be there as your companion through the internet, like an emotional emblem signifying the fact that Firefox has your back and you're you're in good hands, your privacy is going to be protected, you're always going to be put in control, you're going to be given choices. It's all about your experience and just reminding people that's what Firefox stands for. And so, Kit is really uh a symbol in that way and meant to be there as a companion, but not as a distraction, never as something

that's going to like slow you down or get in your way. That's super important. Yeah, for sure. I think with browsers and like productivity software in general, there's this sense of like, you know, it's very bland and corporate and kind of vanilla. And um there is something joyful about just having like a little spark of character um as you're browsing. Um it's there in the background, you know, it's not in your face, but um you know, just a little personality that I think we all appreciate. Um this is just for my own curiosity, but I'm sure others want to know, uh what's next for your team and for the Firefox brand?

Yeah, we're working on all sorts of projects. Uh one thing I'm really excited about is we're actually working on a sonic brand identity for Firefox. So, for those who aren't familiar, that's branded sounds. So, we're we're going to be engaging our community to help us build this. We're going to be asking people to submit sounds that remind them of Firefox, remind them of the internet, and then we're going to take inspiration from those sounds that people have submitted and try to come up with sounds that could represent things like Kit making a noise, for example. What does Kit sound like? Uh our logo itself, you know, when the logo like spins or, you know, um and any sort of animation with the logo.

Also, uh a notification sound if people were to enable notifications. There could be a lots of different avenues that we could explore with it. So, I'm really excited for that. Um then I'm also excited for a mascot costume to appear. That's going to start hitting our social channels pretty soon here. We're um we're it's in the process of being sewn up right now, and it's been fun to see like the work-in-progress photos. We're also expanding our library of all sorts of different Kit animations, different Kit illustrations, different ways that Kit can engage with certain props and things like that. We've got Kit engaging with like a clock or a box or, you know, different an error message symbol, things like that.

So, it's been really fun to just explore what Kit can do and what's like too much and what's not enough and turn the levers up and down and really get fun with it. Yeah. I am so excited to see this live mascot costume. Um I think there's a couple things coming up that are next on the product side. So, we are doing um a refresh um of how the brand actually shows up in the product. So, you'll start to see more Kit in there, but also we have a little bit of a bigger project. It may have leaked a little bit. Uh you may have heard of Project Nova. Um but we'll come out with more information soon, and you can also, you know, part of Firefox

being open source, you can also check out some of the bugs we're working on. There's a huge history of that. Um but we're really going to infuse the brand uh into the work, thinking about how Firefox is showing up, how we use color, how the language sounds, um and then make sure that our navigation is clear, our menus are clear, um and just lots of work to set us foundationally forward, uh especially as we continue building new features. Well, that is a great note to end on, and unfortunately, that's all the time that we have, but we really appreciate your time, and it was so much fun to catch up with both of you. Thanks, Steve. This was awesome, so much fun. I

really hope everyone loves the new brand as much as we do. Yeah, thanks so much, Steve. This was amazing to talk about. Uh really excited about this work. Bye. And we're back. That was a great conversation with the brand team. That's right. Well, uh what did you learn in that conversation? I learned there's a lot more intentionality to all this than just looks alone. Yeah, indeed. And what we really want to know is what you think of the brand refresh. So, let us know in the comments. And don't forget to subscribe and download Firefox because you know, it's the best. We'll see you next time.