VicRoads
— It shouldn't be so hard to get custom plates...
▲ End-to-end, dev-ready screen designs for the mobile custom plate experience.
"B*($#y thing!" *
Imagine you'd typed a few combinations in to an online form to see if you could get a custom number plate for your beloved car:
SUPER... nope. So you get a little creative: 5UPER, still no. 5UP3R, nup. SOOP3R, no! And lucky too, you didn't even really like that one.
How many times would you try? Well, like most visitors to the Vplates site, you'd probably have bounced by now having given up.
I came in to VicRoads and immediately identified shortcomings through heuristic analysis of their custom plates site. I uncovered all the friction their customers experience in the custom plates site through internal interviews and anecdotal customer feedback, accumulated over several years. There was plenty to do.
* A little verbal 'insight' from a team member trying to demonstrate how to search for plate combos...
Role
UX & UI Design Lead
Team
UI Designer, Product Owner, Business Analyst, Data Scientist, Development Lead.
Timeframe
3 months
Tools
Figma, Optimal Workshop, LookBack, digital whiteboards, Jira and Confluence...
Green light
The CCO and product manager responsible for Vplates engaged me to uplift their self-service, custom plates ordering experience. As a product design lead I set to work with my team to audit the current site. As mentioned, I conducted heuristic analysis and identified numerous opportunities to ‘tune up’ the current experience. Beyond this I developed and implemented a testing plan to ensure we could robustly test features as well as validate and prioritise them for future development.
Findings
It was quickly apparent that Vplates had no design assets. So, we quickly set to work developing a style guide of Figma components… the beginnings of what would become a bespoke design system for the Vplates team to use ongoing.
Since the current site was unfortunately lacking in accessibility compliance, we ensured that, as we built atomic UI from scratch, we imbued A11Y principles in every new design. We’d strive for AAA wherever possible!
We had a lot of fun with innovative form fields that resembled number plates frames, being careful not to sacrifice usability or accessibility compliance.
▲ A selection of components from the library we built.
Testing
As part of our holistic design process we conducted various testing sessions to validate concepts as well as actual features and the proposed new designs:
- 3 rounds of 5 participants (15 total) usability tests to collect verbal insights and system usability survey results.
- 8 internal sessions with customer service agents to validate concepts for new and improved page designs.
- 100+ Chalkmark studies to quickly validate individual usability interventions and improvements..
▲ We used Optimal Workshop to compare task completion times.
Outcomes
Upon completion of this scope of work my colleagues and I proudly hand-over end-to-end flows for all the primary checkout flows for a vastly improved, shortened and enjoyable shopping experience.
Within this piece of work we delivered the following:
- A design system of Figma components in order to redesign the website with accessibility in mind.
- Usability tests to validate the shortened checkout flows and to remediate known pain points.
- Dev-ready, high-fidelity designs for immediate development.
Above an beyond our scope we also delivered:
- Page designs for premium products such as 'Heritage', 'Premium' and 'Deluxe' product plates..
- Designs for new features such as a combination suggestion tool - a tool that suggests available plate combos if your search is for a plate that's already owned by another person.
▲ The recommendation tool to help customers find plate combinations...
▲ An example of a feature product landing page for 'Heritage' plates.