Application Design I/ Project 4: Hi-fi App Design Prototype
Natalie Chu Jing Xuan, 0354589
Application Design I, Bachelor of Design (Honours) in Creative Media
Project 4: Hi-fi App Design Prototype
Table of Contents
- Module Information Booklet (MIB)
- Project 4: Hi-fi App Design Prototype
- UI Kit
- Completed Hi-fi App Design Prototype
- Gamification Method
- Monetization Method
- Usability Testings
- Final Outcome
- Reflection
Fig.1 Module Information Booklet (MIB)
Project 4: Hi-fi App Design Prototype
Instruction:
- Students will synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience for a selected task.
Language learners often lose motivation when the learning experience feels repetitive or disconnected from real-life use. While Memrise offers useful content, some users find the interface overwhelming and the experience less engaging over time.
This redesign aims to improve the user experience by making the app more intuitive, interactive, and motivating—helping learners stay engaged and retain what they’ve learned more effectively.
User Persona
Jun Ming is a language learner using Memrise to study Thai. He struggles to communicate with his Thai relatives who don’t speak English. Learning Thai helps him connect with family and feel more confident while traveling.
UI Kit
The primary colors include #2E3648 and #F8C444, drawn directly from the logo to maintain brand consistency. Supporting shades like #344559 and #46566B help build visual hierarchy across screens. Accent colors such as #00A778 (for progress indicators and correct answers) and #FC4F4F (for wrong answers) are used to provide clear and immediate feedback. For text, I use #000000 and #FFFFFF to ensure maximum readability across backgrounds.
Typography was also chosen with usability in mind. SF Pro is used for English text due to its clean, modern look, while Bai Jamjuree is used for Thai words to preserve authenticity and legibility in the native script.
Completed Hi-fi App Design Prototype
Below are the full screenshots of the completed high-fidelity prototype created in Figma:
|
| Fig.3.1 Full Hi-Fi Prototype in Figma |
|
| Fig.3.2 Overall Prototype Flow |
To maintain consistency with the existing brand identity, I decided to stick closely to Memrise’s current color scheme. The primary colors like #2E3648 and #F8C444 were taken directly from the original app’s logo, with a few supporting tones added to build depth without straying from the original look and feel.
Once the color palette was set, I began designing the onboarding and login pages. The onboarding screens are kept minimal yet vibrant, highlighting key app features to give users a quick overview before they begin. For the login screen, I focused on a clean and simple layout with clear hierarchy, ensuring that the sign-up and login processes feel smooth and intuitive for new users.
|
| Fig.3.3 Onboarding & Login Page |
Sign Up page, where new users are required to fill in their basic information such as username, email, password, confirm password, and phone number. The layout was kept clean and straightforward to reduce cognitive load and encourage completion.
|
| Fig.3.4 Sign Up Page |
Once the form is submitted, users are guided through four quick setup questions:
- Their native language
- The language they want to learn
- Their learning motivation
- Their preferred learning frequency
|
| Fig.3.5 Setup Questions |
I used a softer shade of yellow for the selected options. This makes them stand out clearly from unselected ones while still maintaining visual harmony with the overall theme. It also creates a subtle contrast from the bolder yellow used in the Next button, helping users differentiate between interaction elements without breaking the consistency.
After completing the setup questions, users are directed to the Home Page, where they can view the unit map and start their learning journey.
|
| Fig.3.6 Home Page, Lesson Preview, Unlock Chapter, Streak Page |
One of the first major design changes I made in the high-fidelity version was the Lesson Preview page. In the lo-fi prototype, this preview appeared as a small pop-up window with very little information. Based on usability testing, users felt it wasn’t helpful and lacked context about what they were about to learn.
|
|
Fig.3.7 First major changes |
Moving on to the Lesson Page, this is where users are introduced to new vocabulary with visuals, audio, translations, and example sentences.
|
| Fig.3.8 Previous Lesson Page Layout |
To address this, I made two key changes in the hi-fi version:
- I added a permanent Next button so users can move forward without needing to interact with every optional element.
- I changed the example sentence from a bottom pop-up to a dropdown block within the same screen. This keeps the layout cleaner, avoids disrupting the flow, and gives users more control.
|
| Fig.3.9 Current Lesson Page Layout |
|
| Fig.3.10 Second major changes |
|
| Fig.3.11 Quiz Page |
After completing the quiz, users are brought to a reward screen that shows their progress and earned XP. In the lo-fi version, although the “You did it!” message was clear, many users mentioned that the +XP reward wasn’t obvious enough. It was small and easy to miss.
In the hi-fi version, I improved this by placing the +XP reward inside a highlighted box and adding an XP icon next to it. This makes the reward feel more visible and satisfying, reinforcing the user’s sense of achievement. The added emphasis on XP also ties into the app’s gamification strategy, encouraging continued learning through positive feedback.
|
| Fig.3.12 Third major changes |
Next, I worked on the Practice Page, where users can revisit previous questions and review mistakes. To balance the dark navy blue background and avoid the screen feeling too dull, I added vibrant, colorful icons to each practice section.
These icons help visually break up the content, make the interface feel more lively, and guide users’ attention to different features like Quick Review or Review Mistakes.
|
| Fig.3.13 Practice Page |
I then designed the Leaderboard and Profile Page to support the app’s gamification and personal motivation features. The Leaderboard allows users to track their XP progress and see how they rank among others, adding a sense of friendly competition.
On the Profile Page, users can view their learning stats and unlockable badges. During usability testing, users mentioned they loved the shiny golden badges, saying it made the app feel rewarding and fun. These visual rewards help reinforce progress and encourage users to keep coming back to maintain streaks and collect more achievements.
|
| Fig.3.14 Leaderboard Page and Profile Page |
Gamification Method
To make learning more motivating and enjoyable, I implemented several gamification features throughout the app:
- XP System: Users earn XP for completing lessons, quizzes, and practices, giving them a clear sense of progress.
- Streak Tracking: Encourages daily learning by rewarding consistency.
- Badges: Unlockable shiny golden badges mark key milestones, which users found especially rewarding and fun during testing.
- Leaderboard: Adds a light competitive element by letting users compare their progress with others.
- Progress Bar: Visual feedback in lessons and quizzes helps users stay aware of how far they’ve come.
These elements work together to turn language learning into a game-like experience, keeping users engaged without overwhelming them.
Monetization Method
The app follows a freemium model, offering both free and paid experiences:
1. Free Tier:
Provides access to basic lessons, quizzes, and practice modes, with occasional ads shown after major actions like completing a quiz.
2. Pro Plan (subscription-based):
- Unlimited Lives – no limits on wrong answers
- Access to All Content – every chapter and lesson unlocked
- Real-Life Sentences – helpful, practical examples
- 100% Ad-Free – a smoother, uninterrupted experience
A promotional ad for the Pro Plan appears at natural points in the user journey (e.g., after finishing a quiz), gently encouraging upgrades without disrupting the flow.
Usability Testings
After completing the high-fidelity prototype, I conducted usability testing with three participants to evaluate the app’s design clarity, user flow, and overall experience.
User 1: Justin
Feedback Summary
Overall Experience Rating: 4.8/5 (Very Good)
Positive Feedback:
- Enjoyed the theme and color scheme
- Described it as vibrant and intriguing
- Said the design encourages longer engagement and continued learning
Areas of Confusion:
- In Chapter Review, the dropdown interaction was unclear
- Expected the entire block to be tappable, not just the arrow
Suggestions for Improvement:
- Make the whole chapter block clickable instead of just the dropdown arrow for smoother navigation
User 2: Jun Ming
Feedback Summary
Overall Experience Rating: 5/5 (Very Good)
Positive Feedback:
- Loved the badge system, described it as shiny and rewarding.
- Found the app clear and easy to use with no confusing parts.
Areas of Confusion:
- None mentioned, but echoed User 1’s comment about the dropdown block needing improvement.
Suggestions for Improvement:
- Improve the Chapter Review dropdown interaction — make the whole block clickable.
User 3: Jie Xuan
Feedback Summary
Overall Experience Rating: 5/5 (Very Good)
Positive Feedback:
- Found the app smooth, clear, and well-spaced, especially liked the clean layout
- Enjoyed the lesson and quiz design
- Word-by-word translation helped understanding
Areas of Confusion:
- No major confusion, but disliked the repeated appearance of ads
Suggestions for Improvement:
- Reduce the frequency of ads to improve flow
- No changes needed for colors or design — the user was satisfied
Final Outcome
Walkthrough Video: https://youtu.be/tbIwKQqAlgQ
Fig.5.1 Video Walkthrough
Figma file:
Fig.5.2 Figma File
Figma Prototype:
Fig.5.2 Figma Prototype
Canva Slide:
Fig.5.3 Canva Slides
Reflection
This project has been a meaningful journey from the initial proposal all the way to building and refining the high-fidelity prototype. At the start, everything was just a rough idea: how could I redesign Memrise to feel more engaging, relevant, and user-friendly for modern learners? The proposal stage helped me define the problem and understand my target audience, especially learners like Jun Ming who want to study a language for personal connection and travel.
Moving into the UI/UX documentation stage, I mapped out user flows, features, and layouts based on what real users might need. Creating the lo-fi prototype gave me a solid foundation to test early ideas without getting too caught up in visual details. It helped me focus on functionality—what works, what doesn’t, and where users might get confused. Usability testing at this stage revealed so many small but important things, like confusing navigation patterns and unclear feedback messages.
With all that input, transitioning to the high-fidelity design felt much smoother. I was more confident in my decisions—from color choices that matched the brand, to clearer layouts and gamification elements that actually felt rewarding. I especially enjoyed seeing how small visual tweaks, like adding a soft yellow highlight or shiny badges, could spark delight in users and keep them motivated.
Throughout the entire process, I’ve learned a lot. Each stage taught me something new: from defining the right problems, to testing with real people, to iterating with purpose. Looking back, I’m proud of how far this app redesign has come. More importantly, I’m grateful for the chance to create something that’s not only functional, but also fun, inviting, and thoughtful.
.jpg)
Comments
Post a Comment