Website Redesign

[elioqoshi]

(bringing this conversation from the Job Post @ryanleesipes posted on Open Source Design opensourcedesign/jobs#297 )

After talking with Ryan and the next steps for a potential refresh of the Thunderbird website,
@AnXh3L0 and me started a redesign of the Thunderbird website and this is how it looks right now as a mockup:

We would be happy to receive your feedback on the design and do changes where necessary.

Additionally, @AnXh3L0 had some CSS problems with the current site when he tried to do changes. Is there anything we need to keep in mind when working on the CSS? (sorry for the vague definitions, I'm no web developer)

[ryanleesipes]

Personally, I think this looks great (as you already knew). Perhaps @AnXh3L0 could point us at his own repo so we can look at where he was hung up?

Would like some feedback from other folks on what they think of this direction so we can move forward on implementing it.

[mkmelin]

Looks good, though the screenshot needs to use a default theme. And we need to think about the 6 items. Maybe it should be fewer, or not. But we don't ship Enigmail so that seems odd to have at that spot. "Contacts" is also a fairly bad selling points. Though I don't know what better selling points we should highlight.

[neandr]

Generally looks good.
With current items I would rearrange them:
first line - email, multi accounts, encryption
second - calendar, contacts, addons.
If thinking about other items: how about news, chat?

Maybe to add an item / button to link to a "About the Thunderbird Project" to inform about the history/current status /future and such .. and further readings.

[elioqoshi]

Looks good, though the screenshot needs to use a default theme. And we need to think about the 6 items. Maybe it should be fewer, or not. But we don't ship Enigmail so that seems odd to have at that spot. "Contacts" is also a fairly bad selling points. Though I don't know what better selling points we should highlight.

I forgot to mention that you should please ignore actual copy as they are placeholders. You know best what you'd like to highlight. Feel free to send me a nice screenshot which I can incorporate (my Thunderbird instance is way too messy)

[AnXh3L0]

Hi all,
As Elio said above, the mockup is merely a placeholder. We can discuss how the page will be organized and then work on implementing it.

I have had some issues with finding where the CSS files reside in because after changing them and re-building the website the changes are lost. We can discuss this here or at our Mattermost instance when we start working on the changes.

Cheers,
Anxhelo

[Sancus]

I like how this looks with one exception, I think that the white footer that we have now is better than the black Mozilla standard one and that's why I've kept it on thunderbird.net instead of importing the black one. This is also only the front page and I'm guessing you don't have redesigns for the many other pages on the site, so using the white footer would leave all those other pages the same.

That does raise the issue about what to do with the header on the other pages. The logo, text, and donate button could be used with the old background, but I'm not sure if the new background image looks okay on every other page we have.

[elioqoshi]

The current white footer is out of brand and not in accordance with Brand Guidelines. Also if you decide that you want to have your own brand identity and not depend on Mozilla (which is quite resource hungry), the current footer looks quite bland. You should stick to the canonical Mozilla footer and if you think that the Black looks so bad, we can change it (although I don't see why)

[Sancus]

Thunderbird doesn't remotely follow Mozilla brand guidelines. The white footer was designed for the current page design(sandstone, iirc is what it was called). The black footer was designed for the newest Mozilla redesign, which we don't use and imo it looks quite bad with all our pages that have a background gradient down to grey at the bottom.

P.S. We also don't want a "Mozilla" list of links in the footer, and we do want the social media buttons that exist there currently on thunderbird.net.

[Sancus]

Oh, and to answer the question about the CSS files: @AnXh3L0 I'd need to know exactly what files you're trying to change? If you change the less files in https://github.com/thundernest/thunderbird-website/tree/master/assets/less the changes should be passed into the built website after you run python build-site.py

[elioqoshi]

Thunderbird doesn't remotely follow Mozilla brand guidelines.

Why do we try to refresh to a Quantum style then and use the same typography as Mozilla? If it's for lack of resources to do something different, it would be good to know that as well.

[ryanleesipes]

Why do we try to refresh to a Quantum style then and use the same typography as Mozilla? If it's for lack of resources to do something different, it would be good to know that as well.

I'm not sure I understand what you mean @elioqoshi

[elioqoshi]

@Sancus meant that Thunderbird doesn't follow Mozilla Brand Guidelines, yet the updated Thunderbird logo is getting a revamp in a similar style to Firefox Quantum. Also the redesign of the interface is Quantum inspired. I don't think that would qualify as "not following Mozilla brand guidelines".

My other question was whether we stick to a visual style Mozilla has, because we want to, or because we have no resources to create a separate Thunderbird identity independent from Mozilla? This would be good to understand.

[ryanleesipes]

@elioqoshi In my mind, Thunderbird should be developing its own identity.

[Sancus]

I think this is a question of resources. Whether or not Thunderbird following Mozilla brand guidelines is more or less resource intensive really depends on the case.

For example, on their website, Mozilla is constantly redesigning things every year or two. We can't do that. So the Thunderbird website still uses sandstone(the old design) because to redesign the whole website we would need a designer and a front-end developer, and to keep up with Mozilla's very frequent redesigns, we would likely need those people on staff full-time. It's unlikely we would spend that much money on this.

In the case of Thunderbird itself updating the interface to Quantum, that's different, because I believe it's relatively simple for them to start using the Quantum code and assets to update Thunderbird. Thunderbird shares a lot of Firefox and Gecko code. And it only makes sense to update the Thunderbird logo to a similar style.

If we want to update the website -- and I mean the WHOLE website not just one page out of dozens -- to follow this design that's fine with me. Ryan is the one making a decision like that, not me. But there's already a substantial cost to redoing this one page. I just want the new footer and new header to look correct with all of our other pages, and the footer is both missing the social media buttons we recently added and also looks pretty weird with the old sandstone design in some places. Which is why I suggested just leaving it the same as it is now. This also comes with the wonderful cost of 0 hours, too, which is a bonus.

I want to keep things in scope: we are redesigning the front page, the header, and the footer. Not deciding Thunderbird's entire brand identity direction. "This is consistent with Mozilla brand identity and the old footer is not" is not a useful argument to me because I don't care about Mozilla's brand identity. I only care about the website looking good, consistent on all pages, and how many hours it's going to cost to implement that.

[ryanleesipes]

This is the beginning of a conversation as @elioqoshi and @AnXh3L0 get acquainted with where we are at and we get accustomed to incorporating design ideas from contributors. Designers would naturally want to talk about brand guidelines, especially when working on changing the website.

But @Sancus is right, we can't determine Thunderbird's entire brand identity in here. Fortunately, that conversation is about to begin elsewhere. Let's focus on incorporating the things we like from the mockup.

Leaving the footer aside, I think this is a great direction. I will work with @AnXh3L0 to tackle the header first and see how that looks, then we can look work on incorporating other pieces.

[ovari]

@elioqoshi Thank you for your mock-up.

Suggestions:

1. Remove the line “The New Thunderbird” as hopefully the Thunderbird website will always have the best Thunderbird version. Also, ‘new’ does not always mean ‘best’.

2. Update the Thunderbird logo
   

3. Inspired from the MuseScore frontpage:
   (a) Add a heading above your Email, Calendar, Contacts, Encryption, Multi Accounts, Add-Ons:
   Why Thunderbird?
   (b) Add “Completely free, no advertisements, no limitations”, “Open Source” and a “Free Download” button to the “Why Thunderbird?” reasons
   
   (c) Include a “Get Involved” button. Perhaps a section like the MuseScore frontpage:
   Thunderbird is built by an open-source community
   Supporters Developers Translators
Get Involved
   
   (d) Add “Search” to the header
   (e) Rename the “Download” button to “Free Download”
   (f) Include the Thunderbird version under the “Download” button

4. If the “Calendar” button is clicked on, does it go to:
   https://www.thunderbird.net/calendar/

5. If the “Add-Ons” button is clicked on, does it go to:
   https://addons.mozilla.org/thunderbird/

6. Same spelling for “Add-On” and “Addon”. For ease of translation and consistency with:
   https://addons.mozilla.org/thunderbird/
   the spelling should be:
   Add-on
   and the plural:
   Add-ons

Happy to provide more suggestions if you are interested on or off this list.

Thank you

[elioqoshi]

Thanks for the suggestions @ovari, as I said, the copy in the mockup is a placeholder and it shouldn't be taken into account, but your comments are welcome so they can be implemented once we are there. For now the most important thing is to get the CSS working

[ovari]

Instead of reinventing the CSS wheel, you might be able to reuse some code from the OpenShot website by @jonoomph:
https://www.openshot.org/

[elioqoshi]

Whatever works, I'm no Frontend Developer so that is up to the dev to decide upon.

[Fluotonic]

Hey everyone,

First of all, I'd like to say the guys at Ura have done an excellent work with the mockup! I'm a designer myself and I can tell when the job's done right ;-) Kudos to you guys!

Secondly, as a designer, I wanted to put in my two cents to the discussion here...

I'm fully aware of the lack of resources a non-profit organization may have. This is fairly common, obviously. However, I disagree with using this as an excuse for bad decisions. Sorry guys but I really believe it's a bad decision to only patch the current website because you want to limit our efforts. This attitude results EVERYTIME in a disaster, because you start fixing something and then something else breaks. It's a bit like trying to patch a hole in a rusty pipe... a pure waste. I've been working in web design for 20 years and it's always the same story: clients are too cheap, lazy or scared (or all at once!) to bring the necessary efforts (time, money, energy) to reach their goals. Come on, guys, we're taling about Thunderbird here! The email client we all love and the only free real alternative to Outlook! Don't you guys think it should deserve a bit more love and care?

Anyway, let's be a bit more constructive here. Here's what I think:

1. As briefly exposed above, I really think we should follow a professional strategy and rebrand the website in a professional manner. Users care about design and their choices are driven by emotions, more than ever before. Do you know 1Password, Evernote, Things, Tower? They all have in common an exciting user experience with a sleek and consistent design. And of course, they all have great success. I know, they're all paid applications, but I prefer to make it clear: it's not a valid excuse to me. They have a goal and they work for THAT goal, in the same direction.

2. In this regard, the mockup posted by elioqoshi is a great starting point. When I've seen it, I said to myself right away: "Geeze, now we're talking!" Of course, this is not perfect and it can be improved but it looks great already. About this point, I know everyone is mostly on the same page, so I won't elaborate ;-)

3. The next point is directly connected to the previous one though, and it seems to create divisions here: I'm talking about using Mozilla's style guides. My quick response to those who think we should not do that is actually a question to them: do you have anything better to propose? A longer version of this response would be : because we need a style guide for branding (see my first point), because Mozilla has already created one for them (they really did a great job!) and Mozilla is still (like it or not) the closest parent that Thunderbird has, and because Thunderbird is not rich and can't afford to hire a team of 50 developers full time... for all these reasons, I believe we have to follow their style guides. Just as elioqoshi righfully proposed to do.

4. Finally, I wanted to add that the website is crucial for business development (and get new users), but the app itself needs some major redesign as well. This means that until we get an exciting UI for Thunderbird itself, we won't be able to drive attention to it, at least as much as we should. Because again: users are more and more demanding in terms of UX, these days. Nobody wants to use an ugly app, right? Except, maybe, some old school programmers ;-)

To sum this up, I'm obviously here to help. So now is the time where I shut up and wait for your feedback, guys :-)

Thanks for reading this long post and Long Live Thunderbird!

[ryanleesipes]

Hey @Fluotonic - on points 1,2, and 4 I agree completely! We could use some more designers to help with all this. As we discussed on Email, there are some places where you can plug in your expertise - but I'll detail them here as well for anyone who comes across this.

• We have a UX mailing list here.
• We have an IRC channel at #thunderbird-ux on irc.mozilla.org (you can join in in Thunderbird)
• Mockups can be proposed via an enhancement bug on Bugzilla (in the "Severity" field, select "Enhancement").

As per the website, if you would like to help implement the above vision. We could really use that. I'm not the most capable when it comes to web design in general. We could use your web dev skills to move this along.

Elio and team did create a style guide here: https://github.com/thundernest/thunderbird-photon - feel free to propose changes and share ideas.

Finally, we just need more design input all-around. So feel free to ask any questions, challenge any sacred cows, and let's see what we can get done!

[Fluotonic]

Thanks @ryanleesipes! OK, I think I have a better idea where we're at now 😉

I'll start from there and see where I can start. I'll let you guys know when I have some meat for you 😄

Cheers!

[Fluotonic]

Hey everyone,

It took me some time but I finally got something together as a new proposal for the design. As I mentioned earlier, the work done by Ura is an excellent starting point. With this new mockup, I'm just trying to improve on some aspects that I find important:

1. I tried to play a bit more on visitors' excitement and interest for the app: with vivid colors (the ones from the Mozilla style guide) and dynamic angles and shapes, mostly for the blue background.

2. I also tried to improve on content, by adding a slider with the key features of Thunderbird (on the right of the blue header). This is supposed to be automatically moving once coded, which would give right away a better understanding of what the software actually looks like. A simple screenshot is to weak in my opinion, so I suggest we have at least one for each key feature. Keep in mind though, that I'm using here an outdated version of the UI, which is the one we currently have on the official website, but it can be easily swapped out obviously.

3. Still with content: I added a section about volunteering below the main section/header. In my opinion, this is a crucial aspect of the project and it should take place on the front-page. This is not really in the way because I'm only using black and white here, but it's still there and it reinforces the idea that it's an open-source project. And coupled with the last call to action (the big Thunderbird icon with the download button), I find this whole "secondary" section really powerful and solid.

4. Finally, I also included most of the suggestions I've read on this page and found relevant.

All right, here is the result. Now, I'm eagerly awaiting your feeedback 😄

Thanks for your collaboration!

[elioqoshi]

@Fluotonic Holy, this is amazing! Thanks so much for doing this!

You improved upon many aspects of our original design beyond something which is only aesthetically pleasing. I really like the slider as well!

If if I could give some feedback on improvements, I'm not a huge fan of the upper and lower edges of the hero section, as it looks too "cyber" too me. I'm aware this is a very client approach of giving feedback and I shouldn't do this as a designer, but not sure how to explain it otherwise. There could also be some tweaking in the gradient fade out effect of the screenshot which looks a bit unnatural. Furthermore, I think the shadow behind the thunderbird icon at the bottom is unneeded.

I can't think of anything else at this point, you did a fantastic job!

Would be great to have you on our IRC or Mattermost and chat further :)

[Fluotonic]

@elioqoshi Thank you so much for your positive review :-)

I'll jump right into your points:

1. About the "cyber" look, this is something I had in mind, to be honest :-P My intention was double here: appeal to power users and geeks (which seem to be a big chunk of Thunderbird public), and show a bit more grip and personality to the blue round bird ;-) Another part of me completely agrees with you though and I will try to find a more subtile approach. Back to the drawing board ;-)

