1.0 Storyboard

1.1 Goal 1: Place Food Order

1.2 Goal 2: Get a Ride

1.3 Goal 3 : Provide feedback

2.0 Alternative Design

2.1 Alternative Design 1 - Tan Hui Qun

2.2 Alternative Design 2 - Izzati Athirah

2.3 Alternative Design 3 - Fahim

2.4 Alternative Design 4 - Syed

2.5 Scan of voted design elements/layouts

After all group members have voted suitable layout for our interface, we have chosen every page layout with 3 and 4 voters as our interface because it is way more user-friendly and simple. When it comes to designing interface, we have to make sure that the design is not complex and user can easily access it without any difficulties. There will 9 layout that we have choose to be implemented in our design interface. In Hui Qun’s design, we have choose screen 1 and screen 3 as our layout for food delivery. In Fahim’s design , we have choose screen 2, screen 4, screen 5, and screen 6 as our home page, food order and mapping of booking a ride. In Izzati’s design, we have choose screen 3 and 6 as our food type page and giving review page. In Syed’s design, we have choose screen 5 and 7 as our order tracking and order cancellation.

3.0 Layout & Interface Design (Wireframe)

3.1 Task 1: Place Food Order

3.2 Task 2: Get a Ride

3.3 Task 3: Provide Feedback

3.4 Justification of Design

Designing with Gestalt concepts in mind is essential for creating intuitive interfaces and better user experiences. When it comes to similarity, we can observe that every interface—from the home page to the last task—shares characteristics that make elements like colour, shape, size, or texture seem connected or grouped together. This idea aids in the creation of a visual hierarchy in design by clustering related objects together. Having this repetition of visual components helps to contribute to the design's rhythmic development and consistency and also aids in reiterating crucial components. For example, we use icon designs that are familiar with users like searching icons and scanning icons. The usage of visual components like login methods and action icons is uniform across both food delivery and ride-hailing systems, demonstrating the concept of similarity and making them easy to recognize and operate.

Careful application of the notion of proximity by a logical grouping of pieces within each section enhances user understanding and promotes a smooth flow of information. Similarly, process stages are organized logically, focusing on sequentiality and near proximity to one another, which improves user intuition. For instance, every saved place in booking a ride is put close to each other to allocate a similar function.

A good example of enclosure in action is clear section headers for things like "Selected Restaurant" and "Customize Order," which help users easily distinguish between various parts of the interface and ease their mental strain. Applications of continuation can be seen in the logical sequences of interfaces such as "Customize Order" and real-time tracking. These sequences lead users through a consistent flow and make their interactions more obvious.

Finally, the figure and ground principle helps make things clearer visually by making it easy to tell what's in the foreground and what's in the background. Strong contrast in the figure's color, form, size, or texture from the background improves its separation, allowing the figure to stand out. This lets users concentrate on what's important without being distracted.

In conclusion, the get-a-ride and food delivery interfaces make good use of Gestalt concepts, leading to well-organized, user-friendly designs. Through the user's journey in each application, these principles help to create an experience that is easy to use and comprehend.

Other than that, our design interface incorporates Shneiderman's Eight Golden Principles. The goal of Shneiderman's Eight Golden Principles is to provide insightful feedback while aiming for consistency. We aim to keep concepts, layout, and interaction design aspects consistent across the interface. Users can better grasp and anticipate how the interface will behave when it is consistent. For example, the icon of the car and the food denotes the appropriate function to schedule a food delivery. To keep users informed about system operations, modifications, or mistakes, we also provide informative feedback. Giving consumers concise, clear feedback right away aids in their understanding of the results of their activities.

4.0 Interaction Metaphors

Search Bar in Food Section : Enter the name of the restaurant of the food to search for the restaurant or food.

GrabFood : Indicates food order task.

Scan: Enables user to scan QR code and get access the site quickly.

GrabRide : Indicates get ride task.

GrabExpress : Indicates express task.

All : Indicates all task.

Filter in Food Section Search Bar : Filter the food or restaurant based on the categories.

Activity Icon : Redirect user to the activity page and show the activities to the user.

More details icon : navigate user to see more details of the reviewed feedback

Home Page Icon : Redirect user to home page that include search bar section, or choosing specific task such as GrabFood, GrabRide, GrabExpress or All.