User Flow Visual Analysis for Climate Action Project Proposal in Navigating NDA GCF Website

. The management of funds from the Global Climate Fund for the Indonesian government is managed by the Fiscal Policy Agency as part of


Introduction
Climate change that continues to occur has become a topic for which solutions are always sought at the level of the world community.According to NASA, global temperatures have continued to rise to 16 degrees Celsius since 1880, of which nineteen of Earth's warmest temperatures have occurred since the 2000s.From the condition of ice at the Earth's poles, on average it continues to decline to 13.1% every 10 years [1].The decrease in the amount of ice at the poles raises sea levels, which results in high erosion of the bays and increases the occurrence of storms.The increase in world sea level continues to rise up to 3 millimeters per year.The Global Climate Fund (GCF) was formed because of continuing alarming conditions of climate change happening in the world.GCF provides funding for projects that can improve conditions or curb climate change.GCF was born as part of the United Nations Framework Convention on Climate Change (UNFCCC), a global institution that deals with adaptation and prevention of climate change.Founded in 2010 with headquarters in Incheon, South Korea, it has funded 159 projects worldwide.In this activity, the GCF is undergoing a project worth $4.9 millions, from its target of $7.3 billions.The management of GCF projects in Indonesia is handled by the Fiscal Policy Agency which is part of the Ministry of Finance of the Republic of Indonesia (BKF Kemenkeu), as the National Designated Authority (NDA) of GCF Indonesia.Research by the Indonesian Ministry of Development Planning (BAPPENAS) in 2019 showed that Indonesia will be able to reduce Green House Gas (GHG) emissions by 43% by 2030 [2].In order to achieve the 2030 emission reduction target [3], Indonesia currently requires financing of US$ 4.4 T [4].Communication activities will certainly be important for Indonesia's GCF NDA to finally achieve this target.One of the activities that have been carried out is the creation of an online platform, where all information is expected to be the entry point for project proposals that can support the achievement of emission reductions.Currently, Indonesia's young generation has various creative solutions to increase public awareness in climate change mitigation efforts [5].This can be seen from the 165 concept notes that have been received from various stakeholders until March 2020, and this indicates that Indonesian people's interest in the GCF is getting higher [6].This research will explore how the user flow of the NDA GCF Indonesia website can be more easily understood according to its purpose.This research activity will include a study of the flow of the website and the information presented, the user experience in a visual communication perspective so that the website can provide clear and interesting information to increase the number of climate change mitigation project proposals received by the NDA GCF Indonesia.

Objectives
This study intends to analyze the user visual information flow of the NDA GCF website using DKV knowledge and look for any aspects of the website that can be visually improved so that users who enter the website can navigate the information and upload their ideas comfortably about ideas for a better environment in the form of a proposal to the website.

User navigation in website
Users expect to be able to navigate the website in clear and easy manner without have to think twice to find what they are looking for [7].However, there is a tendency for website owners to provide as much information as possible on one page.As a result, with dense information, visitors take longer to understand and find the information needed, this flood of information influence the users potentially decide to leave within a certain period of time if they feel uncomfortable navigating the website.Furthermore, how the information is captured by the users is not by reading the website, but scan the website to find the data they need [7].When visiting a website, visitors will scan the page quickly, and their eyes will look at the area of interest, scan which information they need and then read it, or scan which button can be clicked.

Usability in website
According to ISO Ergonomics, the definition of usability [8]is how a website can be navigated by users effectively, efficiently and satisfactorily.And the average person browses a website for about two minutes before deciding to leave or stay [9].The success rate is measured by how easily and quickly they can get the information they need on the website.While other facts found that the user loyalty to a website will increase if they can navigate a website efficiently [10].When entering a website, if visitors are able to navigate and find information easily then this will lead to visitor satisfaction which in the end will make them have a good perception of the brand of the website.

User Journey for user satisfaction
Websites that focus on users will prioritize the needs of these users above other interests [11].Generally, users use a story-driven mindset when they want to understand and want to understand the navigation of a website [12].Therefore, a website designed using this pattern will make it easier for users to navigate the website, easily remember their experience, recognize the features, and be able to increase user satisfaction on the website.The preparation of website information is being done by understanding the needs of visitors since the beginning of entering the website, in the users behavior in obtaining information and navigating the interface in each page by page they visit.

Utilizing design principles in website
Design principles are the main factors in a website, because these principles will make the site easy to use, and easy to understand [13].In designing a website, it takes design principles such as balance, grid, hierarchy, contrast and grid [14] to create an attractive and easy-tounderstand composition.The application of these principles will make it easier for visitors to navigate and focus on the most information on the website.Other studies have also shown that designing user interfaces using design principles can reduce user decision-making time by about 40 percent [15].

