APPLYING USER-CENTERED DESIGN FOR MOBILE APPLICATIONS INTERFACE DESIGN

: The Healthy Food Supplier App, which introduces groundbreaking innovations to increase public access to and delivery of healthy food, has emerged as a new phenomenon in the food sector. This research intends to examine and describe how the use of healthy food suppliers contributes to improving public health by making healthy food accessible to obtain and deliver it quickly. The development of mobile applications with the aim of providing healthy food and ingredients for the community is the subject of this research. The aim of this app is to provide original responses to issues related to raising awareness of quality of life and the value of nutritious food in everyday life. The User Centered Design (UCD) method needs to be applied to categorize various user information needs and package them into a mobile application design model. The results of the application design showed that the interface design for the pioneer food and health food raw material application was successfully created using the implementation of the UCD method with a number of revisions that have been updated since the evaluation as one of the feature developments in the application. The food recording feature and personalized recommendations implemented in this mobile application provide users with awareness and guidance in adopting healthier eating patterns.

Kata Kunci: Design Interface; Mobile Applications; Requirements Engineering; User-Centered Design

INTRODUCTION
Being mindful of the food ingested is essential for achieving the goal of a healthy life.In practice, however, finding healthy food and preparing nourishing food might be difficult due to the daily grind.The creation of mobile technology applications has the ability to give creative solutions that will make it simple and practical for the general people to get food and healthy food, which will help to address this difficulty.
One strategy to achieve a healthy body is to monitor and pay attention to it, starting with the optimum body weight, ideal height, and daily calorie requirements [1].The establishment of various forms of malnutrition is influenced by improper food consumption patterns.This condition is brought on by an imbalance in nutritional intake, including both deficiencies and excesses, which can raise the chance of developing numerous illnesses as well as the danger of passing away [2].
Many Their health may be affected by their ignorance of proper food.In another study [5] made an iOS meal planning application with integration of daily calorie data and machine learningbased meal recommendations features.The Challenge Based Learning (CBL) framework and the Swift programming language are used to create applications.The study's [6]  The high number of installs in the study [9] demonstrates that there is a considerable desire and possibility for nutritional monitoring and suggestions via mobile applications.All apps that gather food intake use the same nutritional evaluation methodologies (i.e., food diary recordings) and data input technology (i.e., text search and barcode scanning).Nutrichef developed the usability of BOT algorithms close to Maximum Marginal Relevance (MMR) in order to summarize the chat history between the consumer and nutritionist.Emerging technologies such as image recognition, natural language processing, and artificial intelligence went undetected.Neither app has a decision engine capable of offering individualized dietary guidance.

METHOD
The procedure used in this study as problem-solving steps is as follows:

Literature Study
In this phase, an analysis of various references is conducted to serve as the foundation for this research.The literature review focuses on the following topics: Nutrichef application; User-Centered Design; Usability Testing; User Interface.

User Centered Design Concept Analysis
This phase of analysis seeks to identify the user, process, data, and technology employed.The following is a detailed explanation of each stage.

User Context Analysis
This step completes the user identification process by focusing on what circumstances may cause users to use the application [10].To do a context analysis, users want some user-related data, such as the user's characteristics and tasks when visiting the program.The end result of this user context analysis is a description of the user's attributes and tasks.The characteristics of users when using the application are presented in Table 1 The user in charge of managing the data on the platform.

User Requirement Analysis
This phase involves gathering, analyzing, and prioritizing user needs and expectations to define the functional and non-functional requirements of the application.The features required by users in the application and user requirements are presented in Table 2 and Table 3.

Requirement Categorization
During this phase, the collected user needs and expectations are organized and classified into different categories to facilitate better management and implementation of the requirements.
Here are several key steps in requirement categorization for NutriChef before launch which can be seen in Table 4.

Conceptual Modeling
The application functionality flow is as follows: Users open the Nutrichef app on their mobile device; Users can register or log in to their existing Nutrichef account; After logging in, the user selects their preferred food category, such as healthy, vegetarian, or gluten-free options; The user can browse through menus and available restaurants on Nutrichef, complete with nutritional information and user reviews; Once the menu is selected, the user adds the chosen food items to their shopping cart; The user proceeds to make the payment and selects their preferred delivery method; After the transaction is completed, the user receives an order confirmation and a tracking number for their order; Nutrichef's courier picks up the order from the restaurant and delivers it to the user's address; The user receives their order and can provide feedback on their Nutrichef experience.

Design Solution and Prototyping
The display design development process is carried out at this point as a solution for the application being produced.We use software prototypes or mock-ups in solution design utilizing a requirements engineering methodology, this is our effort in providing design solutions in developing NutriChef software.

Usability Testing
Usability testing is a method of evaluating an application in relation to user demands.The application is said to be usable if the functions in it can be carried out successfully, efficiently, and satisfactorily [11].It is regarded to be effective if the user achieves the application's aim.The smooth operation of users to attain these aims is referred to as efficiency that can be shown on Image 2. Concerning the attitude of user acceptance of application satisfaction.
Following the development of the NutriChef prototype, usability testing was conducted with a group of expert users.The usability testing aimed to gather feedback and validate design choices, ensuring that the application meets high standards of user experience and functionality.

