COMP1773

User Interface Design

Title: Designing Application UIs for Food Delivery Service

Student’s Name: Vu Thanh Nguyen
Instructor: Michael Omar
Student’s ID: GCH221117
Submission Date: 19/08/2024
Table of Contents
I. Introduction ............................................................................................................................................... 3
II. Background Research................................................................................................................................ 3
Design considerations: ............................................................................................................................. 3
Standard frame:.................................................................................................................................... 3
Common operations:............................................................................................................................ 3
Standards and Guidelines: ................................................................................................................... 3
III. Users Group: ............................................................................................................................................ 4
Target user group: .................................................................................................................................... 4
User Persona: ........................................................................................................................................... 4
User Scenarios .......................................................................................................................................... 5
IV. Visual Design ............................................................................................................................................ 7
Layout ....................................................................................................................................................... 7
Theory of Colors ....................................................................................................................................... 8
Fonts ......................................................................................................................................................... 9
Graphics Design Elements ...................................................................................................................... 10
V. Design and Evaluation ............................................................................................................................ 11
Low-Fidelity Prototypes and Evaluation................................................................................................ 11
Mid-Fidelity Design and Evaluation ....................................................................................................... 12
Heuristic Evaluation ............................................................................................................................... 19
VI. Critical Reflection and Evaluation .......................................................................................................... 24
VII. Conclusion............................................................................................................................................. 25
VIII. REFERENCE .......................................................................................................................................... 26
I. Introduction

A traditional food business contacted us for help with the user interface of their app. The
company has two chains of stores in local areas, specializing in traditional Vietnamese dishes
and offering a variety of nutritious meals that can be customized to the customer’s preferences.
Single-person households are the target market for the company's services. The user interface
of the app, which allows customers to order and receive a box at home, is essential to the
service. was asked to create a mid-quality prototype.

II. Background Research

This section, each part is a carefully explained and presented application design, important
operations for users, detailed instructions on operations when users use it easily and
conveniently...

Design considerations:

Standard frame:
The iPhone XS Max frame has a length of 157.5mm, width of 77.4mm, which is very suitable for
putting many components into the UI. For this size, it will create convenience for young users or
the elderly to see clearly and operate easily to avoid confusion about each function of the
system.

Common operations:
When executing a task, Android and iOS smartphones employ distinct gestures. To get back to
the previous page, users only need to touch the Back button. In contrast, iOS users only need to
swipe back to do the same thing. When navigating between pages in an app, iOS users often
swipe, but Android users typically utilize the buttons located at the bottom of the screen.

Similar features on both devices include pinch and zoom, swiping to view different goods, and
double-tapping to examine a product closer.

Standards and Guidelines:

Shneiderman's 8 Golden Rules and Nielsen's 10 Usability Principles are rigorously compared to
determine which should be used in a given project when creating UI standards and guidelines.
Both are quite popular recommendations with clear benefits and limitations. While
Shneiderman's recommendation is more focused on user control and rapid response, and is
more suited for computer apps than mobile apps, Nielsen's guideline is more focused on
helping users understand how the program functions more seamlessly. In conclusion, the
usability of the user interface will be assessed in a subsequent part using Nielsen's 10 Usability
Principles.
III. Users Group:

Target user group:

The target customers of this chain of stores are young people abroad who love Vietnamese
cuisine, Vietnamese people living abroad who still miss the taste of traditional Vietnamese
dishes and foreigners who want to learn about Vietnamese culture through cuisine. The main
target is young people from 19-25 years old and middle-aged people from 35-45 years old.
Thereby, the following user groups are created:

Group 1: Age group: Young people - 19 to 25 years old

Gender: Male/Female
Motivation: Find nutritious dishes that are not too bland but still have new flavors

Group 2: Age group: Middle-aged people - 35 to 45 years old

Gender: Male/Female
Motivation: Want to experience the flavors of Asia in general and Vietnam in particular

User Persona:
Personas are fictional characters made from research data collected to identify user types that utilize a
product, brand, or website similarly. The two personas from the previous section, representing two user
groups, are shown here:
 Figure 1 : Persona based on User Group 1

Figure 1 : Persona based on User Group 2