Methods
The method used in the analysis of the NDA GCF website adapts the branching approach problem-solving method from John Bower which consists of learning, identifying and evaluating [16].In the learning stage, the research team tried to study and analyze how to navigate the website using the design principle methods [14].During the identifying stage, the research team began to identify which parts of the GCF NDA website could be improved so that it would be easier for users to navigate.After that the research team will evaluate & make recommendations on which parts can be improved, as a visual direction to enter the website prototype stage.

Data Collection
This study of the user experience flow is complemented by several stages and processes of data collection.Some of the data used are observational study on the current condition of the GCF NDA website, supported by literature review.In-depth interview techniques with several respondents were also carried out as a third data source so that data triangulation could be carried out.Literature data includes knowledge and previous studies related to the creative process and behavior of the human brain which are then kept in context of relevance to the topic of climate change.For primary data, we used an in-depth interview method to gain insight into how the existing condition of the existing GCF NDA website is being used by its users.We use the user-testing with a given scenarios in accordance with the purpose of this research, to observe how the user experience flows in interacting with this website, get information & see whether the users are interested in submitting a project after having the experience of navigating the contents through the button access point provided.In order to find insights that can be immediately applied practically, the respondents consist of internal & external, the internal management of the NDA GCF BKF Ministry of Finance of the Republic of Indonesia and external parties are respondents.
Observation on the visual appearance of the NCA website becomes a crucial thing, because this is where an observation and dissection of what visual elements and principles are used so that the information presented can be achieved according to the objectives.In addition to comprehend about what is used visually, a study is also conducted on how each visual element & principle is used, how they can be clearly and coherently related to each other so that the communication objectives can reach the audience.Observation starts from the main page or landing page, where on this page, the user interacts for the first time with all the content offered, before the user continues his navigation to another page.The presentation of this first page becomes a moment of truth from a user interaction and content before from here the user will explore the NDA GCF website according to the user's goals.

Results and Discussion
The findings in this study are as follows.In terms of presenting information, it is complete, but in optimizing the navigation of visual information in order to support information dissemination and of course submitting proposals for climate change action project ideas to be easier, it has not been presented optimally.A more complete description of each section on the main page is as follows ;

User visual flow analysis
A more complete study of user flow will be presented in this sub-chapter, involving several visual elements and design principles, not to be left behind is the importance of processing the information presented.Basically the purpose of this website is to socialize about the existence, function and role of the NDA GCF operating for the benefit of the world in climate change through the contribution of green projects in Indonesia.When viewed from the aspect of the information to be conveyed, it does not appear that there is indeed a big mission to be able to contribute in a green project to the visual arrangement of this website.The information presented through visual processing still needs to be reviewed to be better navigated.This description will describe aspects of visual processing which will then be complemented by an explanation of how it relates to increasing interest in submitting climate action related project proposals.Starting from the aspect of organizing information in the header section, the emergence of a visual identity that is present on a fairly large scale compared to the header area ratio, makes that identity easily visible first in the visual navigation flow hierarchy.Arrangement of other information in the middle to the right is seen that some information will be better if given a clearer grouping of information or in design principles of gestalt is called similarity [14].The placement of the buttons in the form of text on the right, even though the position is divided into 2 alignments above and below, but the visual elements used still look similar because lack of contrast.Typographic as visual elements are given the use of color elements that are less contrast, light gray and dark gray.There are also attempts to differentiate from the aspect of scale, but the scale presented is also not significant enough to differentiate the two groups of information (figure 1), this can cause the user to find navigate the website more difficult [7].The main banner can contain some information which becomes a snippet of some important information depending on the situation and the momentum of the user accessing a website.In the NDA GCF website, the user can see that one of the first pieces of information that appears when you enter the website page is the arrangement of illustrations and text boxes.The illustrations presented show the atmosphere of human life from the natural aspect, humans who are interacting and some forms of renewable energy sources are seen.If examined from the presentation of the text content, this main banner wants to visually convey actions related to gender and social inclusion in climate change projects.

