UI/UX Evaluation and Redesign of Foodcorner Mobile Application

Desklib provides past papers and solved assignments for students. This report details the UI/UX improvements of the Foodcorner mobile app.

Contents
Introduction..................................................................................................................................1
Homepage....................................................................................................................................2
Login page...................................................................................................................................3
Forget password...........................................................................................................................7
Facebook page.............................................................................................................................9
Google page...............................................................................................................................10
Registration page.......................................................................................................................12
Terms and Conditions page.......................................................................................................13
Main Page..................................................................................................................................15
Sign out page.............................................................................................................................17
Left Bar......................................................................................................................................19
Table booking page....................................................................................................................21
Order history page.....................................................................................................................22
Account detail page...................................................................................................................24
Help page...................................................................................................................................26
Notification page.......................................................................................................................27
Contact us page..........................................................................................................................29
Starter page................................................................................................................................30
Individual starter page 1............................................................................................................32

Individual starter page 2............................................................................................................34
Main course page.......................................................................................................................35
Individual main course page 1...................................................................................................37
Individual main course page 2...................................................................................................39
Dessert page...............................................................................................................................40
Individual dessert page 1...........................................................................................................42
Individual dessert page 2...........................................................................................................44
Soft drinks page.........................................................................................................................46
Individual soft drink page 1.......................................................................................................47
Individual soft drink page 2.......................................................................................................49
Basket........................................................................................................................................50
Order page.................................................................................................................................52
Payment type page.....................................................................................................................53
Payment page.............................................................................................................................55
Offer page..................................................................................................................................56
Payment confirm alert box.........................................................................................................58
Payment successful alert box.....................................................................................................60
Order status page.......................................................................................................................61
Search page................................................................................................................................63
Corrections.................................................................................................................................64
Navigation map..........................................................................................................................69

Conclusion.................................................................................................................................70
Reference...................................................................................................................................71

Introduction
Foodcorner application is a mobile-based application of the Foodcorner business. This
application allows the user to book and order a product using the application. The user interface
is designed in a simple manner for the user’s understanding. Issues were found in the interface
design during the evaluation of the design interface. The issues are being resolved and corrected.
The issues were corrected and implemented to the application design using Nelson’s heuristic
principles. These principles describe the issues that occur in the application's usability. Nelson’s
heuristics principle consists of a set of ten principles that can be implemented in the evaluation
process to identify and rectify the issues. These principles are the most commonly used
principles in evaluating issues of an application. All the UI pages are designed using similar
design interface according to the heuristics principle to ensure no misunderstanding among the
different pages. The other issues such as link errors are fixed by providing appropriate links in
the appropriate buttons for the user to be directed accordingly. The texts in the buttons are
enlarged, and the sizes of the button managed accordingly to eliminate the attractiveness issues.
Alignment of all the assets in the application page is performed to retain the attractiveness factor
of the design interface. Buttons and icons are placed in similarity to eliminate user confusability.
Various other minor corrections are also performed to ensure proper usability of the application
interface design.

Homepage
Figure 1: Homepage
Description-
This is the first page that a user sees when accessing the application of the food corner. In this
page, the routine of the Foodcorner is mentioned for the ease of customers. This page also allows
you to book your favorite table of choice.
Uses-
Booking table
Components-
Logo image, text input box, labels, button, links.
Navigation-

When a user books a table using this application; the homepage redirects the user to the login
page of the application.
Login page
Figure 2: Login page

Description-
This is the log-in page of the application. To book a table, the user needs to log in to the Food
corner application. The user can log in using their registered credentials. If the user does not have
an account then they can create one using their Facebook or Google accounts. The user also has
the option to create their accounts by using other credentials.
Uses-
Login into the application.
Components-
Logo image, text input box, labels, button, checkbox, links.
Navigation-
The login page redirects the user to the main page of the Foodcorner application in which all the
food menu and products are displayed.

If the user forgets the password or their username then they can use the link “Forgot password?”
to re-generate their credentials.
If the user is registered using Facebook account then they can click on the link “Connect it with
Facebook account”. This action redirects the user to the Facebook login page.

And, if the user is registered using Google account then they can visit the associated login page
using the appropriate link provided in the login page.
If the user is not registered then they can use the “Create new account” link to create a new
account. The link redirects the user to the registration page where the user can create a new
account.

Forget password
Figure 3: Forget password page
Description-
It is the page that lets the user recover their forgotten username and passwords. In this page, the
user enters their registered credentials by which the Foodcorner account was created. If the input
information is correct then the user receives the username and password in their registered
account that they used in creating the Foodcorner account.
Uses-
Recover password.
Components-

Logo image, text input box, labels, button, links, back icon.
Navigation-
The user, from this page, is redirected to the login page of the application after the successful
operation of the command.

Facebook page
Figure 4: Facebook log-in page
Description-
It is the Facebook log-in page in the application. This allows the user to log in to the Foodcorner
application using their Facebook account credentials. This makes the process of registration
much easier for the users by letting them create their account using their own existing Facebook
account.
Uses-
Facebook log in.
Components-
Logo image, breadcrumbs, text input box, labels, button, links.
Navigation-