Application Design II / Task 4: Final Application & E-portfolio
Application Design II, Bachelor of Design (Honours) in Creative Media
Table of Contents
Module Information Booklet (MIB)
Module Information Booklet (MIB)
Task 1 - Task 3
Click below to access the complete documentation for Task 1 – 3.
- Task 1: App Design Self-Evaluation and Reflection
- Task 2: Hybrid Lo-Fidelity Mobile App Development
- Task 3: Micro Interaction Prototype
Task 4: Final Application & E-portfolio
This blog highlights the completed Memrise application developed using FlutterFlow and Firebase. It covers an overview of the app, its key features, Firebase integration, animation implementation, and the final outcome of the project.
Memrise
Memrise is a language learning application that helps users build vocabulary and improve their communication skills through interactive lessons and quizzes. It combines visual learning, audio pronunciation, and spaced repetition to make learning more engaging and effective.
For this project, I redesigned and developed a functional prototype of Memrise using FlutterFlow and Firebase, focusing on a clean interface, smooth interactions, and an enjoyable learning experience.
|
| Fig.1 Overview of the Memrise application |
Key Features
The Memrise application includes several core features designed to create a smooth and engaging language learning experience. From account management and personalized learning to interactive lessons and quizzes, each feature works together to help users learn at their own pace.
1. User Authentication
Users can securely create an account, log in, and reset their password using Firebase Authentication.
|
| Fig.2.1 User Authentication |
2. Personalized Learning
Users begin by selecting their preferred language, proficiency level, and learning frequency. The app then personalizes the learning experience based on these selections.
|
| Fig.2.2 Goal Setup |
3. Interactive Lessons
Lessons use flashcards with audio pronunciation, translations, and example sentences to make learning more interactive and engaging.
|
| Fig.2.3 Flashcard Lessons |
4. Quizzes & Review Mistakes
After each lesson, users complete a quiz with instant feedback. Incorrect answers are automatically saved so they can be reviewed and practised again later.
|
| Fig.2.4 Quizzes & Review Mistakes |
5. Progress Tracking
The app tracks learning progress through XP, lesson completion, unlocked levels, and user statistics, helping users stay motivated throughout their learning journey.
 |
