Labels

Application Design 2 / Task 1: Self-Reflection & Evaluation

2025.04.24 - 2025.05.18 Week 1 - Week 4

Teh Ming En/0364908

Application Design 2-Bachelor of Design (Honours) in Creative Media--Taylors University

Task 1: Self-Reflection & Evaluation

Instructions


Class Activity

Week 3: Boarding Pass

Fig 1.1 Initial Boarding Pass

This week, our class activity was to redesign the provided boarding pass. We worked in groups to complete the task, focusing only on the key information of the boarding pass, such as passenger name, flight number, gate, boarding time, and seat number. The unnecessary lower section of the original design was excluded. 

During the process, we discussed the hierarchy of information, layout clarity, and how to make the boarding pass more user-friendly and easier to read. We aimed to improve the visual flow so that users could quickly find key details like flight number, boarding time, and gate. We also explored ways to beautify the boarding pass by using different styles for various cabin classes. For example, we designed separate versions for Economy Class and Business Class, each with its own unique cover and color scheme to reflect the passenger’s travel experience. 

This activity helped us better understand the importance of effective information design and improved our teamwork and communication skills. I have learned about how design can balance aesthetics with functionality, and I gained a deeper understanding of how small design choices can improve clarity and create a more delightful user experience. Working with my group allowed me to explore different layout ideas and consider user needs from various perspectives. One of the main challenges was deciding which elements to prioritize visually, but it also helped me understand the importance of hierarchy in information design. Overall, this activity strengthened my ability to think critically about design decisions and improved my collaboration skills.

Fig 1.2 Boading Pass - Figma


Week 4: Wireframes Flow Chart (Starlux)

Fig 1.3 Wireframe Flow Chart - Starlux Airline

In this week’s class activity, we focused on creating a wireframe flow chart. It is different from the user flowcharts we learned in previous modules. While user flowcharts typically outline the general path a user takes through an app, a wireframe flow chart includes more detailed layouts of each screen.

This was a group activity, and together with my team, we decided to create a wireframe flow chart for a flight booking process. We selected Starlux Airlines as our case study. Throughout the activity, we mapped out each step of the user journey, such as from searching for flights to confirming the booking.

This exercise helped me understand how detailed planning at the wireframe level can significantly impact the usability and clarity of an app. It also highlighted the importance of collaboration and clear communication when designing multi-step processes.

Task 1: Self-Reflection & Evaluation
We are required to conduct a self-evaluation and reflection based on our final project in Application Design 1. We need to identify the issues and provide solutions to improve our app. We are required to use AI tools to help us complete the task.

Fig 2.1 High-Fi Senheng App Prototype - Figma


1. Onboarding Pages

Fig 2.2 Onboarding Pages

Self-Reflection
  • Clean, consistent branding with recognizable logo
  • Clear navigation with progress indicators
  • Friendly illustrations that communicate purpose
AI Evaluation

Strengths
  • Clear Branding with consistent "S" logo and red color scheme builds strong identity throughout
  • Visual Consistency in layouts, illustration style, and color palette creates coherent experience
  • Progressive Information flow introduces benefits, products, and membership advantages logically
  • Engaging Illustrations effectively communicate each screen's purpose with friendly visuals
  • Navigation Indicators show clear progress through the onboarding sequence
Weaknesses
  • Text Density makes some screens difficult to read
  • Inconsistent Button Styles between "Skip" and "Start" create visual confusion
  • Limited Accessibility due to low contrast and small text creates barriers for some users
  • No Back Navigation option limits user control and exploration
Solutions
  • Simplify Content by focusing on 2-3 key points per screen with larger text
  • Standardize button designs across all screens for better consistency
  • Improve text hierarchy to create more scannable content structure
  • Replace generic "Skip" with contextual actions that connect to each screen's content
Argument
  • My "Skip" and "Start" buttons are of the same type, so I disagree with the statement that their visual styles are different
  • I included a back navigation button, but the AI doesn't detect it
  • Regarding the text, there is already a clear distinction between the title and the content

