Access the live demo of the website here.
Project Context
GoWhereSG is a mobile-responsive and interactive map application developed for both foreign and local tourist to be able to search for leisure activities around Singapore.
User Goals
The aim of users is to get recommendations based on their interest and have an easy time deciding on where to go within Singapore. Users will be able to plan and route from point to point based on weather conditions.
Organisational Goals
The app aims to provide users with recommendations from paid avenues that promotes their place of interest. Additionally, revenue through advertisements can be generated.
Justification for the App
While there are countless local map applications and tourism websites around, many of them do not consider an all inclusive map navigation, recommendation application. This can be fustrating for new visitors especially if they are unfamilar with the geography of the city state. They would need to hop between map applications and website recommendations.
With Singapore being situated around earth's equator, it expriences sporadic weather conditions such as with rainfall and thundery storms. This in turn affects planing of tour itineraries. Often, tourist would be caught off-guard in undesirable weather conditions, leading to their plans ruin.
Thus, GoWhereSG will include an all inclusive map and recommendation application which will inform users on the upcoming weather conditions.
User
-
Objective: To explore tourism activies within Singapore based on search results and recommendations
-
Needs: Plan out itenery based on weather condition, location and reviews
-
Demographics:
- Users can come from all walks of life and age
- Users are presumed to have little to no geographical knowledge of Singapore
- Sufficient literacy in using technological devices
| User Stories | Acceptance Criteria(s) |
|---|---|
| As a tourist, i want to have a search feature based on my interest so that i can visit places that i enjoy. | Filter function for area of interest. |
| As a tourist, i do not want to be hindered by bad weather while doing outdoor activities so that i can have the best local experience. | Feature that can allow users to see the weather forecast on the map. |
| As a tourist, i want to know how to travel towards my place of intrest so that i do not get lost and waste time. | A route feature that helps user navigate their way. |
Functional Specifications
-
Search for activity
-
Filter for search result
-
Explore suggestions
-
Route from start to end point
Non-functional requirements
- Mobile responsiveness
- Achieved via the use of appropriate media queries and flex box
Desktop Response
Process of Application (mobile response)
Colours
- The main color scheme of the app follows a pink hue with a slight brown undertone To make the website vibrant, the color of pink of chosen for its main theme. This color edge user to be excited about exploring Singapore. Because the national colors consist of red and white, a pink hue would represent a closeness towards the purpose of GoWhereSG's website.
Font Choice
-
The font used for the branding icon is Raleway. This font is used in a chic depiction of who we are at GoWhereSG
-
Font size is are set to a readable size of no less than 16px (1rem)
-
San-serif are used for the main search text such that old and young will be able to read the text with ease
-
Users can search for activity. Using FourSquare's API and best search results, users can get the best experiences based on the popularity of places within Singapore. This feature is implemented at the front page and also in the main map navigation bar. Whenever the search button is pressed, the service will fetch the search results along side images and tips from FourSquare and iterate it into the search contents.
-
Filter for search function This feature is used to narrow down the search results for the user. If the user would like to look for food, they would be able to checkbox to select the food option and search.
-
Users can click on pin of search listings displays the name and address of location To reduce cluter within the map, the clicking of pin to popup the location and address has been used. This will tell the user the infomation they need such after doing the search.
-
Explore cards can be used as a suggestive refrence for users who do not know where to go In the case that the user do not have any plans or need a suggestion, the explore tab on the navigation bar can be used. These cards can be clicked on and will bring the user to the location of the map.
-
Routing can help users to navigate the local roads Routing from point A to Point B can be especially useful to the user when they need to travel while on the go. Additionally the routing gives the user the calculated distance between points such that they can decide if the traveling time suits their needs.
Limitations and future implementations
- For routing, an input address bar To and From is needed to enhance the usefulness. As of the lastest version of GoWhereSG, the routing function will only be able to provide users direction by droping and placing markers.
Test Cases
Access the test cases here.
Testing for Mobile Responsiveness
- Testing was done using chrome developer tool with variable width sizes from 330px to 1400px
- HTML5
- To create the framework of the web app
- CSS3
- To style various elements throughout the web app
- JavaScript
- To include interactive elements throughout the web app
- Bootstrap v5.0
- To create carousel
- To create dropdown
- To create checkbox
- To create Navbar
- To create collaps
- Leaflet
- To create the map of Singapore
- To add in markers
- To create layers and clusters for markers
- Font Awesome
- For icons in tab of navbar
- Flaticon
- For customizing marker icons
- Figma
- To create the skeleton mock up
- Git
- For version control
- GitHub
- To create repository
- Netlify
- To deploy web app
- Google Font
- To select font families used for web app (i.e. Raleway)
The web app is hosted using Netlify.
Dependencies
- foursquare
- To obtain search results on searched locations
- To obtain pictures based on fsq_id
- To obtain tips based on fsq_id
- Data.Gov.Sg
- To obtain 2 hour forecast within Singapore
- Axios
- To call API
-
Leaflet markers' icons
- Downloaded and edited from Flaticon
-
Liedman routing machine
- Plugin from Liedman
-
Singapore Flyer image
- Downloaded from Tiqets
-
China Town image
- Downloaded from Wowabouts
-
Marina Bay Sands image
- Downloaded from Getyourguide