VICROADS
Multiple projects and initiatives to improve the online experience of licensing and registration services offered by Vicroads.
|
Ongoing (long-term projects)
|
|
|
TRANSACTION HISTORY UPLIFT
When customers make registration or licence renewal payments on the Vicroads website, they may want to access their past transactions for various reasons. This is where the transaction history page comes in.
This page had a lot of pain points. It was inaccessible, cumbersome and frustrating for customers to get to the transaction they needed. Here are a few key pain points and how I solved them.
This uplift successfully went live resulting in fewer customer complaints and more positive feedback.
This page had a lot of pain points. It was inaccessible, cumbersome and frustrating for customers to get to the transaction they needed. Here are a few key pain points and how I solved them.
This uplift successfully went live resulting in fewer customer complaints and more positive feedback.
PAIN POINT
Customers couldn't view any transactions until they filled in 3 mandatory fields, requiring them to think about the type of transaction and the date range it fell under. |
SOLUTION
Show customers their 20 most recent transactions by default. |
PAIN POINT
The 'Transaction type' field opens a long dropdown with an overwhelming number of options for customers to select from. |
SOLUTION
By separating the field into 'Transaction category' and 'Transaction type', we could display a shorter list of transaction types depending on the category selected. |
PAIN POINT
The start and end date are entered independently, but an error is thrown if these two dates are more than 3 months apart. |
SOLUTION
The ideal solution was to remove the 3 month date range restriction, but this could not be done due to technical limitations. The workaround designed was to have a dropdown with every quarter from the past two years, with quarterly date ranges, as the system cannot retrieve transactions from beyond two years. |
REGISTRATION PROJECT
This is an ongoing project aimed at introducing a new feature when a customer renews their registration. It touches on many different parts of the website, which makes it complex.
Note: I am unable to share visuals for this project, as the work is ongoing and confidential.
However, I have done my best to demonstrate my design contributions below!
However, I have done my best to demonstrate my design contributions below!
Design isn't always a linear process
Working in a large company with complex systems and processes requires an flexible mindset. This meant embracing chaos, communicating the value of design, adapting to changes in scope, working with a cross-functional team and presenting to stakeholders of all levels.
Here is an attempt to articulate just a few of the complexities we had to navigate through during the biggest project I worked on.
Here is an attempt to articulate just a few of the complexities we had to navigate through during the biggest project I worked on.
Design process
The teal boxes are parts of the process I owned or co-owned.
My contributions
|
CONCEPTUAL DESIGNS
Brainstormed ideas visually - early in the project to bring the business case to life, and later in the project to account for the new scope due to reduction and changes. |
DISCOVERY
Worked with the service designer on user research - including workshops, data gathering, synthesis, problem definition, personas, journey mapping, etc. |
|
WIREFRAMES / PROTOTYPES
Took research insights and iteratively designed wireframes from low fidelity to high fidelity. Based them on design principles, best practices and competitor comparisons. |
UI DESIGN
Used Figma to design build-ready screens using the design system, components/variants, autolayout and WCAG 2.1 AA accessibility guidelines |
|
PROOF OF CONCEPT
Worked on a PoC over a 2 week period after a decision was made to reduce the scope. This was a fast-paced and collaborative process to create a working prototype. |
STAKEHOLDER PRESENTATIONS
Presented our persona, journey map and part of the demo of our proof of concept to Vicroads executives (including the CEO) and State representatives. |
Zoomed out view of design research
My process for UI/UX delivery
CANCEL REGISTRATION FORM UPLIFT
My role was primarily to develop build-ready UI designs for the cancel registration form. I worked closely with another UX designer who conducted UX research and shared insights. The redesigned cancel registration form successfully went live with approximately 11% monthly increase in online adoption.
Flows for different scenarios
|
|
Select high-fidelity UI designs
Live website
DESIGN SYSTEM
The Vicroads website does not pass some accessibility criteria due to the legacy system it was built on, and challenges around changing and improving components. One of the major accessibility pain points is that the primary green of our brand does not meet the required contrast ratio against white - but this combination is seen in a number of places.
When a specialist in our team started to prepare a business case to create a new design system, I was keen to help do an accessibility audit. Given colour is one of the foundational elements of a design system, this was my starting point.
I performed accessibility testing on current and proposed website colours, designed components and created component states using variants.
When a specialist in our team started to prepare a business case to create a new design system, I was keen to help do an accessibility audit. Given colour is one of the foundational elements of a design system, this was my starting point.
I performed accessibility testing on current and proposed website colours, designed components and created component states using variants.
Accessibility testing current state - zoomed out view
Proposed accessible colours - zoomed out view
Other projects
SECURITY UPLIFT
Developed comprehensive UX flows and high-fidelity UI designs to roll out account security features.
WEBSITE OPTIMISATION
Delivered designs to optimise different parts of the website. This focused more on the quick fixes and small wins.
INFORMATION ARCHITECTURE
Conducted tree jacking and card sorting activities on Optimal workshop, bringing the top-level structure’s success rate from an average of 63% to 92%.
Developed comprehensive UX flows and high-fidelity UI designs to roll out account security features.
WEBSITE OPTIMISATION
Delivered designs to optimise different parts of the website. This focused more on the quick fixes and small wins.
INFORMATION ARCHITECTURE
Conducted tree jacking and card sorting activities on Optimal workshop, bringing the top-level structure’s success rate from an average of 63% to 92%.
|
|