Final Project Report

on

Arai Gor Dai application

Submitted by

Group 11

64120500204   Kaweephop Noppakun

64130500210   Thiti             Sae-lee
64130500217   Benyalak     Hanpitaksuk 
64130500219   Premika       Leelasiri 
64130500230   Saran           Tantrapornpong
64130500267   Patthanan    Chunhengpan

Present
Dr. Vithida Chongsuphajaisiddhi and Dr. Vajirasak Vanijja
Course CSC234 User Centric Mobile Application Development
and CSC231 Agile Software Engineering
Semester 2, Academic Year 2022
 Content

Title       Pages

Arai Gor Dai ’s main features

 Authentication page 3
 Sign-in page 4
 Register Page 6
 More detail Page 8
 Forgot Password Page 9
 Home Page 10
 History Page 18
 User Page 19

Authentication page
Function of the page

The Sign Up/Sign In page serves as the initial point of entry for users when opening the
application. Its primary function is to allow users to create a new account or log in to an existing
account.

Elements on the page

1. Application logo
2. Application name
3. Sign-up button
4. Sign-in button

Rational of the design

The page is designed with key elements that contribute to its user interface. The
prominently placed logo, positioned as the largest element in the middle of the page, aims to
ensure users remember and associate it with the application, establishing brand recognition. The
application's name is positioned below the logo to reinforce brand recognition and help users
remember the name in conjunction with the logo. Additionally, the sign-up and sign-in buttons
are prominently positioned at the center of the page, making them easily visible and accessible
for users. This design approach ensures that users can quickly and intuitively locate the buttons
and proceed with the desired action. Overall, the Sign Up/Sign In page provides a visually
appealing and user-friendly interface, prioritizing brand recognition and a seamless user
onboarding experience.

Sign-in page

Function of the page

Users who already have accounts can log into their accounts to access features in
applications by typing in their email, password, or Google account.
The Login Failed pop-up is an essential element of the user interface, appearing when
users enter incorrect email or password information during the login process. Its purpose is to
provide immediate feedback and error prevention by clearly and visibly notifying users about the
mistake they have made.
Elements on the page

1. Back to home icon (arrow back icon)

2. Application logo
3. Application name
4. Email text field
5. Password text field
6. Forgot password link
7. Sign-in button
8. Don’t have an account text
9. Create one link
10. OR text
11. Sign-in with google button
12. Please enter correct email text
13. Sign-in failed text
14. Please check your email and password text
15. OK button

Rational of the design

The Sign-In page has been designed to resemble a standard sign-in page commonly found
in other applications. The intention behind this approach is to provide users with a familiar
interface that they can easily navigate and understand. The inclusion of a back symbol grants
users the freedom to return to the home page without the need to log in again, enhancing user
control and convenience. To ensure ease of comprehension, all the elements on the page are
vertically stacked, guiding readers to follow the content from top to bottom in a logical flow. The
aesthetic and minimalist design principles have been implemented, resulting in a clean and
visually pleasing layout. Despite the limited amount of text, users can quickly grasp the required
actions due to the familiarity of the design, as it resembles other programs they may have used
before. Additionally, error prevention has been incorporated beneath the email text field to
provide a visible prompt for users, alerting them to any incorrect email format. This feature
serves as a helpful reminder for users to double-check their email entry and make any necessary
corrections. Overall, the Sign-In page offers users an intuitive and user-friendly experience while
maintaining a visually appealing and minimalist design.
The pop-up design ensures that the error message stands out from the rest of the interface,
capturing users' attention and preventing them from overlooking the notification. The content of
the pop-up delivers a concise and specific error message, which clearly states that the login
failure is due to incorrect email or password. This helps users understand the issue and prompts
them to take the necessary corrective action. The aesthetic and minimalist design principles
applied to the pop-up contribute to an overall visually pleasing and user-friendly experience. By
keeping the design clean and uncluttered, the pop-up effectively fulfills its purpose without
overwhelming the user, maintaining clarity and usability.

Register Page

Function of the page

This is a register page for the user that use this app for the first time, they have to click
come to this page and create a new account
Elements on the page
 1. Back to home icon (arrow back icon)
