// VicRoads - Custom Plates

Creating a fresh web experience prioritising user experience and accessibility.

Stylized text saying "Represent Your Vibe" next to the rear of a car with a license plate reading "MISGTR." The plate also features Japanese characters and "Victoria."

The VicRoads Custom Plates website has remained largely unchanged over the years in terms of its user experience flow. However, given the recent decline in conversion rates, it has become imperative to initiate user feedback sessions to collect insights about the website's current state and identify areas for improvement.

The project commenced with live-site user testing to identify the existing issues. After collecting the data, we developed multiple flow prototypes to determine the most effective approach for each scenario.

Following the conclusion of prototype testing, we redirected our focus towards establishing the website's overall direction and optimizing the purchasing process. We implemented this strategy alongside a fresh design system, ensuring that consistency and accessibility remained our top priorities.

Note: This project was undertaken at my full-time work placement at Bound Interactive.

The Project

The current system for custom plates offers multiple ways to search for a combination and make a purchase. However, this variety of options is causing confusion in the process. Additionally, each plate design comes with specific limitations and acceptance criteria. For instance, some plates must begin with a number, while others require a starting letter. This posed a significant challenge for customers who were unsure about the design criteria for a plate they liked.

Furthermore, the website displayed inconsistent styles, with certain pages having different styles and functionalities compared to others. In addition, we assessed accessibility ratings and found several styles that did not meet the A rating standard. To address these issues, we plan to implement a design system that will ensure consistency across the site.

Current State

smooth gray gradient background
A series of mobile app interface screenshots displaying a vehicle plate customization and purchase process. It includes sections for creating a plate, choosing options, confirming details, and completing checkout. The interface features input fields, buttons, and price details.
Screenshot of a custom license plate creation webpage with options for selecting styles and combinations.

After many iterations of testing wireframes, we nailed down the flow to one concept that has the most success and ticked all boxes from a brief point of view. Users said the flow elevated pain points from the current site and made the process straightforward. Not only that, they could easily navigate to a plate design they liked and understand the design limitations per plate.

Wireframe Prototyping

A design system layout displaying various button styles labeled "Example button text" in rows of three. Button colors include green, dark gray, light gray, and outlines, with right-pointing arrows beside the text. The header reads 'Custom Plates Design System' and 'Inputs: Buttons.'"
Typography guide for headlines and body text showing size and style variations from H1 to H6, and body text with respective font sizes.
Grid of various design system icons including eye, lock, camera, search, cross, plus, minus, question mark, circle, arrow, credit card logos, vehicle symbols, and miscellaneous symbols.
Collection of logos including 'Custom Plates,' 'VicRoads,' and 'Victoria State Government.'
Color palette from "Custom Plates" design system, featuring shades of green, black, gray, red, and white.

A brand-oriented design system was developed from the ground up to integrate branding elements into the website and establish a uniform visual framework throughout the site. Implementing a design system also ensures the website's readiness for the future, as it should possess the flexibility to accommodate any potential scenarios when creating additional pages in the future.

Subsequently, we conducted accessibility tests, resulting in an AA rating for the entire website.

Design System Snapshot

Website homepage for custom license plates, featuring options to create and restyle plates, popular plate designs, and user submissions. Includes navigation menu, promotional banner, and subscription form at the bottom.
Blurred image with bright red and black tones, including a white rectangular area with unclear text.
Website showing custom license plates options for cars and motorbikes, featuring available designs and benefits. Includes images of license plates, reasons to choose custom plates, a section showcasing various car styles, and footer links to social media and company information.
Step-by-step screenshots of an online custom license plate ordering process, including checking plate availability, entering personal and payment details, and confirming the purchase.

We generated individual flows for all scenarios, creating both desktop and mobile interfaces. This provides a straightforward understanding of the expected product functionality for all stakeholders. All these flows were crafted within Figma, leveraging the new design system to offer developers style guidance.

Flow Development

Vintage black and white photograph of five men in an open-top early 20th-century automobile parked on a street. Two children in period clothing stand nearby. The backdrop includes a stone building with a sign advertising cab, coach, and buggy hire services.

Featured Product

Featured Product

Webpage showcasing a heritage plates service with a historical photo of men in an old car, a section about Victorian history, and images of handcrafted plates, display boxes, and certifications.

VicRoads required the capability to showcase featured products and create customised landing pages for these items. One highly sought-after product is the heritage number plates. In the design system, we incorporated colour flexibility, enabling product pages to be customised to align with the product.

Have an idea? Let’s work together

Whether you have an idea, a vision or simply a question to ask, feel free to get in contact with us. We're enthusiastic about collaborating with you, regardless of the scale of the project.