Application Design II - Task 1: App Design I Self-Evaluation and Reflection

24.9.2024 - 15.10.2024 / Week 01 - Week 04
Tan Zhao Yi / 0363285
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1: App Design I Self-Evaluation and Reflection


LIST


Task 1: App Design I Self-Evaluation and Reflection



INSTRUCTION

 


LECTURE
 
Lecture 1: Revisiting HTML and CSS
In Week 1, we were invited to revise our HTML and CSS by replicating the ibandsnet app interface. The logo, images and icons are provided by the lecturer in Google Classroom.
ibandsnet app interface in Figma
The biggest difference of this exercise with others is we are applying the HTML and CSS in a mobile phone form. We have to preview it in Chrome and change the view to phone via Inspect.
Preview in Chrome - Phone

HTML Code

Lecture 2: Introduction to DOM
DOM: Document Object Model
  • A programming interface provide by browsers
  • Allow developers to interact with and change HTML document
  • Represent the structure of a webpage / app
  • Can be modified using programming language like JavaScript
  • When a web page is loaded, browser converts HTML to DOM (an object-oriented representation of the page)
  • Structure: tree of nodes
Each HTML element (<html>, <head>, <body>, etc.) is a node in this structure. 

Why is HTML CSS important to website development?
1. Dynamic Interaction: Add / Delete / Modify elements, or respond to user interactions like clicks
2. JavaScript Manipulation: When user interacts with the webpage, JavaScript can respond by modifying DOM
3. Event Handling: DOM allows developers could listen user action (event) like keyboard input / clicks, then execute specific code 
4. CSS Manipulation: Dynamically change the elements' appearance by manipulating CSS properties through the DOM

Common DOM Methods:
  • document.getElementById(id): Selects an element by its ID. 
  • document.querySelector(selector): Selects the first element that matches a CSS selector. 
  • document.createElement(tagName): Creates a new HTML element. 
  • element.appendChild(newNode): Adds a new child node to an element.
  • element.innerHTML: Gets or sets the HTML content of an element.
  • element.textContent: Gets or sets the text content of an element.
Then we started to practice this method by creating a to-do-list using Dreamweaver.
Creating a to-do-list
This is our first time linking a JavaScript to index instead of CSS source. Mr.Shamsul guided us step-by-step while coding the script.
JavaScript

 Task 1: App Design I Self-Evaluation and Reflection

We are required to perform a self-evaluation and reflection based on our mobile application design I final project. We have to document the issues, problems, and difficulties and propose solutions to improve the mobile app design aesthetic and user flow. Mobile App design is an iterative process, and this task will expose to us the constant improvements one can make to their app. 

A. Application Design I - Documents

Fig 1.1. Application Design Proposal - PDF

Fig 1.2. UI/UX Design Document - PDF
Summary
Application Name: PB Engage MY
Category: Finance Banking
Target Audience: Public Bank Berhad clients

About:
PB Engage MY is a versatile mobile application developed by Public Bank Berhad, offering a range of banking services to its users. With PB Engage MY, Public Bank customers gain access to essential banking functionalities right at their fingertips. Users can perform fund transactions, including transfers between accounts and to third parties, ensuring hassle-free money management. Additionally, the app enables users to apply for bank cards, such as credit or debit cards, with ease and efficiency. Furthermore, PB Engage MY facilitates bill payments, allowing users to settle utility bills, credit card bills, and other payments swiftly and securely.

MVP Features:
1. Account Management
Allows users to view the balances of their various accounts, including savings, checking, and fixed deposits. Users can easily access and review their transaction history to monitor spending and identify any unauthorised activities. This feature offers detailed management of fixed deposits, including viewing information such as CD number, enabling users to effectively manage their long-term savings.

2. Fund Transfer
Enable users to transfer funds internally between their own accounts and externally to other bank accounts. This feature also includes the capability to make payments using QR codes, providing a convenient and modern method for transactions at retail stores or for peer-to-peer payments. By offering these transfer options, users can efficiently manage their funds and perform necessary financial transactions with ease.

3. Bill Payment
Allows users to pay their utility and credit card bills directly through the app, ensuring timely and convenient management of recurring expenses. Users can handle payments for services such as electricity, water, and credit card bills, avoiding late fees and maintaining good financial standing. Additionally, it enables users to schedule future bill payments, providing effective financial planning by ensuring that all bills are paid on time.

