---
layout: default
section_id: portfolio
title: Thunderbird Style Guide and Usability Study
---
< div style = "background-color: #0A84FF;" class = "full new" >
< div class = "section-title new" >
< div class = "row" >
< div class = "medium-10 medium-centered columns" >
< h1 class = "wow slideInUp" style = "color: white; font-size: 2rem;" > Thunderbird Style Guide and Usability Study< / h1 >
< / div >
< / div >
< / div >
< / div >
< div class = "full text" >
< div class = "row" >
< div class = "large-8 columns" >
< img class = "lazy" data-src = "../images/projects/thunderbird_logo.png" alt = "" >
< div class = "spacing" > < / div >
< img class = "lazy" data-src = "../images/projects/thunderbird_2.png" alt = "" >
< div class = "two spacing" > < / div >
< img class = "lazy" data-src = "../images/projects/thunderbird_3.png" alt = "" >
< div class = "spacing" > < / div >
< img class = "lazy" data-src = "../images/projects/thunderbird_4.png" alt = "" >
< div class = "spacing" > < / div >
< img class = "lazy" data-src = "../images/projects/thunderbird_1.png" alt = "Usability Study" >
< div class = "spacing" > < / div >
< img class = "lazy" data-src = "../images/projects/thunderbird_5.png" alt = "Settings Redesign Study" >
< div class = "spacing" > < / div >
< / div >
< div class = "large-4 columns" >
< div class = "project-intro" >
< p > The < a href = "https://thunderbird.net" target = "_blank" > Thunderbird< / a > 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.< / p >
< hr >
< div class = "spacing" > < / div >
< h4 > Date< / h4 >
< p > < span > June, 2018< / span > < / p >
< h4 > Clients< / h4 >
< p > < span > < a href = "https://thunderbird.net" target = "_blank" > Thunderbird< / a > < / span > < / p >
< h4 > Category< / h4 >
< p > < span > Usability Study and Style Guide< / span > < / p >
< hr >
< a class = "button boxed blog" href = "https://ura.design/2018/07/05/thunderbird-style-guide" target = "_blank" > < i class = "fas fa-pencil-alt" > < / i > Blogpost< / a > < br / >
< a class = "button boxed black" href = "https://github.com/uracreative/works/tree/main/Thunderbird" target = "_blank" > < i class = "fab fa-github" > < / i > Sources< / a > < br / >
< a class = "button boxed identihub" href = "https://demo.identihub.co/thunderbird" target = "_blank" > < img class = "lazy" data-src = "../images/projects/identihub.svg" > Identihub< / a > < br / >
< a class = "button boxed thunderbird" href = "https://github.com/uracreative/works/raw/main/Thunderbird/Thunderbird%20Usability%20Study.pdf" target = "_blank" > < i class = "fas fa-globe" > < / i > Usability Study< / a >
< a class = "button boxed thunderbird" href = "https://github.com/uracreative/works/raw/main/Thunderbird/Settings%20Redesign%20-%20Sources/Usability%20Study%20for%20Thunderbird%20Settings.pdf" target = "_blank" > < i class = "fas fa-globe" > < / i > Settings Redesign - Usability Study< / a >
< / div >
< / div >
< / div >
< / div >
< hr >
< div class = "full" >
< div class = "section-title" >
< div class = "row" >
< div class = "medium-10 medium-centered columns" >
< h2 > Related projects< / h2 >
< / div >
< / div >
< / div >
< div class = "related-works" >
< div class = "row" >
< div class = "large-4 columns" >
< div class = "work-wrapper" >
< a href = "reproducible-builds" class = "work" >
< img class = "lazy" data-src = "../images/projects/rb_thumbnail.png" alt = "" >
< div class = "info" >
< h3 > Reproducible Builds< / h3 >
< p > Style Guide< / p >
< / div >
< / a >
< / div >
< / div >
< div class = "large-4 columns" >
< div class = "work-wrapper" >
< a href = "tor-style-guide" class = "work" >
< img class = "lazy" data-src = "../images/projects/tor_thumb.png" alt = "" >
< div class = "info" >
< h3 > Tor Style Guide< / h3 >
< p > Style Guide< / p >
< / div >
< / a >
< / div >
< / div >
< div class = "large-4 columns" >
< div class = "work-wrapper" >
< a href = "enigmail" class = "work" >
< img class = "lazy" data-src = "../images/projects/enigmail_overview.png" alt = "" >
< div class = "info" >
< h3 > Enigmail Rebranding< / h3 >
< p > Rebranding< / p >
< / div >
< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
