Working on Thunderbird. UX and UI challenges of an Open Source project.

Posted in Updates

If you already follow me on Twitter or on my YouTube channel, you might already know that I’ve been working at the Lead UX Architect at Thunderbird for a couple of years now, and if you didn’t know that, well, surprise.

Even tho I’m very vocal and open about my job, thanks also to the weekly live hacking sessions I stream on YouTube, there are a lot of aspects of my work that are not known. And even if Thunderbird is a very famous Open Source project, there are some areas that are not fully known, especially when it comes to trying to update the UI or change the UX of a software that has been around for 15+ years.

Getting comfortable with the UI

The first thing I did after getting hired was taking a deep dive into the current status of the interface, trying to analyze why it was done that way, while trying to catch up with years and years of feature requests or improvements, alongside studying the source code.

I’ll spare you the struggle of understanding the code of such a massive application (maybe a good topic for a follow up post?), and instead I will focus on the interface. To put it nicely, my first reaction of using Thunderbird was very far from “beautiful” or “easy”…

Thunderbird 68 on macOS

The overall structure is pretty standard, with a 3 vertical panes layout, and the central area divided in 2 horizontal panes for listing and reading messages. The problem was this feeling of “patchwork” I experienced while using it.

The program didn’t have any predominant color, with the overall interface trying to inherit the styling of the Operating System currently in use. Some of the icons were simple SVG lines, but others were complex PNGs, with a variation for every OS.

The overall experience was a bit messy, with almost every action triggering a popup dialog with a lot of fields and text, making everything look cramped.

Some of the dialogs were also auto-resizing based on the user input, and that was jarring to say the least.

The old Account Wizard

Now, don’t get me wrong, I’m not criticizing anyone, and I’m not pointing the finger against anyone else. Developers and designers at Thunderbird did an outstanding job throughout the years in spite of the challenges. In fact, Thunderbird is not easy to maintain at all.

Thunderbird is built on top of Firefox, literally.

Firefox is a browser, which is built partially in C++, Rust, and JavaScript. Thunderbird, is an email client that runs on top of Firefox, which allows Thunderbird to be written almost entirely in JavaScript (with some parts in C++) due to the fact that we’re basically running a program in the browser.

This makes it kind of like Electron, but better than Electron. The problem with this approach is that whenever something changes in Firefox, it will inevitably affect Thunderbird. We also need to remember that Firefox has hundreds of developers updating the software daily, meanwhile Thunderbird has around 14 active developers taking care of it.

You can imagine how difficult it is to keep the project stable when the architecture underneath changes almost constantly, while trying to implement new features, fix bugs, and release updates on schedule.

So, all of the “negative” things that I’m saying against Thunderbird are just my professional opinions from a UX and UI point of view, and are not in any way a critique against anyone.

With that said, let’s continue.

The first “impact” with the community

My first reaction after using Thunderbird, and learning its code base, after the first couple of weeks was something like “I have to redesign everything from scratch!”

Since Thunderbird is an Open Source project in every aspect, it’s also Open in terms of design and development process, keeping everything open to gather feedback from the community. So, after creating those mock-ups and feeling super excited about this new challenge, I released those designs to the community, hoping to get everyone excited and interested in a new direction, more focused on usability with a refined interface.

Oh boy, if I was wrong…

Some users liked it, very few loved it…but some users hated it, and they hated it very very much.

My first reaction was thinking that they didn’t understood what I was trying to do, or that they were so used to the old interface that such a drastic change would be obviously shocking, but nonetheless, I couldn’t understand what was behind the extremely passionate (and sometimes borderline aggressive) negative stance.

So, I decided to engage more with the community, taking the time to use Thunderbird for everything, not just emails, and trying to stop relying on other web or mobile apps to do the things that Thunderbird can do.

I’ll spare you the long and tedious months of sharing proposals and getting rejected, or asking for feedback and getting messages with a very stern “you’re just a kid and you don’t know anything” (it’s nice to be called a kid when you’re 35), but instead I will focus on what I was able to achieve thanks to a positive and collaborative discussion I nourished with the community and the other developers.

Small victories

A lot of things changed in the 2 years I worked at Thunderbird, and from my personal point of view, a lot of things have improved and we’re light years ahead compared to where we were before.

Other than having a cleaner and more organized code base, a solid and skillful development team, and more organized goals, we were able to land some substantial improvements to the UI and the UX that I’m really proud of.

All of these changes wouldn’t have been possible without the outstanding work and support of everyone involved. Just to be clear that this was a team effort, and even if I proposed a lot of UI and UX related changes, I wouldn’t have been able to do these things alone.

A cleaner interface

A lot of old icons and old CSS were removed, making the UI easier to update, with a focus on a more native look. We updated all the icons to respect the Photon design style of Firefox, inheriting a lot of good stuff, and making the management of visual elements way easier across multiple OSs.

The Folder pane now supports multiple mode (from v87), allowing users to better customize their folder pane to serve their needs. We also started relying more on inline panels and “door-hangers”, removing popup dialogs as much as possible.

The biggest and most challenging rework was done on the Compose window, where we introduced a “pill-oriented” approach for multiple addresses, a new Attachment bucket (from v87), with universally discoverable shortcuts to quickly access the most important elements.

Another one of my main goals was to start implementing a tighter and more unique brand identity by relying on recognizable iconography and a consistent color palette. One of the first things we did was redesigning and rebuild the Account Central page, to offer a more welcoming and guided experience for first time users.

And of course, a good chunk of our time was spent on improving the Dark Mode support for all the OSs, because Dark Mode is all the rage now.

It’s a train that never stops

These are just a few examples of all the things that landed or will be landing in the upcoming versions of Thunderbird, and more exciting things are just around the corner.

The development of Thunderbird never ends, with Daily builds, monthly Beta releases, and a development cycle that could crush you if you don’t pace yourself.

Being part of this project thought me may things, opened my eyes on many different aspects of usability and accessibility, and enabled me to work and improve on a piece of software that empowers almost 30 Million users around the world.

I can’t wait to see what we’ll do next!