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.
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.
2. Main Menu
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.
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).
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.
{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.
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.
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.
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.
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.
“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.
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
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.
Instructions: describe what the learner should talk about, according to the choice of exercise practice.