Foundation Javascript

The project is a vehicle hire application which allows users to input information, validate the information, display the data in an appropriate format based on the information entered and provide meaningful feedback when the validation has passed or failed.

Visit the live site.
Check out the repository.
UX Process

The first step of the research process involved looking into the company, their values and what it was that they wanted to achieve. I followed this up by doing extensive research into who the target audience was which is crucial when creating the look of the design down the track. I then created a few use cases and personas which gives me a vision of the person who would be using this in the real world. “The Problem” was also something that I had to discover as this application would be solving a problem or need that the user had. I needed to figure out what this problem was in order to know how to fix this and give my user a positive experience.


I discovered two main points in my research that affected the design of the app. The first was that the user would like to compare prices of all available vehicles including estimated fuel cost to choose the most efficient vehicle for their travel. The second was if the user is travelling from overseas they may not know the locations of New Zealand well and would like a visual aid to see where they will be travelling to and from. Because of this research analysis I decided to show the user not only the standard cost for renting and fuel cost per 100k but also show the user how much it would cost them for the certain amount of days they are planning to travel for. I also equipped my application with a map that shows the route from the users selected pickup location to drop off location.


For the map, I used the Mapbox API along with the Mapbox Geolocation Directions Plugin. As this was a single page application I hooked up a plugin called Pagepilling.js which was used to create the single page scroll by section type of site that I needed. The taskrunner of choice for this project was Gulp which was used as a linting tool, live reloader and to run SASS which was written in the CSS Methodology style, OOCSS. The form validation for this project had to be pretty in depth as there were multiple inputs that required information in order for the system to progress. Ideally this project would be more responsive across all devices and I would like to put more of a flair on it when it comes to the design of it.