B. Application Design I - Sketches and Outcomes
Fig 2.1. PBe Wireframes Rough Sketches

Fig 2.2. UI Kit

Redesign Application Prototype
 
Fig 2.3. Final High-Fidelity App Design Prototype - Figma
C. Self-Evaluation and Reflection
Overall Reflection
  • Design lacks visual excitement, feeling a bit boring while using the app
  • Important features like payments or security may blend in with less critical functions
  • Overload of information, particularly in sections like Insurance Planning
  • Features reflect a clear focus on providing value to users by making financial tasks easier, safer, and more convenient
  • Priotirise functionality
i) Log in and Home Page
 
Fig 3.1. Log in and Home Page
  • The login screen only allows password login and Face ID is because the prototype is using iOS as model. Android model may replace Face ID with fingerprint recognition.
  • When user clicked on Forgot Password, they are directed to the Public Bank website, which may be very frustrating of the multiple steps to reset password.
  • Conversational phrase like "Welcome back, username" and 'what's going on today?" makes the app more user-friendly
AI Evaluation
  • The home page design might feel cluttered if it tries to showcase too many features or information at once.
Argument
  • The features displayed in home page are selected by exclusive research, including user research, card sorting etc., therefore I think all of them are important enough to display in the home page.
ii) Notifications
 
Fig 3.2. Notifications - Before
  • Categorised notification helps user to find out what they want quickly, avoiding overwhelmed
  • The text seems too long, which may cause user couldn't catch the key message immediately
  • Consider making the text more concise for better readability
Fig 3.3. Notifications - After

iii) Side Navigation Bar
Fig 3.4. Side Navigation Bar 
  • Icons next to each option improve usability 
iv) Account Management
 
Fig 3.5. Account Management
  • The transaction history section could be collapsed by default to avoid cluttering the interface and improve user experience. This way, users can expand it when needed, keeping the layout clean and organized.
AI Evaluation
  • Account details should be displayed in a user-friendly manner with options to view balances, transaction history, and account types. Include prominent action buttons for features like "View Statements" or "Transfer Money."
Fig 3.6. Account Management - Before and After

v) Account Security
 
Fig 3.7. Account Security
  • Using the same colour as other may let user feels that this is not important
  • Consider using visual indicator, such as colour code can enhance user trust
Fig 3.8. Account Security - Before and After

vi) Payments and Transfer
 
Fig 3.9. Payments and Transfer
  • Simplify the flow by reducing the number of fields to be filled, possibly by auto-filling recipient details for repeat payments
  • A Recent Transaction feature for frequent transactions would be a great addition
Fig 3.10. Payments and Transfer - Before and After

v) Card Services
 
Fig 3.11. Card Services
  • The information of 2FA is too long
  • Consider shortening it and add a Learn More option to keep the interface clean and clear
AI Evaluation
  • Make critical card actions like Lock Card or Report Lost Card more visible with dedicated buttons directly on the main card management screen.
Fig 3.12. 2FA - Before and After

vi) Insurance Planning
 
Fig 3.13. Insurance Planning
  • Text-heavy
  • Consider shortening it and add a Learn More option to keep the interface clean and clear
vii) International Banking
 
Fig 3.14. International Banking
  • Similar design to the existing Fund Transfer interface, ensuring users don't need to learn a new process to make transfers
  • Consistency enhance user familiarity and make the experience more intuitive
AI Evaluation
  • If the currency transfer interface lacks real-time information (e.g., live exchange rates, fees), users may feel uncertain about transactions.
  • Add real-time exchange rate displays and provide a breakdown of fees and estimated delivery times to build confidence in international transactions.
viii) Loan Services
 
Fig 3.15. Loan Services
  • The loan application process may be too lengthy or complex, leading to drop-offs
  • Consider simplify the loan application by breaking it into clear, bite-sized steps
AI Evaluation
  • Implement visual aids like progress bars to enhance user experience
  • If there are options for users to apply for new loans or manage existing ones, it increases the app’s value 
Fig 3.16. Loan Applying Form - Before and After

ix) Customer Support
 
