Page MenuHomePhabricator

Onboarding
Closed, ResolvedPublic

Description

Why are we doing this?

All of our apps include on boarding as a part of first time user experience. We would especially like to include on boarding KaiOS app as some users may not be familiar with Wikipedia before downloading or opening the app.

User story

As a new user of the Wikipedia KaiOS app and potentially a new user of Wikipedia I would like to be able to know what Wikipedia is, how I can use it and what features are available within the app

Proposed design

Copy doc

https://docs.google.com/document/d/19Rn_TMqe39ssgremTXjkhSh-5GArW1tgZ55tQpUUaoc/edit

Design details

  • Tapping 'skip' in the first screen opens the app the the first page (by-passing the rest of on boarding)
  • Tapping 'next' brings the user to the next screen in the on boarding flow
  • Tapping 'back brings the suer to the previous screen in the on boarding flow
  • Tapping 'Get started' on the last screen opens the app to the first page of the app (eg. search)

Event Timeline

cmadeo created this task.Oct 23 2019, 5:49 PM
Restricted Application added a project: Inuka-Team. · View Herald TranscriptOct 23 2019, 5:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
cmadeo updated the task description. (Show Details)Oct 23 2019, 5:53 PM
SBisson moved this task from Backlog to Q2 on the Inuka-Team board.Nov 13 2019, 2:43 PM
AMuigai moved this task from Q2 to Kanban on the Inuka-Team board.Dec 17 2019, 4:09 AM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
cmadeo updated the task description. (Show Details)Jan 7 2020, 10:51 PM

Do we want to utilize the same animation style for these images as iOS? If so I can export the appropriate files.

cmadeo updated the task description. (Show Details)Jan 7 2020, 10:53 PM
cmadeo moved this task from Needs design to Ready for approval on the KaiOS-Wikipedia-app board.
cmadeo removed cmadeo as the assignee of this task.Jan 7 2020, 10:57 PM
cmadeo updated the task description. (Show Details)Jan 8 2020, 7:44 PM
hueitan claimed this task.Jan 13 2020, 4:20 AM
hueitan moved this task from Backlog to Dev on the Inuka-Team (Kanban) board.
hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Jan 13 2020, 3:39 PM
Jpita moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Jan 17 2020, 3:30 PM
Jpita moved this task from QA to Product sign off on the Inuka-Team (Kanban) board.

As we wait for some wording suggestions from the comms team, here's what we'll use in the meantime.

Screen 1:

  • Retain Wikipedia logo
  • Retain "The Free Encyclopedia"
  • Description: Wikipedia has millions of articles about people, places and many other subjects for free. Search, read and learn in more than 100 languages.

Screen 2:

  • Animation: D-pad use
  • Tap up and down to read articles
  • Tap left and right to select links
  • View beautiful images every day
  • Choose many more options in the settings section

@cmadeo Is there a way we can animate or illustrate the d-pad in onboarding?

@AMuigai sounds like a good idea let me see what I can get done today and tomorrow

cmadeo updated the task description. (Show Details)Jan 23 2020, 9:23 PM

@AMuigai I updated the ticket to include two screens around navigation. I think ideally they would be animated but as we're short on time perhaps these images are good placeholders?

hueitan removed hueitan as the assignee of this task.Feb 4 2020, 4:14 PM
hueitan added a subscriber: hueitan.
AMuigai triaged this task as Medium priority.Feb 6 2020, 9:21 PM

Just play with it on https://github.com/wikimedia/wikipedia-kaios/pull/163,

After adding the dot, I felt like we can add the dpad left and right key to navigate the onboarding step

@SGautam_WMF

Thanks @hueitan , I did go through it, yeah moving around using Dpad left and right could also be convenient especially those dots give that impression. One more thing, I think the first screen(The free encyclopedia) text looks too much on the phone screen and I am worried after translation it might increase in words and could overlap with the dots, let me think about it so wait to change the Dpad left and right unless we could further shorten the text on the first screen. Also, I think we need to re-order the screens, the order is, the first screen is free encyclopedia then search in hundreds of languages, and the last one is free knowledge.

@hueitan , updated the design, please find the zeplin links below. Could you please push it to default font branch for testing.

hueitan claimed this task.Mar 4 2020, 8:24 PM
hueitan moved this task from Design doing to Dev on the Inuka-Team (Kanban) board.
hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Mar 4 2020, 8:43 PM
AMuigai closed this task as Resolved.Mon, Mar 16, 10:18 AM
AMuigai moved this task from Backlog to MVP on the KaiOS-Wikipedia-app board.Fri, Mar 27, 12:55 PM
AMuigai edited projects, added KaiOS-Wikipedia-app (MVP); removed KaiOS-Wikipedia-app.