Application Design 2 -Task 1: App Design 1 Self-Evaluation and Reflection

xx.xx.2025 - xx.xx.2025 / Week 1 - Week 4

IAN CHOO XIN ZHE / 0369451

Application Design 2 / Bachelor of Design (Honours) in Creative Media

MIB

Class Excercise

In this module, we’re asked to reflect on our final project from Mobile Application Design 1 by conducting a self-eval

App Design 1 Self-Evaluation and Reflection

In this module, we’re asked to reflect on our final project from Mobile Application Design 1 by conducting a self-evaluation. The goal is to identify the issues, challenges, and problems we faced during the project, and suggest ways we could improve both the app’s design aesthetics and user flow. Since mobile app design is all about continuous improvement, this task is meant to help us understand how important it is to keep refining and enhancing our work. Our reflections and proposed solutions need to be documented in a Google Doc, which makes it easier for the module coordinator to review and give feedback

Fig 1.1 Screenshots of App Design 1 Redesign

Fig 1.2 Screenshots of App Design 1 Redesign

To kick off the reflection process, Mr. Razif advised us to use ChatGPT to help analyse our screen designs from App Design 1. I revisited my Steam app redesign project to refresh my memory and get back into the mindset I had when I first created it. After gathering my screenshots, I uploaded them into ChatGPT, which then provided me with a detailed analysis of my designs.

ChatGPT's Analysis:

⭐ Strengths:

1. Visual Consistency:

Uniform dark theme across screens with consistent button styles (rounded, bold, and prominent).
Same iconography and design language throughout (e.g., tabs, back arrows, etc.).

2. Clear Visual Hierarchy:

Primary actions like “Add to Cart,” “Checkout,” and “Place Order” use strong, bright buttons that stand out against the dark background.
Tabs (e.g., Hot/New/Top or Games/Achievements/About) are clearly distinct and visually prioritized.

3. Clean Spacing and Layouts:

Items like game cards, community sections, and achievements are nicely spaced, preventing visual crowding.
Sections like "On Sale" and "Trending" feel naturally separated and scannable.

4. Accessibility:

Sufficient color contrast between text and background for the most part.
Touch targets (e.g., buttons, community cards) look large enough for comfortable tapping.

5. Good Feedback States:

Completion screen ("Purchase Completed!") provides a very clear and satisfying conclusion to the user flow.

🚨 Areas for Improvement:

1. Font Size and Text Weight (Accessibility):

Some smaller labels (e.g., categories under the “3.2M Players, 0 Hours Played” section) might be too small for people with visual impairments.
Consider a minimum of 14pt for smaller text.

2. Search Bars Visibility:

The search bars blend slightly into the dark background because of the subtle input field borders.
Suggestion: Lighten the field background slightly or add a clearer border/outline.

3. Navigation Highlighting:

Bottom navigation icons don’t show a currently active/selected state strongly enough.
Suggestion: Highlight the active tab with a brighter color or subtle background.

4. Tap Targets for Small Elements:

Tiny tap targets like the three-dot menu on community posts may be challenging for users with motor impairments.
Minimum recommended size: 48x48px touch area.

5. Promo Code Interaction:

In the payment screen, entering the promo code feels visually “light” compared to the heavier, clear “Place Order” button. Suggestion: Make the text field or "Apply" button a bit more emphasized (like a slight border or background color differentiation).

6. Visual Priority Between Elements:

In the "Cart" view, it’s slightly unclear what is the primary vs secondary action.
E.g., RM prices and removal icons (X) are close together. Maybe group the action items (like “Select,” “Remove”) visually under each cart item for clarity.

7. Accessibility Note on Color Usage:

Relying only on blue to indicate “selected tabs” or “active states” could be a color-blindness risk.
Suggestion: Complement color changes with boldness or underlines when a tab is active.

✨ Bonus Suggestions:

Microinteractions: Adding subtle animation to "Add to Cart" or "Purchase Completed" checkmark could enhance delight.
Dark Mode Refinement: Dark themes sometimes benefit from very subtle gradients rather than pure flat colors to create more depth between sections (optional — your flat look is already clean, though).

Summary:

✅ Strong foundation: Very polished, well-structured, easy to navigate.
🔍 Focus improvements: Boost small text accessibility, make actions pop a bit more, enhance feedback on current active elements.

ChatGPT Feedback on the Main Flow

Great! You're focusing on the purchase flow — smart choice. This is the core of your app’s functionality, and refining it makes a major impact on usability and satisfaction.

Here’s a breakdown of your current purchase flow (as seen in the images), followed by an iterative UX analysis and clear actionable improvements for each step:

🎯 Flow Overview:

Step 1: Browse & select a game
Step 2: Add to cart
Step 3: View cart & select items
Step 4: Proceed to payment
Step 5: Apply promo code
Step 6: Confirm purchase
Step 7: Purchase success screen

🔍 Step-by-Step UX/UI Analysis + Improvements:

1. Game Details + Add to Cart

Strengths:

Large CTA button ("Add to Cart") is well-placed and prominent.
Game stats and tags (e.g. “Sports”, “Simulation”) are clear and help discovery.

Opportunities to Improve:

Issue: “Read More…” is very small and could be overlooked.
✅ Fix: Expandable text area with a tap-to-expand behavior or a "Show more/less" toggle would be more visible and usable.
Issue: No clear cart feedback after tapping "Add to Cart."
✅ Fix: Add a microinteraction like a toast ("Added to cart ✓") or animate the cart icon to show it's updated.

2. Cart View

Strengths:

Clear item list with pricing and discounts.
Easy to remove games or select a single item.

Opportunities to Improve:

Issue: Visual hierarchy between items, discount, and pricing feels too flat.
✅ Fix: Group elements better (e.g., show original price in strikethrough above the discounted price).
Issue: Selection radio buttons are ambiguous — are they for checkout or selection for editing?
✅ Fix: Add a label or clarify what the selection means, or consider removing if all items are auto-included.
Issue: No quantity editing (if applicable for other items in the future).
✅ Fix: Might not apply to games, but good to plan for scalability.

3. Payment Screen

Strengths:

Good credit card preview for user confidence.
Familiar payment methods laid out clearly.

Opportunities to Improve:

Issue: “Apply Promo Code” is low in the visual hierarchy.
✅ Fix: Consider placing it above the payment methods or making the entry field more visible (e.g., slightly elevated box, lighter background).
Issue: After applying a voucher, the discount appears small and secondary.
✅ Fix: Emphasize the savings more — e.g., change color, add "Promo Applied ✓" feedback.
Issue: Payment method selection doesn’t show which is selected.
✅ Fix: Add selection highlight or tick over the active payment method.

4. Purchase Confirmation Screen

Strengths:

Clean, celebratory finish.
Prominent CTA to return to homepage.

Opportunities to Improve:

Issue: It’s a bit bare, especially after a meaningful action.
✅ Fix: Add a short recap like “You purchased: FC™ 25”, “Receipt sent to: user@email.com”, or a “Rate this purchase” button.
Optional Delight Additions:
- Subtle confetti animation.
- Progress bar for digital download if applicable.