Wireframes

In this section, a preview of the basic screens of the language learning app is displayed and explained.

1. Dashboard

Quick and easy access to the learning features of the app: exercises, principles and learning performance.

Main

Avatar: an abstract bug that grows with app usage. It creates the idea the learner is cultivating his/her “language bug”.

Let’s practice: lists available exercises. Users can swipe right to see more options or tap on an option to access the correspondent exercise (4).

Principles: lists available principles according to exercises requirements. Earning new principles is what unlocks new exercises.

Your Performance: lists the most recent self-assessment speaking proficiency videos, previously recorded by the learner.


Main/side menu can be accessed at anytime (top left icon, or swipe left-to-right) and gives access to all pages of the app.

Side Menu

Settings: learners can edit their preferences and account information.


3. Exercises

It is a list with all the exercises LanguageBug offers, with the exercise name, a brief description, and an indication whether each exercise is locked/unlocked (based on the principles the user had already earned).

Exercises

Selecting an exercise takes the learner to the specific exercise page (4).


4. {Exercise Name}

Contains a brief description of what this exercise should accomplish.

Exercise 1

{time to complete the exercise}: estimted practice duration.

{exercise locked or unlocked}: if locked, it indicates which principles the user has to earn to unlock this exercise.

Swipe left/right: take user to other exercises.

Let’s practice!: begins the exercise practice.


5. Principles

It is a list with all the principles LanguageBug offers, with the principle name, a brief description, and an indication whether the principle has already been earned by the user.

Principles

Selecting an principle takes the learner to the specific principle page (6).


6. {Principle name}

Contains a brief description of what this principle should accomplish.

Principle 1

Let’s practice!: begins the principle training (7).

Wait… Why is that?: takes learner to the brief explanation page (10), where he/she can better understand why this principle is crucial to his/her learning process.


7. Principle Training

Scaffolds the learner to understand and act based on the principle. Displays instructions in English and may include sentences/words in other languages, as part of the training.

Principle1-1

Tap to Pause: pauses the training and takes learner to paused screen (8).


8. Paused

Appears when the leaner pauses a principle/exercise and displays options.

Paused

Resume: resumes the principle/exercise practice.

Restart: restarts the activity/exercise practice.

Home: takes learner to Dashboard screen (1).

Why am I doing this?: takes user to Explanation screen (10).


9. Principle done!

Final screen after learner completes principle training.

Great

“Now let’s practice”: takes learner to the practice of an exercise that was just unlocked by this principle (4).


10. Brief Explanation

Explains using colloquial words the reasons why it may be important for the learner to follow a certain principle.

Brief Explanation

Now I get it. Let’s start!: takes learner to principle practice (6).

Interesting. I want to learn more: takes learner to a principle documentation page, which includes further details, explanations, and even scientific references that support the use of that principle.


11. Performance

Your Performance

Record Yourself: takes learner to Recording screen (12), where a new self-assessment speaking proficiency video can be recorded.

Videos: displays all self-assessment videos previously recorded by the learner, divided in sections according to the exercise practice.


12. Record Yourself

Where the learner can record new self-assessment speaking proficiency videos.

Record Yourself

Instructions: describe what the learner should talk about, according to the choice of exercise practice.