Application Design / Final Project : Hi-Fi App Design Prototype
16/7/2025 - 23/7/2025 (Week13-Week14)
Amber Tan Jing Jing (0372746)
DST60504 / Application Design I / Bachelor of Design in Creative Media
Final Project / Hi-Fi App Design Prototype
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Final Project (Hi-Fi App Design Prototype)
4. Feedback
5. Reflection
LECTURES
Week14
This week, Mr Sylvain taught us how to create a UI Kit.
INSTRUCTIONS
Final Project (Hi-Fi App Design Prototype)
Description:
We will synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. We will create integrate visual asset and refine the prototype into a complete working and functional product experience for a selected task.
Week13
First, I wanted to create an automatic photo carousel for the promotional pop up and the homepage banner. So I searched for tutorials on youtube and learned how to do it. After trying many times and testing it out, it finally worked.
Week14
During Hi-Fi prototype testing, most users gave positive feedback about the overall flow and design. They said the app was easy to navigate and the layout felt clean and not overwhelming.
Back in the Lo Fi stage, I had already discovered and fixed one issue. The Rewards and Coupons were separated, which made it harder for users to find what they needed. I combined them into one flow inside the Rewards section so users would not need to go back to the homepage just to find their coupons.
This change was kept in the Hi Fi version, and users no longer felt confused. It made the redemption process smoother and removed unnecessary steps.
Hi-Fi App Design Prototype walkthrough video: https://youtu.be/jTsQS5xy8uM
View the Hi-Fi App Design on Canva [HERE]
FEEDBACK
Week13
- In the Rewards section, it is better to include the coupons directly so users don’t need to go back to the homepage to access them. Keep it in one place instead of separating them. The coupons shown on the homepage should link directly to the Rewards - Coupons section.
- The myCARD section can also include a shortcut to the coupons.
- In the myCARD, there can be a small space to show which coupon has already been activated. This is because some users might forget. For example, after activating a coupon, they may go to the counter and scan the code but forget which coupon they used. To avoid this, a simple reminder can be shown under QR code. This helps users keep track and prevents confusion during redemption.
- For the Exchange page, the redemption instructions should be shown at the top since they are more important. The description can come below, and the terms & conditions can be made smaller and placed at the bottom.
- Try to use only 3- 4 font sizes throughout the app.
REFLECTION
Experience
Through this project, I learned how to choose suitable colours for the app and keep them consistent throughout all screens. I also learned many new things such as creating an automatic photo carousel and making a pop up overlay. These were my first time trying them, so at first, I didn’t know how to do it. After watching some tutorials on youtube and testing a few times, I finally made them work.
Observations
I realised that using too many different colours and fonts can make the app look messy and confusing. A consistent colour scheme and limited font styles help make the app cleaner. Besides, using the same shapes, consistent spacing and similar sizes across screens also helps the app look more neat. I tried to use the same elements throughout the app.
Findings
Although the process was a bit difficult, I learned a lot. From understanding user experience through interviews, to creating the persona, user journey map, identifying the MVP for my redesign, developing the user flowchart, building the Lo-Fi prototype, and finally completing the Hi-Fi prototype. I was quite satisfied with the final result because I went through so many stages and put in a lot of effort throughout the process.
Comments
Post a Comment