2. Login & Register Pages

Fig 2.3 Login / Register Pages

Self-Reflection
  • Consistent branding with prominent Senheng logo across all screens
  • Clear, high-contrast red buttons that stand out as primary actions
  • Simple, focused layouts
  • Logical registration flow with clear progression
AI Evaluation

Strengths
  • Clean visual hierarchy prioritizing essential elements
  • Consistent design language throughout the sequence
  • Phone number field with country code selector shows internationalization
  • Clear labeling of each screen's purpose (Login, Register, Verification)
  • OTP verification adds security while maintaining simplicity
Weaknesses
  • No visual back buttons or navigation controls between screens
  • Repetitive "REGISTER" button text across different stages causes confusion
  • Small "RESEND" text for OTP might be hard to tap accurately
  • No explanation of PlusOne membership benefits during registration
Solutions
  • Add back navigation arrows for easier flow control
  • Implement progressive button text (e.g., "Continue" → "Verify" → "Complete")
  • Enhance "RESEND" as a proper button with countdown timer
  • Add brief membership benefits explainer text
  • Add progress indicator showing steps completed/remaining
  • Consider biometric login options for returning users
Argument

I agree with the AI’s suggestions. My page is indeed missing a back navigation arrow, and the "Resend" text is relatively small. I believe that following its suggestions, I can improve the overall design of my interface.

3. Home Page

Fig 2.4 Home Page

Self-Reflection
  • Bold red header provides strong brand identity
  • Prominent search bar at top for immediate product discovery
  • Quick access navigation icons (vouchers, games, categories)
  • Featured promotion banner draws attention to sales
  • Clean product grid display with minimal information
AI Evaluation

Strengths
  • Clear pathways to purchase
  • Visual hierarchy directs users to promotions and featured products
  • S-Coin Centre integration shows loyalty program prominence
  • Space-efficient layout balances content density with readability
  • Consistent card-based design for different content types
  • Section headers clearly separate content categories
Weaknesses
  • Search bar lacks filter/sorting options for quick refinement
  • Limited product information visible in recommendation cards
  • Primary navigation icons lack text labels 
Solutions
  • Add search filters icon next to search bar for quick refinement
  • Implement personalized greeting or recommendations section
  • Add subtle text labels to primary navigation icons 
Argument

I disagree with the feedback because filter functions typically appear only after clicking into the search bar. Additionally, all my main navigation icons are accompanied by text labels.

4. Search & Filter Pages 

Fig 2.5 Search & Filter Pages

Self-Reflection
  • Clean search interface with prominent search bar
  • Back button for easy navigation
  • Clear search history with removable tags
  • Filter options organized by relevant categories
AI Evaluation

Strengths
  • Clear visual indication of applied filters
  • Price range slider provides intuitive filtering method
  • Product thumbnails are clear and recognizable
  • Search history saves user time for repeat searches
  • "Hot Search" suggestions aid discovery
  • Consistent pricing display format throughout
  • "No more products" message sets clear expectations
Weaknesses
  • No sort options visible (only filtering)
  • Limited filter categories shown (only price range and ratings)
  • Rating filter UI is somewhat cluttered with many options
  • No filter reset button separate from "Clear All" (which clears search too)
  • No quick action buttons on product cards (favorite, compare, etc.)
  • No indication if items are in stock
Solutions
  • Add sorting options (price low-high, popularity, newest)
  • Condense rating filters into fewer, more distinct options
  • Add additional relevant filter categories (storage capacity, color) and "Save search" functionality for frequently used searches
  • Include quick comparison toggle for product comparison
  • Implement one-tap filter reset button independent from search reset
Argument

I partially agree and partially disagree. I agree with the points regarding the sorting options, the presence of both "save search" and "clear search" features being a bit excessive. However, I disagree with the feedback about out-of-stock products, as they typically do not appear in the search results. Also, the absence of quick action buttons on the product cards is intentional to maintain a clean layout — users can tap into the product page to save the item.

5. Product Details Pages

