You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
14 KiB
292 lines
14 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Thunderbird Style Guide and Usability Study</title>
|
|
<meta name="description" content="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. W...">
|
|
|
|
<!-- Metadata -->
|
|
|
|
<meta property="og:site_name" content="Ura Design">
|
|
|
|
<meta property="og:title" content="Thunderbird Style Guide and Usability Study">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:description" content="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.[…]"/>
|
|
|
|
|
|
<meta property="article:published_time" content="2018-07-05T08:00:00+02:00">
|
|
|
|
<meta property="og:url" content="http://localhost:4000/2018/07/05/thunderbird-style-guide.html" />
|
|
|
|
<meta itemprop="keywords" content="Style Guides,Usability Study,Open Source Design,Thunderbird" />
|
|
|
|
<meta property="article:tag" content="Style Guides">
|
|
|
|
<meta property="article:tag" content="Usability Study">
|
|
|
|
<meta property="article:tag" content="Open Source Design">
|
|
|
|
<meta property="article:tag" content="Thunderbird">
|
|
|
|
|
|
|
|
<meta content="https://ura.design/images/blog/thumb_thunderbird.png" property="og:image">
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:site" content="@uracreative" />
|
|
<meta name="twitter:image:src" content="https://ura.design/images/blog/thumb_thunderbird.png" />
|
|
|
|
<link rel="stylesheet" href="/css/app.css">
|
|
<link href="/fonts/overpass/overpass.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/superslides.css"/>
|
|
<link rel="stylesheet" href="/css/slick-theme.css"/>
|
|
<link rel="stylesheet" href="/css/slick.css"/>
|
|
<link rel="stylesheet" href="/css/animate.css"/>
|
|
<link rel="stylesheet" href="/css/linea-styles.css"/>
|
|
<link rel="stylesheet" href="/css/linea-arrows-styles.css"/>
|
|
<link rel="stylesheet" href="/css/fontawesome-all.css"/>
|
|
<link rel="stylesheet" href="/css/style.css"/>
|
|
<link rel="stylesheet" href="/css/responsive.css"/>
|
|
|
|
<script src="/bower_components/modernizr/modernizr.js"></script>
|
|
|
|
<link rel="canonical" href="http://localhost:4000/2018/07/05/thunderbird-style-guide.html">
|
|
<link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class='contain-to-grid sticky transparent'>
|
|
<nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
|
|
<ul class='title-area'>
|
|
<li class="">
|
|
<h1>
|
|
<a href='/'><img src="/images/main/logo.svg" width="180.7px" height="56.5px alt="Ura Logo">
|
|
</a>
|
|
</h1>
|
|
</li>
|
|
</ul>
|
|
<div id="menu-toggler" class="right">
|
|
<a href='#'>
|
|
<i class="icon-arrows-hamburger-2"></i>
|
|
</a>
|
|
</div>
|
|
<section class='top-bar-section closed'>
|
|
<ul class='right'>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/blog/">Blog</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/events">Events</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/services">Services</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/request">Request</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown active">
|
|
<a href="/projects">Projects</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/logobridge">Logobridge</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="active">
|
|
<a href="/support-us">Support Us</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/about">About</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/contact">Contact</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/jobs">Jobs</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</section>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="full blog">
|
|
<div class="post single">
|
|
<div class="row">
|
|
<div class="large-8 large-centered columns">
|
|
<div class="post-content">
|
|
<h2 id="page-title">Thunderbird Style Guide and Usability Study</h2>
|
|
<p class='info'>
|
|
|
|
<span>July 05, 2018</span> by <a href="https://lushka.al" target="_blank">Anxhelo Lushka</a>
|
|
</p>
|
|
<p>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 <a href="https://github.com/protz/thunderbird-conversations/issues/967">redesign the Thunderbird Conversations add-on</a> and even now our email infrastructure is powered by <a href="https://protonmail.com/bridge/">ProtonMail and ProtonMail Bridge</a> via Thunderbird.</p>
|
|
|
|
<p>Unfortunately, <a href="https://blog.mozilla.org/thunderbird/2017/05/thunderbirds-future-home/">Mozilla moving away from Thunderbird</a> 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.</p>
|
|
|
|
<p>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 <a href="https://twitter.com/ryanleesipes">Community Manager, Ryan Sipes</a>, and a new Project Council was recently appointed. <a href="https://twitter.com/elioqoshi/status/972067552846319616">We didn’t hesitate to jump on board</a>.</p>
|
|
|
|
<h2 id="setting-the-stage">Setting the Stage</h2>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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 <a href="https://opentech.fund">Open Technology Fund</a> for supporting this work towards the Thunderbird project as part of its <a href="https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab">Usability Lab</a>.</p>
|
|
|
|
<p><img src="/images/projects/thunderbird_logo.png" alt="Thunderbird Revamped Logo" /></p>
|
|
|
|
<h2 id="new-logo">New Logo</h2>
|
|
<p>After the Firefox logo was revamped in 2017, a Thunderbird contributor filed a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1404648">ticket on Bugzilla</a> 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.</p>
|
|
|
|
<h2 id="usability-study">Usability Study</h2>
|
|
<p>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 <a href="https://osc.al">Open Source Conference Albania (OSCAL)</a> 2018. The tests were done with 5 testers from different backgrounds, asked to accomplish 9 different tasks. <a href="https://github.com/uracreative/works/raw/master/Thunderbird/Thunderbird%20Usability%20Study.pdf">You can read the final Thunderbid Usability Study here</a>.</p>
|
|
|
|
<p><img src="/images/projects/thunderbird_1.png" alt="Thunderbird Usability Research" /></p>
|
|
|
|
<h2 id="style-guide">Style Guide</h2>
|
|
<p>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 <a href="https://thunderbird.ura.design">style guide for Thunderbird</a>, based on the <a href="https://design.firefox.com">Photon Design system</a> 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.</p>
|
|
|
|
<p>We also create an <a href="https://demo.identihub.co/project/thunderbird#/">Identihub page</a> where you can easily access the Thunderbird assets.</p>
|
|
|
|
<p><img src="/images/projects/thunderbird_2.png" alt="Thunderbird Style Guide" /></p>
|
|
|
|
<h2 id="more-to-come">More to come</h2>
|
|
<p>Furthermore, we are helping with the <a href="https://github.com/thundernest/thunderbird-website/issues/31">redesign of the Thunderbird website</a> 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!</p>
|
|
|
|
<p><a href="https://ura.design/projects/thunderbird">Explore this work on our portfolio</a></p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="full light-grey blog">
|
|
<nav class='wrapper'>
|
|
<div class="row">
|
|
<div class="small-6 columns">
|
|
|
|
<a class="previous button boxed black" href='/2018/07/02/style-guides-go-beyond-aesthetics'>
|
|
<i class='fa fa-angle-left'></i> Previous post
|
|
</a>
|
|
|
|
|
|
</div>
|
|
<div class="small-6 columns">
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div id="cookieConsent">
|
|
<div id="closeCookieConsent">x</div>
|
|
This website is using cookies. <a href="/privacy-policy" target="_blank">More info</a>. <a class="cookieConsentOK">That's Fine</a>
|
|
</div>
|
|
|
|
<div class="full no-padding footer blue centered-text">
|
|
<div class="two spacing"></div>
|
|
<div class="row">
|
|
<div class="small-12 columns">
|
|
<p>Made with <i class="fa fa-heart" style="color: red;" aria-hidden="true"></i> in <a href="https://en.wikipedia.org/wiki/Tirana" target="_blank">Tirana, Albania</a><p>
|
|
<div class="one spacing"></div>
|
|
<ul class="socials">
|
|
<li><a href="https://twitter.com/uracreative" target="_blank"><i class='fab fa-twitter'></i></a></li>
|
|
<li><a href="https://github.com/uracreative/ura.design/" target="_blank"><i class='fab fa-github'></i></a></li>
|
|
</ul>
|
|
<p>Committed to Free Software, Internet Freedom, and <a href="http://opensourcedesign.net/">Open Source Design</a></p>
|
|
<p> Trademarks are property of their respective owners. All site content, unless otherwise noted, is licensed <a href="http://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0 International</a> by Ura Design</p>
|
|
<p><a href="https://tinyletter.com/uracreative/archive" target="_blank">Newsletter Archive</a></p>
|
|
<p><a href="/privacy-policy" target="_blank">Privacy Policy</a></p>
|
|
<div class="two spacing"></div>
|
|
<p class="back-to-top"><a href="#"><i class="fa fa-chevron-up"></i>Back to top</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="spacing"></div>
|
|
</div>
|
|
|
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
<script src="/bower_components/foundation/js/foundation.min.js"></script>
|
|
<script src="/js/jquery.superslides.min.js"></script>
|
|
<script src="/js/slick.min.js"></script>
|
|
<script src="/js/wow.min.js"></script>
|
|
<script src="/js/jquery.validate.js"></script>
|
|
<script src="/bower_components/countto/jquery.countTo.js"></script>
|
|
<script src="/bower_components/appear/jquery.appear.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/svg.js"></script>
|
|
<script src="/js/cookie.js"></script>
|
|
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
/ tracker methods like "setCustomDimension" should be called before "trackPageView" /
|
|
_paq.push(["setCookieDomain", "*.ura.design"]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytics.ura.design/";
|
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
|
|
<noscript><p><img src="//analytics.ura.design/piwik.php?idsite=2&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Matomo Code -->
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|