2. Agreed on the gradient for the slides in the primary section. I'll keep that in mind for the actual screenshots.

3. For the shadow behind the Thunderbird icon at the bottom, you're totally right. It's actually a leftover when I was trying different positions ;-)

For Mattermost, what is your URL?

[wsmwk]

Still with content: I added a section about volunteering below the main section/header. In my opinion, this is a crucial aspect of the project and it should take place on the front-page

I agree with the sentiment and the goal - community involvement is somthing that needs greater emphasis. So thank you for adding this.

[Fluotonic]

@wsmwk thanks for your feedback, that's great to get the confirmation this community section meets a need 😄

@elioqoshi , I've just updated the mockup with your feedback in mind:

I've tried to reduce the "cybernetic" effect on the blue area (point 1), by adding a few gradients. I find the idea interesting as it's also adding a "speed" effect 😄 .
I've fixed points 2 and 3.

Let me know what you think!

[elioqoshi]

@Fluotonic Sorry for the delay in getting back. This looks better!

However I still don't dig the cybernetic feel of the edges in the sections and it's not a pattern I see often in our industry (it might fit to a videogame website). I agree that we should not keep the sections bland, but we might want to try toning the effects down a bit, what do you think?

In what did you design this? Would you like to share the design file?

[Fluotonic]

