Application Design I/ Project 3: Lo-fi App Design Prototype
Natalie Chu Jing Xuan, 0354589
Application Design I, Bachelor of Design (Honours) in Creative Media
Table of Contents
- Module Information Booklet (MIB)
- Project 3: Lo-fi App Design Prototype
- Sketches and Wireframes
- Design Process
- Completed Lo-fi Prototype
- User Testing
- Final Outcome (Video Walkthrough)
- Feedbacks
- Reflection
Fig.1 Module Information Booklet (MIB)
Project 3: Lo-fi App Design Prototype
Instruction:
- Once the UX design process is completed, students can now create a low fidelity prototype of the app. Students needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s.
- Students are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.
- Students need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.
For the first step of creating the lo-fi prototype, I looked for visual references to guide my design direction. I browsed Pinterest and collected screenshots of similar educational and language learning apps. These references helped me decide the general look and structure before starting the wireframes.
| Fig.2.1 Visual References collected in Pinterest |
2. Sketches
These are the early sketches of the six main pages in the app. They helped map out the basic structure and key features before moving on to the lo-fi prototype.
|
| Fig.3.1 Sketches for main screens |
3. Design Process
After completing the previous task of gathering visual references and sketching the main screens, I moved on to developing the low-fidelity prototype for the redesigned Memrise app. My concept focuses on creating a more casual and flexible learning experience for users aged 18–34.
|
| Fig.4.1 Onboarding, Login and Sign Up Page |
Fig. 4.1 shows the onboarding, login, and sign up screens. I designed three onboarding screens to briefly introduce the app’s purpose and main features. The flow then leads to the login and sign up screens, which use a simple and minimal layout to ensure a smooth and quick start for new and returning users.
|
| Fig.4.2 New User Sign Up |
Fig.4.2 shows the process of the four setup questions that appear after a new user signs up. These questions ask for the user’s native language, the language they want to learn, their motivation for learning, and their preferred learning frequency. The purpose is to personalise the learning journey and recommend content that fits the user’s goals and habits.
|
| Fig.4.3 Home Page |
Fig.4.3 shows the home page featuring a unit map layout, designed to make navigation more visual and engaging. A lesson preview pop-up appears when users tap on the current chapter, while a “pay to unlock” pop-up is shown for locked chapters. The home page also includes access to the daily mission and streak tracking pages, which aim to encourage consistent learning and maintain user motivation through simple gamified elements.
|
| Fig.4.4 Lesson Page |
Fig.4.4 shows the lesson page layout. Each lesson includes an image, followed by the English translation and the Thai word. An audio icon is placed beside the text to allow users to hear the pronunciation (note: audio is not functional in Figma). Below the Thai word, a short fun fact is included to give cultural or contextual insight. There is also an “Example Sentence” button for users who want to see the word used in context.
Additionally, users can tap on the Thai word to view a word-by-word breakdown to better understand how the phrase is formed.
Fig.4.5 Quiz Page (Answer Correctly & Wrongly)
This figure also includes examples of the quiz interface, showing how it
looks when a user answers correctly and incorrectly. This helps reinforce
learning through immediate feedback.
|
| Fig.4.6 Reward Page & Promotional Ad |
Fig.4.6 shows the reward screen that appears after completing a quiz. After that, a promotional ad for the Memrise Pro plan is shown, prompting users to consider upgrading for additional features. After this screen, users are directed back to the home page.
|
| Fig.4.7 Practice Page |
Fig.4.7 shows the practice page, which is divided into two tabs:
- Skill Practice
- Chapter Review
Under the Skill Practice tab, users can choose a quick review or focus on specific areas such as previous mistakes, listening, speaking, or spelling. The Chapter Review tab allows users to revise content based on completed chapters, giving them more control over their learning and helping to avoid repetitive practice.
|
| Fig.4.8 Leaderboard & Profile Page |
Fig.4.8 shows the Leaderboard and Profile pages. The Leaderboard displays the user’s ranking compared to others, encouraging friendly competition and consistent app usage. The Profile page includes access to the Memrise Pro plan, language settings (change language), and a badges collection page where users can view the achievements they’ve unlocked throughout their learning journey.
4. Completed Lo-fi App Design Prototype
Below are the full screenshots of the completed low-fidelity prototype created in Figma:
|
| Fig.5.1 Full Lo-fi Prototype in Figma |
For user testing preparation, I created three user flows to simulate key interactions within the app. These flows are designed to observe how users navigate the core features and identify any usability issues. The three flows are:
Scenario: Flow 1 - Completing a lesson
|
| Fig.5.2 Flow 1 |
You’re on the home page and ready to start learning. You tap on the “Getting Around” chapter to begin.
A lesson preview page appears with a short description and a “Start +15 XP” button. You tap Start to begin the lesson.
Inside the lesson page, you see:
- An image representing the vocab
- The Thai word, its pronunciation, and an audio button
- A short fun fact, and an “Example Sentence” button
You tap on the Thai word to reveal its word-by-word translation, and tap “Example Sentence” to see how it’s used in context. After that, a Next button appears to continue. You repeat this flow for 4 vocab words.
Scenario: Flow 2 - Completing a quiz
|
| Fig.5.3 Flow 2 |
After the 4th lesson, tapping Next brings you to a transition screen: “Awesome! You’ve Learned New Words!”
The 4 learned words appear in blocks, and you tap “Start Quiz”. You then complete a 4-question quiz to test your understanding.
After the quiz, you claim your XP reward, and when you tap the “X” to exit, a promotional ad appears for the Memrise Pro plan. Tapping the “X” on the ad returns you to the home page.
Scenario: Flow 3 - Review Mistakes
|
| Fig.5.4 Flow 3 |
You go to the Practice page from the home screen. At the top, there are two tabs:
- Skill Practice (active by default)
- Chapter Review
Under Skill Practice, you see a “Quick Review” section with a “Start Now” button for quick revision. But this time, you scroll down to the “Practices” section and tap on “Review Mistakes.” The app brings you back to a previous quiz question you got wrong in Scenario 2. You answer it again and earn XP points as a reward.
A promotional ad appears, showing an upgrade option for the Memrise Pro plan. You tap the “X” to close the ad and return to the Practice page.
Now, you switch to the Chapter Review tab at the top. Here, you see the list of chapters you’ve learned before, as well as chapters that are still locked. You tap on “Unit 2: Chapter 1 – Getting Around”, which takes you back to the lesson preview page where you can choose to review or continue learning.
5. User Testing
To evaluate the usability of the low-fidelity prototype, I conducted three user testing sessions with participants who fit the target user profile. The goal was to identify areas for improvement before moving into high-fidelity design.
User 1: Jun Ming
Fig.6.1 User Testing #1
Feedback Summary
Overall Experience Rating: 4/5 (Good)
Positive Feedback:
- Liked the design of the home page.
- Found the lesson page effective, especially the audio, word-by-word translation, example sentence, and fun fact.
- Appreciated the cultural context provided alongside the vocabulary.
Areas of Confusion:
- Could not exit midway through a lesson or quiz.
- Tapping into the streak page from the profile led to confusion when returning, was redirected to the home page instead of the previous screen.
Suggestions for Improvement:
- Add color to make the interface more engaging.
- Make the reward page after quizzes more prominent.
User 2: Justin
https://youtu.be/UBF1u7uCbH0Fig.6.2 User Testing #2
Feedback Summary
Overall Experience Rating: 4.5/5
Positive Feedback:
- Found the app very user-friendly and visually comparable to other well-known language apps.
- Enjoyed the badge feature, mentioning it adds motivation to memorize more words.
- Liked the overall layout.
Areas of Confusion:
- On the lesson page, the Next button only appears after tapping “Example Sentence,” which may confuse users who skip that step.
- Tapping the Thai word for translation worked well, but it wasn’t clear how to return to the default view.
Suggestions for Improvement:
- Use gold-colored badges to make achievements more rewarding.
- After revealing the word-by-word translation, allow tapping the empty space beside it to exit, making the interaction more intuitive.
User 3: Phyllis
https://youtu.be/TM2hPDBgZ5oFig.6.3 User Testing #3
Feedback Summary
Overall Experience Rating: 3.5/5
Positive Feedback:
- Liked the design of the home page.
Areas of Confusion:
- Found the lesson preview page too simple and lacking in detail about what the lesson includes.
Suggestions for Improvement:
- No specific suggestions, but noted that the app looks fine for now.
6. Final Outcome
Video Walkthrough: https://youtu.be/5JTuHnJziWU
Fig.7.1 Video Walkthrough
Figma Link:
https://www.figma.com/design/r4ExIq7jFEGIAqpxXR5UvB/AppDesign1_Memrise-Redesign?node-id=0-1&t=sBF9dvl0nS63orFi-1
Fig.7.2 Figma File
Prototype Link:
Fig.7.3 Prototype
Feedbacks
Week 12: Lesson page is confusing, flow is a bit strange, needs to change. Quiz part is ok.
Reflection
Working on the low-fidelity prototype was a turning point where my ideas started to feel more real. After collecting visual references and sketching out the core screens, I built out the full prototype in Figma. This stage helped me figure out how to balance structure and flexibility, especially for users who prefer casual learning over rigid lesson paths.
User testing gave me a clearer picture of how others actually use the app. Some parts, like the lesson layout and badge system, were well received—which was reassuring. But I also discovered things I hadn’t thought about, like how unclear it was to exit certain screens or how hidden the “Next” button felt if users didn’t tap everything in the lesson. These small details made me realize how important it is to think from the user's point of view, not just from a designer's.
Overall, this task reminded me that even a basic prototype can reveal a lot. Getting feedback early helped me see what worked, what didn’t, and what to improve moving forward.
.jpg)
Comments
Post a Comment