Application Design II/ Task 1

23.09.2024 - 20.10.2024 (Week 01 - Week 04)
LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / APPLICATION DESIGN II
Task 01: App Design 1 Self-Evaluation and Reflection

---

JUMPLINK
Instructions
Task 01: App Design 1 Self-Evaluation and Reflection
Feedback
Reflections

---

INSTRUCTIONS

---

Task 01: App Design 1 Self-Evaluation and Reflection
In this task, we are required to conduct a self-evaluation and reflection based on our final project for Application Design I. The goal of this project is to document the challenges, issues, and difficulties encountered, and to propose solutions for enhancing the app's design aesthetics and user flow.

Progress

For my Application Design I project, I chose to redesign the MyUMobile app, specifically focusing on providing UMobile prepaid subscribers with a user-friendly and efficient way to manage their mobile services, such as paying bills, monitoring data usage, and more.

Link to Prototype
Link to Figma File

Figure 1.1 Final high-fidelity prototype.

As I revisited the prototype created for my Application Design I final project, I was satisfied with the overall style and user interface. However, I realized that for this project, where we will need to code the app, I will need to complete some of the pages that were unfinished in the previous project, such as those accessible through the navigation bar, to ensure the app's basic flow. Additionally, I have decided to focus on a few key pages that highlight the app's main functions.

Figure 1.2 Key pages. 

Mr. Shamsul recommended that we review the work of our seniors to better understand what needs to be completed for this task. I noticed that they used Claude AI to upload their work, seek feedback, and make improvements or refinements to their app designs. While I was initially unsure about relying solely on AI, as it might not always be accurate, I also sought feedback from my friends, assuming they were users of the app. After collecting feedback from both the AI and my friends, I filtered the suggestions and decided on the areas where refinements were needed.

Reflection
Login Page

Figure 2.1 Login page (before).

I uploaded the high-fidelity prototype of my login page to Claude AI and asked for feedback on how to improve it. 

Feedback from Claude AI:

1. Input Field Design

   Issue: The input fields lacked clear visual boundaries, potentially confusing users about where to tap.  

2. Typography Hierarchy

   Issue: The font sizes and weights didn’t clearly distinguish between different levels of information.  

3. Self-Registration Prominence

   Issue: The "New Line Self-Registration" option was not prominent enough.  

4. Feedback and Loading States

   Issue: There was no visual feedback when the user tapped "Log In".  

Figure 2.2, 2.3 Feedback from Claude for login page.

Home Page

Figure 2.4 Home page (before).

Based on the feedback I received from both Claude AI and my friends, I made the following observations and improvements:

Feedback from Claude AI:

1. Cluttered Layout / Inconsistent Card Design 

Issue: The "Recommended Package" and "Special Offer" sections used different card styles, leading to visual inconsistency. 

2. Inconsistent Typography 

Issue: The varying font sizes and styles across the interface affected readability and disrupted visual harmony.  

3. Limited White Space 

Issue: The design felt cramped, with elements too close together, violating the principle of white space. 

4. Unclear CTAs (Call-to-Actions) 

Issue: The "Special Offer" section lacked clear call-to-action buttons, making it unclear how users should act on these offers.  

Figure 2.5, 2.6 Feedback from Claude for home page.

Feedback from Friends:
1. Contrast Issues 
Issue: The pie chart under the "Power Prepaid Plan" section had low contrast against the background, making it hard to read.
2. Small Touch Targets
Issue: The touch targets in the "Recommended Package for U" section seemed too small, which could hinder usability.
3. Typography Suitability
Issue: The font used was not suitable for a telecom mobile application. 

Services Page

Figure 2.7 Services page (before).

I uploaded the low-fidelity prototype of my service page to Claude AI and asked for feedback on how to improve it. 

Feedback from Claude AI:

1. Button Size and Spacing

   Issue: The buttons are too small and positioned too closely, increasing the likelihood of accidental taps.

2. Information Architecture  

   Issue: The arrangement of services could be more intuitive to improve navigation.

Rewards Page

Figure 2.8 Rewards page (before).

I uploaded the low-fidelity prototype of my rewards page to Claude AI and asked for feedback on how to improve it. 

Feedback from Claude AI:

1. Carousel Navigation

   Issue: The carousel dots are too small, making them difficult to tap accurately. Consider adding swipe gestures for smoother navigation.

2. Personalization

   Issue: The title "Rewards for U" implies personalization, but it’s not clear how these rewards are tailored to the individual user.

Account Page

Figure 2.9 Account page (before).

I uploaded the high-fidelity prototype of my account page to Claude AI and asked for feedback on how to improve it. 

Feedback from Claude AI:

