APPLICATION DESIGN II / PROJECT 01

on

 ----------------------------------------------------------------------------------------------------

PROJECT 01: APP DESIGN 1 SELF-EVALUATION & REFLECTION

Evaluation Stage

In week 01, Mr Razif introduced us to Application Design II while briefing us on the first assignment guideline, which required us to self-evaluate and reflect on our mobile application design 1 final project. We are allowed to use AI tools to help us with the evaluation part to obtain some suggestions for us to make possible improvements on our mobile application design. After analysing our current design, we need to make a refined version of the design based on the feedback. 

Here's the AI analysis summary of my initial design:

Pros:
  • Clear navigation: The bottom navigation bar with "Home," "Menu," and "Account" icons is standard and easy to understand.
  • Intuitive icons: Icons like the shopping cart, bell, and profile picture are generally recognisable.
  • Consistent branding: The "Moonlight Cake House" logo is consistently placed and prominent.
  • Step indicators for multi-step processes: For registration, forgotten passwords, and password resets, the dot indicators clearly show progress.
  • Good use of white space: There's generally enough breathing room around elements to prevent a cluttered look.

Cons:
  • Inconsistent colour usage: The mix of light brown, dark brown, and off-white is present but not always harmonised effectively, leading to some sections looking disjointed (e.g., the promotional banners on the home screen).
  • Lack of visual hierarchy in some areas: On screens like "Order Details," the information is presented in a somewhat flat manner, making it harder to quickly grasp the most important details.
  • Flat design elements: Some buttons and input fields appear very flat, which might not be as visually engaging or indicate interactivity clearly.
  • Overlapping elements on home screen banner: The "NEW MENU Launch!" banner has text that slightly overlaps the "MENU" background, making it less readable.
  • Subtle color variations for active states: In the "My Cart" and "Product Details" screens, the active/selected states (e.g., size selection, quantity adjustment) use very subtle colour changes that might not be immediately obvious.

Based on the feedback received, I have tried to retain the good aspects and improve the specific parts that still require further improvement. Let's dive into each individual part to discuss the changes that I have made.

Comparison Overview

Order Details

Initial Feedbacks
  • Pros: Clear progression steps for order status, good spacing for delivery details.
  • Cons: The "Order Status" progress line and circles are all the same colour, making it hard to quickly identify the current stage. The active delivery/pickup location is not strongly emphasised.
Changes & Improvements:
  • Order Status: The current order status ("Your cake is ready for collection") is now highlighted with a filled brown circle and a darker, thicker line connecting it, creating a much clearer visual cue for the user's order progress. This significantly improves visual hierarchy.
  • Delivery Details: The selected pickup/delivery location ("Puchong") has a slightly darker background and more defined borders, subtly indicating its active state compared to the "Home" address. This provides better feedback on the chosen option.
  • Overall Cohesion: The colour palette feels more unified and the elements have a slightly softer, more refined appearance due to subtle shadows/gradients, enhancing the overall user experience.
---

Application Design I Final Project (High Fidelity Prototype)

Application Design II Refined Hi-Fi Prototype
 
Comparison between Previous & Current Application Design (Refinements)

Comments

Post a Comment