Fig. 2. Main banner of NDA GCF website
The visual arrangement in the main banners shows the combination of typographic visual elements with dialogue text area above an illustration using several objects and colors.This combination needs to be managed because the title and subtitle text lines are presented in one text line arrangement that passes through several objects of various shapes and objects having different color intensities.This makes the text difficult to read because the user's eye needs to concentrate on recognizing the shape of the letter above the other visual elements below it.With this arrangement, it is feared that the text information will be less or not be readable which can result in unclear information for the user [12].Another condition of the main banner that can be further optimized is the absence of call-to-action (CTA) instructions that are more easily recognizable for users to extract further information from the main banner's message.On the current main banner, there are no visual cues from the CTA.There is slight sign of CTA is the cursor changing from an arrow shape to a click finger shape.However, this shape change becomes less clear because generally the color of the cursor is white, the shape change occurs in the title text area which is quite thick with white color, plus generally the cursor size is quite small, this causes the CTA interaction to be less or not clearly visible [8].Another important segment of the information presented in a website is about the credibility of the institution, generally given a label as "Tentang Kami" (About Us), in this case the name is "Tentang NDA" (About NDA) shown in figure 3.In the "About NDA" segment, it looks like the visual wants to present a choice of several sub-segments, this can be seen by the 3 information texts placed at the top middle.If these 3 sub-segments are selected, they will be the titles presented in the text box to the left of the layout.The visual element of concern is the processing of the 3 texts above shown in red bullets "Tentang NDA" (About NDA), "Tentang GCF" (About GCF) and "Kegiatan" (Activity) which turns out to be a button.In its function as a button to open or display more information, placing text as a button will be more optimal if it is visually given a unique visual treatment that can show that the three texts are not ordinary text.In terms of the placement of elements and navigation, which means that after the 3 buttons, a larger title appears, coupled with the use of blue elements that are different from ordinary text, helping users to guess about the function of the 3 words at the top.Another suggestion is that if the three pieces of information are really important, then it's better if the three pieces of information are presented entirely in a trigger portion which, if the user is interested, can explore further.If the user scrolls further on the main page of the NDA GCF website, they will find the "Proyek" (Projects) segment (figure 4).In this section, it can be seen from the writing that the title is "Segment", visually indicating that this segment will show information related to the project (Brooke, et al 1990) [8].The visual elements used are the use of photography & typography with separated placement, photography on the left side and typography on the right side.The use of short and thin line elements helps the user's perception that this section is a different segment.In terms of layout and typography, the use of large, centered text has been quite successful in indicating the different segments on the NDA GCF website.If the user explore the text box on the right side further, they will arrive in several blue field buttons with white text, accompanied by an icon for the process of downloading the document into storage.From the row of buttons, it can be seen that there are 2 types of buttons, 1 with a colored area, 1 type of button with a blue line but without any color filling in the button area, the arrangements can be better aligned with all the visual elements provided.From the previous several segments, this section shows that the information to be presented is quite complex, here the users see several types of information that have also been carried out with different visual touches to be able to show the existence of different information.Some things to note to make it better is one of them by placing the typographical visual element of the title of the article combined with photography on the left side of the layout, then the translation of information through text on the right side, it looks like there are 2 separate parts of information.Processing the layout of the text box on the right side can pay more attention to the blue dotted line, text fragments can be made to tend to be more even so that eye navigation when reading becomes more consistent.Notes on the paragraph is about the appearance of orphan that should be avoided, a word that hangs alone within paragraph, marked above with a green dotted line.The paragraphs end sentences also formed too extreme end points that shows jagged edges along the right side of the text paragraph, this shown in the blue dotted lines.At the bottom of the text on the right side, the user can see a row of blue buttons that show several buttons that have different functions but are presented with the same visual treatment, as if they have the same function.The last segment as the closing of the main page of the NDA GCF website for current conditions would like to provide a summary of information from all available information.However, what happened was the repetition of some of the previously presented information, even from the header information.The "Tautan Bermanfaat" (Useful Links) segment, which is y provided as an advanced source of reference for users, appears less strong just by presenting plain text fonts (figure 5).The complete visual flow is shown in figure 6, it is shown how approximately visual flow based on design elements & principles in organizing information for a website page, in this case NDA GCF main page.

Header
The navigation menu needs to be rearranged (shortened) using a visual hierarchy with the "Pengajuan" (submit) button as the main emphasis to make it easier for environmental activists to upload proposals.One of them is by re-determining all the information to be presented.Currently the menu of options is too many for a user to focus on exploring the options provided.The information hierarchy will become clearer if, apart from providing information, the menu selection also aligns with the goal of the GCF NDA movement.The NDA GCF vision is to contribute to climate action through the amount of high quality project proposals that can contribute to addressing climate change.One recommendation for improvement is to make the "Pengajuan" (Submission) button more visible in terms of visual treatment so that it invites visitors to recognize it immediately [7].

