About the Project
Driving Report sought to bring automotive standards to various countries outside of the United States and Canada to provide consumers with the information they needed to make the contiencious decisions regarding their safety and history of their vehicle.
This website was designed to be a tool for automotive companies, insurers and consumers alike. Initially tasked with web design, the project expanded to include a tailored user experience, social media assets, and interactive elements.
Design tasks also eventually grew into implementation, designing the front-end website, including JavaScript and some SQL applications.
Website
Public-facing responsive pages, configured for both mobile and desktop, featuring a user-interface application and dynamic reports, providing customers with a system to retrieve, store and view detailed reports on selected vehicles.
A page describing the content of a report...
Inner-site adversitement banners
The clipboard graphic in the site logo was expanded upon with a 'Report Folder', including magnifying glass, representing the site's report-search basis.
Using the Report Folder graphic, three types of banners were created :
· full-width, with responsive centering
· a light mode for dark backgrounds
· a dark mode for light backgrounds
Site banners employed a combination of realistic and computer graphics on product-related pages, to immerse real-world products into the more abstract environment of reports, conveying a sense of consideration the abstract reports will give to real-world safety.
The effect in the following header-banner creates an illusion of the banner graphic overlaying the body text. This was accommplished by separating the two elements in the header-banner section with separate directives. One element following CSS rules for the header banner, and another mirroring the CSS rules for the document's body text (explanation to follow..)
Site forms
Site forms inherited the cool electric blue tones of the website as transparent labels, envigorating users to utilise the fields.
Web Application, Product Interface
Upon entering a car's VIN number from the heading banner of the site's index page, users are transported to the VIN lookup process, where they have a chance to see the content of a search's results.
Form transition logic
VIN Search Page : users enter valid VIN numbers, the search graphic indicates the search assembles appropriate data, while the last frame returns the associated vehicle statistics.
User Dashboard
Registered users are able to retain a collection of searches, containing the full reports of the selected vehicle.
An organization may assign users to manage data. Product upgrades are required for increasing the number of user access, as well as the rate of pulling reports.
Below is an example of a pop-up demonstrating purchase options based on user needs.
Clicking certain advaned options will provide users with a list of options to modify their current product.
While clicking on appropriate elements gives seamless options to add or change information.