Home | About Chris Hope | Contact Chris Hope | Search:

Personalised Plates Version 5

Posted November 17th, 2010 in Case Studies

We launched version 5 of the Personalised Plates website a week ago in the early morning of November 10th 2010. The site had a complete redesign and the backend was changed from a custom built PHP/MySQL to SilverStripe.

Screenshots of previous versions

You can view screenshots of version 2 here, and versions 3 and 4 here. I'll have to see if I can rustle up a working version of the 1st version of the site at some stage and present screenshots of the homepage for all versions in a single post.

Screenshots of version 5 - homepage

Here's the homepage. The "create a plate of your own" banner changes in sequence, using a session variable to track the last one seen. If you continually visit the homepage you will see the other 3 banners as well.

Screenshots of version 5 - successful plate search

The next screenshot is of a successful plate search.

The user can change the type of car image from the drop down box (current selections are Sedan, SUV and Coupe and we will probably add some more later) to see what it would look like on different car types.

Also from this page they can select their vehicle type, plate style (i.e. the image and/or message that appears around the plate legend), add spacing to the plate if it can fit it (i.e. extra spaces between the letters), zoom in to see a bigger image, and then proceed to the next step when they are ready where they can either buy or send an enquiry.

Screenshots of version 5 - choosing a plate style

The third screenshot below shows what happens when the user clicks one of the plate styles. An inline window appears where a list of plate styles can be selected. In the example below the star sign plates are shown.

The inline popup works similarly to the Facebox dialog which I've covered many times before on this blog, but was a custom rolled jQuery script designed to specificially suit this website. The content is loaded via an AJAX call but it can also be displayed in a regular browser window with the website chrome.

You can test this yourself by right-clicking one of the plate style links on the website and opening in a new window. The code on the server-side detects whether or not it's an AJAX request and serves the page either with the full template (if it's not) or just the bare content (if it is).

Screenshots of version 5 - spacing

The final screenshot below shows the spacing function. This works in a similar way to the style selection shown above where the content is loaded via an AJAX request into an inline dialog.

When any of the buttons are clicked the data is submitted back to the server and the plate image re-generated with the new spacing applied without reloading the whole page.

Website design

The website design was done by Spitfire who supplied the Photoshop files to me and I then did my magic and turned it into a useable HTML template and added the code to make the whole site work.

Backend programming

The site was developed using Silverstripe as the CMS/Framework and it's been made in a way that almost every element on every page can be updated by the marketing team at Personalised Plates, even the text on the submit buttons and the little information flyouts.

There is still some code carried over from the older version of the site in more or less its original form to handle plate searching, image generation, form submission and the like; basic library stuff that's been around for a long time and is tried and tested.

About Personalised Plates

Personalised Plates have been selling personalised car registration plates in New Zealand since 1988 under contract to the Land Transport Authority. I have been working with Personalised Plates since 1999 and have built all of the iterations of their website.

Visit the Personalised Plates website to search for plate ideas for your car.