2. Application logo
3. Register text
4. Email text field
5. Password text field
6. Confirm password text field
7. Next button

Rational of the design

The register page has been designed with several principles in mind to enhance user
experience and create a professional appearance. One such principle is user control and freedom,
which is demonstrated by the inclusion of a back to home icon (arrow back icon). This allows
users to navigate back to the previous screen if they change their mind or want to explore other
options, providing them with a sense of control and freedom within the app.
To prevent errors and ensure a smooth registration process, the page incorporates separate
text fields for email, password, and password confirmation. This design choice reduces the
chances of user error or confusion when entering their information. The password confirmation
field is particularly helpful in preventing potential login issues due to mistyped passwords,
offering an extra layer of error prevention.
The aesthetic and minimalist design of the page contributes to its professional
appearance. The application logo serves as a visual representation of the app and adds brand
recognition. The register text provides a clear and concise heading, informing users about the
purpose of the page without overwhelming them with excessive information. By keeping the
design minimalistic and free from unnecessary clutter, users can focus on the essential elements
needed to create their account.

More detail Page

Function of the page

Users can add more information about themselves on this page. To calculate data like
BMR for an app feature, we utilize their information

Elements on the page

1. Back to home icon (arrow back icon)

2. Let us know more about you text
3. Age text field
4. Height text field
5. Weight text field
6. Finish button

Rational of the design

 The design decisions made for the More Info page were made with user control and
usability in mind. The ack button ensures that the system status is visible and that users can
quickly return to the previous page if necessary. This supports the "Visibility of System Status"
heuristic and aids users in staying oriented within the program. In addition, using terms like
"Age," "Height," and "Weight" in the Text Fields fosters a match between the system and the
outside world and makes it easier for users to understand the necessary information. This
adherence to the "Match between System and the Real World" heuristic improves the page's
usability.

Forgot Password Page

Function of the page

This page is for user that forgot their password and want to reset it. User will fill in their
email and click next then the reset password reset mail will be sent to user’s email.

Elements on the page

 This page has a back button that will let user navigate to the login page, application icon,
page title, email text field and next button. There will also be a snack bar in something has gone
wrong and a box that will let user know that the email has been sent.

Rational of the design

We have a button that will let user navigate back to login back making the user have
control and freedom. This page design is based on other real world app, some elements are in
similar place like other real world app. We use the aesthetic and minimalistic design and have
only the crucial element on this page. This page also has error prevention and help users
recognize, diagnose and recover from error that will alert if user have done something wrong
in this page.

Home Page
Function of the page

Users use this page for search, view, filters, and random their foods. For example, if
users chose location to be female dorm and cuisine is curry, it will show all the food that are
curry, and users can click on that food to show more detail about the food, location, and calories.

Elements on the page

1. Hamburger menu
2. Search bar
3. User profile
4. Filter button
a. Location
b. Cuisine
5. Random food
6. Menu
a. List of foods
 7. Bottoms navigate.
a. Home page
b. History page
c. Favorite page

Rational of the design

We created the page in this way so that users would first see the hamburger menu, search
bar, and profile icon first then user will see Filters section before seeing the food menu. First, the
top bar with the hamburger menu, the search bar, and the profile icon. We chose the top position
because, according to the Hierarchy way, which we designed that what the most importance
will be at the top and so on, which are Search bar, location, cuisine, menu, and bottom
navigation. Second, we have the filter part. The reason for this is that we are using the Economy
of Motion, so by putting these two filters together, it will be easier for users to click on it, such
as when users click on the location part, then they can click on the cuisine part because we have
filters close together. Also, we use Visibility system status, which changes the color of the
button when users click on it to let users know that they are currently using this filter, and we use
Error prevention, which gives fixed locations and cuisines because allowing users to search for
it may result in incorrect typos. Third, we use Unity and Variety to separate each food by block,
and the block color is white to contrast with the background color, and we separate each part
such as Location, Cuisine, and Menu by adding text above each part. In the menu part, we use
Aesthetic and Minimalist Design to display necessary information such as food image, food
name, calories. Users who are interested in discovering more can click on the food to view more
details. When there is no food in the locations or cuisine, we use Recognize, diagnose, and
Recover from Errors and it will show the image that will tell user there is no food in this
location or cuisine. We use Visibility of System status at the bottom navigation to show users
where they are currently to help them understand where to go next.

 Random detail when clicked.

 Functions when clicked the Random button, there is a pop up will show a dish from all cuisine