Fig 3.17. Customer Support
  • Multiple channels are available (e.g., live chat, phone support) to enhances the overall user experience by providing flexible ways to resolve issues
 AI Evaluation
  • Add information about average response times for each support option, especially for live chat and email. For instance, showing "Typically responds in 2 minutes" reassures users that they won’t have to wait long.
Fig 3.18. Average Response Time

Final Task 1: App Design I Self-Evaluation and Reflection
Fig 4.1. Final Task 1 Presentation Slide

Fig 4.2. Final Task 1 Presentation Video
D. Development
After the submission, Mr.Shamsul gave me some feedback. I ask the AI about its opinion about the user task flow and overall interface design.

Overall Interface Design
1. Improve Visual Hierarchy
  • Typography Size and Weight: Increase the font size or weight for critical information like account balances or section headers. Larger, bolder text will guide users’ attention more effectively, making important information stand out.
  • Spacing and Padding: Increasing the padding around buttons, input fields, and sections can give the interface a more spacious and less cluttered feel. This also improves touch accuracy, especially on mobile devices.
  • Dividers and Background Shading: Use subtle dividers or background shading to separate different content areas (like transaction history and account overview). This helps the user easily scan and digest information.
2. Enhance Color Scheme and Contrast
  • Accentuate Primary Actions: Brighten the primary CTA (Call to Action) buttons like "Transfer Money" or "Make Payment" by using bold, high-contrast colors that draw the eye. These colors should pop against the background while still maintaining the overall app theme.
  • Accessible Color Contrast: Ensure that text and background color combinations have sufficient contrast for readability, especially for users with visual impairments. Tools like a contrast checker can help make sure the app meets accessibility standards (WCAG 2.1).
3. Incorporate Modern Visual Elements
  • Flat or Neumorphic Design: Consider modern design trends such as flat design or subtle neumorphism (soft shadows and light effects) to make the interface look more polished and engaging. This adds depth while keeping the overall aesthetic clean and minimal.
  • Microinteractions: Small animations like a button expanding when tapped, or a card sliding in as it loads, make the app feel more responsive and dynamic. Microinteractions provide feedback to users about their actions, improving the overall user experience.
4. Improve Navigation and User Flow
  • Consistent Menu Placement: Keep the navigation elements (like back buttons, menus, or tabs) in predictable places. For example, a persistent bottom navigation bar with quick access to frequently used features (e.g., "Accounts," "Payments," "Support") ensures users don’t need to hunt for key features.
  • Breadcrumbs or Progress Indicators: For multi-step processes (like making a transfer or opening an account), add a progress bar or breadcrumbs at the top. This provides a clear indication of how many steps are left and reduces user anxiety.
User Flow Chart
After consulting, I will continue working on only one user task flow, which is fund transfer. Therefore, I asked for the feedback of the user task flow, to provide a better user experience.

1. Streamline the Fund Transfer Flow
  • Quick Access to Fund Transfer Options: Allow users to access fund transfers directly from the home screen or within one tap of the main navigation. Consider adding a "Quick Transfer" button for recurring or frequently-used transfer actions.
  • Pre-filled Information: For frequent payees or saved accounts, pre-fill transfer details to minimize user input. If users select a previously saved contact, all details like account number and bank can be auto-populated.
2. Improve Selection and Confirmation Steps
  • Clear Categorization: When users are selecting transfer types, such as internal, interbank, or prepaid top-ups, categorize them distinctly to reduce confusion. For example, create clear sections like “To Public Bank Account,” “To Other Bank,” and “Top-Up Services.”
  • Transfer Type Clarification: It’s helpful to include a brief description for each transfer type, especially if you have special transfer services like DuitNow. A one-sentence explanation in the flow could help users feel confident in their selection.
3. Error Handling and User Guidance
  • Error Resolution Options: In cases of unsuccessful transfers due to reasons like insufficient funds or invalid account details, provide clear error messages and actionable suggestions. Offer a retry button and clearly explain why the transfer failed.
New Task Flow: Log in > Home > Transfer to a new account
Fig 5.1. New Task Flow - Transfer

As a result, the further improvement of the redesigned app are:
  • Main colour: red
  • Strong contrast of the button style
  • Collapse unnecessary  “To Public Bank Account” and “To Other Bank”
  • Change of the sub-menu 