User Scenarios
User scenarios are used to generate ideas. Essentially, they are brief narratives about how users
interact with an application to complete a certain activity. Based on the helpful descriptions
from the scenarios, the design team then knows how to come up with solutions for the app
design. Salazar (2021).
Five elements make up a user scenario: actor, motivator, intention, action, and resolution.
Two situations based on the user personas from the previous section are shown below.

Scenario 1:

Jack Hamston is a 24 year old programmer who has joint problems due to sitting for long hours
at work, he is also quite busy with his assigned work at the company so he is looking for a
nutritious diet that can help him overcome his problems but also has a short delivery time and
is convenient for eating. He can view the nearest store location to him to choose fast delivery
and can see the main ingredients of the dish.

Actor : Jack Hamston

Motivator: Having joint problems due to sitting for too long at work, he is also quite busy with
his work assignment at the company

Intention: He is looking for a nutritious diet that can help him overcome his problems

Action: He was introduced to a Vietnamese food chain by his Vietnamese friend that has many
nutritious dishes

Resolution: He taps on the description of the dinner and places his order.

Scenario 2:

Emma Elice is a local food journalist, she is looking for an Asian dish that might be popular in
her local area. Elice needs to finish her article on the ingredients of a traditional Vietnamese
dish. She finds the shop through the good reviews of the nearby food. Elice can see the recipes
and can see the star rating for each dish. She places the order on the app and pays with Visa.

Actor : Emma Elice

Motivator: She is looking for an Asian dish that might be popular in her locality

Intention: Elice needs to finish her article on the ingredients of a traditional Vietnamese dish.

Action: She finds the shop through the good reviews of the nearby food

Resolution: Elice can see the recipes and can see the star rating for each dish. She places the
order on the app and pays with Visa.
IV. Visual Design

Layout

The method and justification of information architecture

This section will discuss the Information Architecture method for creating the user interface of
the app and provide a wireframe that reflects the decisions taken during the process. The top-
down approach to information architecture was selected for this design.

Similar to the top-up technique, the bottom-up approach to information architecture depends
on functional and content analysis.

Figure 2: Wireframe for Home screen

The navigation bar initially appears to the user, containing three icons that clearly indicate its
purpose: the Home icon for the main screen, the Shopping Cart icon (which resembles a real
shopping cart in a supermarket with actual orders) informing the user that it contains their
orders, and the Personal Profile icon, which stores user data after a successful login.

Figure 3: Homescreen Navigational Bar

Above is a picture of the dish and the shop called “Vietnamese food” so that the user can
remember the name of the shop and impress the user with the attractiveness of the dish. This
interface is mid-range and popular so that the user knows that he is on the Home section of the
system.

Figure 5: Best-selling dish picture and store name

In the center are 4 functions that users can easily tap on such as Guide to display the sales
location, Menu to display the list of dishes, Order to see the dishes they have added, Coupon to
choose the delivery coupon according to each type of transportation. These 4 functions can
answer users’ questions about operations and how to use them.

Figure 6: Button functions for direction, menu, order, coupons

Theory of Colors

According to color theory, a group of colors may be used to produce harmony that will increase
the impact of the visual design and improve the user experience.
 Figure 8: Selected Color Scheme

Figure 8 illustrates how the color scheme selected for the app's UI matches the app's color
scheme. This color scheme uses #D4A481 as the main color and #000000 as the supporting
color. It makes the user interface's elements flow smoothly together, making it simple for the
user's eyes to see and navigate without being distracted. Light orange and black are used in the
color scheme for the typefaces and icons. The soothing shade of orange highlights the visions of
vibrant Vietnamese cuisine. Consequently, it goes nicely with the idea of food service for meals
prepared with wholesome and approachable products.

Fonts
Two font styles will be chosen for the application's user interface when it comes to typography
design. The body of the text and any material with smaller fonts should use one typeface, while
the headlines should use another:
 Figure 9: Montserrat Font
The Montserrat most design initiatives, including those involving websites, publishing, and logo
design, employ the Montserrat typeface. This typeface stands out because it is easy to read and
consistent throughout a wide range of text sizes, from small text to enormous headlines. For
this reason, it is a great option for a wide range of applications.

