Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard

Redesign Tor Browser homepage ("!about:tor") to inform users about various Tor features and settings they can use to customize their experience.

We are not taking advantage of the best opportunity to educate users about Tor’s features and settings. The “!about:tor” page is the first thing a user sees once they successfully launch Tor Browser and connect to the Tor network. At this moment, they are ready to start browsing; therefore, it is a great opportunity for us to build an educational moment to teach them about Tor Browser security features and how to use them.

added TorBrowserTeam201808 component::applications/tor browser owner::antonela priority::very high resolution::fixed severity::normal sponsor::17 status::closed type::defect ux-team labels

Ccing the tbb-team.

Trac:
Cc: N/A to tbb-team

Trac:
Priority: Medium to High
Keywords: N/A deleted, TorBrowserTeam201804 added

You can modify the onboarding system extension to your needs https://searchfox.org/mozilla-central/source/browser/extensions/onboarding

If you want to test it in its Mozilla form download nightly and enable it using https://searchfox.org/mozilla-central/source/browser/extensions/onboarding/README.md#how-to-show-the-onboarding-tour

Related tickets: #23489 (moved) #23649 (moved)

Replying to cypherpunks:

If you want to test it in its Mozilla form download nightly and enable it using https://searchfox.org/mozilla-central/source/browser/extensions/onboarding/README.md#how-to-show-the-onboarding-tour

Thanks! So useful :)

Trac:

Hi! I put together the first approach for this task. I'm trying to get into consideration all the suggestions made by the previously mentioned tickets.

https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695.png

I'd like to be on the same page with devs about the different use cases.

Using F60 onboarding is a great idea! I think we can use it.

Copy is up to creation/review.

Trac:
Cc: tbb-team to tbb-team, dmr

Trac:

Alo!

This ticket includes four related tasks:

a) redesign current about:tor b) think about critical messages eg. "Update Tor Browser" c) onboarding for new users d) onboarding for new features

Check here https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about.png

All this components or flows are living or are triggered at about:tor page. This is why we are thinking about them right now. On my last delivery, I included a narrative and low-res mocks for onboarding new users. Also, during our meeting, we talked about having a walkthrough like onboarding for new features.

So, I'm including now

a) About:tor > We talked a lot about to have a dark theme here. Having a purple background reminds users of safe private browsing mode in regular browsers which is a feeling that we want to recall here.

b) Critical Messages > We have a separate task for the browser update flow, but I'm just introducing it here. I'm going to work deeply on it at their respective ticket(#25694 (moved)).

c) Onboarding New Users > The F60-like onboarding for new users will be triggered for first-time users. Also will be persistent at the left top icon.

d) Onboarding for New Features > Based on Firefox's UX [https://www.mozilla.org/en-US/firefox/59.0.2/tracking-protection/start/].

This flow must be used for onboarding new features. The walkthrough style allows us to drive the user through each feature per time and also to show them in their context.

Try the New Circuits Display here: https://marvelapp.com/3djhfhh

Also a static version here: https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about-new-feature-walkthrough.png

New users on their onboarding can trigger the features that have walk-through tutorials. So, the call to action we have at the user onboarding popup will trigger the specific feature walkthrough.

Content is not defined yet, but I opened a pad to work with the comms team on it https://pad.riseup.net/p/about-tor-copy

Trac:

Sublime work really antonela, it looks all good :D

One note however: The update warning needs to be more scary :)

Move our roadmap tickets to May.

Trac:
Keywords: TorBrowserTeam201804 deleted, TorBrowserTeam201805 added

Moving our tickets to June 2018

Trac:
Keywords: TorBrowserTeam201805 deleted, TorBrowserTeam201806 added

Upping prio.

Trac:
Priority: High to Very High

For Tor Browser 8 onboarding, Steph and I we have been working on having the content and the steps of the onboarding ready. You can grab the copy and the links from here

https://docs.google.com/document/d/1c2RZSwI44h5IT0_0HyurByWuzf5jhA1iCLUR6FBjIvY/edit?usp=sharing

and the prototype is living here https://marvelapp.com/5981a4b/screen/44384308

let me know what else is needed to moving it forward

We'll continue working on it after Alpha release.

I am not a huge fan of "ultimate" when describing .onions. Could we use "enhanced" or something similar? Otherwise looks good to me. I guess we can chat a bit about it (and how to move forward implementing it) in our meeting today.

Moving first batch of tickets to July 2018

Trac:
Keywords: TorBrowserTeam201806 deleted, TorBrowserTeam201807 added

Resolved #23489 (moved) as duplicate.