Let's talk about the journey, not the destination
Jump to a section and learn more.
Project context
Framing the projects problem space, design process and how I measured success.
Client
Transport Accident Commission
Team
Delivery Lead
Engineering Manager
Product Design Lead
3x Developers
Duration
10 months
Impact
Web education platform
VCE curriculum resource
What's the problem?
Problem space
This engagement aims to support that vision by targeting a vulnerable audience — first car buyers and young people.
TAC identified a lack of non-biased advice with little focus on vehicle safety information in the market, often leading inexperienced drivers to choose value over safety.
0-1 product design
Inventing and delivering a concept that turns uncertainty into a fit for market minimum lovable product.
Listen
Look
Think
Make
Measuring success
Success for this product means maximum engagement with content. We aligned with TAC on a set of benchmark metrics for launch+.
Product engagement
Building a picture of value through average session time, pages per session, click through and bounce rates.
Returning users
Quantifying content value over the length of someones car buying journey.
User satisfaction
Capturing nuanced qual/quant insights through embedded satisfaction feedback forms.
Designing a transparent, trustworthy and simple car search experience
Across the car buying journey — from the basics of how it all works, through to closing a deal and getting the keys — we knew one of the biggest opportunities is to help our audience choose the right car.
What does the 'right car' mean?
This was the first distinction we had to make, weighing audience and client priorities.
Audience priorities
A car they can afford
With features relevant to them
That facilitates their lifestyle
Is a legally viable option (P-plate regulations)
TAC's priorities
A car that meets the current minimum safety standards
A financially responsible option
Why other car search experiences missed the mark
Our audience of first car buyers were using search tools built to sell, not educate. They all followed the same principals detrimental to our audience:
Perceived value is the priority
Price, convenience and features dominate the interface, providing the only points of comparison/sorting.
Vehicle details are raw and jargon heavy
Each vehicle page surfaces all possible details with raw, un-processed jargon from the manufacturers.
Results reinforcing user behaviour
Regardless of what the user searches for, it's a great choice being reinforced by similar options.
Simplifying and quantifying how users see cars
I set off to take a singular vehicle and distill it down to what's important to our audience. This was the first iteration of a rating system concept that evolved into production.
High level rating system.
Four comparable categories.
Details surfaced in different contexts.
Crafting how users discover options right for them
I explored multiple ways to help our audience discover cars, from early to late stage users with varying levels of context.
Searching for a specific car.
Searching for something relevant to their needs
Being exposed to cars in context with content.
Guiding users to make the right decision
I knew transparency was important to further encourage our audience to choose the right car for them. Combining honest results with reasoning and alternatives, users could determine good options and compare between them.
Introducing minimum standards logic
Offering relevant, better alternatives
Surfacing how the ratings are made
Facilitating comparison
Building long term value users come back to
To complete the experience and support our users long term journey, I knew the ability to save, share and return to the content they had discovered would ultimately bolster engagement and returning users.
Saving cars in a comparable shortlist
Further facilitating comparison across saved options, good and bad.
Sharing content at multiple levels
Multiplying engagement across our users network and offering research flexibility through deep linking.
Building a code aligned, motion engrained design system
With a focus on front-end polish to deliver a minimum lovable product to our digital native audience, I knew the execution phase would be critical. Working with the Engineering Manager we pushed process and ways of working to new heights.
Aligning on behaviours before putting pen to paper
With the understanding that at the core of a design system is a set of behaviours agreed on by its users, I worked with the Engineering Manager to define our ways of working from the beginning.
Pairing early and often
Ensuring design isn't over promising early in the exploration phase and keeping developers in context before the build phase.
Comprehensive kickoffs
Walking developers through each feature's design spec, sharing rational and interrogating the design for any unaccounted for states/functionality.
In-code problem solving
Where design tools weren't as effective to problem solve, we made space to play in code and uncover solutions through in person design/dev pairings.
In-progress design reviews
To keep front-end polish and quality up, I moved the design review process earlier in the development framework — preventing mistakes moving through code review and merging to the main codebase.
Driving towards design system to <code-parity>
In previous design systems I had adopted a layer of abstraction across token and component naming, following formats like Material UI.
This although ultimately flexible, was often over cooked, opening up developers to misinterpretation and overcomplexity.
The My First Car design system removed that layer of abstraction. Built around the Tailwind CSS front-end framework, it shares identical naming conventions which means designers and developers are speaking the same language.
This helped us immensely from early context pairings to design reviewing in browser — all working towards doing things right the first time and driving the final fit and finish.
Applying motion at a system level
To support the push for motion at launch, I designed an 'Atomic Motion Framework' learning from more mature, public facing design systems such as Material UI, ebay's Evo and brand.dropbox. Their methodology was largely the same, but didn't directly suit the agency need for flexibility.
This system needed to be broad enough to support any designer and brand, but specific enough to offer consistency and reusability.
For My First Car, this systematic approach allowed us to implement motion widely across the site in a consistently satisfying way.
Form concepts
Why motion is being applied
Define feelings
What the motion behaves like
Design specification
How to visualise motion
Dev implementation
Working motion in code
