Timeline
Role
March 2020
UX research/ Information Architecture/
UI Design / Front End Development
Visit Nepal 2020.
Web Development
Overview
​
A website to promote visit Nepal 2020 campaign. This website includes all the information regarding Nepal making it easy for people who wants to visit Nepal.
Challange
Design and develop an informative website to promote Visit Nepal 2020 campaign.
Tools Used
The website has been created in Visual Studio Code with HTML, CSS and JavaScript.
Objectives
Building a website that contains an array of information can be boring for the user. Hence, to solve such criteria, the website is implemented with interactive features such as drag and drop, to do list, wiki search etc. This was possible with the help of web features such as JavaScript, API, jQuery for interactivity; CSS for styling etc.
Functionality
Important functionalities and how it was implemented and why?
Interactive Map
To make the map clickable, each part of the map was outlined to calculate its “coords” to make it an active area for the program to read. After calculating the coords for each part of the map it was then assigned with a wiki article link (implemented in home.html) where the user can acquire more information. Although the code was simple, calculating the coords by repeating fourteen times was time consuming.
Drag and drop quiz fact
To implement such functionality the jQuery was approached here to implement the respective function. First, the quiz option (list of words) that I decided to situate on right was initialised to be made draggable and be dropped when the user leaves the pointer. For the quiz to accept the correct answer, the target box user was meant to drop the option word and was assigned with a ‘data-accept’ tag with the correct answer. When the user drops the incorrect word onto the target area, the word is programmed to be dropped back to the list of the option. A “Done” button is also implemented to submit the quiz. The website accepts by returning a “Perfect” message box with the lightbox in the background. The website will not accept the submission when the quiz is incomplete and return the user to the initial page to continue with the quiz. When the user clicks the lightbox, the message and the lightbox will go invisible.
To do list
The todolist has been implemented with the help of html, CSS and mainly JavaScript. When the user clicks the “Add to my List” button, the website checks if the input box is filled. If the input box is empty it will simply alert the user with an alert message that they have not entered an item in the input field. In contrast if the input field contains an item, it will be simply added to the list. Similarly, the functionality also allows the user to print the copy of the list which I implemented with the help of print () function. It is the build-in a function that the computer understands. Hence, only assigning the print() function on the button required to be activated is enough for the system to understand the task. Same method can be used to save the page as a pdf. However, the email function proposed here requires specific code which is yet not implemented. To give the experience an alert box has been implemented with an input field for users to enter the email address. The website will then check if the field contains an email address, if it does then another message that the email has been sent will be provided. Similarly, when the field is empty, and the user hits the send button it will ask the user to enter the input field with email address for the process to be completed.
Wiki-Search
This functionality was possible by making a JSON request from the Wikipedia API. Using Wikipedia endpoint, ajax request object with json data type from Wikipedia API. When the Wikipedia API accepts the request and response, it is then iterated through. Finally, only the name of the article was visualised on the website. The article title retrieved was then assigned with the link that would redirect users to the Wikipedia page respectively onclick. Hence, to fulfil the purpose of the website that is to inform the visitor about the campaign Visit Nepal 2020 and how they could explore Nepal can be helpful with the functionality of Wikipedia API search implemented into the website.
Reflection, Limitation and Solution
Home.html
The map that has been assigned to take the user to a new page (Wikipedia article) when the user clicks a specific area on the map. When the user hovers over the map they will not know if the image is active. Hence, it is difficult to know what the map does. A CSS property (when hover highlights a part of the image) to style this make could improve the user’s experience if the map is interactive.
Guidetonepal.html
Due to the time limitation, I was not able to input more than three destinations under each tab. However, if I had the time and better coding knowledge, I would rather have the information loaded from google API (because it stores almost all the information) to be shown in this page. Having given the information manually is not efficient.
​
​
Aboutvisitnepal2020.html
I am satisfied with the way I was able to present the information on this page. However, the drag and drop quiz will only show the same question all the time. A better improvement would be to generate new facts every time the user visits or refreshes the page. This would give the user a chance to find more about Nepal with the fun quiz that they would keep coming back to. This can be done with the web scraping technique with the help of API.
Createtodolist.html
Some of the features such as an email button that is proposed to ask the user an email address so that the list they prepared can be emailed to the given address. However, such a mechanism is not implemented yet. Having such a feature into a website that lets the user create a list like Visit Nepal 2020 website can be an approach to note the list as a reminder for them. Similarly, instead of having the video embedded for this page, I would rather get the video on the topic of Nepal directly from the YouTube search engine just like the searchaboutnepal.html page. The video would then refresh each time the user visits the page or let the user search the video with the keyword.
​
​
Overall,the content of the website tends to lose it place when the size of the browser is changes (minimised and maximised). Currently the website has been designed to fit the 100% zoom, with maximised window in the Mozilla FireFox browser. A better responsive website would be when the user can use the content of the website without getting it miss placed.