and location. Also, users can click the Detail button to see location, name of restaurant and
calories. Furthermore, if user like the dish from random menu, there is a heart icon which can
click to add the dish into favorite page.

- The elements on the page

1. Random Button
2. Close Button
3. Detail Button
4. Favorite Button

- The rationale of your design

The rationale for UI design is driven by the 10 usability heuristic principles, which prioritize a
user-centered approach. These principles, including visibility of system status, consistency and
standards, error prevention, and user control and freedom, guide the design process. By
adhering to these principles, the design aims to enhance usability, minimize user errors, and
promote a seamless and intuitive user experience.

By presenting the Random button which is the design make user to recognize easily and detail
button show after clicked the Random button that we put it in the middle of the random page.

Also, all the information on each menu we aim to let user to see it clearly.

 More detail when clicked.

 There is a menu on the main page that user can click to see more details of menu. For each
menu contain name of the menu, pictures, location, name of restaurant and calories, also heart
icon which user can click to it to add the menu into the favorite page that user can see the menu
again.

- The elements on the page

1. Lists of menus
2. Favorite Button
3. Arrow for back to main page

- The rationale of your design

The rationale behind UI design is informed by the 10 usability heuristic principles, which
prioritize a user-centered approach. These principles encompass system status visibility, intuitive
interactions, error prevention, efficiency, and flexibility of use. To make the user feel comfortable
when they start using the application that user will see the main point of the application, that is
lists of menus and detail for each menu is easy enough to recognize user.

 Hamburger Bar
 We created Hamburger bar for user that when clicked, it will show a slide bar from left which
contain logo of the application, profile button and log out button.

- The elements on the page

1. Hamburger Button.
2. Slide bar.
3. Logo
4. Profile Button.
5. Log out Button.

- The rationale of your design

The rationale for UI design is guided by the 10 usability heuristic principles. These principles
encompass system status visibility, consistent interactions, error prevention, flexibility, efficiency,
feedback, minimalistic design, user control, error recovery, and help/documentation. By
incorporating these principles, the design of Hamburger bar aims to optimize usability, enhance
user satisfaction, and ensure a seamless and intuitive interaction with the interface for user to
recognize quickly.
 Search bar

On the main page there is a search bar for users to search for menu, when user clicked to it, it
will show all the menu with calories of each menu. Here when user typed something “Pork” the
result shows all menu that have pork.

- The elements on the page

1. Search bar.
2. Arrow for back to main page

- The rationale of your design

The rationale of UI design is in the usability heuristic principles. These principles guide the
creation of a user-centered experience by emphasizing system status visibility, intuitive
interactions, error prevention, flexibility, and efficiency. The design rationale also focuses on
clear feedback, minimalistic aesthetics, user control, error recovery options, and helpful
documentation. By following these principles, the design of the search bar aims to optimize
usability, enhance user satisfaction, and deliver a seamless and intuitive UI. Furthermore, we
added the lists of the menus to make the application more functional.
Function of the page

This page is for user that forgot their password and want to reset it. User will fill in their
email and click next then the reset password reset mail will be sent to user’s email.

Elements on the page

This page has a back button that will let user navigate to the login page, application icon,
page title, email text field and next button. There will also be a snackbar in something has gone
wrong and a box that will let user know that the email has been sent.

Rational of the design

We have a button that will let user navigate back to login back making the user have
control and freedom. This page design is based on other real world app, some elements are in
similar place like other real world app. We use the aesthetic and minimalistic design and have
only the crucial element on this page. This page also has error prevention and help users
recognize, diagnose and recover from error that will alert if user have done something wrong
in this page.

History Page

Function of the page

The History page serves as a reference for users to revisit menus they have previously
explored. Its primary function is to provide users with a comprehensive list of menu items they
have accessed in the past, allowing them to easily recall and browse through their viewing
history.

Elements on the page

1. Hamburger menu
2. Profile icon
3. List of menu items
4. "History" text at the top mid
Rational of the design

