This a group project in which our team creates a bilingual single page website promoting l’Île-Bonaventure-et-du-Rocher‑Percé Park, one of SEPAQ's many famous national parks in Quebec. The site promotes the outdoor activities, destinations, and adventures that it offers for the summer session, as well as provides relevant information. Several SPA features are implemented to improve user experience. There are also features to help collect user input and locate the park's position. Software used: Visual Studio Code
The goal of this project is to experiment with making single page websites and available APIs. The site should be clear and easy to navigate with effective user interaction. The user interface should look good and appropriate. All relevant information about the park and its activities should be presented. APIs should be used effectively and intuitively. The feel, tone & point of view should be aimed at the users. Overall, it is a family-friendly website about a national park who's purpose is to provide information and attract visitors.
The first step in our process was to do research on the park itself. After all neccessary information was gathered and our content was prepared, we brainstormed about features and elements that would be integrated. Then, we worked on the design aspect of the interface, making sketches on several concepts, layouts, and compositions. When a final design is chosen, the coding phase started until we reached our first prototype. We spent a lot of time refining details of the website until we all loved the look and feel of it. Finally, we tested the sites to prevent any errors and then voila, our final product was completed.
One of the biggest challenges is the collective coding. Our coding styles are different, and three people coding together made it much more difficult to control and analyze. Errors are prone to happen, and we got plenty of them. Therefore, we would divide and assign individual sections to work on, then we would put it together and have a meeting a couple times a week for review and discussion.
Another particular challenge is the design of the website. We wanted the website to be as user-friendly as possible, so we had our friends and families to test it and provide us feedback, since a different set of eyes and perspective are very important. Choosing a suitable font and colors are also pivotal in presenting the feel of the park. The font used is Quicksand which is a symmetrical typeface with rounded edges and even strokes. This helps make the overall appearance look friendlier, while still retaining the clean and modern look. We settled on the blue as the main color theme, which speaks for the natural facets of the park such as the ocean and the sky, as well as feelings of calmness and peacefulness. Moreover, to provide better user experience, the website integrates SPA features like fetch API, animation, smooth scrolling, a reservation section, and integrated Google Maps API.
Check out the website here