Hey @elioqoshi, my turn to be sorry 😛 I thought I'd get an alert fron Github but nothing reached my inbox...

Anyway, I agree with you: now that I'm looking at it once again, I have the same feeling as you do. I personally think it's a bit too agressive and nerdy. Maybe it's a detail at this point though and I'm trying to focus on the actual code for this website now.

Don't get me wrong, we need to address this issue and I already have some ideas I want to experiment. I just don't want this to prevent us from moving forward. My hope is to be able to come up with a pull request in the next few weeks. I still have to put some time aside but I'm willing to push for the new website as much as I can 😉

Thanks again for your helpful feedback!

[elioqoshi]

Hey @Fluotonic, it would be best to share progress so we don't duplicate efforts or work separately. The website is too big of an initiative to solve with a pull request I'm afraid. It needs quite some more thought and buy-in before moving forward.

Could you share the source file of the design so we can iterate and circulate proposed changes?

[ryanleesipes]

I agree, there are many problems with the current implementation of the website (mostly it just looks very dated in its current form). The next step could just be ensuring the logo and the menu can exist on the same "line" on all the pages. :)

[Fluotonic]

Hey @elioqoshi, no problem for sharing the source file. I'm not used to collaborate on open-source projects so I guess I need to get used to this ;-)

OK, now where can I host this ~34Mb file? Github doesn't accept this.

