Skip to content

Teacher Workout Mobile flow

Jump to bottom
catileptic edited this page Jun 25, 2021 · 6 revisions

The UI for the mobile application is in the Figma document.

In order to export an image from the Figma document, make sure you have the Move selection mode active, click on that image, the select Export in the right-hand side of the screen. Click the + icon and export the assert. Here's a screenshot of the process.

Account Creation

This is the Figma flow for the account creation. Open the Figma doc in order to follow along.

A user can create an account using:

  • their e-mail address and password - an e-mail is sent to their address in order to confirm their account
  • Google OAuth 2.0 flow
  • Facebook OAuth
  • Apple ID

If a user is not logged in and opens Teacher Workout, the first screen they see is this one.

Once a user logs into Teacher Workout, they are taken to their Home screen.

After a user creates an account and verifies their e-mail address / completes the Google / Facebook account creation flow, they go through several Onboarding screens. All they have to do is click Next. If they quit the app during the Onboarding process, the next time they open the app and log in, they are taken back to the Onboarding process. They can't access any other part of the app until they have gone through the Onboarding screens.

After the Onboarding process, a user is taken to the lesson domains listing, in the Figma screen called First time user - home screen. After they see this screen once, a successful log in takes them to their Home screen.

Lesson Flow

This is the lesson flow section. Open the Figma doc in order to follow along.

Each lesson starts with a screen presenting the Title, subtitle, reading time and two buttons:

  • Începe lecția takes the user to the next screen
  • Salvează lecția takes the user to the previous screen. Pressing this button adds the lesson to the Lecții în curs section on their Home screen.

Each lesson consists of text screens with a single button to go forward (and a back button at the top) and quizz screens. Getting the answer right in a quizz highlights the answer and marks it as correct. Getting the answer wrong highlights the answer and marks it as wrong. These two screens indicate this behavior. Getting answers wrong does not influence how many points you get at the end.

At the very end, the user gets some Experience Points. Hitting the Continuă button takes the user back to the lesson listing screen. There, the lesson they just finished is marked as complete.

User Profile Flow

This is the Figma flow for the user profile. Open the Figma doc in order to follow along.

A user can enter their profile by clicking the general purpose Profil button in the footer of the app. At the top they can see their avatar along with the total number of Experience Points that they have achieved.

The Rezultate section of their profile lists all the lesson categories, along with the progress the user has achieved in each. The progress is marked as lessons completed / total number of lessons in the category.

The Setări section of their profile allows them to:

  • change their avatar
  • change their password
  • change the notifications settings
  • log out
  • delete their account

General Purpose Flows

These three general purpose buttons, which exist in the footer of every screen, lead the user to the following sections:

Clone this wiki locally