midterm project report course analyze and design management information systems 406 proposing an integrated app model for the food court system

User flow of “Check gift card information” .... UX flows of “Check gift card information” .... Mockup of “List of gift card” When the user taps the “Buy Gift Card” button on “Home”, the

UNIVERSITY OF ECONOMIC AND LAW

MIDTERM PROJECT REPORT

Course: Analyze and design management information systems (406)

PROPOSING AN INTEGRATED APP MODEL FOR THE FOOD COURT SYSTEM

Instructor: Lecturer Vu Thuy Hang

Lecturer Tran Thi Anh Lecturer Le Thi Kim Hien

Course ID: 231IS4201

Group: 1

Mai Thị Thương

ACKNOWLEDGEMENTS

With the completion of this report, our team would like to express our deep gratitude to all who support us Learning is always a process of acquiring knowledge and skills The implementation of this report has given us a significant impetus to become more confident in future scientific research papers, and at the same time helped us to make considerable progress in our graduation thesis journey First, we would like to express our sincere thanks to the Rector of the University of Economics and Law for creating favorable conditions for us to approach the subject “Analyze and

modern library system, a variety of books and documents are convenient for searching and researching information

We would like to express our deepest gratitude to the subject teacher – Master Tran Thi Anh - Vu Thuy Hang - Le Thi Kim Hien for her resolute and detailed teaching

so that we have enough knowledge and apply it to this project

Furthermore, we would also like to thank our friends Hoa Ky, Mai Trinh, Kien Duy, Ai Nhi, Van Anh, Cham Anh, Thi Thuong The seven of us worked together, read many research papers, processed the data, and finished this report as soon as possible

Team of students doing research

Ho Chi Minh City, December 10th, 2023

COMMITMENT

Our team hereby declares that the research topic “PROPOSING AN INTEGRATED APP MODEL FOR THE FOOD COURT SYSTEM” is our research work under the scientific guidance of Master Vu Thuy Hang-Tran Thi Anh -Le Thi Kim Hien

The data and research results in the thesis are collected, handled honestly, and objectively, and have clear origins The content of the research has references to domestic and foreign studies and the references are fully listed in the list of references With limited research time, shortcomings are inevitable Looking forward to your suggestions for a more complete study

Team of students doing research

Ho Chi Minh City, December 10th, 2023

LIST OF ABBREVIATIONS

APIs Application Programming Interfaces

BPMN Business Process Model and Notation

LIST OF FIGURES

Figure 1.1 Context Diagram 1

Figure 1.2 DFD level 0 of “Customer” 2

Figure 1.3 DFD level 0 of “Store Management” 3

Figure 1.4 DFD level 0 of “Revenue allocation” 3

Figure 2.1 User flows of “Login/ Sign up” 4

Figure 2.2 Mock up of “Welcome to Lorem Food Court” 5

Figure 2.3 Mock up of “Sign up” 6

Figure 2.4 Mock up of “Registration information form” 7

Figure 2.5 Mock up of “Verification code to sign up” 8

Figure 2.6 Mock up of “Registration successful and login” 9

Figure 2.7 Mock up of “Login form” 10

Figure 2.8 Mock up of “Enter verification code to login” 11

Figure 2.9 Mock up of “Screen displaying login successful” 12

Figure 2.10 UX flows of “Login/Sign up” 13

Figure 2.11 User flows of “Link payment method” 14

Figure 2.12 Mock up of “My account” 14

Figure 2.13 Mock up of “Payment method” 15

Figure 2.14 Mock up of “E-wallet payment method” 16

Figure 2.15 Mock up of “Momo link payment” 17

Figure 2.16 Mock up of “OTP Momo link payment” 18

Figure 2.17 Mock up of “Confirm Momo link payment successful” 19

Figure 2.18 UX flows of “Link payment method” 20

Figure 2.19 User flows of “Buy Gift Card” 20

Figure 2.20 Mockup of “Home Page” 21

Figure 2.21 Mockup of “List of gift card” 22

Figure 2.22 Mockup of “Add gift card into the cart” 23

Mockup of “Cart of gift card” 24

Figure 2.26 Mockup of “Payment” 27

Figure 2.27 Mockup of “Buy gift card successful” 28

Figure 2.28 UX flows of “Buy gift card” 29

Figure 2.29 User flow of “Check gift card information” 29

Figure 2.30 Mockup of “Home Page” 30

Figure 2.31 Mockup of “Check information of gift card function” 31

Figure 2.32 Mockup of “Gift card information (1)” 32

Figure 2.33 Mockup of “Gift card information (2)” 33

Figure 2.34 UX flows of “Check gift card information” 34

Figure 2.35 Order User flow 35

Figure 2.36 Mock up of “Home page” 36

Figure 2.37 Mock up of “Scan QR Table” 37

Figure 2.38 Mock up of “Categories dishes” 38

Figure 2.39 Mock up of “Dishes options/details” 39

Figure 2.40 Mock up of “My order” 40

Figure 2.41 Mock up of “Choose gift card” 41

Figure 2.42 Mock up of “Order successful” 42

