--- layout: post title: Thunderbird Style Guide and Usability Study author: Anxhelo Lushka link: https://lushka.al date: 2018-07-05 08:00:00 +0200 categories: images: - images/blog/thumb_thunderbird.png tags: - Style Guides - Usability Study - Open Source Design - Thunderbird excerpt: To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign in the future by conducting a small Usability Study specifically tailored on security features out-of-the-box within Thunderbird.[…] --- Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped [redesign the Thunderbird Conversations add-on](https://github.com/protz/thunderbird-conversations/issues/967) and even now our email infrastructure is powered by [ProtonMail and ProtonMail Bridge](https://protonmail.com/bridge/) via Thunderbird. Unfortunately, [Mozilla moving away from Thunderbird](https://blog.mozilla.org/thunderbird/2017/05/thunderbirds-future-home/) created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird. As a comparison, Firefox latest logo makeovers happened in 2010, 2013 and 2017. Respectively, the last update to the Thunderbird logo and branding was 2010. The good news however is that efforts to revitalize Thunderbird have gained momentum again. Monterail have visualized their vision of a new Thunderbird UI, Thunderbird itself has now a [Community Manager, Ryan Sipes](https://twitter.com/ryanleesipes), and a new Project Council was recently appointed. [We didn't hesitate to jump on board](https://twitter.com/elioqoshi/status/972067552846319616). ## Setting the Stage This marked the start of a wonderful collaboration. In Open Source we often times encounter resistance and hesitation to change. It's something we acknowledge and can understand, considering there are contributors who have been involved for years and suddenly someone out of the blue suggests doing a number of changes. We respect that. However the Thunderbird project has been welcoming to suggestions and help, allowing us to enjoy the process thoroughly beyond simply handing off the deliverables. To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign in the future by conducting a small Usability Study specifically tailored on security features out-of-the-box within Thunderbird. We would like to thank [Open Technology Fund](https://opentech.fund) for supporting this work towards the Thunderbird project as part of its [Usability Lab](https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab). ![Thunderbird Revamped Logo](/images/projects/thunderbird_logo.png) ## New Logo After the Firefox logo was revamped in 2017, a Thunderbird contributor filed a [ticket on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1404648) suggesting to follow Firefox' lead and redesign the Thunderbird logo according to the new Photon Design guidelines. Funnily, this coincided with our own experiments on how Thunderbird's logo could be like so we joined the conversation on Bugzilla. We want to thank the great support we got from Ryan Sipes, Thunderbird's Community Manager, who helped facilitate communication with the Thunderbird Community. The new logo will appear in Thunderbird 60. ## Usability Study Thunderbird was the first project we conducted a Usability Study on. This was possible due to Renata joining our team recently and expanding upon the services Ura offers support. Renata conducted user interviews during [Open Source Conference Albania (OSCAL)](https://osc.al) 2018. The tests were done with 5 testers from different backgrounds, asked to accomplish 9 different tasks. [You can read the final Thunderbid Usability Study here](https://github.com/uracreative/works/raw/master/Thunderbird/Thunderbird%20Usability%20Study.pdf). ![Thunderbird Usability Research](/images/projects/thunderbird_1.png) ## Style Guide We talk a lot about style guides as you might have noticed. In fact, recently we wrote an article about why they are so important. Thunderbird is no exception. We developed a full [style guide for Thunderbird](https://thunderbird.ura.design), based on the [Photon Design system](https://design.firefox.com) used by Firefox. As latter is quite extensive (Firefox use cases are way broader than Thunderbird's), we tweaked it to apply in Thunderbird's case. It's a living style guide and has lots of room for improvement in the future. However the next step is to implement all these design decisions. If the style guide describes patterns and guidelines well, but they aren't put into practice, the impact of a style guide is minimal. Hence, we look forward to see those changes be implemented and continue supporting Thunderbird with that task. We also create an [Identihub page](https://demo.identihub.co/project/thunderbird#/) where you can easily access the Thunderbird assets. ![Thunderbird Style Guide](/images/projects/thunderbird_2.png) ## More to come Furthermore, we are helping with the [redesign of the Thunderbird website](https://github.com/thundernest/thunderbird-website/issues/31) putting the style guide finally into practice as well. If you'd like to get involved, reach out to us or just contribute to the GitHub issue! [Explore this work on our portfolio](https://ura.design/projects/thunderbird)