Page MenuHomePhabricator

Section Translation onboarding tutorial: Existing tutorial adjustments and added full-screens.
Open, Needs TriagePublic

Assigned To
None
Authored By
JFernandez-WMF
Jul 24 2022, 3:51 AM
Referenced Files
F35332363: Motivation screen.png
Jul 24 2022, 3:51 AM
F35332361: Pop up suggested translation.jpg
Jul 24 2022, 3:51 AM
F35332359: Section by section.png
Jul 24 2022, 3:51 AM
F35332355: Original tutorial screen 2.png
Jul 24 2022, 3:51 AM
F35332353: Original tutorial screen 1.png
Jul 24 2022, 3:51 AM

Description

This is part of the workflow process for the Section Translation onboarding tutorial [T313673].

Existing tutorial adjustments

While working on the tutorial, it was decided to re-use some aspects of the screens from the current tutorial, as they covered the key concepts of Section Translation.

Original tutorial screen 1.png (724×382 px, 73 KB)
Original tutorial screen 2.png (702×376 px, 71 KB)

Current tutorial screens

How were these screens implemented in the new tutorial?

The first current screen, “Section by section”, covers the key point:

Translations are done section by section.

We wanted to keep this concept in the tutorial, as it covers the essentials of the tool. So, when the tutorial is announced, the tool is also introduced. It’s here that we cover the important point and concept of translating section by section.

Section by section.png (640×360 px, 52 KB)

The second current screen, “Suggested translations”, covers the following key concept:

An initial automatic translation is provided for users to improve.

This second full-page will be removed, because its main point is already addressed in popup #3. We not only cover the concept of improving the suggested translation, but we invite the user to practice it through the tutorial:

Pop up suggested translation.jpg (216×329 px, 28 KB)

Motivation screen

Before the user chooses the section, a Motivation screen would appear.

Motivation screen.png (640×360 px, 45 KB)

This screen is intended to thank the user for translating Wikipedia, at the same time motivating them to translate more sections, highlighting the importance of their contributions. When the user clicks on Start, they are taken to choose the section (note that behind the opacity layer is the screen to choose the section). Then, when the user chooses the section, they are taken to compare the content in the two languages.

When the user chooses to translate the section, clicking on the “Translate this section” button, they’ll be presented with a new screen where an introduction of the section translation tool is made, and at the same time a tutorial is announced that is going to be described and shown below.

The user may choose to start the tutorial or skip it in its entirety. If they decide to skip it, the workflow would continue normally, with the user translating the section starting by the title. If the user chooses to continue with the tutorial, then the Section Translation editor would open, with an initial question in relation to the section title (see ticket 5 for the popups sequence of steps).

Userflow diagram

Take a look at the userflow diagram at https://whimsical.com/userflow-diagram-for-section-translation-onboarding-HzyVVC8gtH1Hk7epc8JuJj