Driving towards zero road deaths through an engaging educational playbook
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.
Highlights from my design process
Jump to a section!
Building confidence in the solution
After developing wireframes through multiple iterations, it was time to pressure test some of the assumptions made in my process — this was done first hand through moderated user testing to gather qualitative feedback and enable me to be more reactive in questioning.
What needs validating
Where high value flows, functionality and design decisions/assumptions need validating.
General way-finding
Perceived value/scope, navigation
Vehicle presentation
Interaction, comprehension
Vehicle ratings
Comprehension, value
Vehicle tabs
Interaction, comprehension
Shortlisting
Expectation, value
Graphs (pie/bar)
Interaction, comprehension, value
Quick quiz
Interaction, comprehension, value
Sharing
Behaviours, expectations
Test design and planning
I designed a Figma prototype flow that walked through each focus area and wrote a test guide/script. The test used a variety of methods to understand expectations, comprehension, interaction behaviours and value.
To structure our test notes, I created a Miro table which we would later leverage Miro's AI tools to collate.
Our budget enabled us to test 2 key audience groups over 3 days, resulting in 8 x 90 minute moderated tests.
Recruitment specification:
Mix of metropolitan, sub-urban and rural participants
5 young adults searching for their own car, 18 - 25 y/o
3 parents helping their children to find their first car, 40 - 60 y/o
Synthesising insights
The insights captured in each session were grouped into key themes in Miro, with the help of Miro AI to organise and extract insights. We also exported the table data into Perplexity to cross reference the findings.
Principal insights
I found that our users shared the following overarching sentiment, which formed a set of principals to apply across the experience:
Language significantly influences how receptive our users are to recommendations`
Facilitating comparison throughout the website is important when offering multiple options
Use TACs credibility to build confidence through a process that can cause anxiety
Use cost as a key driver to make suggestions more compelling
Design recommendations
Based on insights I also formed 56 recommendations across the experience. These were grouped into 6 themes — language, features, layout, credibility, component and SEO.
All recommendations were documented in a ClickUp product definition alongside in-situ annotations across the wireframes, ensuring all learnings made their way to the product!
Minimum loveable product
Designing for a digital native audience, we felt confident to push for an experience that prioritised interactivity and motion for launch — agreeing this with our client as a non-functional requirement.
This led to a series of interactive components to drive engagement while simplifying jargon heavy car content and tailoring it to the user based on their needs.
Car search tool
Swipe through a deck of cards to compare vehicles, using a simplified rating system that prioritises features that are important to young people.
Quick quiz
In page, low barrier to entry quizzes to offer tailored, relevant transport alternatives and which kind of cars are right for them — all controlled from the CMS.
Infographics
Breaking down costs and facilitating comparison across different methods of transport — data point and categories fully CMS controlled.
Applying systematic motion
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 an 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
Design+Dev collaboration
Working closely with the Engineering Manager, we pushed to elevate our team behaviours and processes. Our goal was to not only improve quality and efficiency, but to embed behaviours that nurture collaboration and enjoyment.
We carried out multiple delivery team workshops to define our ways of working early in the project, pulling in retro learnings from previous projects.
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.
Design system to <code-parity>
In previous design systems I had created a layer of abstraction across token and component naming, following formats like material designs system.
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.
Project learnings
What I'd do differently next time.
Sharing deep thought process
With our team having ownership and autonomy, we made a lot of exciting progress having deep context of decisions made. When it came to senior stakeholder sign off, the client often kept this internal and couldn't reiterate our rational.
Break down key features and milestones into smaller, more manageable parts to help comprehension and bring stakeholders along on the journey.
Empowering developers to own front-end decisions
Through design reviews and debates, we realised developers were trying to stay too close to the Figma spec's auto-layout structures/divs, forcing Figma platform nuances into code and not respecting their own expertise and opinions.
Empower developers to interpret, change and own the front end as experts in their field.
Communicate my design intentions without prescribing implementation.
Knowing when done is better than perfect
Pushing towards our 'most loveable product' with a strong focus on front-end polish, it was easy to spend time on a pixel perfect production site. With time and budget running out, prioritising the right things was so important.
On the final push of building a o-1 product, it's easy to focus on micro details and detriment the macro — always prioritise around the big picture, not just what you're looking at.