[elioqoshi]

@Fluotonic just send it over WeTransfer: https://wetransfer.com/

How come it's that big? Is it a PSD file?

cc-ing @Alecaddd here, who is the new UX Architect of Thunderbird

[Fluotonic]

Hey @elioqoshi, yep it's a PSD 🙂 I've actually placed it on my personal cloud, so it's easier for everybody: https://cumuleo.pro/s/MXeH5pFYp5yfknf

@Alecaddd, welcome on board! I'm really excited as well to see you coming full-time to take care of the app redesign. Does it include the website, by the way? Let me know if I can help 🙂

[Sancus]

I think the PSD looks very cool, but having done a lot of agency webdev in my career going from PSDs to final designs, PSD-first designs almost always end up needing significant changes when building the final page.

While it's true the current page layout looks a bit outdated, it also works, and the website has a lot of complexity that is not immediately apparently. It has far more requirements than the average startup or company website. Here are some notes:

1. The new site must be localizable. That is, it must account for the different lengths of phrases in other languages, it cannot look broken in Chinese or Japanese or French. RTL languages exist. Also, no text is allowed in images except for screenshots of Thunderbird itself and the Thunderbird wordmark.
2. It must meet or reasonably approach accessibility standards(WCAG 2.1). This has been a point of pain in the past with Mozilla design processes. Perfect compliance isn't necessary but in general text should be high contrast relative to backgrounds and not too difficult to read if you don't have perfect eyesight.
3. Any new pages should be static like the current ones. That means no use of Node, databased-backed frameworks in any language, etc. Preferably continue to use Jinja templates, of course feel free to add any code you need for that or any Jinja extensions.
4. Using different JS and CSS preprocessors and libraries is totally fine, so for example SCSS could be used instead of LESS. Keep simplicity and maintainability in mind. Don't add a huge amount of dependencies without reason, and seriously consider impacts on page load speed, compatibility and complexity when adding additional libraries. The current site is minimalistic intentionally: It loads quickly and degrades gracefully for people with older browsers or low-end machines. Even IE8 on WinXP. The download buttons are complicated, cover a lot of edge cases and work even when JS is disabled.
5. If you don't redesign any page other than the landing page, the new header and footer should work reasonably well with the existing pages. It doesn't have to be perfect, but it shouldn't break anything either.
6. Probably a lot more things that I've forgotten offhand but this list is already long enough :)

