Labels

Application Design II/ Task1: Self-Evaluation and Reflection

23/9/2025 - 13/10/2025 (Week1-Week4)

Amber Tan Jing Jing (0372746)

DST61004 / Application Design 2 / Bachelor of Design in Creative Media 

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task1: Self-Evaluation and Reflection

4. Reflection

LECTURES

Week1

This week, Mr. Razif briefed us about the module information and showed us an example of a senior’s work, so we would know what we are going to do next. After that, he asked us to sign up for Flutter Flow using our student email account to get access. Then, he introduced DesignLens, which helps us evaluate user interfaces.

Week2

This week in class, Mr. Razif asked us to work in a group to redesign the AirAsia boarding pass. Below is an example for reference.


Through this activity, we aimed to identify which information is more important and which is not. Our group arranged the information from left to right and from top to bottom because people usually read information in that order. 


Then, we presented our design in class.


After our presentation, Mr. Razif gave us some feedback. He mentioned that for the information below, “Gate closes 20 minutes before departure...” shouldn’t just bold the “20 minutes.” We could make it stand out more by putting a red box around it. He also pointed out that the Important Notice about cabin baggage is also important, so we could simplify the sentence and highlight only the key information, such as the weight limit.

Week3

This week, we learned about wireflow in app design. It is a combination of a wireframe and a flowchart that helps designers better understand the button placement and screen arrangement, instead of just using words like in a normal flowchart.

Then, Mr. Razif asked us to choose a booking app and create a wireflow in groups. Our group chose a hotel booking app (Travel.com). We did this in Figma, and we took screenshots of the real app pages to complete our wireflow.

Figma link: https://www.figma.com/board/Idb8huzXvypKbTz9em8Gu9/app-design-2-booking-hotel?node-id=0-1&p=f&t=MoBdmW1X9z5FhPr1-0

After presenting, we realized that we had misunderstood the task. Mr. Razif gave us some feedback, saying that we should link the actual buttons, not the pages. This way, it is easier for designers to see the flow. He also mentioned that we don’t need to make decision boxes, just add an arrow from the button to the page.

INSTRUCTIONS

 

TASK1/SELF-EVALUATION AND REFLECTION

Instructions: 

Students are required to perform a self-evaluation and reflection based on their Application Design 1 Final Project. This project is aimed to document the issues, problems, difficulties and propose solutions to improve the mobile app design. 

Before starting this task, I will first revisit the work I have already completed in Application Design 1.

 
Figure 2.1 Application Design 1 Final Project (Figma)

myNEWS app

Description:

Earn points and rewards when you shop at myNEWS stores in Malaysia. Just register in the myNEWS App to start collecting points, pay cashless, track your rewards, and enjoy member-only deals. You can also redeem points for coupons and upgrade to Gold or Platinum membership for even more rewards. Note: Some services, such as bill payments, do not earn points.

Target Audience:

Frequent shoppers, and who enjoy earning rewards and discounts.

Figure 2.2 Current myNEWS App Design

Figure 2.3 Example Redesign of myNEWS App in Application Design 1

Self- Evaluation and Reflection

Home Page

Figure 2.4 Home page screenshot

Feedback

Strengths
  • Clear Rewards & Balance Display: Balance (RM), Points, and Coupons are displayed at the top, easy for users to track their benefits.
  • Strong Visual Promotions: Big banner on top (e.g., Buy 10 Free 1 Onigiri) grabs attention immediately. Promotions and discounts are highlighted with bold text and visuals.
  • Categorization of Deals: Sections like myNEWS Hot Picks, CU Hot Picks, Maru Coffee Hot Picks help users quickly identify brand-specific deals.
  • Consistency in Layout: Each card has similar size and design (image + short description + validity date), making it easy to scan.
Improvements
  • Card Size vs. Content Fit: The promo cards are small, making the text cramped and less readable. Increasing card size or shortening promo descriptions could improve clarity.

Reflection and Refinement

I noticed that the mismatch between text length and card size created a spacing problem. At first, I considered increasing the card size. However, this adjustment would have made the overall layout appear too empty, especially since the other descriptions were already short. So, I decided to refine the content instead by shortening the longer descriptions (Figure 2.5). This approach kept the card design consistent, maintained a balanced layout.

Figure 2.5 Promo Cards -Before & After Refinement

Rewards- Exchange Page

Figure 2.6 Rewards- Exchange page screenshot

Feedback