1. Color Contrast

   Issue: The light text on a light background may reduce readability for some users. 

2. Profile Edit Functionality

   Issue: It's not immediately obvious how to edit profile information. 

Figure 2.10, 2.11 Feedback from Claude for account page.

Balance/ Service Details Page

Figure 2.12 Balance/ service details page (before). 

After gathering initial ideas on how to improve the other pages, I reflected on the balance/service details page.

Self Reflection:
1. Inconsistent Font Size
Issue: The font sizes vary throughout the design, creating inconsistency in the overall look.
2. Contrast Issue
Issue: The usage bar in the "High-speed 5GB daily data" section has low contrast against the background, making it difficult to read.
3. Duplicate Navigation Items
Issue: The plan details are accessible through the "Power Prepaid Plan" section, making the "Plan Details" option under the service details redundant.
4. Limited White Space
Issue: The design feels cramped, with elements placed too closely together, which goes against the principle of effective white space.

Billing Page

Figure 2.13, 2.14 Billing page (before).

I uploaded the high-fidelity prototype of my billing page to Claude AI and asked for feedback on how to improve it.

Feedback from Claude AI:
1. Inconsistent Design Language
Issue: The UI elements, such as buttons and cards, have varying styles and shapes, leading to inconsistency in the design.
2. Color Contrast
Issue: The light beige buttons on a white background may not provide enough contrast for some users, potentially affecting readability.
3. Active State Indication
Issue: It is unclear which top-up amount is currently selected, as the RM 20.00 option appears twice with different styles. 
4. Ambiguous UI Elements
Issue: The "Plan" and "Data" buttons at the top are not clearly recognizable as interactive elements or don't provide enough explanation.
5. Information Density
Issue: The page feels a bit cluttered, particularly in the top-up amount selection area, which could benefit from additional spacing.

Figure 2.15, 2.16 Feedback from Claude for billing page.

Payment Page

Figure 2.17 - 2.20 Payment page (before).

I shared the high-fidelity prototype of my payment page with a friend and asked for feedback on potential improvements. I also reflected on this page myself and considered some feedback from Mr. Shamsul.

Feedback from Friends:
1. Awkward Blank Space
Issue: There is an empty area at the top of the page without any title or description to indicate the current page, making it unclear to users.
2. Contrast Issue
Issue: The overlay information is not very noticeable, as the grey background is too light or the opacity is too low, reducing its visibility.

Feedback from Mr. Shamsul:
1. Don't just focus on improvements for the UI design.
Consider enhancements for the user experience (UX) as well. For example, some applications display the payment method the user selected previously, which helps streamline the user flow.

Self Reflection:
1. Inconsistent Font Size
Issue: Font sizes vary throughout the design, leading to a lack of uniformity.
2. Contrast Issue
Issue: The stroke around the selected payment method container is not prominent enough, making it difficult to distinguish.
3. Missing Transaction Details
Issue: There is no transaction summary available for users to review after selecting a payment method, which could cause confusion or concern about accidentally selecting the wrong top-up amount.
4. Lack of Confirm Cancel Overlay
Issue: If a user chooses to cancel the transaction after selecting a payment method, there is no overlay to confirm the cancellation, increasing the risk of accidental cancellations.

Redesign
Onboarding Page
I added an onboarding page to the app featuring an animation where the UMobile logo appears in the center of the screen, blinks, enlarges slightly, and then transitions to the login page.

Figure 3.1, 3.2, 3.3 Onboarding page.

Login Page
Based on the issues identified in the previous design, I decided to redesign the login page with an improved UI and UX approach:
1. Rearranged the layout of the information and logo for better organization.
2. Separated the login and new line registration into two distinct pages. Users first choose either "Login" (for existing accounts) or "New Line Registration," and then are directed to the appropriate page with relevant input fields.
3. Added a stroke around the input fields to enhance contrast and make it clearer where to tap.
4. Updated the typography throughout the entire app, adjusting font weight and size for better readability.
5. Added visual feedback for the login process to improve user experience.

Figure 3.4, 3.5 Attempt 01.

Figure 3.6, 3.7 Attempt 02.

I decided to select the second attempt as the final design for the login page because it better aligns with the overall color theme of the app.

Figure 3.8 Improvement on login page.

Home Page
Based on the issues identified in the previous design, I made several improvements to the design and layout of the home page:
1. Updated the typography across the entire app, adjusting font sizes for improved readability. 
2. Added inner shadow and drop shadow effects to the usage pie chart for better contrast. 
3. Changed the card styles for the "Recommended Package" and "Special For U" sections to achieve consistency. 
4. Increased white space between each section for a cleaner layout. 
5. Added call-to-action (CTA) buttons to all sections.

