Application Design 1 - Project 3 : Lo-fi App Design Prototype

|| 07/02/2025 - 07/23/2025 (Week 11 - Week 14)

|| Bertrand Alden Gani / 0370471

|| Application Design

|| Bachelor Of Design In Creative Media

|| Project 3 : Lo-fi App Design Prototype

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Project 3

4. Feedback

5. Reflection

LECTURES

Week 11 : Usability Testing & UI Kits

Usability testing means evaluating a product or service with representative users. The primary aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Meanwhile, UI kit is pre-packaged collection of all UI components for a mobile app or website.

Fig 1.0 Week 11 Lecture

Week 12 : Usability Heuristics

Usability heuristics are general principles or guidelines (Rules of thumb) that designers and usability experts use to assess and enhance the user-friendliness and overall usability of products like websites and applications.

Fig 1.1 Week 12 Lecture

Week 13 : User Interface Visual Elements

UI visual elements include lines, shapes, colours, form, texture, space, text, shadow, buttons, icon, photos, illustrations, cards, whitespace, search bar, breadcrumb, pagination, slider, etc.

Fig 1.2 Week 13 Lecture

Week 14 : Design Essential for UI and Resources

This week we learned how important color palettes and typography are in creating a good user interface. A well-chosen color palette helps build visual hierarchy, guides user attention, and makes the design more consistent and appealing. Typography is equally important because it affects readability, accessibility, and the overall feel of the app. Choosing the right fonts, sizes, and spacing ensures that users can easily understand and navigate the content.

Fig 1.3 Week 14 Lecture

<< back to top >>

INSTRUCTIONS

Fig 2.0 MIB

<< back to top >>

PROJECT 3

In this task, I started by making sketches to visualize initial layout ideas and gathered references from other banking apps for inspiration. 

Sketches:

I started this ideation with one main sketch that showed my idea for improving the BCA Mobile app. I focused on the main screens and how users would navigate between them. Even though I only made one sketch, it helped me plan the layout and flow before creating the low-fidelity prototype in Figma.

Fig 3.0 Sketches

References:

For the reference, I looked at other banking apps like MAE and myBCA to get ideas for my design. I checked how they arrange their menus, show account balances, and guide users through different features. These references helped me figure out ways to make the layout simpler and improve the navigation for the redesigned BCA Mobile app.

Fig 3.1 References

Sitemap:

Then I created a sitemap to map out how the main pages of the redesigned BCA Mobile app connect to each other. This helped me plan the navigation flow and ensure users can easily switch between personal and business accounts, make transfers, and access other important features. The sitemap also served as a guide when I built the low-fidelity prototype to keep everything organized and simple to use.

Fig 3.2 Site Map

Micro-interactions:

For the micro-interactions, I focused on making the app feel smoother and easier to use. When switching between personal and business views, I added a slide animation to the right or left to make the change feel natural. I also made the transaction interface draggable, allowing users to pull it down for quick access. For the hide/show balance feature, I used an instance interaction so it appears and disappears instantly without reloading the page. The navigation bar also uses a slide effect to keep the flow consistent. Overall, I mainly used pull/slide animation and tap interactions to make navigation more intuitive.

Fig 3.3 Micro-interactions

Low-fidelity Prototype Flow :

1. Transfer with presets

Tap "Transfer" -> Choose Bank-> Enter Details/Use Presets -> Confirm & Transfer -> Transfer completed

2. Request & Payout

(Personal view)Tap "Request" -> Add Request -> Switch view -> (Business view)Tap "Business Payout" -> Check Inbox -> Pay -> Request & Payout completed

3. Setting Goals & Weekly Save

Go to Goal page -> Add and Set Goal -> (Business view) Tap "View All" on Weekly Income -> Save This Week's Income -> View Goal Progression -> Setting Goals & Weekly Save completed

Lo-fi Design:

Fig 3.4 Lo-fi Design

Low-fidelity Prototype Walkthrough :

In this prototype, users can switch between personal and business views, go to the transfer page, and view transaction history. The interactions are kept simple, mainly click-through links to move between pages without detailed animations. 

This walkthrough helps demonstrate how users would navigate the app and test whether the overall layout and structure work well before moving to a high-fidelity design.

Fig 3.5 Lo-fi Prototype Walkthrough

<< back to top >>

Lo-fi Development (Figma Link)

Lo-fi Prototype (Figma Link)

Application Design - Assesment 3 by Bertrand A.G

FEEDBACK

Make sure your layouts are practical, for example there are some of your box that won't fit if the company name is too long so you have to consider that.

<< back to top >>

REFLECTION

After completing Task 3: Lo-Fi Prototype, I learned the importance of starting with simple designs before moving to high-fidelity work. Creating sketches, sitemaps, and low-fidelity screens helped me focus on the structure and flow of the app without worrying too much about colors or detailed visuals. Through usability testing, I saw how users interacted with the basic layout and discovered issues early, such as handling multiple accounts and fitting long company names. Making these adjustments at the Lo-Fi stage saved time and helped me build a stronger foundation for the final design. This task showed me that even simple prototypes are powerful tools for testing ideas and improving usability before polishing the final look.
<< back to top >>