The design of the History page aims to enhance usability and provide a seamless user
experience. The placement of the hamburger menu and profile icon in familiar locations ensures
easy access to additional options and profile information, following the principle of user control
and freedom. The inclusion of the "History" text between the hamburger menu and profile icon
serves as a clear visual cue to indicate the purpose of the page, promoting visibility of system
status.

By presenting a visually appealing list of menu items, the design enables users to quickly
recognize and select menus from their viewing history, aligning with the recognition rather than
recall heuristic. The clean and uncluttered layout adheres to an aesthetic and minimalist design
approach, reducing cognitive load and creating an intuitive interface.

The inclusion of the history icon in the bottom navigation follows the consistency and
standards heuristic, providing users with a familiar and expected location to access the History
page. This design choice ensures a seamless navigation experience and promotes efficiency in
browsing.

Overall, the design of the History page aims to provide users with a convenient and
intuitive way to revisit their previously viewed menus. By incorporating elements such as the
hamburger menu, "History" text, profile icon, list of menu items, and the "History" text with
history icon in the bottom navigation, the design ensures easy navigation, visibility of system
status, and an enhanced browsing experience.

User Page
Function of the page

The user page design provides various important services for users. Users can access and
change their personal information, such as their profile image, age, height, and weight. Users can
quickly upload or change their profile image, giving their account a personalized touch. A BMR
calculation tool is included in the design to estimate the number of calories required to maintain
your current weight. Users can observe the status of the upload and confirm their edits. The user
page design's goal is to give users with a simple interface via which they can manage their
information and edit their profile as they see fit within the app.

Elements on the page

1. Back button
2. user profile
3. Edit profile button
4. Switch for showing BMR value/ swapping the BMR value between men-women
5. User Information
a. User’s email
b. User’ age
c. User’s height
d. User’s weight
6. Confirm button

Rational of the design

The rationale behind our design is to create a user-friendly user page that serves as a
personalized hub for users to manage their profiles. The user page offers an intuitive interface,
allowing users to easily access and update their personal information.

The user's profile image is prominently displayed at the top of the page, following a
hierarchical design approach. This design choice aligns with the heuristic of Visibility of system
status by immediately presenting users with their visual representation within the app. Users can
upload or change their profile images by clicking the Edit icon. Upon clicking the icon, a dialog
box opens, allowing users to select a file from their device. A real-time preview of the chosen
image is displayed in a container, providing immediate feedback. Upon clicking the Upload
File"button, the image is seamlessly uploaded to Firebase Storage, accompanied by a progress
window with a circular progress bar. An upload completion window is shown following a
successful upload. This feature empowers users to personalize their profile, establish a visual
connection with their account, and aligns with the heuristic of User control and freedom.
 To help users estimate their basal metabolic rate (BMR), we have implemented a switch
that allows users to display BMR values for either men or women. This switch adheres to the
heuristic of Consistency and standards by providing a familiar interface element. Since our
program does not collect user gender information, this switch was included to give users the
option to view BMR values based on their preferred gender. By considering weight, height, and
age, the feature calculates the user's BMR, providing valuable information about their health and
promoting awareness of dietary needs. This design choice aligns with the heuristic of Flexibility
and efficiency of use.

The personal information section features clear and editable input fields, ensuring ease of
use and convenience for users. By providing editable fields for essential details such as email
address, age, height, and weight, users can easily update their information from within the user
page. This design choice aligns with the heuristic of Match between system and the real world by
utilizing familiar input methods. Enabling users to keep their details up to date empowers them
and encourages them to maintain accurate and relevant information, aligning with the heuristic of
Error prevention.

Users can finalize adjustments and update their personal information by clicking the
Confirm button located at the bottom of the page. This design choice ensures a straightforward
and intuitive way for users to save their changes, enhancing their sense of control and
satisfaction. By providing a clear and visible confirmation button, we address the heuristic of
Recognition rather than recall and make it easy for users to complete their actions.

In conclusion, the design rationale for the user page prioritizes user-friendliness and
usability by incorporating features such as profile image customization, BMR calculation switch,
editable input fields, and a clear confirmation process. These design choices align with several
usability heuristics, enhancing the user experience and promoting efficient profile management
within the app.