Figure 3.9 Home page (after).

Figure 3.10 Improvement on home page.

Services Page
Based on the issues identified in the previous design, I made several improvements to the design and layout of the services page:
1. Updated the typography across the entire app. 
2. Increased the button size and added more white space between each section. 
3. Organized the services into more detailed categories. 
4. Added call-to-action (CTA) buttons.

Figure 3.11 Services page (after).

Figure 3.12 Improvement on services page.

Rewards Page
Based on the issues identified in the previous design, I made several improvements to the design and layout of the rewards page:
1. Updated the typography across the entire app. 
2. Added more white space between the sections. 
3. Made slight adjustments to the carousel style.  

Figure 3.13 Rewards page (after).

Figure 3.14 Improvement on rewards page.

Account Page
Based on the issues identified in the previous design, I made several improvements to the design and layout of the account page:
1. Increased the white space between each button. 
2. Updated the typography throughout the app, adjusting font sizes for better readability.  
3. Changed the color of the CTAs in the top section to indicate that users can edit their profile in that area.

Figure 3.15 Account page (after).

Figure 3.16 Improvement on account page.

Balance/ Service Details Page
Based on the issues identified in the previous design, I made several improvements to the design and layout of the balance/ service details page:
1. Updated the typography across the app, adjusting font sizes for improved readability. 
2. Increased the white space between each button. 
3. Removed duplicate feature buttons. 
4. Added inner shadow and drop shadow effects to the usage bar for enhanced contrast.  

Figure 3.17 Balance/ service details page (after).

Figure 3.18 Improvement on balance/ service details page.

Billing Page

Based on the issues identified in the previous design, I made several improvements to the design and layout of the billing page:
1. Updated the typography across the app, adjusting font weights and sizes for improved readability.  
2. Increased the gap between each button in the top-up amount section.  
3. Ensured that all buttons and containers have the same corner radius.  
4. Added inner shadow effects to the top-up and add-on sections to enhance contrast.  
5. Added a stroke to the section displaying the selected amount and changed the stroke color for the selected top-up amount to make it clearer for users which amount they have chosen.  

Figure 3.19, 3.20 Billing page (after).

Figure 3.21 Improvement on billing page.

Payment Page

Based on the issues identified in the previous design, I made several improvements to the UI and UX approach of the payment page:

1. Updated the typography throughout the app, adjusting font weights and sizes for improved readability.  

2. Increased the white space between each section.  

3. Increased the opacity of the grey background.  

4. Added a title to the payment page in the top section.  

5. Added a last payment method feature to enhance user experience and improve user flow.  

6. Included a transaction summary after the selection of the payment method.  

7. Added an overlay when the user clicks the back button after selecting the payment method to prevent accidental clicks.  

Figure 3.22- 3.26 Payment page (after).

Figure 3.27 Cancel payment.

Figure 3.28 Improvement on payment page.

Final Self-Evaluation and Reflection
Figma File
Link to Figma File
Prototype
Link to Prototype

Presentation Slide

Figure 4.1 Presentation slide.

Presentation Video

Figure 4.2 Presentation video.

---

FEEDBACK
Week 04
The UI improvements look great, and changing the font is a good choice since the previous one wasn't suitable for a telecommunication app. However, it's important to focus on enhancing the UX as well, not just the UI. For example, some apps remember the user's last selected payment method, which streamlines the process for making top-ups or payments.

---

REFLECTIONS
Experience
At the start of the task, I felt confused and struggled to identify areas for improvement in the high-fidelity design I created for my final project in Application Design 01. I sought feedback from friends and used AI to help analyze which parts needed enhancement. The issues I found were minor, making me uncertain if I was on the right track. Nevertheless, I proceeded with the adjustments in Figma and then presented them to Mr. Shamsul for feedback. Fortunately, it went well, and Mr. Shamsul provided valuable suggestions, emphasizing the importance of improving both UI and UX.

Observation
I noticed that even though the high-fidelity prototype I created is a redesign of the current UMobile app, and I've already conducted user testing and refinements, there are still areas for improvement. An app can always be enhanced to better align with user needs, aesthetics, and the latest design trends. I also realized that while the issues identified may seem minor individually, together they can add up and significantly impact user experience or create confusion.

Findings
I realized that creating an app is more challenging than it seems, as every UI element requires careful attention to achieve a balanced design. Each button tap needs a corresponding page or popup, which adds to the workload. As a beginner in mobile app design, it’s easy to overlook creating some pages. Users might not realize that even a simple flow involves transitions through multiple pages or overlays, numerous UI elements, and a focus on delivering a good user experience.