Group Project 3: Conceptual & Physical Design
Task 1 - Check food stall status availability
Task 2 - Browse and interact with digital menus within a price range
Task 3 - Place and order food through delivery options
Alternative Design 1 - Nur Umairah binti Zamri
Alternative Design 2- Cheong Yi Shien
Alternative Design 3 - Nur Aliah Izzati binti Azhari
Alternative Design 4 - Irdina Hannah binti Misnun
Alternative Design 5 - Damia Zafira Binti Nawawi
Scan of voted design elements/layouts
Wireframes for Task 1:
Similarity: In page 1,2,3,4,5
Design Decision: Buttons (Folder, Arcade, Others), food boxes, open and close button and food stall lists share consistent shapes, sizes, and styles.
Justification:
The principle of similarity allows users to quickly recognize items that belong to the same category. For example, on page 1, users easily identify Folder, Arcade, and Others as menu options due to their matching shapes. On Page 5, the restaurant lists look similar, helping users quickly scan and compare options.
Proximity: In page 2,4
Design Decision: Favourite and Recent Order sections are grouped closely, and meals are divided by time slots (Breakfast, Lunch, Dinner)
Justification:
The principle of proximity groups related content without needing extra labels. For example, on page 2, users can tell which food belongs to "Favourite" and "Recent Order" by how they are positioned. On Page 4, grouping meals under time slots helps users navigate intuitively based on when they want to eat.
Enclose: In page 1,2,3,4,5
Design Decision: Boxes surround each menu item and food stall lists
Justification:
The principle of enclose makes it clear where one group of content ends and another begins. For example, in Page 3, food items like "Donut" and "Apple Pie" are each inside a box, helping users recognize them as individual options. On Page 4, arcade categories are enclosed in distinct sections, improving clarity.
Figure & Ground: In page 2,3,5
Design Decision: Use of icons and images (food items, food stalls) that contrast with the background.
Justification:The figure and ground principle ensures that users can distinguish between the important elements and the background. For example, the food icons inside circles (Page 2) or boxes (Page 3) stand out clearly. On Page 5, the restaurant images and ratings are easy to see due to strong contrast and spacing.
Continuation: In page 1
Design decision: The line between the fork and spoon forms an egg-like shape, drawing the user’s attention downward
Justification:Continuation guides the user's eyes naturally through the interface. For example, in this case, the visual flow from the
Smart UTM logo down to the buttons helps users navigate the screen easily without confusion.
For the food stall status, which includes the Open and Close buttons, Open is represented in green while Close is grey. These buttons demonstrate the Gestalt principles of similarity, proximity, and figure & ground. It reflects the similarity principle because both buttons share the same shape and style, visually signaling to users that they belong to the same functional group. The proximity principle is shown because each status button is placed directly next to the corresponding restaurant name and image, clearly indicating which stall the button controls. Lastly, the figure & ground principle is applied because elements that contrast with the background appear more noticeable. The green "Open" button draws immediate attention, while the grey "Close" button suggests an unavailable status.
Wireframes for Task 2
Similarity: In page 1,3,4,5
Design Decision: Consistent square food boxes and food category labels such as Western, Japanese and Spicy
Justification: Based on the principle of similarity, users can quickly recognize food stalls menu listing on page 1 because of the consistent box layouts. The food category labels also follow a uniform format and structure which helps users easily identify them as selectable categories. This consistency improves visual recognition and user efficiency across different pages.
Proximity: In page 2, 5
Design Decision: On the Filter screen, buttons like Price, Operation Hours, and Type of Food are grouped closely together. Similarly, the star ratings and user reviews are placed near each other.
Justification: The principle of proximity states that elements placed close each other are perceived as related. On page 2, the grouping of filtering options (Price, Operation Hours and Type of Food) help users quickly understand them as part of the same filtering function. This reduces effort in scanning and improves decision making. On page 5, the star ratings and user reviews are grouped closely as it helps users understand that the reviews belong to the corresponding rating.
Enclosure: In page 1,2,3,4,5
Design Decision: The stall listings and filter options to food categories, content sections, and reviews, each functional area is separated into distinct blocks or zones. The food items are arranged in enclosed cards with their own images and prices.
Justification: The principle of enclosure groups related information using visual boundaries such as rectangles, spacing, and lines. For example, on Page 1, the boxed area helps users visually group related elements and quickly identify interactive components. On Page 2, enclosing filter options improves clarity by separating them from the rest of the UI. On Page 3 and Page 4, separating the sidebar, food list, and description blocks helps users focus and navigate with minimal confusion. On page 5, the grouping of ratings and reviews in a box helps users immediately understand that all elements relate to customer feedback. Overall, enclosure enhances readability and reinforces the relationship between interface elements.
Continuation: In page 1,2,3,4,5
Design Decision: Using vertical flows for pages like menus and reviews, or horizontal and grid alignments for filters and food items, each layout supports intuitive navigation and scanning.
Justification: The principle of continuity ensures that users naturally follow a path when scanning the interface. On Page 1,the aligned content guides the user’s eye smoothly through the content and smoother the scanning and navigation. On page 2, the structured filter layout helps users process options in order. On Page 3, the image grid’s consistent alignment supports rapid browsing of food items. On Page 4, the horizontal alignment of related items allows users to explore additional options in a natural, flowing motion. On page 5, vertical alignment from header to reviews makes information easy to follow. These continuous flows support intuitive navigation and visual harmony throughout the app.
Wireframes for Task 3
Similarity : Page 1, 2, 3, 4
Design Decision : Each box has a different image or icon to represent food items, vouchers, delivery options,payment method and specific locations in the route map. These boxes share similar structure with text consistently placed inside and below the icons.
Justification : Similarity allows the users for double confirmation of their selected menu before placing order in page 1 and voucher with discount-related is being written in large text and same colors makes the discount stand out in page 2. Delivery options and payment method on page 4, make users easily differentiate them due to different words related in the box while locations in route map on page 5, allows users to understand the route of their food being delivered from. Through this, users are more easily able to recognize icons even though each icon serves different purposes as long as they belong to the same style and shape.
Proximity : Page 1, 2, 3, 5
Design Decision : Related information is grouped closely together such as food name, validation of voucher, payment options and prices in receipt.
Justification : By grouping the same elements, users can view their selected menu with name and quantity of the items in page 1. On page 2, users can identify which voucher to prioritize based on expiration dates shown and select the payment method and delivery options according to their needs, which helps in improving the effectiveness of the system. A clear and well-organized receipt shows ordered items and their prices, helps users to track their transaction and provide proof of purchase if any problems happen.
Continuation : Page 4, 5
Design Decision : Delivery options and payment method are arranged horizontally and map’s delivery route shows a clear path to user how their food is being delivered from the food stall.
Justifications : Both pages use horizontal and vertical layout where the user's eye will naturally follow the line. On page 4, the placement of the delivery option starting from the ‘Standard’ option, increases gradually toward the right corner and this also applies to payment methods and the delivery route on the map illustrates food’s journey on page 5 . This alignment plays vital roles for the continuation principle to ensure smoother navigation and better experience.
Figure & Ground : Page 2, 4
Design decision : Each voucher card has images, bold text which makes them stand out as ‘figure’ while whitespace as ground with distinct borders. In the map route location of each building, route and hostel are ground while figure is the delivery path and user’s location.
Justifications : Vouchers use a clear figure-ground principle, allowing easier selection from users because they can see what is most interesting and should be used. Separated borders of each voucher ensure the interface looks clean and users avoid using the wrong voucher. By drawing a clear route, users focus more on the delivery path and background map provides visual support.
Enclosure : Page 1
Design decision : The page is divided into multiple sections which are food items, suggestion food, voucher and total that provide more information with limited space.
Justifications : By applying enclosure principle, the page becomes more organized as users can quickly differentiate the purpose of each section with a clear labelling.
Similarity : Page 1, 2, 3, 4
Design Decision : Each box has a different image or icon to represent food items, vouchers, delivery options,payment method and specific locations in the route map. These boxes share similar structure with text consistently placed inside and below the icons.
Similarity : Page 1, 2, 3, 4
Design Decision : Each box has a different image or icon to represent food items, vouchers, delivery options,payment method and specific locations in the route map. These boxes share similar structure with text consistently placed inside and below the Similarity : Page 1, 2, 3, 4
Design Decision : Each box has a different image or icon to represent food items, vouchers, delivery options, payment method and specific locations in the route map. These boxes share similar structure with text consistently placed inside and below the icons.
Justification : Similarity allows the users for double confirmation of their selected menu before placing order in page 1 and voucher with discount-related is being written in large text and same colours makes the discount stand out in page 2. Delivery options and payment method on page 4, make users easily differentiate them due to different words related in the box while locations in route map on page 5, allows users to understand the route of their food being delivered from. Through this, users are more easily able to recognize icons even though each icon serves different purposes as long as they belong to the same style and shape.
Proximity : Page 1, 2, 3, 5
Design Decision : Related information is grouped closely together such as food name, validation of voucher, payment options and prices in receipt.
Justification : By grouping the same elements, users can view their selected menu with name and quantity of the items in page 1. On page 2, users can identify which voucher to prioritize based on expiration dates shown and select the payment method and delivery options according to their needs, which helps in improving the effectiveness of the system. A clear and well-organized receipt shows ordered items and their prices, helps users to track their transaction and provide proof of purchase if any problems happen.
Continuation : Page 4, 5
Design Decision : Delivery options and payment method are arranged horizontally and map’s delivery route shows a clear path to user how their food is being delivered from the food stall.
Justifications : Both pages use horizontal and vertical layout where the user's eye will naturally follow the line. On page 4, the placement of the delivery option starting from the ‘Standard’ option, increases gradually toward the right corner and this also applies to payment methods and the delivery route on the map illustrates food’s journey on page 5 . This alignment plays vital roles for the continuation principle to ensure smoother navigation and better experience.
Figure & Ground : Page 2, 4
Design decision : Each voucher card has images, bold text which makes them stand out as ‘figure’ while whitespace as ground with distinct borders. In the map route location of each building,route and hostel are ground while figure is the delivery path and user’s location.
Justifications : Vouchers use a clear figure-ground principle, allowing easier selection from users because they can see what is most interesting and should be used. Separated borders of each voucher ensure the interface looks clean and users avoid using the wrong voucher. By drawing a clear route, users focus more on the delivery path and background map provides visual support.
Enclosure : Page 1
Design decision : The page is divided into multiple sections which are food items, suggestion food, voucher and total that provide more information with limited space.
Justifications : By applying enclosure principle, the page becomes more organized as users can quickly differentiate the purpose of each section with a clear labelling.
Description and justification of metaphors
1. Folder: Favourite & Recent Orders
Metaphor: Save the receipts or write down meals you liked every time trying new menus might be bothersome most of the time.
Explanation: In real life, customers may forget a food name but the taste of the food might be unforgettable which makes it easier for them to re-order based on describing the taste to the waiter. To address this problem, through folder feature users can quickly save food items under ‘Favourite’ or ‘Recent’ orders for convenience in future.
2. Star Rating & Reviews
Metaphor: Asking friends or reading reviews before buying .
Explanation: In physical settings, people often ask others for opinions or observe how many people visit a restaurant first before they actually visit the stall to ensure the food meets with their expectation. In the app, star rating and review will be implemented to easier get information about specific stores without wasting their time to wait for others to respond to their questions.
3. Stall Status using Colour (Gray = Closed, Bright = Open)
Metaphor: Checking a stall’s shutters or sign to know if it's open by physically visiting the food stall.
Explanation: Normally, customers walk to a stall to check if it’s open which becomes a hassle if their preferred stall is closed which customer needs to think of other menu options and stalls. The app replicates this visually using grey tones to show a closed stall and bright tones to show it's open which minimizes manual work and effort from users.
4. Available Voucher Section
Metaphor: Like promo vouchers from Supermarket leaflets
Explanation: Usually customers will get printed leaflets vouchers and discounts after shopping at a Supermarket. Likewise, in the app, it offers similar experience to customers which allow them to scroll various vouchers and exciting deals available from different food stall making it easy to spot tempting offers. It is easier for customer to discover new vouchersa and deals through visually engaging offers.
5. Filter Menu (Price, Time, Food Type)
Metaphor: Like asking a waitress or food stall worker “What’s available for dinner?”
Explanation: In-real life, customers would like to explore on food variety, prices , popular dishes , beverages and more. As every customer has their very own preferences and favourites, the filter menu allows them to choose food based on their tastes whether they are looking for western food, chinese cuisine , desserts or vegetarian options through the filter menu. This filter menu act as a guide for them in choosing their preferences.
6. Food Icons (Visual Menu)
Metaphor: Like pointing at food images on a real menu board.
Explanation: In many restaurants or food stalls, customers often make their choices by looking at pictures and pointing at the dish they want. This natural visual-driven behavior is replicated in the app through the use of consistent square blocks with food images. Users can easily tap on these icons to explore or select their desired foods, just like they would do in front of a physical menu board. This metaphor taps into users' existing habits making the interface more intuitive. Visuals reduce decision fatigue, attract attention and help users quickly identify what appeals to them.
7. Basket and Checkout
Metaphor: Like placing food on a tray and heading to the cashier.
Explanation: In real life settings like bakeries or food courts, people usually place their chosen food items onto a tray, review what they have selected and then proceed to the cashier to pay. The app mirrors this experience through a digital basket system. Users can add food items to a virtual basket, review their choices, adjust quantities and then proceed to the checkout process to complete the transaction. This metaphor reflects a natural shopping rhythm that users are already familiar with, giving them a sense of control before finalizing their order.
Comments
Post a Comment