Sections:

1. Start screen

• friendly start screen, only few content elements shown.
• DataSkop logo (centered)
• Partner logos

Navigation:

• Next button

2. Onboarding / Introduction

• general explanation of this project
• welcome text, what to expect, imagery etc.

Navigation:

• Next button

3. Login

• where the user signs in
• explanation what to expect after login etc.
• say, that the scraping process starts immediately after the login (as shown in Figma "storyboad") --> bad idea, see below

Questions:

• info boxes? info graphic?
• maybe split in two screens?
• we need an additional screen where the user explicitly starts the scraping process, see "Open questions/remarks" below

Navigation:

Choice between:

• Google login
• Dummy data login

4. Interface Explanation

• explanation of user interface elements
• could be implemented as an overlay to toggle it later from the sidebar
• this is where the scraping in the background starts
• the loading bar on the top right is shown and indicates the scraping process (animated icon, descriptive text), see #88

Questions:

• how to draw? svg? images?

Navigation:

• Back button (logs user out; stops the scraping process)
• Next button
• clicking the loading bar toggles the YouTube scraping window, see #87

5. Explainer Scraping

• explanation of "Scraping"

Navigation:

• Next button (is disabled if scraping of user profile data has not finished)

6. Personal Data Viz

• Profile data visualization
• "experiment" data is being scraped in the background; loading bar at the top right is still active

Navigation:

• Next button (is disabled if scraping is not finished yet)
• Back button?

7. Autoplay Chain Viz

• Autoplay Chain visualization
• more "experiment" data is being scraped in the background; loading bar at the top right is still active

Navigation:

• Next button (is disabled if scraping is not finished yet)
• Back button?

8. News Viz

• News visualization
• more "experiment" data is being scraped in the background; loading bar at the top right is still active

Navigation:

• Next button (is disabled if scraping is not finished yet)
• Back button?

9. Search Viz

• Search visualization

Navigation:

• Next button
• Back button?

10. Data overview ("Meine Daten")

• overview of scraped data before submitting it
• is accessible via the blue "Meine Daten" button at the top right but is shown at this point of the process

Questions:

• shouldn't there be a "Download" button to download all the data?

Navigation:

• Next button
• Back button

11. Questionnaire

• Survey forms

Questions:

• is this Questionnaire mandatory/ can I skip it via a button?

12. Data donation

• user creates a DataSkop account
• user agrees to terms
• user submits data

Questions:

• how big is this screen?

13. Success Screen (Final)

• friendly last words to the user
• newsletter, social media links etc.

Open questions/remarks:

• the "Meine Daten" button is visible in the drafts the whole time, but we sometimes don't have data yet to dispplay. what do we do with it? only show it as soon some data is available? is this for returning visitors? are there returning visitors?
• do we always provide a back button?
• opinion: it's a bad idea to start scraping immediately after login. we need an additional screen where user decides to start the process. hiding this info in a block of text is not good. it also raises questions about the loading bar at the top right ("where did this come from? what triggered it?")

see #7
Allow to export data

For the explanation: split up or have elements that can collapse
Too much text.
Suggestion: The entire blue box can be a collapsible element - users can click on it.

Infographic (tbd - how bit is it, and what is the content?)

it is optional

Friendly opening with

• Dataskop logo
• Partner & funder logos
• "Start" button

I disabled GitHub actions for now because we are still goofing around. This should be enabled with the first proper release.

• define final type
• add validation
• basic built-in editor
• add init and cleanup tasks (

Gender
(make it optional)

multiple choice:
female
male
non-binary
prefer not to answer

-disable the button "weiter" till scraping is finished for next screen.
*critical point: we need to run a series of tests to see if it works that we display one experiment while scraping the data for another one. (CPU matter)

first version: doing the videos next to each other - thumbnails / view/categories
we will not do the lines with arrows to correlate videos or stats graphs

Education Status
(make it optional)

multiple choice:
tbd

Global loading bar at the top right of the app.

• has an animated icon
• describes what is happening: has different status texts (@Lorzer)
• is clickable and toggles the Scraping Window #87
• has a "Pause"-button to pause the scraping process
• close scraping window when done
• Add ETA (@jfilter)

suggestion: to implement this section after "donation"

@Lorzer
What do we do with the Window once the user logs in?
set up as a fixed element? Hide?
set up min and max width/height.
Make it customizable?

Use tailwind and remove bulma

We need:

• illustration
• content
• Load bar "scraping starts here" (connected to the browser window)
• Disable the "weiter" button till profile scraping is done

Before showing google / YouTube login element box, present two options for the user to proceed:

Dummy Data

Own YT account

Age:
(make it optional)

field:
allow user to select year-month-day

privacy / terms and conditions: do two screens one for agreeing, and another for inserting the email address.

User needs to confirm / validade their email address. can we still use the data if they don't confirm?

Once the data is donated - design an overlay "thank you" screen, and the possibility to share it on social media.

An inline browser window where YouTube is being scraped. Related to #88

• shown after login screen (scraping process starts)
• hidden after scraping finishes
• can be shown/hidden by clicking the loading bar at the top right
• add close button

Possible implementations:

• draggable inline window
• split screen
• overlay (~80% screen size) --> implement "Close"-button

• Labels
• show by mouse hover
• show current step (subtle)
• starts after login

https://docs.sentry.io/platforms/javascript/guides/electron/

We need content and visuals

"Where" is the donated data?

add UI explanation as an overlay, not a page.
Could be added as a "help" feature on the hamburger menu section for the rest of the storyboard.

Define concept.

• button "weiter" should be disabled - add explanation that we are scraping, and enable it when scraping is done for the next section.
• nice to have: think about the waiting time of the user and what we can do / explain meanwhile.

-disable the button "weiter" till scraping is finished, and once finished, display: data scraping process done.
*critical point: we need to run a series of tests to see if it works that we display one experiment while scraping the data for another one. (CPU matter)

similar to issue: #76

a bit confusing.
Also related to issue: #7

JSON is complex. Add an overlay of explanation?

• Menu