Implementation
Implementing the UCD approach to pioneering health food and ingredient applications results in the following interface.

Splash Screen Page Design
The splash screen is the initial thing seen when launching an application or visiting a website/application.This view is typically displayed for a few seconds before being transferred to the application's or site's main page or home page.A splash screen's objective is to provide users with an interesting and professional first experience while an app or site is loading or preparing information as shown in image 1.

Login Page Design
The login page design for the Nutrichef mobile application was meticulously crafted following a usercentered approach, ensuring a seamless and secure entry point for users to access their personalized accounts and unlock a world of culinary experiences.Both users as consumers and partners were made as shown in image 2.

Image 2. Login Page User Interface
The login page design for the Nutrichef mobile application was a result of in-depth research and iterative design processes, focusing on delivering an exceptional user experience for both consumers and partners.By applying a user-centered approach, the development team prioritized the needs and preferences of the target users, aiming to create an intuitive and engaging login experience.ISSN 2550-0201 (Online) DOI: https://doi.org/10.33330/jurteksi.v10i1.2619Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi49 was designed with simplicity and convenience in mind.A clear and concise layout allowed users to quickly find the login fields and access their accounts.The team implemented various usability testing sessions to optimize the placement of the login form and to ensure that it was easily discoverable for users of all levels of tech-savviness.
For partners, who could be suppliers, drivers, nutritionists, or restaurant owners, the login page was tailored to accommodate their specific requirements.The team conducted surveys with potential partners to gather insights into their expectations and pain points when accessing the Nutrichef platform.As a result, the login page for partners was designed to offer a seamless onboarding process, guiding them through necessary account setup steps while providing clear instructions and resources.Image 3, which depicts the login page design, showcased a visually appealing and cohesive interface.The color scheme and branding elements were thoughtfully chosen to reflect the Nutrichef's identity and values.A combination of enticing food imagery and enticing taglines conveyed the essence of the culinary experiences that awaited users once they logged in.
Throughout the design process, continuous user feedback was gathered and incorporated into subsequent iterations.The A/B usability testing were conducted to validate design decisions and optimize the login page for maximum usability and user satisfaction.

Main Page Design
The main page is the first page that is displayed when a user opens a NutriChef application.This is the initial screen that displays information and serves as the main gateway for users to access content, features or services provided by the NutriChef application.

Evaluation
At this stage, it will check the functionality needed for the purposes of system improvement (formative) based on input from end-users.In addition, at this stage it will provide checks and assessments of whether it has achieved the user's goals.From the results of the evaluation of the system, several things will be observed, described in Able to provide services for customers to easily browse products, place orders, and make online transactions.

√
Able to provide and manage the availability of consulting services through the application.
√ Delivery process can be accessed in real-time through a delivery tracking system.

√
The application is able to allow partners to access the features according to their access rights.

CONCLUSION
Based on the results of the analysis and discussion, it can be concluded that User Centered Design has been successfully applied to the mobile application that will be built.The design of the mobile application interface for the pioneer of healthy food is an application designed using a mobile display to help users manage a healthy lifestyle by eating healthy foods and cooking with healthy and measurable food ingredients.There is a consultation feature related to experts that will help users get accurate information regarding their health.
A software product's usability is a crucial feature.It refers to the level of efficacy, efficiency, and user pleasure that a particular user can obtain when utilizing a software product in a particular setting.

Image 3 .
Sign In and Sign Up User Page Interface For consumers, the login page Vol.X No 1, Desember 2023, hlm.43 -52

Image 4 .
The User Interface of Main PageProfile User Page DesignUser profile pages play an important role in providing a personalized experience and providing users with control over their personal information on NutriChef.Good design helps NutriChef users feel comfortable and confident in managing their accounts and personal data, and increases overall user engagement and satisfaction.Image 5.The User Interface of Profile UserHealth Consultation Page ViewThe Health Consultation page plays an important role in providing easily accessible and convenient health services for NutriChef users.This page aims to provide easy access for NutriChef users to consult medical personnel or health professionals for advice, diagnosis or treatment regarding their health problems.Image 6.The User Interface of Health ConsultationCatalog Page DesignCatalog Page Design is a layout or page layout that is used to display a detailed list of products or services in catalog form in applications on NutriChef.The catalog page on NutriChef is designed to provide a good user experience by presenting product information in a systematic, easy to read and attractive way.Image 7. The User Interface of Catalog Transaction Page Design Payment Page is a layout or page layout used to facilitate the payment process in the NutriChef application.This page aims to enable users to complete purchase transactions by entering required payment information, such as credit card details, shipping address, and other payment methods in the NutriChef application.Image 8. The User Interface of Transaction Delivery Page Design Delivery page is a page layout that is used to present information related to product delivery or delivery in the NutriChef application.This page aims to provide details and choices regarding delivery options, estimated delivery times, shipping costs, and delivery status for users who have made purchases on the NutriChef application.Image 9. The User Interface of Delivery

Table 2 .
Feature Requirements

Table 3 .
User Requirements

Table 5 .
Evaluation from End-User