|
Fig.2.5 Progress Tracking |
Firebase Integration
Firebase was integrated to provide backend support for the Memrise application. User data is stored and synchronized through three Firestore collections, allowing the app to manage user information, learning progress, and quiz records dynamically.
The Memrise application uses the following Firestore collections:
- users – Stores user account information and learning progress.
- courses – Stores language course details, including proficiency level and learning frequency.
- mistakes – Stores incorrectly answered quiz questions for future review.
1. users Collection
The users collection stores each user's account information and learning progress. It is updated automatically as users interact with the application, ensuring their progress is saved and synchronized across the learning journey.
|
| Fig.3.1 users Collection in FlutterFlow |
The Create Account action is configured in FlutterFlow to send the user's email and password to Firebase Authentication when the Create Account button is pressed.
|
|
Fig.3.2 Create Account Action in FlutterFlow The video in Fig.3.3 demonstrates the user registration process in the application. After a new account is created, the Firebase Console is shown to verify that the user's credentials have been successfully registered. |
Next, Fig.3.4 shows a user completing a lesson. The Firebase Console is then displayed to verify that the user's learning progress, such as XP and completed lessons, has been stored successfully.
The Update Document action is triggered when the Lesson Report page loads. It automatically updates the user's learning progress in the Users collection, ensuring that the latest progress is synchronized with Firebase.
|
| Fig.3.5 Update Document Action in FlutterFlow |
2. courses Collection
The courses collection stores the language courses created by each user. It records information such as the selected language, proficiency level, learning frequency, and language flag, allowing users to manage multiple courses within the application.
|
| Fig.3.6 courses Collection in FlutterFlow |
|
| Fig.3.7 Firebase Console courses Collection |
Besides storing course information, this collection also manages the creation and deletion of courses, ensuring that users can easily add or remove languages while keeping the data synchronized with Firebase. Fig.3.8 demonstrate deleting an existing language course. The Firebase Console is then displayed to verify that the selected course has been successfully removed from the Courses collection.
The Create Document action is implemented on the Goal Setup 3 page. When the user completes the goal setup and taps the Submit button, a new course document is created in the Courses collection.
|
| Fig.3.9 Create document action in Goal Setup 3 |
3. mistakes Collection
The mistakes collection stores quiz questions that are answered incorrectly. It supports the Review Mistakes feature by allowing users to revisit and retry questions they previously got wrong. Once a question is answered correctly during review, it is marked as reviewed and removed from the review list.
|
| Fig.3.11 mistakes Collection in FlutterFlow |
The video below shows a user answering a quiz question incorrectly. The Firebase Console is then displayed to verify that the incorrect question has been successfully stored in the Mistakes collection.
Fig.3.13 then shows reviewing previously incorrect questions. After answering it correctly, the Firebase Console is displayed to verify that the isReviewed field has been updated, and the question is no longer displayed in the Review Mistakes list.
The Create Document action is implemented when a user submits an incorrect answer during a quiz, creating a new record in the Mistakes collection.
The Update Document action is implemented after the user correctly answers the same question in the Review Mistakes feature, updating the isReviewed field to true so the question is removed from the review list.
Animation Implementation
Animations were added throughout the app to make the interactions feel smoother and more engaging. I used a combination of FlutterFlow animations, page transitions, conditional visibility, and Lottie animations to provide clear feedback when users interact with the app.
1. Splash and Page Transitions
The splash screen uses a slide-up animation before moving to the login page. Slide transitions were also added between selected pages to create a smoother navigation flow.
The Hero Animation is applied to the application logo in FlutterFlow, allowing it to transition seamlessly between the splash screen and the login page.
|
| Fig.4.2 Hero Animation in FlutterFlow |
Page transitions are implemented using the Navigate To action in FlutterFlow. A transition effect is configured for each navigation action, allowing users to move smoothly between screens instead of switching instantly.
|
| Fig.4.3 Page Transition Configuration in FlutterFlow |
2. Goal Setup Animations
During the goal setup process, when a user selects an option, the selected card changes from white to yellow colour and the Next button fades into view, providing immediate visual feedback.
Conditional logic is applied to the option containers to update their appearance based on the user's selection using if-else conditions. The Next button is also controlled by conditional visibility and appears with a fade-in animation once an option has been selected.
|
| Fig.4.5 Conditional Value of the container (left) & Conditional Visibility of the button (right) |
|
|
Fig.4.6 On Trigger Animation |
A Lottie animation widget is combined with an On Page Load action and a delay to create a smooth loading transition before navigating to the next page.
|
| Fig.4.8 Loading Animation Settings |
4. Interactive Lesson Animation
Users can tap a flashcard to flip between the vocabulary word and its translation, creating a more interactive learning experience.
|
| Fig.4.10 Conditional Visibility on Next button |
5. Quiz Feedback Animation
Quiz content fades in when the page loads. After an answer is submitted, an animated bottom sheet provides immediate feedback on whether the selected answer is correct or incorrect.
The quiz page uses On Page Load animations to introduce the interface gradually, while conditional actions display the corresponding Correct or Wrong bottom sheet after the user submits an answer.
|
| Fig.4.12 Quiz Animation Settings |
Final Outcome
FlutterFlow link: https://app.flutterflow.io/project/memrise-gjbv9u
Canva Presentation Slide: https://canva.link/8sjn7iua19ujj5j
Video Presentation and Walkthrough Video: https://youtu.be/hpuLroZol7w
App Design II Presentation，作者 jingxuan0209Canva Slide Presentation
Reflection
Looking back, building the Memrise application was both challenging and rewarding. Although I already had the UI design from the previous tasks, turning it into FlutterFlow was a completely different experience. There were many moments where a feature didn't work because I missed a condition or placed an action in the wrong order, so I had to spend a lot of time testing and debugging.
Working with Firebase was another great learning experience. It was satisfying to see user data being created and updated in real time, but it also taught me the importance of planning the database structure and making sure every action was connected correctly. I also became more confident using page states, app states, conditional visibility, and FlutterFlow workflows to build more dynamic user interactions.
Overall, this project helped me understand that app development is not just about creating a good-looking interface. Behind every button and animation is a workflow that needs to be carefully planned and tested. Seeing the app grow from a design prototype into a working application was a rewarding experience, and it gave me a much better understanding of the entire development process.
Comments
Post a Comment