Application Design 1 - Final Project : High Fidelity Prototype and Final Compilation


|| 07/16/2025 - 07/30/2025 (Week 13 - Week 15)

|| Bertrand Alden Gani / 0370471

|| Application Design

|| Bachelor Of Design In Creative Media

|| Final Project : High Fidelity Prototype and Final Compilation


FINAL COMPILATION

1. Project 1

2. Project 2

3. Project 3


INSTRUCTIONS

Fig 1.0 MIB



FINAL PROJECT

The final task is focused on presenting the completed high-fidelity redesign of the BCA Mobile app along with its key design elements. It begins with a short project introduction, including the problem statement that explains why the redesign is needed. The deliverables include a high-fidelity app link that showcases the final interactive prototype and a usability testing report highlighting user feedback and the changes made based on it. I also created a complete UI Kit containing colors, typography, and reusable components used in the design. To make the app more engaging, I applied gamification methods such as goal-setting, progress bars, and achievements. For monetization, I proposed a partnership promotion system to provide users with exclusive deals while generating revenue for the bank. Finally, a video demo of the final app is provided to demonstrate the improved design, navigation, and interactive features.

Introduction (Problem Statement):

Many people use BCA Mobile every day, but the app feels old-looking and lacks modern visuals. The navigation isn’t very intuitive, which makes it harder for users to find features quickly. Managing several accounts within the app is also not simple, especially for people who have both personal and business accounts. Because of these issues, users don’t get a smooth experience. That’s why I decided to redesign BCA Mobile to make it look fresher, easier to use, and better for handling multiple accounts.

High Fidelity App Link:

https://www.figma.com/proto/A9doGA9NaEAmmuK9wYutRq/App-Design-1?node-id=318-5812&t=ddVd35rS7pdmXKx3-1

Usability Testing & Changes:

Issue: No special feature for users managing multiple accounts
Change: Added easy account switching and more tools for business owners

Issue: Layout didn’t handle long company names (not practical)
Change: Redesigned layout after reviewing other banking apps to make it more flexible and user-friendly

Issue: Old design lacked clear visual hierarchy, making the app feel outdated
Change: Updated the layout with modern icons, clearer typography, and better color contrast for readability

Issue: Hard to differentiate between personal and business accounts
Change: Changed background colors when switching views to make them visually distinct

Fig 2.0 Before vs After

UI Kit:

Colour Palette

I use #0066AE for my header and footer colour, this include nav bars. I also use it for icon colours. For background I use #F1F5F8 and for text boxes I use #8BBFE2 at 32%. Lastly for highlight and contrast I use #F9B54C.

Fig 2.1 Colour Palette

Typography

For typography, I use Montserrat (Regular, Medium, Bold).

Fig 2.3 Typography

Icon

For icons I get them from Flaticon.

Fig 3.3 Icon

Layout

Column: 4; Type: Stretch; Width: Auto; Margin: 20; Gutter: 8

Fig 3.4 Layout

Gamification Method:

For gamification, I added features to make saving and managing money more engaging. I included a goals system where users can set specific savings targets, and a progress bar shows how close they are to reaching each goal. I also added an achievement system that rewards users with badges when they complete a set number of goals. These achievements can be shared with others, making the experience more fun and encouraging users to stay motivated in using the app.

Fig 3.5 Gamification Method

Monetization Method:

For monetization, I focused on using partnership promotions to bring value to both the bank and its users. In my redesigned BCA Mobile app, users can access exclusive deals, cashback offers, and discounts from partnered merchants directly through the app. This method allows the bank to generate revenue through collaborations while giving users extra benefits without charging them additional fees. It also makes the app more attractive to young users who enjoy rewards and special promotions when managing their finances.

Fig 3.6 Monetization Method


Final App Video Demo:

Flow 1 - Transfer with Presets

Flow 2 - Request & Payout

Flow 3 - Set Goals & Weekly Save

Flow 4 - Free Navigation




Hi-fi Development (Figma Link)

Hi-fi Prototype (Figma Link)
Application Design 1 - Assesment 4 by Bertrand A.G

Comments

Popular Posts