Web App Development Process
Web App Development - SacCab.com
My take on Google Maps API for a local taxi cab company. This online application allows visitors to take advantage of Google's database of addresses, place names, airport codes and general descriptions of locations to be presented as suggested pickup and drop off locations. The extracted information from the map is then processed by a user side application in order to display the map, distance, trip time, fare, applicable discounts and final price - all before submitting a request for booking the cab. In the second stage the app validates the input, helping both the passenger and the cab company to avoid useless entries and bot submissions. jQuery UI is embedded for easy date and time picking customized for the current date and enforcing the "6 hours in advance" rule. Finally the use policy is accepted and the service request gets submitted to both the taxi driver's and client's email.
The online calculator and booking application was intentionally placed directly on the home page of the site to provide a clear call to action.
Choosing the Color Palette
The color choices for the cab company were almost obvious from the first comments of the client's. Conveying the experience, security and recognizability were the main goals. First thing that comes to mind is yellow, thus the choices of colors are warm yellow to orange and few complimentary choices.
The automotive upholstery was chosen for the background texture with a color of the palette choice. The iconical checkers pattern is an essetial piece for any taxi. And a touch of class in form of chrome elements from way back when.
Toy 3D model of a taxi cab was customer's choice on stock imagery site. This little cute and happy image develops interest and takes away the routine feel by apeeling to the child living inside of each of us.
Worth mentioning is that the positioning choice of the image was intentinally interacting with navigation, which brought up a challenge of making it "touch" the buttons without interfering with their functionality.
Sacramento Tower Bridge image was also a designer's choice to connect the name to the landmark of the city. Captured by yours trully specifically for the given project.
The infographic designed in metropolitan style for easy readability. This info graphic is used to explain simple 4 step procedure to book a cab online. Clear, flat design flows from step to step, supported by numbers and colors indicating the logic behind the process.
Google Auto Complete API
One of the key elements is location suggestions for accurate route calculation and avoiding false address entries therefore improving UX on the app. Simply put, the user enters anything they know about the location and get 5 results.
Google Maps API allowed me to do exactly that. A little piece of code connects to the database and using Ajax, feeds the suggestions to the client-side in the form of a drop down list.
Here is what that looks like for the user.
Validate Locations with Goolge Maps API
In this portion the function called "initialize()" linked to the Calculate button submits the entered string into the coordinate detector which responds whether it exists and alerts the user in case it was not recognized as valid.
In the ideal scenario the user should have picked one of the suggestions or entered their location correctly, and thus would not see this message. In that case the location would be successfuly detected and the route mapped.
Little Math Challenge - The Calculator
At this point the application begins to calculate the travel distance, time, route, fare, applicable discounts.
This information is passed to the next step - the booking.
Embedded Airport App
Local Sacramento International Airport information is embedded live as a direct feed from their mobile app. This allows the visitors to effortlessly get all necessary information in one place in case they are traveling to the airport. The embedded app demonstrates arrivals and departures with their ETA and flight status.
2nd Version - Responsive design for mobile devices
Optimization for mobile devices was a 2nd version of this project a few months later. The client had some customer feedback in which they expressed their wish to be able to use this page on their tablet or mobile phone, so I implemented the necessary design to make it work on everything from desktop to low resolution phones.
The only step that's left is an actual mobile app. Will it be necessary? Time will show...