Labels

APPLICATION DESIGN / FINAL PROJECT : HI-FI APP DESIGN PROTOTYPE

 Application Design I Final Project: Hi-Fi App Design Prototype



Zhang Wan Ru 0368214

16/07/2025—04/08/2025 (Week 13—Week 15)

Application Design I / Bachelor of Design in Creative Media / Taylor's University

TABLE OF CONTENTS


2. Lecture


4. Feedback

Instructions




Lecture

Week 14

This week, Mr. Sylvain taught us how to create a UI kit.




Final Project: Hi-Fi App Design Prototype

Description:

We will integrate the insights gained from Tasks 1, 2, and 3 and apply them to Task 4 to build unified visual assets and further refine the prototype into a finished interface with full functionality and real-world usage experience.

Week 13

Building on last week's work, I further refined the app's interface. I finished designing the other pages and completed a more complete user flow diagram. I integrated them into the framework to make it look cleaner. I changed the colors and consolidated the incorrect answers. You can add 🌟 and consolidate them into the error collection. Learn more. I also modified the error layout format to make it look more aesthetically pleasing.

Fig. 1.1 Screenshot for Figma 

Fig. 1.2 Screenshot overall design 

Color Palette:

Fig. 1.3 Overall Color Palette for app

I retained the iconic colors of Duolingo, but chose blue as the primary color. Blue evokes professionalism, trust, rationality, and calmness, which better represents the commercial version of Duolingo Pro.

Week 14

Link to Figma UI KIT

UI Kit for Final Project
Fig. 1.4 UI Kit for Final Project

Button template

Fig. 1.5 UI Kit for Final Project (Button template)

Spacing
Fig. 1.5 UI Kit for Final Project (Spacing)

Fig. 1.6 UI KIT

Usability Testing + changes

1. The layout is not beautiful enough, and there is too much content, which is not easy to read. I divided them into two parts. Only the correct answers are left. You can also choose to view other question analyses or click on the question to collect it.
Fig. 1.7 Display of change

2. During the test, the button position was out of place and was at the wrong position on the screen.

Fig. 1.8 Display of change

3. Added a color so that the user can see what the user has selected when selecting. Makes it easier to see.

Fig. 1.9 Display of change

Gamification Method

1. Streak training system

A streak is a continuous learning reward system in Duolingo. Every time a user completes a learning task each day, the system records a streak. The streak number will continue to grow as the user persists in learning for multiple days.

Fig. 1.10 Streak training system

2. Energy Mechanism
In Duolingo, when users answer questions incorrectly, their energy (hearts) will be deducted. Once the energy is exhausted, they will not be able to continue learning unless they wait for it to be restored, use gems to purchase it, or complete additional practice tasks to restore the energy.

Fig. 1.11 Energy Mechanism

3. Team Learning Leaderboards

Team learning leaderboards are a feature found on platforms like Duolingo that organizes user into
groups and ranks them based on their learning performance.
They leverage competition and a sense of collective pride to boose learning motivation and are a common 
social gamification mechanic.
Fig. 1.12 Team Learning Leaderboards
Monetization Method
Duolingo adopts a freemium + diversified revenue model:

  • Primarily monetizing through subscription services (Duolingo Super/Pro).
  • Supplementary methods include advertising and virtual item purchases.

Hi-Fi App Design Prototype walkthrough video: https://youtu.be/Z_jZSsUFLPI

Fig. 1.13 Hi-Fi App Design Prototype walkthrough video


Hi-Fi App Design Prototype:

Fig. 1.14 Hi-Fi App Design Prototype 

Figma Wireframe:

Overall Prototype:

                                                       Fig. 1.15 Hi-Fi App Design Prototype 
Figma Prototype:

Feedback 


Week 14
1）Add a skip to the initial personalized settings. Not everyone likes to answer questions, so you can skip the questions and go straight to learning.
2）Set three colors on the homepage to represent past tense, present tense, and future tense, so that you can see at a glance which lessons you have completed.
3）Modify the design of the question analysis in the answer to the question, mainly changing the first and third questions, and the font size should be 16 so that it can be seen clearly.




Reflection 

Through this project, I learned how to redesign an app by balancing professional content with an engaging user experience. I tried to adapt Duolingo’s playful and colorful style into a version more suitable for business English learners. It was my first time designing features like community practice groups, spin-the-wheel rewards, and error analysis pages, so I had to explore a lot of new tools and techniques. Sometimes I felt stuck, especially when connecting complex user flows or dealing with screen variations, but after watching tutorials and testing repeatedly, I managed to figure things out.

As I worked on the prototype, I realized how important it is to keep the design consistent and user-friendly. Too many colors, fonts, or confusing layouts could make the app look messy. I paid extra attention to using the same elements, organizing information clearly, and maintaining clean visual flow. I also noticed that small things like button placement, feedback messages, or even whether a pop-up disrupts the flow can impact how users feel when using the app.

Although the process was challenging, especially since I had to complete it in just a few weeks, I was proud of how much I learned. From creating the persona and user journey to building the wireframe and final high-fidelity prototype, I saw real progress in my thinking and design skills. This experience helped me understand that UI/UX design is not only about making things look good but also about making sure users can navigate and learn smoothly.

I would like to give special thanks to Mr. Zeon and Mr. Sylvain for their guidance and support throughout the project. Their feedback helped me stay on track, improve my ideas, and push my work further than I could have on my own.





















Labels:

Comments

Post a Comment

Popular Posts