Fig 2.6 Product Details Pages

Self-Reflection
  • Consistent layout across all pages
  • Visual feedback confirmation when adding to cart
  • Multiple selection options clearly presented for color and storage capacity
  • Simple navigation with back button and clear page titles
AI Evaluation

Strengths
  • The color options are displayed both as text and with visual indicators
  • Quantity control with plus/minus buttons for easy adjustment
  • Quick actions in header (cart, share) for seamless user experience
  • Success confirmation that doesn't block the entire interface
Weaknesses
  • Limited product images - Only showing one view of the phone without ability to see different angles
  • Small touch targets for color selection buttons may be difficult for some users
  • Limited cross-selling - No "You might also like" or accessory recommendations
Solutions
  • Add image gallery with swipe functionality to view the product from multiple angles
  • Implement tabbed content below the product image for specifications, reviews, and description
  • Implement sticky "Add to Cart" button when scrolling through longer product details
Argument

I partially agree and partially disagree. I disagree there are too few product images — the product page includes three images. Label information and other relevant details are also provided on the page. As for the color selection, user testing showed that most users did not feel it was too small. However, I agree that the page lacks personalized recommendations, and the color scheme of the “Add to Cart” bar could be improved.

6. Cart Pages

Fig 2.7 Cart Pages

Self-Reflection
  • The layout is simple and clear
  • The colors are clearly distinguished
AI Evaluation

Strengths
  • Items clearly listed; total cost is visible
  • Quantity adjustment is helpful
Weaknesses
  • Light gray text may harder to see
  • The trash can icon may be difficult to see
Solutions
  • Add “Save for Later” or “Move to Wishlist” option
  • Make “Checkout” button visually prominent with solid background
  • Light gray text and icon for could be darker
Argument

I agree with these shortcomings.

7. Checkout Pages

Fig 2.8 Checkout Pages
Self-Reflection
  • Clear visual indicators for completed steps 
  • Clear content showing subtotals, discounts, and final amounts
  • Consistent header navigation with back buttons and clear section titles
AI Evaluation

Strengths
  • Voucher application process is straightforward with clear visibility of available discounts
  • Address management with saved addresses and edit capabilities
  • Multiple payment methods organized in an easily scannable list
  • Clear success confirmation on the order placed page with visual celebration elements
  • Shipping/billing segmentation allowing users to manage different address types
  • Cost breakdown showing individual line items for better transparency
  • Prominent call-to-action buttons (Select Voucher, Confirm, Place Order) that stand out visually
Weaknesses
  • Dense information presentation - Some screens contain many elements in a limited space
  • Limited payment method descriptions - Some options lack explanatory text
Solutions
  • Add explanatory tooltips for payment methods and delivery options
  • Implement collapsible sections to manage information density
  • Add a "Save for later" option for items users might want to defer purchasing
Argument

I believe most Senheng users are adults and do not require excessive explanatory text about the payment process. However, I agree that the information is too dense, and the use of drop shadows on cards can lead to visual fatigue after long viewing periods.

8. Order Tracking Pages

Fig 2.9 Order Tracking Pages
 
Self-Reflection
  • Simple, clear layout showing order delivery status information 
  • Clear timeline status
AI Evaluation

Strengths
  • Clear step-based timeline
  • Clear timeline contrast
  • Excellent structure for status visibility
Weaknesses
  • Text indicators have no status color
  • Missing estimated delivery date or next steps information

Solutions
  • Include status colors with text indicators (e.g., “Delivered” with icon and label)
  • Add estimated delivery date or next step message
Argument

The part I disagree with is that I do have a status color — the "Shipping" status is indicated in green. However, I agree with the point about the lack of an estimated delivery time.

9. Voucher Pages

Fig 2.10 Voucher Pages

Self-Reflection
  • Layout is simple and clear
  • The information of each voucher is clear and straightforward 
AI Evaluation

Strengths
  • Every card is clear and easy to understand
  • Button color clearly shows the difference between before and after claiming a voucher
