JURNAL MULTI MEDIA DAN IT
VOL.
08 NO.
PP.
P-ISSN : 2548-9534 | E-ISSN : 2548-9550
Website Design for Kelirskin Product Reseller Registration using the Prototype Method Raisa Mutia Thahira Reza Pratamab Amata Famic Irma Rosita Gloria Barusd Gema Parasti Mindarae a,b,c,d Vocational School.
Institut Pertanian Bogor
INFORMASI ARTIKEL
Sejarah Artikel:
Diterima Redaksi: 18 Mei 2024
Revisi Akhir: 30 Juni 2024
Diterbitkan Online: Juni 2024
KATA KUNCI
Design.
Website.
Prototype Method
KORESPONDENSI
Raisa Mutia Thahir Software Engineering Technology Study Program.
Vocational School.
Bogor Agricultural University.
Institut Pertanian Bogor Jl.
Kumbang No.
RT.
02/RW.
Babakan.
Bogor Tengah District.
Bogor City.
West Java 16128 Email: raisamutia@apps.
ABSTRACT
Online registration of resellers through a website has become a crucial strategy for many companies, including Kelirskin, to enhance business This research proposes the development of a dedicated website for registering as a Kelirskin product reseller using a prototype method.
With this method, an analysis of system requirements, modeling, and prototype development is conducted, incorporating various essential features such as login, registration, product management, shopping cart, and reseller management.
The result is a prototype with a user-friendly interface and functionality tailored to the needs.
In conclusion, digital reseller registration via a website using the prototype method has the potential to enhance business efficiency and competitiveness.
Suggestions for further research include conducting trials with representative users and paying attention to user training and regular system maintenance to ensure smooth DOI: https://doi.
org/10.
46961/jommit.
INTRODUCTION
System design plays a key role in the context of information technology development .
Design is the planning of system development involving various components to produce a system that matches the results of the system analysis stage.
This stage is an integral part of the system development planning process involving a comprehensive analysis of the required components to ensure the resulting system meets the needs.
For example, a website is an information system that stores digital information and can be accessed widely through the internet .
System design in website development plays an important role to ensure that the website pages are not only well-made but also can be accessed smoothly by users.
A reseller is an individual or entity that resells products or services from a supplier without having to own the goods themselves .
Resellers usually buy products first from suppliers at a lower price and then resell them at a higher price .
Especially in online sales, the reseller system is increasingly in demand by entrepreneurs in Indonesia, as it allows market expansion without requiring large capital .
Kelirskin, for example, adopts a reseller business model by providing attractive discounts for resellers to attract interest and expand their market Kelirskin combines system design in website development with the reseller business model to enhance its competitiveness.
The reseller program not only expands the market, but also increases consumer engagement and builds mutually beneficial However, implementation requires an efficient reseller registration system.
Kelirskin currently uses a manual method through WhatsApp, which is less effective and Therefore, a solution is needed for an online-based reseller registration information system design to improve One approach used is the prototype method.
The Prototype Method is a process that helps in software development by creating an initial model to demonstrate concepts and identify potential problems and solutions .
Prototypes serve to illustrate ideas, test designs, identify as many problems https://doi.
org/10.
46961/jommit.
JURNAL MULTI MEDIA DAN IT - VOL.
08 NO.
as possible, find solutions to the problems found, and enable users to understand the stages of the system being built to operate efficiently .
The Prototype Method has several stages, namely needs analysis, quick design, prototype building, user evaluation, prototype improvement, and implementation and maintenance .
The advantage of using the Prototype Method is good communication between developers and customers, and developers can work better in determining customer needs .
of program application user interfaces and examples of reports to be generated, so that users of the system will have a picture of the system to be used later .
The Prototype Method can be applied to the development of small and large systems with the hope that the development process can run well, be organized and can be completed on time.
The full involvement of users when the prototype is formed will benefit all parties involved, for leaders, users themselves and system This research aims to improve the reseller registration process that still uses a manual method through the WhatsApp application, which is inefficient in data input and the registration renewal process.
In addition, this research also aims to combine system design in website development with the reseller business model, so as to help Kelirskin in increasing competitiveness and business growth through an attractive reseller program.
LITERATURE REVIEW
Design Design is the initial stage in the development of engineering products or systems.
This process involves the application of various techniques and principles with the aim of defining in detail the equipment, processes, or specific systems to enable physical realization .
Design is a process that involves the creation and design of a new system.
From the experts' perspective, it can be concluded that design is the initial step in the planning process to create and design a new system .
Website Image 1.
Prototype Method Stages According to Arief .
, a Website is an application that contains various multimedia documents such as text, images, sound, animation, and video, which are accessed through the HTTP (Hypertext Transfer Protoco.
protocol using software called a browser .
A website is an internet resource that relies on a hypertext approach, allowing short text as a reference to open other documents .
Websites have several roles, including as a promotional tool, marketing tool, information source, educational medium, and communication channel .
The following is an explanation of each stage in the prototype Needs Analysis Starting with needs analysis, the prototype method defines the system requirements in detail.
During this process, clients and the development team will gather to discuss the details of the desired Quick Design Based on the discussions in the first step, the second step involves creating a simple design that will provide a brief overview of the system to be created.
Build Prototype After the quick design is approved, the actual prototype is built to help the programming team create the program or application.
User Evaluation Clients view the system prototype that has been created for evaluation at this stage.
After that, clients will provide comments and suggestions about what has been made.
Refining Prototype If the client does not have notes indicating improvements to the prototype made, the team cannot proceed to stage six if the client has notes indicating improvements to the system.
If so, phases 45 will be repeated until the client agrees with the system to be Implement and Maintain Product Prototype Method The Prototype Method is a method that requires software developers to create a mock-up in the form of an application model, very suitable in conditions where users cannot clearly present information about the requirements that match their The Prototype Method for system development is one of the many methods used .
The Prototype Method often has customers defining a number of software goals in general, but they cannot identify the detailed requirements specifications for the functions and features that the software to be developed will have .
The Prototype Method is a good way to get feedback on the proposed system and explain how the system is available to meet user information needs .
In information system development, prototypes are often realized in the form https://doi.
org/10.
46961/jommit.
JURNAL MULTIMEDIA DAN IT - VOL.
08 NO.
In this final stage, the product will soon be realized by the programming team based on the final prototype.
Then, the system will be tested and handed over to the client.
The next stage is maintenance, which aims to ensure the system runs smoothly without any problems .
Other benefits of using the prototype method are:
Realize the actual system in a system replica that will run, accommodating user input for system perfection.
Users will be more ready to accept any system changes that develop according to the running prototype until the final development results that will run later.
Prototypes can be added or reduced according to the development process.
Progress step by step can be followed directly by the user.
Saving resources and time in producing better and more useful products for users .
DESIGN CONCEPT
The various stages undertaken by the researchers in this study appear to align with the diagram presented in Figure 2 below:
research aligns with the appropriate scholarly knowledge to address the problems discussed in the study.
System Analysis In this system analysis stage, the researchers aim to analyze the existing problems and strive to develop a new system design as a problem-solving solution in this study.
System Modeling Design In this stage, the researchers design a system that aligns with the results obtained in the previous system analysis stage.
The form of the results of this stage will be designed into a use case diagram System Prototype Design In this stage, the researchers will design a visual layout of the desired system as requested by the system users.
RESULTS AND DISCUSSION
System Modeling In the system modeling stage, the researchers will define the system user requirements in the form of a system model.
The system modeling to be used in this study is the use case diagram The use case diagram illustrates how actors will interact with the various different parts of the system.
Below is the Use Case Diagram created to depict the new system.
The Use Case Diagram features two actors, namely the reseller and the admin, with the following functionalities:
Actor Identification Actor Description Reseller Resellers must register first in order to become resellers of Kelirskin products with a minimum initial purchase of five hundred thousand Indonesian Rupiah.
After registration.
Resellers can log in to view orders and renew their membership as Kelirskin Admin Admins must log in first and can manage reseller and product data from Kelirskin.
They can also view the distribution locations of Kelirskin resellers and can approve or reject reseller applications.
Image 2.
Research Stages Below are the definitions of each stage undertaken by the researchers in this study:
Identification of Problem The Identification of Problem is the initial step taken by the researchers in conducting this study.
In this stage of problem identification, the researchers aim to understand the existing issues and weaknesses to be investigated, enabling the subsequent stages of analysis and system development to generate solutions to the identified problems.
Study of Literature Entering the next stage, the literature review phase, the researchers study various theories related to the method to be used, as well as references obtained from various sources such as books, journals, and the internet.
This serves as a foundation for the scholarly knowledge that provides a deep understanding for the researchers in conducting this study, ensuring that the Table 1.
Actor Identification Use Case Identification Use Case Description Login Admin and resellers can log in by entering their email and password.
Register Resellers must register in order to log in, by providing their email, password, and other personal View Product Resellers can view the list of JURNAL MULTI MEDIA DAN IT - VOL.
08 NO.
List products offered by Kelirskin for Organize Cart List Resellers can organize their cart list by viewing, adding, and deleting items.
View Product in Cart Resellers can view the products added to their shopping cart.
Add Product to Cart Resellers can add products to their shopping cart.
Delete Product Cart Resellers can remove unwanted products from their shopping cart.
Do Purchase Resellers can purchase the items in their shopping cart.
Do Checkout Resellers can proceed to payment to complete the purchase.
View Ordered Product Resellers can view the products they have purchased or ordered.
Accept Reseller Submission Admins can Reject Reseller Submission Admins can View Reseller Submission Admins can View List Order Admins can view the list of product orders from resellers.
Edit List Order Admins can edit the list of product orders from resellers.
View Reseller Data Admins can view reseller data.
Edit Reseller Data Admins can edit reseller data.
Delete Reseller Data Admins can delete reseller data.
View Product Data Admins can product data.
Add Product Data Admins can add Kelirskin product Edit Product Data Admins can edit Kelirskin product Delete Product Data Admins can product data.
View Reseller Admins can view the distribution Distribution locations of Kelirskin resellers.
Table 2.
Use Case Identification Image 3.
Use Case Diagram Based on the use case diagram depicted in Figure 3, it can be explained that in order to access and execute the functions within the system, system users must first perform the login function.
The login function in this system is intended to restrict access to data and information within the system, ensuring that only authorized system users who have the authority to access and modify data can execute the functions available in this information system.
After identifying the actors and use cases, the researchers can design use case diagrams, activity diagrams, and class diagrams.
Kelirskin Kelirskin https://doi.
org/10.
46961/jommit.
JURNAL MULTIMEDIA DAN IT - VOL.
08 NO.
Image 6.
Reseller Register Activity Diagram Image 4.
Reseller Login Activity Diagram Image 5.
Admin Login Activity Diagram JURNAL MULTI MEDIA DAN IT - VOL.
08 NO.
Image 8.
Activity Diagram for Membership Extension Image 7.
Reseller Registration Activity Diagram https://doi.
org/10.
46961/jommit.
JURNAL MULTIMEDIA DAN IT - VOL.
08 NO.
Figure 10.
Class Diagram 2 System Prototype design In the stage of designing the system prototype, the researchers will design the visual interface of the system according to the needs of the system users as described in the system modeling.
The following is the prototype of the information system designed by the researchers in this study:
Admin Login Page The admin login page is the page used by the admin to access the admin dashboard.
Image 11.
Admin Login Page Reseller Login Page The reseller login page is the page used by the reseller to access the main page.
Figure 9.
Activity Diagram Reseller Verification by Admin Image 12.
Reseller Login Page Reseller Login Page The reseller registration page is the page used by the reseller if they are not yet a Kelirskin reseller or do not have a reseller JURNAL MULTI MEDIA DAN IT - VOL.
08 NO.
Image 13.
Reseller Registration Page Image 14.
Reseller Registration Page Image 15.
Kelirskin Product List Page Kelirskin Product List Page The Kelirskin product list page is the page used by the reseller to view the products from Kelirskin in order to complete the registration as a reseller.
Product Detail Page The product detail page is the page used by the reseller to view the details of a product.
Image 16.
Product Detail Page Cart Page The cart page is the page used by the reseller to add or remove products from the cart.
https://doi.
org/10.
46961/jommit.
JURNAL MULTIMEDIA DAN IT - VOL.
08 NO.
Image 20.
Successful Purchase Confirmation Page Image 17.
Cart Page Ordered Product List Page The ordered product list page is the page used by the reseller to view the orders that have been purchased.
Checkout Page The checkout page is the page used by the reseller to select the payment method in order to complete the purchase.
Image 21.
Ordered Product List Page Image 18.
Checkout Page Order Detail Page The order detail page is the page used by the reseller and admin to view the details of the order.
Payment Page The payment page is the page used by the reseller to make the payment to the company's account and upload the proof of payment in order to complete the purchase.
Image 22.
Order Detail Page Image 19.
Payment Page Successful Purchase Confirmation Page This page is used by the reseller to know that the purchase has been successfully made.
Membership Extension Page The membership extension page is the page used to extend the membership as a reseller by purchasing Kelirskin products again.
JURNAL MULTI MEDIA DAN IT - VOL.
08 NO.
Reseller Submission Page The reseller submission page is the page used by the admin to view the list of reseller submissions and can accept or reject reseller submissions.
Image 26.
Reseller Submission Page Reseller List Page The reseller list page is the page used by the admin to view, edit, and delete reseller data.
Image 23.
Membership Extension Page Profile Page The profile page is the page used by the reseller to view and modify the account data.
Image 27.
Reseller List Page Reseller Distribution Points Page The reseller distribution points page is the page used by the admin to view the distribution locations of the resellers.
Image 24.
Profile Page Change Password Page The change password page is the page used to change the password of the reseller account.
Image 28.
Reseller Distribution Points Page Product List Page The product list page is the page used by the admin to view, add, edit, and delete product data.
Image 25.
Change Password Page https://doi.
org/10.
46961/jommit.
JURNAL MULTIMEDIA DAN IT - VOL.
08 NO.
Image 29.
Product List Page Add Product Page The add product page is the page used by the admin to add a CONCLUSIONS AND RECOMMENDATIONS Conclusion Based on the research findings titled "Website Design for Kelirskin Product Reseller Registration with Prototype Method," it can be concluded that online reseller registration based on a website, adopting the prototype method, is a crucial step towards This study emphasizes that integrating system design in website development with the reseller business model, as demonstrated by Kelirskin, can significantly expand market reach and foster business growth.
Through the stages of analysis, design, and system implementation, the use of the prototype method assists in designing solutions that align with user needs, strengthening relationships with business partners, and enhancing user experience in the registration and transaction processes.
Therefore, this research provides valuable contributions to understanding and practical implementation of information system design in the context of information technology Recommendations System development involving prototype testing with representative users is a crucial step in ensuring system success.
Through these trials, potential issues can be identified early on, allowing necessary improvements to be made to enhance system usability and performance before full launch.
Furthermore, further research can focus on further system development while considering enhancements in functionality, security, and It is also important to pay attention to user training aspects so that they can effectively use the system.
Image 30.
Add Product Page Order List Page The order list page is the page used by the admin to view and send the tracking number of the orders made by the resellers.
Image 31.
Order List Page After launch, regular monitoring and evaluation of the system are essential to identify and resolve any potential issues and to adapt the system to changes in business needs and technology.
With this approach, the system can be continuously improved to meet market demands and ensure smooth long-term operations.
REFERENCES