I'm not trying to be negative, I just think it's important that everyone understands the realities of changing the site. It's not going to be a simple, single pull request that gets merged overnight.

I can provide a branch and web server for development work on a new design, and changes can be merged to that branch and we'll have something like new-site.thunderbird.net for it. Of course, first drafts don't need to perfectly meet every requirement, that's what testing and iteration is for, so it's totally fine to submit draft PRs without worrying about every angle initially.

[Alecaddd]

I totally agree with what @Sancus said, and by the way, hello everyone, I'm excited to be here 😄

While the design work and the push did on this topic were amazing, I'd propose to take it slow and be careful about content, accessibility, and UX, more than UI, like Andrei properly listed in the previous comment.

I'm gonna be spending some time in collecting requests and expectations from the various team members and draft a low fidelity wireframe to offer a base where we can focus on the content and accessibility standards.

I'd love to introduce also a quicker front-end dev stack based on laravel mix + tailwindcss + purgecss, and having a dedicated dev environment would be great to test it out.
I've been using this combination for years and it makes it really easy to set up and use.

• Laravel Mix is a super compact and ready to code webpack wrapper. It has few dependencies and it removes the complexity of setting up webpack, by keeping the speed and reliability of compiling assets.
• TailwindCSS is a utility first CSS framework which allows for quick CSS prototyping without writing any new class and helps keeping consistency across pages, without stumbling upon conflicting styles or visual behaviours.
• PurgeCSS will automatically strip unused CSS declarations during bundling, helping to spit out a super tiny and light CSS file.

