Application Design II: Task 1: Self-Evaluation and Reflection
21/4/2025 - 17/5/2025 / Week 1 - Week 4
Angel Tan Xin Kei / 0356117
Major Project 1 / Bachelor of Design (Hons) in Creative Media
- Instruction
- Lecture
- Task 1: App Design 1 Self-Evaluation and Reflection
- Feedback
- Reflection
- A comprehensive analysis of your app design.
- Feedback by AI and your argument to either agree or disagree
- Your Old and New design to show the changes/improvements Presentation Video
- A recording of you presenting your analysis must be included.
- This is a formal presentation. Camera view of yourself must be included.
- If you don't have a webcam, use your phone camera as a webcam OR you can join a Google Meet session with your laptop and your phone, can capture from there.
- Embed/link the presentation video on your blog. Submit your blog link.
In the beginning week, Mr. Razif gave us an overview of Application Design 2, highlighting the design process and asked us to enhance the figma we created in Application Design 1. He also introduced his GPT-powered plugin, UX Lab Assistant, which will assist in evaluating our app and offering constructive feedback. Furthermore, we registered for FlutterFlow as our primary development platform for following project.
Week 3/ Designing Components and Usable Items
|
| Fig 3.1 Boarding Pass Exercise |
This week, we were assigned the task of redesigning an AirAsia boarding pass to better accommodate both our primary and secondary audiences. The primary focus was to enhance the information layout and structure in order to improve usability and overall user experience.
|
| Fig 3.2 First Attempt of Boarding Pass |
Figma link to access Redesigned Boarding Pass
After thorough discussions, our team identified AirAsia passengers as the primary users, prioritizing their need for quick access to critical details such as boarding time, gate number, seat information, and destination. The secondary users, flight attendants, depend on the boarding pass for verifying passengers and organizing seating, so clarity and precision were equally crucial.
After presentation and consultation, Mr Razif commente dthat ourcurrent boarding pass design, noting areas where clutter and weak information hierarchy hindered usability. Based on this analysis, we proposed a new design that organizes information into distinct visual sections, incorporates icons for faster recognition, and utilizes font hierarchy to guide users’ attention. Our aim was to deliver a boarding pass that is both visually attractive and functionally efficient for both user groups.
|
|
|
Week 4/ User Flow Planning and Design Proposal Planning
During this week's lectures, we completed an exercise to better understand the user journey when purchasing a product or making a booking through an app. Our team selected the Car Booking User Wireflow and drew inspiration from Grab Car for our approach.At times, it was quite challenging to decide which shapes to use in the flowchart, especially while trying to design a minimalist user interface. We also had to pay close attention to the placement of back and forward buttons to ensure smooth navigation.Then, Mr.Razif feedback that the entire flow was good but could have more specific arrows to direct the button to further next page.
Last semester, I redesigned an app called "The Bites" which is a loyalty membership programme to benefit loyal groceries customer with numerous rewards. Over the 14-weeks period, I was really pleased with the final result yet I still am. However, I’ve come to realize that there’s room for improvement, particularly in terms of UI/UX design.
To begin, I evaluated both the strengths and areas for improvement by focusing on key aspects such as usability, visual aesthetics, intuitiveness, and the overall user experience.
A. General Design Revisions UI Kits( Colour Scheme):
The current design leans heavily into saturated cool tone which is the brand colour blue and purple, but I am still unsure whether it feels too dominant or not quite the right shade. Then, I have asked UX Lab Assistant recommended by our lecturer Mr. Razif.
|
| Fig 1.0 UI Kits of Hi-Fi The Bites App |
1. Consistent Branding
The use of Poppins and a clear text hierarchy (Title, Heading, Subheading, Body) supports visual consistency.Color scheme aligns well with the brand's identity — purples and blues communicate energy and trust (relevant to shopping and membership).
The gradient range from deep blue to lavender (#1230AE to #D0BCFF) creates a youthful, engaging atmosphere. The contrast between accent colors and white/black background allows flexibility in UI sections.
Title sizes (34px, 30px, 14px, 12px) suggest a well-considered type scale.
Emphasis on weight (bold/semibold) helps users differentiate between headings and subtext easily.
- Primary Action ( navigation bar and serious act button #1230AE)
- Secondary Action ( #6C48C5)
- Tietiary Action (#D0BCFF)
- Background and Card (#EFEFEF)
Fig 2.1 Initial and Improvised Version of Loading Pages
Strength:
The onboarding flow successfully sets a clear and engaging tone for the Bites brand. The use of branded illustrations aligned with your color scheme helps to visually communicate the core value propositions of the app rewards, smart shopping, and personalized grocery experiences. While the flow is visually cohesive, it lacks functional clarity and interactivity. For instance, the “Skip to Log in/Sign Up” text link is visually understated, lacks touch feedback indication, and may not meet contrast accessibility standards.
-
Added a progress indicator: Introduce swipe dots or a horizontal bar to show the number of onboarding steps and encourage completion. This improves user orientation and control.
-
Improved the "Skip" link: I have styled the “Skip to Log in/Sign Up” link with better contrast, larger tap area, and repositioned it top-right (a common pattern) to reduce cognitive friction on the blue "Get Started" button.
-
Enhanced screen differentiation: Varying the visual structure across the three content slides slightly changed illustration position or text alignment to keep the flow dynamic.
- Clarify logo page intent: The full-screen logo page should either act as a timed splash screen (if automatic) or be removed from the onboarding series if it’s not interactive.
- Emphasize accessibility: Check contrast levels, font sizes, and tap targets, especially for smaller UI elements, using Figma plugins like Stark or Able.
 Fig 2.2 Initial and Improvised Version of Get Started Page |
Strengths
-
Clean and Minimalistic Design: The interface is uncluttered, making it easy for users to focus on the task (logging in or signing up).Sequence from splash → login → sign-up is intuitive and linear.
-
Consistent Branding: The color palette and typography are consistent across all screens, reinforcing brand identity.
-
Clear Call-to-Action Buttons: “Log In,” “Sign Up,” and “Login / Sign Up” buttons are prominently displayed and use strong color contrast.
-
Social Login Options: Facebook, Google, and Apple login options provide flexibility and can increase conversion rates.
-
Replace “Username” with “Email”: Emails are easier for users to remember and are more commonly used as login credentials.
-
Add Password Visibility Toggle: Include an “eye” icon to toggle visibility of password fields for better usability.
-
Gender Field in Sign-Up Form: Including gender without a clear reason can feel intrusive. Also, it may lack inclusivity if it offers only binary choices.
-
Accessibility Considerations Missing: Color contrast might not meet WCAG standards for all users. No indicators of accessibility elements (e.g., labels for screen readers).
D.Loading Page 2.0
|
| Fig 2.3 Initial and Improvised Version of Loading Page |
Strengths:
- Simple and clean.
- Brand logo is prominently displayed.
- Uses brand colors consistently.
Weaknesses that I identified:
- No Branding Extension: While the logo is prominent, there’s no tagline, benefits, or microcopy to reinforce brand value or hook users.
- Empty visual space feels underutilized.
Things to Improve by AI:
- Include a short tagline or welcoming message “Start earning rewards!”.
- Consider to add a transition effect or brand animation to enrich the user experience.
|
| Fig 2.4 Initial and Improvised Version of Bite Page |
Strengths:
- Point balance and tier clearly displayed.
- Rewards and promotions are easily accessible.
- Layout follows logical sections.
Weaknesses that I identified and agree upon AI:
- Visual Overload as points, tiers, vouchers, buttons, and promotions are all presented at once. It’s hard to focus or scan quickly.
- Lack of white space to differentiate the Section Functionality.
- Key CTAs like "Enter Promo Code" blend into other cards.
- Repetitive UI Patterns: Cards and buttons are all very similar in style, causing "flat" UI perception then users might not notice key CTAs easily.
Things to Improve:
- I have also redesigned the membership card so the visual hierarchy is clearer as users can view their tier membership as the first things.
- Use distinct colors or icons for primary vs. secondary actions thus I have utilised blue colour as primary action such as button or icon that can be pressed as the dark purple will be descriptive information that s important and purple is just secondary info.
- Add more white space between sections to help with scanning.
F. Info Benefit Page (My Loyalty)
|
| Fig 2.5 Initial and Improvised Version of Tier Overview Page |
Strengths:
-
Good loyalty program explanation.
-
User’s tier and progress are clear.
-
Includes benefit breakdown for transparency.
Weaknesses:
-
Dense text can be hard to scan.
-
A lot of text packed into small areas (e.g. Gold Tier Benefit), which could be broken down more visually.
-
“Tier Overview” section feels static.
Things to Improve:
-
Aternate the progress visual tracker also the description into lower saturation below the tier bar to create higher impact on reading the important point balance.
-
Prioritise the tier membership by placing "GOLD" wording at the first hierarchy of membership cards then the bar code and smaller the logo.
-
Make tiers tappable for deeper detail or comparisons. However, the tier buttons are actually clickable for users.
- No visual progress bar just text but actually there is a progression indicator of the points balance and proportion of points to reach next tier.
G. Enter Promo Code Page
|
| Fig 2.6 Initial and Improvised Version of Tier Overview Page |
Strengths:
-
Clean and focused layout.
-
Prominent input field and CTA.
-
Friendly, brand-aligned background visuals.
Weaknesses that I identified and reckoned by AI:
-
Redundant Layout: Visually too similar to Page 1.0. No new UI feedback or progress indication.
-
No Feedback for Incorrect Input: What happens if the user mistypes the promo code? No inline validation or error messaging is present.
-
Lack of Input Guidance: “E.G. XXXXXXX” is vague. It’s unclear what a valid code looks like or where users might get one.
-
Converted “Redeem” button into a prominent button to lead users to press on it.
-
Provided a direct path “Use Now” or “See All Rewards” to continue engaging instead of just underline view vouchers.
-
Changed placeholder of "XXXXXX" into a more specific example (such as “ABC123”).
-
Alternated the colour scheme based on the funtional roles; blue for buttons; purple for important information; lilac and grey for descriptions or secondary information.
Minor Disagreement towards AI :
-
No Option to Share/Save: Users might want to save or screenshot their reward
but there's no affordance to do so. There's are
section and categories to view current or redeemed
vouchers so users can refer to app and do not need to
screenshot or save as another action.
-
Empty Space Dominance: Large decorative background and minimal interactive
elements give an unbalanced visual weight. I think it
is better to keep things clean and minimalistto
emphasis on the small section part to enter code as it
is just an easy task.
H. Voucher Page
|
| Fig 2.7 Initial and Improvised Version of Vouchers Page |
- Clear visual hierarchy: Voucher title, description, and CTA (“Redeem”) are easy to scan.
- Consistent styling for all voucher cards.
- Clear expiration dates and usage codes.
- Immediate visual cues about the voucher type (Free Drink, RM50, etc.).
- No filter or sorting options for users with many vouchers.
Things to Improve:
-
Introduce color-coding or icon variations to
distinguish voucher types (e.g. discount, free
item).
-
Added tags or filters like “Expiring Soon,” “Most
Valuable,” etc.
-
Added a short label for “status” such as
“Available" and “Used”.
Minor Disagreement towards AI :
-
“Redeem” button is visually prominent, but may lead
to accidental taps.However, it is meant for users to
tap and redeem.
-
Overuse of similar purple tones makes it harder to
visually differentiate voucher types at a glance.
I. Voucher Redeem Process
|
|
|
Strengths:Voucher is clearly highlighted, which gives user focus and reassurance on what they’re about to redeem.
-
Visual design mimics a physical coupon, enhancing the sense of value.
-
Reinforces purpose “Grab Your Free Drink” with a confident call-to-action.
-
Instant visual of the QR code for redemption is clear and actionable.
-
Provides clear positive feedback: “Congratulations!”
Weaknesses:
-
Doesn’t inform what happens after clicking redeem such where to redeem QR code like is it in-store use?).
-
No indication of whether this screen auto-dismisses or needs scanning confirmation.
-
“Done” may not be clear like does it mean voucher is redeemed or just dismissing the screen?
Things to Improve:
-
Add a modal or confirmation prompt before redemption.
-
Use shorter button labels like “Redeem Now” and “Cancel.”
-
Include a brief note on what happens after redeeming such as QR code will be shown.
-
Consider using a bottom sheet for better ergonomics and less screen disruption.
-
Add a tooltip or line of text: “Show this QR code to cashier to redeem” or “This code will expire in 5 mins.”
-
Change “Done” to something more informative like “Close” or “Mark as Used” to provide a clearer step.
-
Added next-step options like “Back to Vouchers” or “View My Voucher History.”
|
|
|
Strengths
-
Gamified Daily Check-In System across seven days encourages repeat engagement and habit formation.
-
Store-Specific Check-In Integration: Tying check-ins to real locations helps drive foot traffic to physical stores and reinforces omnichannel value.
-
Clear CTA Buttons :The “Check-Ins” and “Not Available” buttons are visually distinct, giving immediate clarity on actionable and inactive options.
-
No Feedback for Button States: “Check-Ins” and “Not Available” buttons don’t communicate why one is enabled and the other isn’t.
-
No User Guidance: The page lacks an onboarding tip or small instruction to explain how check-ins work, or why it matters.
-
Added Real-Time Context to Buttons such as “Too far and move closer to check-in” or show a mini-map with user’s distance from the store.
-
Used Tooltips or Info Icons for Guidance such as "Why daily check-ins?" and a small “i” icon or collapsible help section.
-
Alternated colour of unavailable and available stores to indicate the availability for check-ins also included the distance.
- Static visual design feels visually flat but the daily check-in tracker is functional and try to keep things ease to use and managable.
-
Include reward system transparency to let users know what they can do with the points. The points has actually link to the tier overiview page so it isn't possible to duplicate pages for same information.
Final Prototype Link in Figma:
Mr. Razif pointed out that some of the feedback generated by the AI might not always be accurate or applicable. He advised us to include such instances in our blog and explain why certain suggestions may not work within our design. This approach not only shows critical thinking but also demonstrates our ability to evaluate and justify design decisions.
Experience
Working through this redesign project was a hands-on reminder of the importance of intentional design decisions throughout the user journey also made me reminisce of theories I have learnt during previous semester. Collaborating with Mr Razif's UX LAB Assistant AI provided me a valuable suggestions based on UX best practices, such as adding a confirmation modal and improving button labeling. In many cases, I agreed with these insights and incorporated them into the flow. However, there were moments where I disagreed particularly when the suggestions leaned too heavily toward verbose explanations or overly formal tones that didn’t align with the brand’s friendly, casual voice. Balancing AI-generated input with my own design intuition helped me grow as a designer and strengthened my confidence in making user-first decisions that are both practical and brand-appropriate.
Findings
During the redesign of the voucher redemption flow, I identified several key strengths and weaknesses across the user journey. The original design I did on the previous semester indeed built a solid foundation with a consistent layout, clear visual hierarchy, and prominent call-to-action buttons of The Bites App. However, the user experience lacked clarity in critical moments particularly during the redemption process. At most of the time there was no confirmation step within my apps, increasing the likelihood of accidental redemptions, and the post-redemption feedback was minimal and vague. The uniform use of color made it difficult to differentiate voucher types at a glance thus i categorised primary and secondary colour to several actions. These findings revealed opportunities to improve user confidence by introducing better feedback loops, more informative interactions, and clearer transitions between steps.
Observation
This reflective ad self-evaluate project reinforced my understanding of how critical small interactions and transitions are in shaping the overall user experience. Clear messaging, consistent navigation cues, and purposeful button labeling play a larger role than they might initially seem. I observed that users benefit most when flows are designed with clarity, emotional reassurance, and reduced cognitive effort. Even a single vague button like "Done" can introduce uncertainty and disrupt an otherwise smooth journey. As a designer, this process sharpened my focus on flow continuity and reinforced the importance of guiding users through each step with intention and empathy.
Comments
Post a Comment