Main Banner Segment
The main banner, which consists of several messages that alternately shift, needs to be presented with clearer information on the objectives of the GCF NDA movement, in addition to providing information, it also invites project proposals in tackling climate change.
From one of the banners that appeared that was discussed earlier, the use of visuals between text and illustrations would be better if they were made more contrasting.Some of the ways this can be done are by isolating the text from being overlapped with the illustration or using colors that contrast differently between the text and the illustration.By increasing the contrast, users will be able to read, find out information and act immediately according to the user's motivation when accessing the website.Improvements that can be added to the main banner are the placement of a call-to-action (CTA) button so that visitors can navigate to the website immediately when submitting a proposal.The CTA button will also be a symbol of commitment and service from the organizer.By doing so, NDA GCF will be actively inviting users to be able to immediately contribute to submit proposals.
About NDA GCF Segment The segment on the GCF NDA can summarize all the parts that are not yet integrated, so that users can easily and immediately see all the information to get a complete picture of the background of this funding provider, the GCF NDA.If the segment is considered important and needs to be shown the three things that are mandatory, then it is better if the three information can be fully exposed.From the side of summarizing it into wording, it can shorten the duration of the journey to explore the contents of the main page, but there is a risk of missing information.Another solution is to simply display one piece of information, then the other information can be displayed separately in the header menu.Different way to improve is by using an approach that can help expose the information in this section is to design a unique button shape that doesn't stand out too strongly visually, so that scrolling down navigation, the user's visual flow experience doesn't stop due to a button design that's too strong.The last is to design an icon shape that can represent the title of the message to be conveyed, the icon is placed side by side with the text button, so that they can play a role in conveying information in text and images so that messages can be caught in information scanning by the users [12].

Project Segment
The "project" (Proyek Segment), as an information segment that provides examples, also serves as an invitation and a showcase to describe the results of projects that have been carried out which is also useful for strengthening the credibility and impact that can be generated from GCF NDA activities.The title writing as "Proyek (Project) would be better if it was written in the form of "Proyek Pilihan" (Featured Project), the word "Pilihan" (Featured) indicates a message that the GCF NDA supports a lot of projects and what is displayed in this information segment window is a selected or 'featured' project.Furthermore, in this view mode it is better if more projects are displayed.Furthermore, 3-4 project examples can be presented so that the user perceives that behind the number of projects in this view mode, there are more projects handled.This showcase of 'featured projects' is a confirmation of the credibility and sincerity of the GCF's NDA support as a movement that contributes to the environment.Another improvement suggestion is about the placement and grouping of text information, or in design principles (gestalt) called similarity [14].In similarity, similar information is placed in groups so that users can immediately perceive that several elements are the same information.In this 'Project' segment view, it is proposed to move the placement of writing the proposal title and a brief description of the project in the same 1 grid area, in the current layout condition on the right side of the layout.However, in terms of typographic processing, it is necessary to pay attention to the information hierarchy so that the flow of information that you want to understand can be conveyed properly.
At the very bottom of the right side, the buttons that are presented can be arranged more symmetrically, or to strengthen the message of the relationship between the project title and related documents, it is also better to move the button position from the right side to the left side.The last thing is that it needs to be processed visually so that the diversity of climate change management projects can be seen so that it can also be a trigger for users who want to submit proposals to get an idea of the types of projects that can be submitted.

Footer and useful links
The last segment of the front page of the NDA GCF website works a closing introduction and an invitation to submit proposals that need to be arranged holistically related to all planning and management of the interface that has been presented since the header section.It is proposed to reduce repetitive buttons because they have been presented in the previous segments, the information is 'About NDA', 'About GCF', 'Activity', 'FAQ', 'Submission', and 'Contact'.The link section is useful if it is felt important to be present as complementary information, then it needs to be presented more visually [11].One way is to provide an icon or logo if the useful link is an institution that also has links to the GCF NDA program.Furthermore, returning to the purpose of this website as a forum for information and proposal submissions, this closing segment can be used as a repetition of invitations and thanks to those who have submitted, worked on and completed the project.Thus, the soul of the GCF NDA website can exist as an entity that is warmer and more open in inviting users to jointly participate in making a positive contribution to the climate change conditions that are engulfing the world.

Conclusion
After conducting the analysis, the research team believes that the recommendations provided will improve the usability of the NDA GCF website so that users can more easily navigate the website and make it easier for them to upload proposals which is the main goal of the website.And it is also hoped that when the NDA CGF website is redesigned, there will be many creative solutions to deal with climate change in the world.As the next step, the research team will create a wireframe according to the given recommendations.This wireframe will be a reference to enter the highfidelity prototype phase and then proceed to the visual design development phase.It is hoped that this foundation can help users who are interested in submitting their ideas to optimize the interface of the NDA GCF website.Of course, this effort needs to be developed and user testing at a later stage should be carried out.

Fig. 1 .
Fig. 1.NDA GCF HeaderImportant information is presented visually in a fairly large size scale in a main banner as shown in figure2.The main banner can contain some information which becomes a snippet of some important information depending on the situation and the momentum of the user accessing a website.In the NDA GCF website, the user can see that one of the first pieces of information that appears when you enter the website page is the arrangement of illustrations and text boxes.The illustrations presented show the atmosphere of human life from the natural aspect, humans who are interacting and some forms of renewable energy sources are seen.If examined from the presentation of the text content, this main banner wants to visually convey actions related to gender and social inclusion in climate change projects.

Fig. 6 .
Fig. 6.User visual flow visualisation shown using flow lines and circles as attention points.