This page is to document the main site redesign project
- Content mapping #10591
- Decide what to do with content we are moving out of the main site
- Start mocking how the new site will look like (get designers help) #18245
- Test our mocks (get user research help)
- Friday 2/12 at #tor-project irc channel 8PM UTC: Meeting logs
- Next meeting: Friday 2/19 at #tor-project irc channel 8pm UTC
- Decide on Design
- Decide on Copy
- Decide on implementation (coding the design)
- Start organizing the other sites where the rest of the content will go
- Start coding home page
- Mock other sites
- Decide on Design
- Decide on Copy
- translation of home page
- start coding other sites
- Q&A and localization review of home page
Redesign proposal for the main Tor website
First brainstormed at the Berlin dev. meeting, September 2015.
What is called the main website will be available at www.torproject.org. The website is available in as many language as possible, and targets the largest audience. That part will be mirrored on as many servers as possible.
As everything will be translated, we need to aim to keep it as small as possible.
At the bottom of every translated page, there should be a link that says “report a problem in the translation” that would allow users to send a message to the localization coordinator for that language.
Te drawing below shows the first version we brainstormed tried to include everything we 'thought' was important, but then it was clear that some of the content was going to be mostly in English and not as important for a new user as the rest of the content. You can see that the last version is much clear and highlights important information a new user would like to know:
The top of the page has a way to select the language.
The top of the page has a small bar with other important (sub)-websites: blog, press, improving Tor, research, get help.
The following would stack from top to bottom on a mobile screen. On a desktop, we can have a more view with more columns.
Get Tor: On a desktop this links to the Download Tor Browser page. On a mobile, this would like to the Get Tor on your mobile page. On the desktop, we could add a small mobile link just below the big icon.
Why should I use Tor? A short very broad explanation of what Tor does and what the Tor Browser do. At the bottom is a link to How Tor works?
Donate: Link to the Donate page and some indication of why donations are important.
Video: The 3 minute introduction video, hopefully with translated audio or at least subtitles.
User stories: Example of who uses Tor and why.
The footer would contain links to many aspects of Tor and most pages on the main website.
Contrary to the current home page, we will not keep an index of the latest blog entries as translating the blog is hard and we don't want to have users face a page mixing languages.
Download Tor Browser
We give a visual guide for users on how to select their operating system. Also language selection with a default to the language of the website.
Then there's a button to the Downloading Tor Browser page.
Somewhere on the page, a box displays “Tor is more than the web…” which links to the Tor on desktops page.
Downloading Tor Browser
The page uses a meta refresh to trigger the download of the Tor Browser package. In case that doesn't work, it thus starts with a “if a download doesn't start in 10 seconds, please click here” (or a better phrasing).
Below there's a slideshare-like system which shows the next step on how to install the browser, some rough ideas on how it should be used, and security tips on how to use it right. Users should be able to go through the whole slide decks while Tor Browser is downloading, so probably 5 minutes max.
A box says “now is a good time to donate” with a link to the donation page.
The page or the slides should also tell users that they can also have Tor on their mobile devices, and that they can use Tor on desktops with other tools than Tor Browser, linking to the Get Tor on your mobile and the Tor on desktops pages respectively.
Tech Note: Tor2web's GetTor does detection + serve the right TBB for language/OS + mobile redirect
Tor on desktops
The should list all users applications that uses Tor and that we want to promote. Tor Browser, Tails, Torbirdy, Tor Messenger, Ricochet… Picture a big logo and a short description on what they do.
As this is a user oriented site, the page on Torbirdy should mostly explain how to use the Add-ons panel of Thunderbird to install Torbirdy. With only links to more internal information.
Get Tor on your mobile
The page should contain a section per operating system. We should try to auto-detect the type of device and jump to the right section automatically. It should contain links to thinks like Onion Browser for iOS, and Orbot, OrFox, Orwall for Android.
For applications like Orbot, we should offer a link to the Google PlayStore and the Guardian Project. Onion Browser should jump directly to Apple AppStore.
The page should have a small link somewhere to Tor on desktops.