Figure 2.43 UX flows of “Order” 43

Figure 2.44 User flows of “Withdraw money from gift card” 44

Figure 2.45 Mock up of “Home page” 45

Figure 2.46 Mock up of “Choose gift card to withdraw” 46

Figure 2.47 Mock up of “Choose destination to withdraw” 47

Figure 2.48 Mock up of “Enter OTP” 48

Figure 2.49 Mock up of “Withdraw Successfully” 49

Figure 2.50 UX flows of “Withdraw money from gift card” 50

Figure 3.1 User flows of “Product management” 58

Figure 3.2 Mockup of “Product management screen” 59

Figure 3.3 Mockup of “Edit product screen” 60

Figure 3.4 Mockup of “Request edit screen” 61

Figure 3.5 Mockup of “Enter new product information” 63

Figure 3.6 User flows of “On-counter order” 64

Figure 3.7 Mock up of “Enter customer phone number” 65

Figure 3.8 Mock up of “OTP authentication” 66

Figure 3.9 Mock up of “Store’s homepage” 67

Figure 3.10 Mock up of “Customer cart of on-counter order method” 68

Figure 3.11 UX flows of “On-counter order” 69

Figure 4.1 User flows of store management 69

Figure 4.2 Mockup of “Stores list and their overall information” 70

Figure 4.3 Mockup of “Detailed information for the store” 71

Figure 4.4.Mockup of “All store’s products” 72

Figure 4.5 Mockup of “Store's request to edit products” 73

Figure 4.6 Mockup of “A side-by-side comparison of two versions of a food item”75 Figure 4.7 UX flows of “Store management - View store information” 75

Figure 4.8 UX flows of “Store management - Deleted store” 76

Figure 4.9 UX flows of “Store management - Add new store” 77

Figure 4.10 UX flows of “Store management - Handles requests from the store” 79

Figure 4.11 User flows of Revenue Allocation 79

Figure 4.12 Screen displaying overview of stores revenue 79

Figure 4.13 Screen displaying general cost configuration pop-up 80

Figure 4.14 Screen displaying bank account priority pop-up 81

Figure 4.15 Screen displaying more actions box 82

Figure 4.16 Screen displaying cost configuration for stores pop-up 83

Figure 4.17 Revenue Allocation Configure UX flows 84

TABLE OF CONTENTS

ACKNOWLEDGEMENTS i

COMMITMENT ii

LIST OF ABBREVIATIONS iii

LIST OF FIGURES iv

TABLE OF CONTENTS vii

CHAPTER 1 DATA FLOW DIAGRAMS 1

CHAPTER 2 LOREM FOOD COURT FOR CUSTOMER 4

2.1 Function 1 Log in/Sign up 4

2.1.1 Mockup 4

2.1.1.1 Identify user flows 4

2.1.1.2 Main screen 5

2.1.1.3 UX flows 13

2.2 Function 2 Link payment method 14

2.2.1 Mockup 14

2.2.1.1 Identify user flows 14

2.2.1.2 Main screen 14

2.2.1.3 UX flows 20

2.3 Function 3 Buy gift card 20

2.3.1 Mockup 20

2.3.1.1 Identify user flows 20

2.3.1.2 Main screen 21

2.3.1.3 UX flows 29

2.4 Function 4 Check gift card information 29

2.4.1 Mockup 29

2.4.1.1 Identify user flows 29

2.4.1.2 Main screen 30

2.4.1.3 UX flows 34

2.5 Function 5: Order 35

2.5.1 Mockup 35

2.5.1.1 Identify user flows 35

2.5.1.2 Main screen 36

2.5.1.3 UX flows 43

2.6 Function 6 Withdraw money from gift card 43

2.6.1 Mockup 44

2.6.1.1 Identify user flows 44

2.6.1.2 Main screen 45

2.6.1.3 UX flows 50

CHAPTER 3 LOREM FOOD COURT FOR STORES 50

3.1.1 Mockup 51

3.1.1.1 Identify user flows 51

3.1.1.2 Main screen 52

3.1.1.3 UX flows 57

3.2 Function 2 Product management 58

3.2.1 Mockup 58

3.2.1.1 Identify user flows 58

3.2.1.2 Main screen 59

3.2.1.3 UX flows 64

3.3.1.1 Identify user flows 64

3.3.1.2 Main screen 65

3.3.1.3 UX flows 69

CHAPTER 4 LOREM FOOD COURT FOR ADMIN 69

4.1 Function 1 Stores management 69

4.1.1 Mockup 69

4.1.1.1 Identify user flows 69

4.1.1.2 Main screen 70

4.1.1.3 UX flows 75

4.2 Function 2 Revenue Allocation 79

4.2.1 Mockup 79

4.2.1.1 Identify user flows 79

4.2.1.2 Main screen 79

4.2.1.3 UX flows 84

DATA FLOW DIAGRAMS

Figure 0.1 Context Diagram

Link: https://app.diagrams.net/#G1RXoZcbcc4bmpSTwxHr1sPKGnI5YtciWw

