Electric Vehicle ExplorerUI design and front-end development

Choosing home - First users place the marker or enter the address of their home location. Choosing work and generating data - Once they do the same for their work location, users are shown the length of their round trip and annual expenses for each of the four cars they have selected. Chart - They can expand the data to see it in chart form as well. Settings and controls - Users also have control over the gas and electricity prices used in the calculations. Car manager - Four cars are preselected when the user starts the application. They can change the four cars chosen at any point to anything they choose. Car manager, change car Live version


HTML5, CSS, JavaScript/jQuery, D3.js

Project Overview

With the UC Davis Plug-In Hybrid Electric Vehicle Research Center (PHEV), I helped build a web application for users to explore their daily commute expenses with electric and hybrid vehicles and compare their results with different vehicles.


My role was as a UI designer and frontend developer. I worked along side a backend developer who used Google Maps API and node.js to set up the application. We coordinating with a project manager to align on the goals of the project.