Weaknesses
  • The information text size is hard to read
  • Vouchers with pale colors may not be readable
Solutions
  • Make active/inactive vouchers visually distinct
  • Add “Apply” button on voucher card or tap-to-activate feedback
Argument

Disagree, after claiming a voucher, the button shows a noticeable change. As for the text size, user testing indicated that no users found it too small.

10. Category Page

Fig 2.11 Category Page

Self-Reflection
  • Simple and clear grid system
  • Large icons help users recognize and navigate easily
AI Evaluation

Strengths
  • Simple grid, icons help recognition
  • Straightforward navigation pattern
Weaknesses
  • Some category text is small, which is not easy to browse
Solutions
  • Use uniform size and alignment for icons
  • Consider grouping by popularity or seasonality
Argument

I disagree with the claim that the text size varies or is too small for certain categories — all of my title texts are the same size throughout this page.

11. S-Coin Centre Pages

Fig 2.12 S-Coin Centre Pages

Self-Reflection
  • Clear information display 
  • Clear visual feedback confirmation and visual state changes
  • "Check-in" button is prominently displayed with color contrast
AI Evaluation
Strengths
  • Red background creates a sense of excitement and urgency for the rewards program
  • Clear section for redeeming coins with featured products
  • Information hierarchy which shows important information (balance) appears at the top of the screen
  • Focus on core functionality without overwhelming the user
Weaknesses
  • Many elements competing for attention on a single screen
  • The confirmation modal blocks the entire interface temporarily
  • No progress indicators for long-term goals or achievements
  • Advertisement placement distracts from the primary coin-earning functionality
Solutions
  • Include information about what S-Coins can be redeemed for and their approximate value
  • Implement a coin history section showing earning and spending patterns
  • Create a progress/achievement system to increase long-term engagement
  • Separate advertisements from functional elements or make them more contextually relevant
Argument

I disagree with the claim that the S-Coin redemption value is missing — each product clearly displays the number of coins required for redemption. The history section is located at the top right of the page. I believe that S-Coin-related advertisements can serve as motivation for users to collect more coins. However, I do agree with the suggestion to implement an achievement system.

12. Notification Pages

Fig 2.13 Notification Pages

Self-Reflection
  • Notifications are organized into logical groups 
  • "Read all" option available for efficiently managing notifications
  • Prevents accidental marking of all notifications as read
AI Evaluation
Strengths
  • Clean layout which white card-based design on red background creates good visual separation
  • Different icons for different notification types helps with quick visual scanning
  • Order numbers included in notifications for easy reference
  • Product thumbnails help users quickly identify relevant orders
  • Action confirmation which ensures users don't accidentally clear notifications
Weaknesses
  • No filtering options which cannot filter notifications by type or date
  • Action confirmation dialog blocks the entire interface
  • Limited visual differentiation which all notification cards look very similar
Solutions
  • Add filter and sort options at the top of the notification list
  • Design unique visual treatments for different notification priorities
  • Implement notification grouping by date (Today, Yesterday, This Week)
  • Add search functionality to find specific notifications
  • Include notification badges on the bottom navigation icon to show unread count
Argument

I disagree with the notion that action confirmation prompts block the interface because they are intentionally designed to alert users to the current action being taken. The similarity in card design is meant to maintain a consistent visual layout. However, I agree with the points about the absence of filtering options, unread message counts, a search function, and the ability to group notifications by date.

13. Profile & Membership Pages

Fig 2.14 Profile & Membership Pages

Self-Reflection
  • Profile page displays the user's name for a personalized experience
  • Prominently displays the E-Member Card with key information
  • Clear icons for different order statuses
  • Notification indicators
  • Clean membership details and notification indicators
AI Evaluation

Strengths
  • Red color scheme and consistent design language across all pages
  • Clear visual separation between different functional areas
  • Clear status indicators
  • Information hierarchy which important elements (membership card, points) are prominently displayed
  • Key information is easily found with proper spacing and organization
  • Intuitive icons paired with text labels for better comprehension