First I came out with a new colour palette, using ArtyClick to find the colour shades of Public Bank logo's red.
Fig 5.2. Using ArtyClick to find colour shades
Fig 5.3. shows the new colour palette, the icons and fonts are remaining as the existing UI kit.
Fig 5.3. Refined Colour Palette

As the AI suggested, I added a list of account in the Home Screen, which will be the frequent transfer account of the user. At the top-right corner of the box, there will be an icon to allow users scan QR code to transfer. Also, I added a live chat button at the bottom so user can know where to find help immediately without searching it in multiple menus.

Fig 5.4. Home Screen - Before and After

Additionally, the drop-shadow effect was added to the buttons in the redesigned app to enhance visual depth and realism. It also conveys a sense of professionalism by providing a polished, tactile feel, making the interface more engaging and intuitive for users to interact with.

Fig 5.5. Opened Surprise Box
After user transfer their fund successfully, I used a opened surprise box as a confirmation message. This is designed to create a positive and engaging experience for users. This visual symbolizes the completion of a task and the satisfaction of achieving a goal, evoking a sense of reward and delight. This playful, celebratory touch also contributes to a memorable and user-friendly interface, leaving users with a positive impression of the app.
Fig 5.6. Confirmation Message - Before and After

Figure 5.7 presents the final refined version of the PBe Fund Transfer feature. This iteration incorporates all the enhancements made to streamline the user experience and improve the overall design of the fund transfer flow. 
Fig 5.7. Refined PBe - Home and Fund Transfer

Fig 5.8. Comparison between old and new

To enhance the depth and quality of the content, I redesigned other screen: Notifications, Side Navigation Bar, and Accounts section. These updates aimed to create a more cohesive and engaging user experience by improving visual consistency, simplifying navigation, and refining the layout for better clarity and accessibility.

Notifications
The new notifications page builds upon the redesigned version by adding a sliding feature. When users click on the notification button, the page slides in from the left. To ensure intuitive navigation, I added a back button pointing to the right, allowing users to easily return to the previous screen.
Fig 5.9. Notifications - Before & After

Side Navigation Bar
To create a more organized and visually appealing menu, I introduced dividing lines between the various options. These lines help to separate and distinguish each menu item, making it easier for users to navigate and identify their desired actions. By incorporating these subtle dividers, the layout appears cleaner and more structured, enhancing the overall user experience and minimizing visual clutter. This approach ensures that users can quickly and effortlessly locate the options they need.

In addition, I streamlined the menu by shortening lengthy option names, such as changing Account Management to simply Accounts. This adjustment is to enhances readability and comprehension for users. By using concise and clear labels, the menu becomes more intuitive, allowing users to quickly understand and access key features without feeling overwhelmed by lengthy text. 
Fig 5.10. Side Navigation Bar - Before & After

Accounts
This section further enhances the redesigned version by incorporating key changes based on user feedback. I removed the "Deactivate User ID" option, as it was recommended to be grouped under a different section for better organization. The menu style was updated to improve the overall viewing experience, making it more visually appealing and user-friendly. Additionally, a live chatbot was added at the bottom of the page to provide immediate assistance and support, ensuring users can get help whenever they need it.
Fig 5.11 Accounts - Before & After


FEEDBACK

Week 5
You may change the colour, as Public Bank's brand colour is red. Ask AI about the general feedback of the app, both interface and flow chart.


REFLECTION
 
Experience
Throughout the process of redesigning the PB Engage MY app, I learned the importance of balancing aesthetics with functionality. Initially, the app felt visually dull, but by integrating feedback, such as simplifying the layout and enhancing the color palette, I managed to create a more engaging user experience. The experience also helped me refine my design thinking, especially in aligning the app's look with the brand identity, while ensuring that core features were easily accessible to users.

Observations
I observed that implementing AI feedback significantly improved user interaction. The blue color palette, which I retained to build on the original logo’s identity, helped maintain brand consistency. Additionally, simplifying key actions and organizing the navigation structure enhanced usability, reducing potential friction points for users.

Findings
A key finding was that small design adjustments, like simplifying navigation and enhancing visual hierarchy, can greatly improve user experience. Overall, the reflection revealed that user experience and brand alignment are vital for an effective app redesign.

Comments

Post a Comment