Let me know what you guys think, and I can create a quick PR to show how easy it is.

Let's rock!

[elioqoshi]

Thanks for the much needed context folks! @Alecaddd my dev knowledge is barely existent so I won't comment on the environment.

Let me know what you guys think, and I can create a quick PR to show how easy it is.

Could we set up Netlify to preview PR's? That would make it a bit easier, right?

Further, I'd just like to flag that it would be great if the website could work with JavaScript disabled / opens fine in Tor Browser High Security mode. If the vision of making Thunderbird a tool for privacy-minded users, I think this is the right step to go. Of course that does not mean that JavaScript or SVG's can't be used, but that they are not critical to the correct functioning of the pages. Graceful fallback would be great.

What do you think?

[mkmelin]

Yep we need a graceful fallback to get basic functionality.

[Sancus]

Just adding a note here that we should seriously consider displaying some blog headlines on the front page. It would help combat any perception that TB is 'dead' to have at least semi-regularly updated news items appear there. See #86. I also commented the same on the most recent wireframe.

[Alecaddd]

@Sancus that's a really good point. I'll explore the possibility of having a Recent News section or similar in the home page.

[keunes]

What's the status of this website redesign? I love the 'approved' version on Ura's Presentator instance. Would be great to see it implemented :)

[Alecaddd]

It's almost complete.
I need to finish the responsive implementation but I got sidetracked by some high priority bugs on Thunderbird.
I'll try to make it happen this week 😊

[AnXh3L0]

Hey @Alecaddd is it somewhere online on a staging site so we can have a look? Cheers.

[Alecaddd]

Yup, it's here: https://www-new.thunderbird.net/en-US/
As I said, it's missing a responsive optimization, so it's mostly broken outside a regular laptop resolution.

[cadeyrn]

It's a beautiful new website but please don't forget to change the hero image. It still shows Thunderbird 52 (with tab curves!) and the current version is Thunderbird 68… ;-)

[Alecaddd]

Obviously all the screenshots are temporary and we're generating new one for TB68

[cadeyrn]

Well, it's not that obvious since the current website also still shows Thunderbird 52 and not even Thunderbird 60. That's why I mentioned this. I couldn't be sure that this is a known issue. 😅

But it's good to know that it is on your radar. Again: It's a beautifil new website. Thank you for your great work! 😊

[ovari]

Are you able to advise when https://www-new.thunderbird.net/ will be showing at https://www.thunderbird.net/? Thank you

[Sancus]

Are you able to advise when https://www-new.thunderbird.net/ will be showing at https://www.thunderbird.net/? Thank you

Depends on localizer translation speed, any other bugs being fixed like #151 and 68 update coordination timing, but it should be ready in or around the week of December 11th.

This bug was closed because it's now on staging which reflects the master branch, which is at https://www-stage.thunderbird.net.

[ovari]

Thanks.

Should Add-ons(Extensions & Themes) be Add-ons (Extensions & Themes)? i.e is a space missing before (?

Thank you once again.