Figure 10: Source Sans Pro Font

Source Sans Pro is designed with a wider width than many other comparable gothic typefaces,
and the shorter uppercase letters combined with the longer lowercase letters create a more
pleasant reading texture in long passages of text.

Graphics Design Elements

We will talk about adding symbols and graphics to the program to improve its usability for the
average user. Icons are easily identifiable and remembered objects with a presentational
significance that conveys information.(Kamarulzaman et al., 2020)
Icons that are appropriate for each item on the user interface contribute to the harmony and
friendliness of the interface when it comes to well crafted online meal delivery services.
Additionally, it makes the user feel nice rather than lifeless and dull. It also draws attention,
piques users' curiosity, and encourages them to click on it more.
 Figure 11: Main icon in interface

Using visuals in the user interface is another excellent way to draw in clients and distinguish
each product. For example, in addition to textual information, users like to see a product's
image while examining a meal to determine whether or not it is a good fit for them. Therefore,
it is important that the images used are of a good quality.
Additionally, it's advisable to utilize accurate and pertinent graphics to keep users from
becoming confused.

Figure 12: Food image

V. Design and Evaluation

Low-Fidelity Prototypes and Evaluation

The two low-fidelity prototypes (Home Screen) will be shown below, together with annotations
and an explanation, in this section. Every prototype has two iterations, which are discussed and
ultimately selected to move on with the app's design.
 Figure 13/14: Versions 1 and 2 of the Home Screen Lo-Fi Prototype

There are not many differences between Figures 13 and 14 other than the center of the app.
Figure 13 has the store name and the sections are much different from section 14. In version 1,
we can find the store name line "Vietnam Food" which gives us the highlight that version 1
brings to the user. The frame of the main items in the center is also rounded to create
friendliness but not as dry as in version 2 (figure 14). The design in figure 14 is more spacious
than figure 13 but it does not bring the highlight to the interface that version 1 has, this can
also be seen when comparing the 2 designs together. With this screen in version 1, it gives
users the necessary information while still creating highlights and knowing which section they
are in.

Mid-Fidelity Design and Evaluation

Detailed design of each part

 Figure 4 : Home Screen

This is the main interface that the user sees when they launch the program, as seen in Figure
15. With complete function buttons, the previously indicated typefaces, and primary colors, it
adheres to the first version's design (Figure 13). To increase emphasis, it adds symbols to
symbolize each individual thing. All of them adhere to the earlier parts and are clearly
described.
 Figure 16: Direction screen
This is the first part when the user clicks on the Direction section, the screen will display 2
locations of the nearest store for the convenience of users who want to order online or want to
experience Vietnamese food at the store. The 2 sections in the Direction section are designed in
detail about the store location and the map where the store is open.
 Figure 17: Menu screen

This is the Menu screen, which allows users to view traditional and recommended dishes. Each
dish has detailed information about the ingredients in the dish as well as the price, 0-5 star
rating, number of favorites of the dish and can be added to the cart.
 Figure 18: Food details

When the user clicks on the dish, this image is a more detailed dish section for the user, about
the method of making, origin and ingredients in the dish, how to make the dish to provide
information for the user. In addition, it still has the review and favorite section like the menu
screen.
 Figure 19: Order screen

As above, when the user clicks on "cart", the newly added dish will automatically jump to the
Order section as shown in image 19. The user will see the total amount for the dish clearly and
the "payment" button to pay for that dish.
 Figure 20: Payment screen

In this payment section, the application will show the user the delivery address, recipient phone
number and recipient email. Users can choose 3 payment methods: Visa, carh or credit card. In
addition, users can choose Coupon to use when receiving in the Coupons section on the main
screen.
 Figure 21: Success payment screen

After completing the payment procedure, the user will be redirected to the payment
completion section, and the 2 buttons below "Back to menu" are used when the user wants to
return to the Home screen and the "Continute buying" button will move to the Menu section
when the user still wants to buy more dishes.

Heuristic Evaluation
 Function Screen Explanation

When a user wants to order a dish, they

may see the meal information screen with
all the details, including price notifications,
Display system reviews, a thorough description, and an
add to cart button.

The system will locate the nearest store to