Weaknesses
  • No clear indication of what the membership provides
  • No obvious way to edit profile information
  • Important information which is terms and conditions is relegated to a secondary tap
Solutions
  • Add membership benefits summary
  • Include an edit button near the profile information
  • Include a progress bar showing proximity to next membership tier
  • Highlight special member-only deals or early access events
Argument

I agree with these weaknesses, but the proposed solutions need to be revised before they can be effectively implemented.

14. Setting Page

Fig 2.15 Setting Page

Self-Reflection
  • Settings are organized into logical groups 
  • Simple list layout
AI Evaluation

Strengths
  •  Clean white background with simple black text improves readability
  • Most commonly used settings appear at the top of the list
  • Clear, concise names for each setting make functions obvious
  • Similar spacing and styling throughout creates visual harmony
  • Large, easy-to-tap areas for each setting option
Weaknesses
  • All settings look identical regardless of importance
  • No search functionality which hard to find specific settings quickly
  • No descriptions or hints about what each setting controls
Solutions
  • Implement search functionality
  • Add brief explanations under important settings
  • Add version information which include app version at the bottom of the settings screen
  • Implement quick account switching. This is for users with multiple accounts
  • Create a direct way to provide app feedback
Argument

I agree with most of the suggestions, as the original Senheng setting layout had many elements that felt cluttered. This prototype is a simplified outcome of that. I also believe there’s still room for improvement, especially in terms of lacking personalized features.


Refining Prototype

The refinement only needs to focus on the main flow. The main flow of my application follows a standard shopping process: from opening the app and logging in, to browsing the homepage, searching for items, adding them to the cart, and finally proceeding to checkout and placing the order.

1. Search Bar

Fig 3.1 Refining Search Bar

I removed the stroke and added a drop shadow to the search bar to make it more prominent. Unifying the design of search bars helps to enhance the visual hierarchy and easier for users to notice and interact.

2. Top Section of the Home Page

Fig 3.2 Refining Top Section of the Home Page

I decided to change the top section of the homepage from a wavy design to a flat rectangular design. This change improves the overall cleanliness of the interface, as the rectangular layout appears more modern and tidy. The design allows users to focus more easily on essential elements such as the search bar, resulting in a more intuitive and user-friendly experience. 

3. App Background Color

Fig 3.3 Changing App Background Color

I have changed the app background color from grey to light red. I think the light red tone could make users feel warmer and more inviting. Besides that, the light red color tone also aligns better with the brand’s identity and improving the overall visual appeal.

4. Cards

Fig 3.4 Refining Cards
Unifying the details of drop shadow across all page cards could improve visual consistency, reduce visual clutter, and enhance the overall cohesive user experience.

5. Purchase Action Toolbar

Fig 3.5 Redesign Purchase Action Toolbar

I decided to redesign a new purchase action toolbar to create a cleaner and more focused interface. The original design used a combination of red, green, and yellow. After optimizing, the toolbar has been simplified to use only the primary green color paired with white. This can help reduce unnecessary visual noise and help users concentrate on essential actions.

6. Filter Page

Fig 3.6 Refining Filter Page

I have optimized the filter page by increasing font size and enhancing the colors. I think these can help to improve readability and accessibility because it becomes easier to see and interact with.

Final Task 1: Self-Reflection & Evaluation

Fig 4.1 Refined Prototype - Figma
Fig 4.2 Presentation Slides

Fig 4.3 Video Presentation


Reflection

Overall, this task allowed me to reflect critically on my design decisions and better understand how they affect user experience. By comparing my intentions with the AI’s evaluation, I was able to identify areas where my design succeeded, such as maintaining brand consistency and creating a clean, user-friendly layout, and areas that need improvement, like enhancing navigation clarity and reducing text clutter. This process made me more aware of the importance of balancing aesthetics with usability and taught me to see my work from multiple perspectives, including both user and system feedback. It was a valuable experience that will guide me in making more thoughtful, user-centered design choices moving forward.



Labels:

Comments

Post a Comment