Strengths

  • Clear Point System: Users can easily see how many points they have at the top, plus expiry information is provided, which creates urgency.
  • Clear State Differentiation: Rewards that are unavailable are greyed out, while available ones are highlighted in color. This visual contrast helps users quickly see which coupons can be redeemed.
  • Progressive Flow: After redeeming a coupon, the pop-ups guide users step by step (confirmation → spin the wheel → win points → updated balance).
  • Gamification Element: The “Spin the Wheel” adds excitement and makes earning points feel rewarding, encouraging continued use.
  • Consistency in Card Design: Coupon cards are uniform in size and style.
  • Action-Oriented Buttons: Buttons like Exchange Now, Go to Coupons, Spin Now are direct and reduce confusion.

Improvements

  • Increase the contrast between text and background on coupon cards and buttons to improve readability, adhering to WCAG guidelines.
  • Review the visual hierarchy at the top of the screen to ensure the most important information (point balance or navigation tabs) receives the appropriate emphasis.

Reflection and Refinement

1. Alignment Problem

After I revisited the design carefully, I noticed some alignment problems. For example, the text inside certain cards was not aligned consistently with the text in other cards. I refined the spacing and alignment of the text to make all cards visually consistent and balanced (Figure 2.7).

Figure 2.7 Cash Coupon Cards- Before & After Alignment

2. Color & Contrast Refinement

In addition, I adjusted the grey background of the cards to a slightly darker tone, as the previous shade had low contrast against the white background, which made the cards stand out more. After darkening the card background, I also updated the button color to match the new tone for better visual harmony. Furthermore, I noticed that the pink used for the active cash coupon appeared too light compared to the adjusted greys, so I refined it to a deeper pink to maintain contrast and balance across the design (Figure 2.8).

Figure 2.8 Cash Coupon Cards- Contrast Refinement (Before & After)

After revisiting the design changes I made earlier, I noticed that the button had low contrast, as both the background and text were shades of grey, making the text difficult to read. So I adjusted the button background to a darker tone and changed the text color to white (Figure 2.9). This improvement enhanced the contrast.
 
Figure 2.9 Cash Coupon Button- Contrast Enhancement (Before & After)

Rewards- Coupons Page

Figure 2.10 Rewards- Coupons page screenshot

Feedback

Strengths

  • Clear Categorization: Tabs (All, myNEWS, CU, Maru Coffee, etc.) and status filters (Available, Expired, Redeemed) make it easy for users to find specific coupons.
  • Consistent Card Layout: Each coupon follows the same style (title, details, expiry, CTA button), which keeps the interface neat.
  • Expiration Reminder: The “XX days left” text helps create urgency and reminds users to use coupons before they expire.
  • Color Differentiation: Active coupons use a strong red button with white text (“Redeem Now”) to draw attention and prompt action, while activated coupons switch to white background with red text (“Activated”), giving users a clear visual status check at a glance.

Improvements

  • Spacing & Balance: Some cards (like “FREE coffee”) look fuller with the product image, while others (RM2 off) feel a bit empty. Adding small icons (RM symbol, discount badge) could balance the design. 
  • Verify and improve color contrast ratios, especially on the 'Activated' status text and coupon descriptions, to ensure accessibility according to WCAG guidelines.
  • Hierarchy of Information: Right now, the expiry date and conditions (e.g., “min spend RM15”) have the same weight as the discount. Making discount most prominent, conditions secondary, and expiry tertiary would guide the eye better.

Reflection and Refinement

1. Visual balance inconsistent

After revisiting my Rewards- Coupons page, I realized that the visual balance between different cards was inconsistent. Some cards appeared fuller because they included an image, while others looked empty. To maintain consistency and improve the overall visual balance, I added a small coupon image to each cash coupon card. This made all coupon types more consistent and visually balanced.

Besides that, I also adjusted the dashed lines on the coupon cards. Previously, the dashes were long and grey, which looked less refined. I changed them to shorter, tighter and white dashes to create a cleaner look.

Figure 2.11 Redeem Coupons Cards- Visual Balance (Before&After)

2. Information Hierarchy

Furthermore, I noticed that the expiry date looked similar to other information, such as the conditions, which were also black and the same size, making it hard to tell which information is most important. To fix this, I made the expiry date lighter grey (#736E6E) so the discount is most noticeable, the conditions are second and the expiry date is last (Figure 2.12).

Figure 2.12 Redeem Coupon Card- Information Hierarchy (Before&After)

REFLECTION










Labels:

Comments

Post a Comment