Positioning system you which will lead you to google map
when you click on the store address.
 The system displays a list of dishes along
with ratings from 0-5 stars so that users
can freely choose dishes according to their
Product List
preferences as well as the main
ingredients in the dish for users to
consider before deciding to buy.
 Users can select the dish and add it to the
Order section before paying, they can
select multiple dishes or 1 dish to proceed
to the payment step, the total price will be
displayed below the "Total Price" section.
Order and Payment
When paying, users will have many
System
options for payment methods such as Visa,
Credit Card, Cash and in addition, they can
save the discount code outside the
"Coupon" section on the main screen.
Users tap the purchase button after
completing the payment information.
 Users can view their account profile, the
screen will display details of address,
phone number, email and Facebook
User profile account. If they want to adjust their
information, users can click on "Edit your
profile" to change. Users can also "log out"
when they want to use another account.

Users can log in with an existing account or

Login system have 3 options: log in with Facebook,
Google, or Twitter to continue shopping.
 If the user enters the wrong username or
password, the screen will display a
notification bar from top to bottom that
Login error
the login was unsuccessful, the user needs
to check the account and password again
before logging in again.

VI. Critical Reflection and Evaluation

I found the process of developing the application's user interface (UI) to be both extremely complex and
fascinating after finishing the design and carrying out the evaluation. Even if I still have some errors in
my UI design and assessment, I have learnt a lot of valuable skills that are helpful for developing a
decent website, such color theory, typography, character and scenario creation, etc. I first ran across
some issues with Axure while attempting to move components around or switch between dynamic
panels.

My goal now is to try to develop my technical skills in all aspects, designing websites helps me improve a
lot in terms of thinking and imagination. I learned the must-haves and must-haves when planning a
project to create a mobile sales application
VII. Conclusion
In conclusion, designing the user interface (UI) for the food delivery service application was a
comprehensive and enriching experience that allowed for the application of key design
principles and methodologies. The project highlighted the importance of understanding user
needs, creating personas, and developing user scenarios to guide the design process. By
focusing on the target market, which includes both young and middle-aged users with a shared
interest in traditional Vietnamese cuisine, the design aimed to create an intuitive, aesthetically
pleasing, and functional interface.

The application of Nielsen's 10 Usability Principles ensured that the design was user-centered,
facilitating easy navigation and interaction for both iOS and Android users. Through careful
consideration of color theory, typography, and graphic elements, the final design achieved a
balance between functionality and visual appeal, making it easy for users to explore the menu,
place orders, and complete payments efficiently.

Moreover, the iterative design process, including the development of low and mid-fidelity
prototypes, allowed for continuous evaluation and refinement, ensuring that the final product
met both user expectations and business objectives. The heuristic evaluation provided further
insights, confirming the usability and effectiveness of the UI in addressing the needs of the
users.

Overall, this project not only enhanced my technical skills in UI design but also deepened my
understanding of user-centered design principles, which are crucial for creating successful
digital products. The experience gained from this project will undoubtedly contribute to future
design endeavors, enabling the creation of even more effective and engaging user interfaces.
VIII. REFERENCE

CDC (2020). QuickStats: Prevalence of High Total Cholesterol* Among Adults Aged ≥20 Years,†
by Age Group and Sex — National Health and Nutrition Examination Survey, 2015–2018.
MMWR. Morbidity and Mortality Weekly Report, 69(22), p.690.
doi:https://doi.org/10.15585/mmwr.mm6922a5.

Dam, R. and Siang, T. (2019). Personas – A Simple Introduction. [online] The Interaction Design
Foundation. Available at: https://www.interaction-design.org/literature/article/personas-why-
and-how-you-should-use-them.

Garrett, J. (2010). The Elements of User Experience: User-Centered Design for the Web and
Beyond. 2nd ed. Pearson Education, p.109.

Kalachova, A. (2022). Common Screen Sizes for Responsive Web Design. [online] Altamira
Softworks. Available at: https://www.altamira.ai/blog/common-screen-sizes-for-responsive-
web-design/.

My Axure file:
https://drive.google.com/file/d/1CKU3aoe2YnxUiuj79qxS6rx7nkOBY2bs/view?us
p=sharing