ISSN : 1978-8282.
Online ISSN: 2655-4275 Prototyping of Agricultural Education Website Using the Design Sprint Approach Hadiq*1.
Eko Heri Susanto2.
Rina Permata Sari3
1,2,3
Teknik Informatika STIKOM PGRI Banyuwangi E-mail: * hadiqlearn@gmail.
com, 2ekoheri@gmail.
com, 3rinapermata16@gmail.
Abstract Agricultural technology is developing in line with discoveries in soil science and plant This technology enables increased tonnage of yields at lower costs.
But unfortunately, this useful technological development cannot be directly applied by farmers due to the slow transformation of information to farmers.
One thing that can be done is to create an appropriate agricultural technology information service website.
For the information presented to suit the farmers' needs and easy for them to understand, a user interface design process is needed that involves the farmer directly.
So this study uses Design Sprint as an approach to design and validate the user interface.
This research succeeded in making a website template design and has been validated with a grade of 3.
6 from a scale of 5.
The grade is included in the category of very good and suitable for use as an educational medium Keywords Ai Design Sprint.
Prototype.
User Interface.
Design UI
INTRODUCTION
Increased productivity is one of the strategies that have an impact on farmers' incomes, this affects the increased potential of farmers in technological progress.
With the internet, farmers make this technology as a means of finding all the information needed .
Agricultural information technology plays an important role in the process of agricultural development.
The availability of various agricultural technology information will accelerate the progress of the agricultural business.
The availability of agricultural technology information in an area will have an impact on the level of fulfillment of farmers' information needs.
Information on the results of research and technological innovation in agriculture helps efforts to increase the production of agricultural commodities so that agricultural development is expected to be achieved .
Increased knowledge of farmers in the process of rice cultivation is very important in agriculture, but the process of good rice cultivation is less noticed by farmers.
Several factors cause the rice cultivation process to be less noticed by farmers, one of which is the lack of interesting information delivery media that causes farmers to be less interested in interacting with online media.
One of the educational media needed by farmers is website-based media.
In the process of developing a responsive website .
esponsive web desig.
, website design with an attractive appearance is needed so that it can be accessed using all kinds of devices.
However, at this time the website and mobile display have an inappropriate visual design.
This makes the problem factor, one of which is the farmers' lack of interest in interacting with online-based The benefits of responsive web design are said to be so because a website that can adapt its layout to the size of the browser must be able to adapt to the size of fonts, images, and other components so that users can read the entire contents without scrolling the screen horizontally .
orizontal scrollin.
to see the hidden parts from the website .
In their research.
Kharisma, et al evaluated CMMS (Computerized maintenance management syste.
newly developed by PT Pertamina Trans Kontinental.
Kharisma sees that the newly developed user interface is still lacking in terms of its usability, so it needs to be Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Kharisma evaluates using the design sprint approach.
The usability test results before and after using the sprint design showed an increase in scores of 24.
Therefore, the authors make a website template design with the Design sprint method based on the results of research on farmers.
Based on the diagram data in figure 11 the resulting design template can make farmers interested and fit in good template criteria and suitable for use as a medium for rice cultivation education.
RESEARCH METHOD
Design Sprint is a design method based on the User-Centered Design approach.
method that makes users the main consideration in making designs.
So this research involves agricultural actors in making designs.
These actors are POKTAN (Farmers 'Grou.
GAPOKTAN (Farmers' Associatio.
, and HIPPA (Association of Water User Farmer.
Figure 1.
Research Stages Stage of the research refers to the five stages used to design and evaluate a design according to the Design Sprint method as shown in Figure 1.
Stage 1 Ae Understand Understand phase is the first stage that must be done to find out the interest of farmers in attracting the desired website template design.
Data collection as a need is done by interviewing farmers.
The interview was carried out in 3 stages, viz:
The first step is preparing questions that include the design template desired by the farmer such as menu placement, template color composition, and font size that can be read by the farmer and image placement.
The following are some of the questions raised to meet data Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Table 1.
List of question No.
Question What design templates do farmers want, so farmers can understand and be more interested? What color composition is easily seen by farmers What is the font size that can be easily read by farmers? Do farmers prefer a lot of pictures or writing? Where do farmers usually get information about agriculture? Is it getting from the community, farmers' groups, or reading through the internet? What information is needed to be displayed on the website? Do farmers prefer to read or when asking for information when there is The second stage asks farmers to choose a template design that has been made based on At this stage, the farmer can choose several templates that farmers think are more interesting and easier to understand, so that filling out the questionnaire can provide data according to their needs and with the desired template.
The third stage is to make a bar chart from the results of stage 2.
Then from the diagram, the can make a conclusion.
Stage 2 Ae Diverge Diverge is a stage that is done to get as many concepts as possible that refer to the results of the analysis at the understanding stage.
The diverge stage can be done by making a prototype low-fidelity design in paper media or manually.
Furthermore, prototypes in the form of paper media are converted into digital form.
Then the next step taken is to explore design templates to get as many designs as possible.
Stage 3 Ae Decide Decide stage is the stage to choose the best design from the concepts that have been produced at the diverge stage.
After exploring the website template concept using the lowfidelity prototype design, then it is designed by evaluating the concept based on data needs from farmers.
Stage 4 Ae Prototype The prototype stage is used to implement the design or website template design concept in the form of a prototype of the template that was selected at the decide-stage.
The prototype generated from this stage is a final template or high-fidelity prototyping that is useful for facilitating interaction with farmers.
Following are the steps to make a prototype in this .
Prepare components and design whatever prototype design is needed such as menus, buttons, icons and the like.
Then create a prototype design using several tools such as editing photos to be of high quality, but has a small size.
If the prototype components have been collected, then implemented in prototyping tools to make prototypes.
Re-examine whether the design is appropriate, if there are still shortcomings of the design, it can be repaired or remade with the appropriate tool.
So that the prototype produced is suitable for testing to farmers.
Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Stage 5 Ae Validate At the validate stage which is the main point of this research stage, testing the prototype in the form of a website template has been implemented.
Prototype trials were conducted to find out whether the website and mobile template design succeeded in attracting farmers' interests and became a suitable template criterion and was easy to use by farmers or not.
RESULTS AND DISCUSSION
Implementation is carried out following the design methodology as it has been prepared.
Each stage is carried out systematically and structured, recorded and evaluated so that no stage is missed.
The test is carried out to find out whether the website prototype template designs have succeeded in attracting farmers' interest in the desired design and information.
With the stages - steps that have been done, then produce a discussion of these stages that can be explained as Result of Stage 1 Ae Understand This stage aims to explore the farmer's interest in the appearance of the website and the information contained therein.
For this purpose, 4 question items are made which are an important aspect in developing a user interface.
Figure 2 shows 4 item questions asked farmers to choose from.
Figure 2 .
gives 4 types of designs, one of which can be selected by the farmer for the prototype website to be Figure 2 .
gives a choice of colors.
Farmers can choose one of the four colors presented, namely green, yellow, blue, or purple.
The most chosen color will be used as the dominant color on the website prototype to be made.
Figure 2 .
asks the farmer to choose one of the four desired font sizes.
And Figure 2 .
presents 4 choices of drawing and writing composition, one of which can be selected by farmers according to their liking.
Figure 3.
Bar Chart Of The Results Of Stage 1 The recapitulation results of the understand stage are presented in a bar diagram as shown in Figure 3.
Figure 3 shows that an example of a design template that is of more interest to farmers is the template in the second option.
While the dominant color for the website chosen by farmers is the first option, which is green.
For font sizes that are easily read by farmers, namely size 14.
And for the composition of images and text, farmers choose the first option, which is the text below the image.
The data in Figure 3 is the main data for composing the composition, layout, and coloring so that the overall website appearance will be following the wishes of the farmers and be able to describe the spirit of the agricultural world in general.
Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 .
Hijau Kuning Biru Ungu .
14 (Empat 16 (Enam 18 (Delapan 12 (Dua bela.
Figure 2.
Questioning Elements Of Web User Interface Design.
Layout, b.
Color, c.
Fonts, d.
Composition of images and writing Result from Stage 2 Ae Diverge The diverge stage is the stage to get as many concepts and ideas as possible about the problems that occur.
With the analysis of data in the form of qualitative data when conducting interviews and filling out questionnaires, a low-fidelity prototype design was made using paper media based on farmer needs data.
The low-fidelity prototype stage is the design phase of the website and mobile template framework which will later be created and used as the main concept in building the website Here are the concepts based on the results of the understand stage:
A low-fidelity prototype is used to search for several template design concepts by exploring the website template designs on the internet.
Figure 4 is a website concept that has been explored through research and the internet.
Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Figure 4.
Low-Fidelity Prototype Result from Stage 3 Ae Decide The decide stage is the process of determining the prototype design that has been made as an agreement.
The author determines the main concepts for website template design that will be made from the best template design choices.
Gambar 5.
High-fidelity home page interface design Figure 5.
High-Fidelity Home Page Interface Design Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Figure 5 is a home interface design on the website views.
In the design, several images will later be used as background templates and images from the contents of the template The interface design at home includes several menus and buttons that can later display the desired page.
Gambar 6.
High-fidelity interface design of article page Figure 6.
High-Fidelity Interface Design Of Article Page Figure 6.
is the interface design of the article page on the website display.
In the design, several images will later be used as background templates and images from the contents of the template content.
Interface design in land management more displays the image below in the form of direct information.
Gambar 7.
High-fidelity interface design of gallery page Figure 7.
High-Fidelity Interface Design Of Gallery Page Figure 7.
is a gallery interface design on the website and mobile views.
In this design only displays images.
If the farmer clicks on one of the images, the picture will appear.
The Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 interface design in the gallery also includes several menus and buttons that can later display the desired page, just like the previous home page display.
Result of Stage 4 AePrototype At this stage, the authors implement the design or the best website template design concepts in the form of prototypes that have been selected at the decide stage.
The resulting prototype is in the form of a high-fidelity prototype so that it can be used to interact with Home page Home page Display is the earliest view when opening the template implementation.
Home page display contains the main elements in giving a general description of the website, which includes icons, slogans, logos, and 5 button menus, namely: Home.
About.
Rice Cultivation.
Gallery.
Contact and Search menu.
Figure 8 shows the home page display which is a preliminary view that explains information at a glance about agriculture.
There are several buttons such as "Read more" which functions to open all of the information in another view.
It can be seen that the coloring and composition of images and writing are adjusted from the results of data collection of farmers' desires at the understand stage.
Figure 8.
The Prototype Of Home Page Display Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Article Page Display On the home page display, there are several buttons, one of which is on the rice cultivation drop-down menu.
If the farmer clicks on the rice cultivation button, the farmer will be shown an article page which includes: Land Processing.
Rice Breeding.
Growth phases as shown in Figure 9.
Figure 9.
The Prototype Of Article Page Display Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 Gallery Page Display Website Gallery Display is a display that displays the best images or photos obtained from field surveys.
The Gallery display page includes icons, slogans, logos, and 5 buttons the same as the Home website.
Figure 10 is a display of the Gallery.
If the farmer clicks on one of the pictures or photos, the farmer will be shown a page which is the selected image or photo.
Figure 10.
The Prototype Of Gallery Page Display Result of stage 5 Ae Validate At this stage, it is explained about success in making website template design as a farmer education media.
Making a design template can be said to be successful if the number of respondents more interested than respondents who are not interested.
Successful or failure also depends on the results of feedback from farmers in the form of evaluations, suggestions, and criticisms that aim to get the results desired by farmers' needs.
Table 2.
Validation Category No.
Grade Category 0 - 1,6 1,7 Ae 3,2 Less Good 3,3 Ae 5,0 Very Good The validation phase is carried out by testing the website template design which was implemented in the previous stage.
By validating, it can be seen whether the website template design successfully attracts farmers' interests and becomes a suitable template criteria and is easily used by farmers or not.
Farmers conduct usability testing using a questionnaire.
To get feedback, farmers can provide suggestions and criticisms about templates that have been made by the author.
Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275 There are 13 aspects of usability assessment that are directly valued by farmers.
Table 3 shows the 13 aspects.
Farmers can do an assessment on each aspect with a range of 0 to 5.
The range of values is divided into 3 categories.
Namely the LESS.
GOOD, and VERY GOOD Table 2 shows the grades and categories.
The results of the assessment of each farmer are then recapitulated and the average value for each aspect of the assessment is sought.
Table 3 also shows the average value of the results of the farmers' assessment of each aspect of validation.
Table 3.
The Result Of Validate Stage Assessment Question Average Score The font used in the template is good The font size used is appropriate and easy to read The color composition used in the template is suitable and attractive The size and image quality used is appropriate The combination of text and animation is easy to understand and not Placement of text and images is correct The button is clearly visible The image and background are compatible The menu layout is easy to use The icon that used is interesting Display of buttons are organized and consistent The flow in the prototype is easy to follow and not confusing Each menu is easy to access The results of the farmer assessment at this validate stage are recapitulated and the average value is calculated, then presented in the form of a bar chart as shown in Figure 11.
Figure 11.
Diagram batang hasil validasi The final score is obtained by looking for the average value from the bar diagram in Figure 11.
Namely by adding up all the numbers, then dividing by the number of statements that are 13.
A score of 3.
6 is obtained.
Table 2 shows that the final score obtained is in the range of 3.
3 - 5.
0 is a very good category.
Vol.
14 No.
1 Ae February 2021 ISSN : 1978-8282.
Online ISSN: 2655-4275
CONCLUSION
This research was succeeded in making a prototype of an agricultural education website using the design sprint approach.
The results obtained at the validation stage indicate that the prototype has been made was according to the needs of farmers as their users.
The final score 6 from scale 5 obtained from the validation stage shows that the prototype that has been made is considered very good by farmers.
SUGGESTED
This research still leaves some gaps that can be fixed in subsequent studies, among The prototype that is made is still limited to web applications, can be developed for mobile applications.
The measurement results at the validate stage get a score of 3.
2 from a scale of 5.
This score can be increased by correcting the part that farmers dislike, then re-validating.
REFERENCES