Opened 4 months ago

Last modified 16 hours ago

#25695 assigned defect

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

Reported by: isabela Owned by: antonela
Priority: Very High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, TorBrowserTeam201807
Cc: tbb-team, dmr Actual Points:
Parent ID: Points:
Reviewer: Sponsor: Sponsor17

Description

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.

Child Tickets

Attachments (3)

25695.png (766.0 KB) - added by antonela 3 months ago.
25695-about-new-feature-walkthrough.png (2.2 MB) - added by antonela 3 months ago.
25695-about.png (1.5 MB) - added by antonela 3 months ago.

Change History (21)

comment:1 Changed 4 months ago by gk

Cc: tbb-team added

Ccing the tbb-team.

comment:2 Changed 3 months ago by gk

Keywords: TorBrowserTeam201804 added
Priority: MediumHigh

comment:3 Changed 3 months ago by cypherpunks

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

comment:4 Changed 3 months ago by cypherpunks

Related tickets: #23489 #23649

Last edited 3 months ago by cypherpunks (previous) (diff)

comment:5 in reply to:  3 Changed 3 months ago by antonela

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 :)

Changed 3 months ago by antonela

Attachment: 25695.png added

comment:6 Changed 3 months ago by antonela

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.

comment:7 Changed 3 months ago by dmr

Cc: dmr added

Changed 3 months ago by antonela

comment:8 Changed 3 months ago by antonela

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).

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

Last edited 3 months ago by antonela (previous) (diff)

Changed 3 months ago by antonela

Attachment: 25695-about.png added

comment:9 Changed 3 months ago by cypherpunks

Sublime work really antonela, it looks all good :D

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

comment:10 Changed 2 months ago by gk

Keywords: TorBrowserTeam201805 added; TorBrowserTeam201804 removed

Move our roadmap tickets to May.

comment:11 Changed 6 weeks ago by gk

Keywords: TorBrowserTeam201806 added; TorBrowserTeam201805 removed

Moving our tickets to June 2018

comment:12 Changed 6 weeks ago by gk

Priority: HighVery High

Upping prio.

comment:13 Changed 5 weeks ago by antonela

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.

Last edited 4 weeks ago by antonela (previous) (diff)

comment:14 Changed 5 weeks ago by gk

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.

comment:15 Changed 2 weeks ago by gk

Keywords: TorBrowserTeam201807 added; TorBrowserTeam201806 removed

Moving first batch of tickets to July 2018

comment:16 Changed 2 weeks ago by gk

Resolved #23489 as duplicate.

comment:17 Changed 8 days ago by antonela

I updated the last prototype with the new content + the first round of illustrations. Take a look and let me know what do you think!

https://marvelapp.com/5981a4b/screen/44384322

comment:18 Changed 16 hours ago by gk

Looks great. I think I like the "Explore. Privately." one better than the "Go Explore. Privately." But I feel not that strongly about it. I am not sure whether the text is ready yet for review, so I skipped that part but the general flow seems good to me.

Note: See TracTickets for help on using tickets.