Figure 0.2 DFD level 0 of “Customer”

Link:

https://app.diagrams.net/#G1RXoZcbcc4bmpSTwxHr1sPKGnI5YtciWw#%7B%22pageId%22%3A%22pVRKZHtdM5L32rE0BimH%22%7D

Figure 0.3 DFD level 0 of “Food Store”

Link:https://app.diagrams.net/#G1RXoZcbcc4bmpSTwxHr1sPKGnI5YtciWw#%7B

%22pageId%22%3A%22oCOaHuOnNTQanx-5At-E%22%7D

CHAPTER 1 LOREM FOOD COURT FOR CUSTOMER

1.1 Function 1 Log in/Sign up

1.1.1 Mockup

1.1.1.2 Main screen

This screen is the starting point for users accessing the food ordering app for the first time when they first download the app

Figure 1.3 Mock up of “Sign up”

When the customer clicks the “Next” button on the previous page, the app will redirect the user to this page so the user can log in to the application

Figure 1.4 Mock up of “Registration information form”

At this screen, customers need to enter their full name, phone number and click the “Create Account” button to proceed with account registration

Figure 1.5 Mock up of “Verification code to sign up”

After submitting the registration request, the system will send a six-digit OTP code to the customer's phone number At this screen, the customer will enter the code

to proceed with authentication

Figure 1.6 Mock up of “Registration successful and login”

If the OTP code on the previous screen is correct, that is, it matches what the system has sent to the customer, the screen will be redirected to this page, to notify the customer that they have successfully registered, and you can proceed to log in now

Figure 1.7 Mock up of “Login form”

On this page, customers enter their phone number and click the “Login” button

to log in to the system

Figure 1.8 Mock up of “Enter verification code to login”

After submitting the login request, the system will send a six-digit OTP code to the customer's phone number At this screen, the customer will enter the code to proceed with authentication

Figure 1.9 Mock up of “Screen displaying login successful”

If the OTP code in the previous screen is correct, that is, it matches the code that the system sends to the customer, the screen will be redirected to this page To notify customers that they have successfully logged in, you can use the app to buy gift cards, order food,

1.1.1.3 UX flows

1.2 Function 2 Link payment method

1.2.1 Mockup

My Account displays personal information (gift card information, payment methods, favorites, order history), support & information, account management, etc Customers can select any item and proceed to view

The payment page on the mobile app allows users to choose a payment

method (credit card, e-wallet), and complete the transaction easily and quickly

Figure 1.14 Mock up of “E-wallet payment method”

Payment by e-wallet method will include 2 small methods: payment by momo

or zalopay

Figure 1.15 Mock up of “Momo link payment”

If the customer chooses the payment method by momo, just press the "Open" button If not, click "Cancel" to choose another payment link method

Figure 1.16 Mock up of “OTP Momo link payment”

The confirmation code will consist of 6 numbers and will be sent via phone number

Figure 1.17 Mock up of “Confirm Momo link payment successful”

After confirming the OTP code via phone number, the system will send a notification of successful connection

1.2.1.3 UX flows

1.3 Function 3 Buy gift card

1.3.1 Mockup

The home page serves as the starting point for users upon accessing the Lorem Food Court

Figure 1.21 Mockup of “List of gift card”

When the user taps the “Buy Gift Card” button on “Home”, the app will display

a list of gift cards that the food court has It will have many denominations for users to choose from such as $20, $50,

Figure 1.22 Mockup of “Add gift card into the cart”

When the user clicks the “Add to cart” button on each card, the application will let the user enter the number of cards they want to buy and add those cards to the cart

Figure 1.23 Mockup of “Cart of gift card”

On this screen, customers can select the cards they want to buy among the cards previously added to the cart and click to pay

Figure 1.24 Mockup of “Delete gift card from the cart”

At this screen, customers can select the card they want to delete among the cards previously added to the cart and click delete

Figure 1.25 Mockup of “Payment method selection”

This Screen displays the payment method selection screen Here, customers can choose the appropriate payment method

Figure 1.26 Mockup of “Payment”

This screen displays when the customer makes payment

Figure 1.27 Mockup of “Buy gift card successful”

When the customer makes a successful payment and is recognized by the system, the application displays a successful payment notification

1.3.1.3 UX flows

1.4 Function 4 Check gift card information

1.4.1 Mockup

1.4.1.2 Main screen

The home page serves as the starting point for users upon accessing the Lorem Food Court

Figure 1.31 Mockup of “Check information of gift card function”

Click “Check"check grid card information”,", the screen will display the types

of grid cards

Figure 1.32 Mockup of “Gift card information (1)”

Users can easily check After pressing check, the screen displays a table of detailed information about the card, including card number, operating status, remaining balance and expiration date This information is displayed clearly and easily, helping users quickly grasp important information And the screen is showing that the gift card is still active

Figure 1.33 Mockup of “Gift card information (2)”

Users can easily check After pressing check, the screen displays a table of detailed information about the card, including card number, operating status, remaining balance and expiration date And the screen is showing that the gift card is inactive

1.4.1.3 UX flows