82%
Round 1 · Initial high-fidelity prototype
7 test participants
Making a complex booking feel predictable
I translated customer research into a responsive tyre-booking experience, then refined the design through two user-test rounds and an annotated handover.
- With
- Commonwealth Bank Innovation Lab team, UX research specialist, Head of design and JAX stakeholders
- When
- Delivered 2017-2018
- For
- JAX Tyres customers
Booking Dashboard
Desktop
Booking Dashboard
Mobile
Results
Higher perceived usability in the second test
System Usability Scale (SUS) · Two user-test rounds
90.6%
Round 2 · Refined high-fidelity prototype
6 test participants
Both user-test rounds used high-fidelity prototypes, the same eye-tracking setup and SUS, with minor wording adjustments to questions 1 and 10. Percentages are shown as originally reported. Different testers evaluated the initial and refined prototype versions.
Tested prototypes and annotated handover · Not implemented. Final handover amendments were not retested.
Test participants completed the ten-item System Usability Scale, with minor wording adjustments to questions 1 and 10 so they read more naturally. The supplied tables already reverse-score the negative items, then express favourable 1–5 totals as percentages out of 50. The figures above preserve that original reporting. Standard SUS scoring converts each item’s contribution to 0–4 before scaling the total to 0–100; these figures have not been recalculated using that method.
The comparison provides directional evidence of perceived usability alongside the observed findings. It does not establish statistical significance, task success, conversion or revenue improvement.
Original supplied Round 1 user-test score matrix; negative items are already reversed.
Original supplied Round 2 user-test score matrix; negative items are already reversed.
01 · Business problem & evidence
The booking journey was hard to follow
Earlier testing of the existing website had found major difficulties with buying tyres and booking fitting online. JAX wanted to grow online sales, bring better-informed customers into its branches and build trust.
The solution also needed to serve people researching tyres or contacting a branch without booking online. I needed to make the booking steps clear without letting booking controls dominate those other journeys.
Who it served
JAX Tyres customers choosing tyres and arranging fitting, across desktop and mobile. The earlier Research & direction phase produced the behavioural personas below.
Alex
The cautious novice
Low tyre knowledge and reluctant to make a large purchase through the website.
Blake
The well-informed, high-touch customer
Knowledgeable about tyres, but prefers the human contact of customer service.
Charlie
The savvy online booker
Knowledgeable, researches independently and is comfortable transacting online.
The design needed to support different levels of tyre knowledge, with both reassurance and access to detail.
What needed to change
Earlier usability testing
Make the required steps clear
Testing of the existing website had found difficulty purchasing tyres and booking fitting. The design challenge was to make the required steps clear: what was complete, what remained and how to change a selection.
Research & direction
Support different starting points
The earlier interviews and survey found differences in how people searched for tyres. Those who knew their tyre size could start there; others relied on vehicle details. Search preferences also differed by car knowledge.
Business rules & MVP agreement
Keep the booking requirements clear
JAX needed vehicle details to validate tyre fit, and a branch was required to place a booking. The agreed MVP flow required vehicle, tyre-size and branch information while allowing different entry points.
Design & testing goal
Turn the agreed MVP flow into interactive, high-fidelity desktop and mobile prototypes. Test whether people could follow the booking steps, understand vehicle matching and interpret the supporting information, then use the findings to refine and document the design for handover.
02 · Decisions & findings
Make the journey clear, then test the details
I explored the booking model, built interactive prototypes and worked with the Commonwealth Bank Innovation Lab team to test them. The findings informed the changes below, with tested refinements distinguished from final handover amendments.
How we worked
Concepts & alignment
I explored three booking concepts, comparing how they balanced a clear overview with the complexity shown on the page. The client agreed to take the dashboard concept into detailed design and testing.
Prototyping & preparation
I developed interactive high-fidelity desktop and mobile prototypes. A separate internal pre-test helped us catch obvious, preventable issues before Round 1, so they would not distract participants or affect their feedback.
User testing & refinement
Working with the Commonwealth Bank Innovation Lab team, we evaluated two prototype versions using the same eye-tracking setup with different testers. I consolidated observations into two reports and used the findings to refine the design.
Annotated handover
I prepared desktop and mobile designs, interaction annotations and recommendations for handover. Further amendments made after Round 2 were documented in the final deliverables; those changes did not receive another usability round.
2.1 · Booking model
Make the whole journey understandable
The agreed flow supported different starting points. The interface needed to show what was complete, what remained and how to change a selection, while leaving room for browsing and branch contact.
I sketched three concepts to compare how much booking guidance stayed visible and how people could access the details. Each approach made a different trade-off between an overview of the steps and the complexity exposed on the page.
Concept 1 · Explored
Tabbed booking panel
Concept 1 · Persistent panel beside the product page. Explored; not selected.
Kept the required steps, embedded search and summaries beside the page.
Persistent booking content could distract people who were browsing. Its search, filters and CTAs could also compete with controls on the page.
Concept 2 · Explored
Progress summary bar
Concept 2 · Collapsed progress bar. Step details could be expanded. Explored; not selected.
Collapsed the panel into a horizontal bar, retaining access to search and step details.
Collapsing the panel reduced its persistent footprint, but booking-related complexity remained for people who did not intend to book online.
Concept 3 · Selected
SelectedBooking dashboard
Concept 3 · Chosen dashboard wireframe. Client/team agreement preceded prototype testing.
Brought all booking steps together in one overview, with progress guidance appearing after a booking interaction.
Multiple forms and CTAs could still overwhelm people, particularly as further features were added.
Keep search and step details within reach
Concept 1 embedded tyre search and summaries in the persistent panel. Concept 2 moved the details into expandable sections below a horizontal progress bar. Both explored access without leaving the product page, with different amounts of booking content exposed while browsing.
Concept 1 · Tyre search and filters embedded in the persistent booking panel. Explored; not selected.
Concept 2 · Expanded tyre summary below the progress bar. This is an explored interface state, not a test finding.
Explore a journey without online booking
Both concepts included scenarios where people found tyres and branch contact rather than booking online. These wireframes illustrate why persistent booking controls were a design concern; they do not establish that people were distracted in testing.
Concept 1 · Finding tyres and branch contact without online booking. The booking panel remains visible in this modelled scenario.
Concept 2 · The same offline-contact scenario with a summary bar. This illustrates the design exploration, not measured distraction.
Check tyre selections against vehicle details
Both concepts explored requesting vehicle details after a tyre-first start, then showing a warning if the selected size differed from the manufacturer’s recommendation. The states below show how each concept presented that warning. They are proposed interactions, not evidence that fit errors were prevented; a different size could also be an intentional choice.
Concept 1 · Proposed warning when tyre size differs from the manufacturer’s recommendation, with options to revisit the selection.
Concept 2 · Proposed warning when tyre size differs from the manufacturer’s recommendation. This does not establish tested error prevention.
Apply the chosen model to different starting points
The selected dashboard wireframes carried vehicle-first, tyre-first and branch-first routes through the same booking requirements. The overview showed the selections already supplied and those still needed. These are routes within Concept 3, rather than three further interface concepts.
Chosen Concept 3 · Vehicle-first desktop route, with vehicle and tyre details supplied and branch selection still to complete. Wireframe exploration, not a test result.
Chosen Concept 3 · Desktop tyre-first route, with vehicle and branch details still to complete. Wireframe exploration, not a test result.
Chosen Concept 3 · Desktop branch-first route, with vehicle and tyre selections still to complete. Wireframe exploration, not a test result.
The supplied mobile wireframes explored the same model on a smaller screen. They are concept-stage evidence, distinct from the test prototypes and final handover shown later.
Chosen Concept 3 · Mobile vehicle-first route. Supplied wireframe, not a final handover or test-result image.
Chosen Concept 3 · Mobile tyre-first route. Supplied wireframe, not a final handover or test-result image.
Chosen Concept 3 · Mobile branch-first route. Supplied wireframe, not a final handover or test-result image.
2.2 · Prototype evaluation
Test the experience through working prototypes
After agreeing the high-level concept, I refined the wireframes to consider the details of the MVP features and content. The Axure prototypes then supported key routes through the required vehicle, tyre and branch selections.
I designed and developed interactive desktop and mobile prototypes in Axure, then collaborated with the Commonwealth Bank Innovation Lab team to evaluate the journey and refine the design. Both user-test rounds used high-fidelity prototypes and the same eye-tracking setup, with different testers and prototype versions.
Before Round 1 · Internal pre-test
We first tried the prototype with six employees who were not involved in the project. The aim was to catch obvious, preventable issues that could distract participants or affect their behaviour and feedback in the user tests.
Round 1 · User test
Initial high-fidelity prototype
7eye-tracking sessions
Round 2 · User test
Refined high-fidelity prototype
6eye-tracking sessions
Round 1 · I observed the prototype test with the Head of Design and JAX stakeholders at the Innovation Lab. The screen shows the prototype and red eye-tracking trail.
Round 1 · Feedback and findings recorded on sticky notes and organised by screen.
Turn observations into design priorities
I consolidated the observations into two test reports, separating what worked from problem statements and actionable opportunities. That synthesis clarified what to preserve, change and validate next.
Internal pre-test · Prepare the prototype
Six Netstarter/Salmat employees who were not involved in the project tried the desktop and mobile prototypes before Round 1.
The tasks covered booking suitable tyres for a vehicle, booking a specified tyre size, and finding a local store to contact about pricing.
Feedback led to bug fixes and a quicker mobile route from the store page back to the dashboard. It also highlighted that technical content needed to be more accurate.
This was a separate preparation step before the two eye-tracking user-test rounds. It is not included in their participant counts or the reported SUS results.
Round 1 · Eye-tracking user test
Seven participants, including recent JAX online bookers and staff, tested the initial high-fidelity prototype at the Innovation Lab. This user-test round followed the internal pre-test. The Round 1 report also recorded the dashboard flow as straightforward and the progress bar as clearly indicating booking status.
Round 2 · Eye-tracking user test
A different group of six testers evaluated the refined high-fidelity prototype using the same eye-tracking setup. The 82% and 90.6% results reported above belong to the two user-test rounds.
2.3 · Relevance & trust
Show why the tyres are relevant
In Round 1, participants missed vehicle information and two distrusted “Popular Choice”, assuming the list benefited JAX. I brought the vehicle match closer to the choice and changed the label to “Best Sellers” in the next prototype.
Prototypes used in the two eye-tracking user-test rounds. The reports support better acceptance and visibility, rather than a measured task-success improvement.
Vehicle entry still needed work: one knowledgeable participant confused purchase year with model year, tried twice and then needed help.
Round 2 still recorded safety-information needs, concerns around the “Budget” label and mobile comparison problems. These remained priorities for further refinement, rather than successful fixes.
Reassure customers without an image of the car
During MVP prioritisation, feature #33, “Car Selection Image”, was dropped because the effort required from JAX Tyres was too high. I needed a reassurance cue that did not rely on an image of the selected car.
I proposed the vehicle brand logo alongside the vehicle details as a feasible alternative. The aim was to add a recognisable visual cue, making the selected vehicle easier to notice and confirm than vehicle text alone.
The brand logo was present in both user-test prototypes. The Round 2 refinement changed the placement and prominence of the vehicle-matching reassurance; the findings above concern that reassurance pattern as a whole.
Handle different front and rear tyres
Some vehicles need different tyres at each axle. I designed separate size, quantity and unit-price controls, a combined total, and switchable specifications. Round 2 recorded front/rear pricing, selectors and specification tabs among the behaviours that worked well.
Final handover · Separate front/rear sizes, quantities and prices, with a combined total and specification tabs. This illustrates behaviours positively recorded in testing; later handover amendments were not retested.
2.4 · Booking expectations
Name the next step before asking for commitment
“Proceed to checkout” created uncertainty. Mobile participants expected to choose a booking time first, or worried the action would lock them into a purchase.
The final handover changed the action to “Proceed to select date/time”, making the immediate next step explicit.
Proceed to checkout
Proceed to select date/time
Final handover · The updated action names date/time selection as the immediate next step. This final wording did not receive another usability round.
2.5 · Price & service comprehension
Make inclusions visible, then make them clear
Most testers missed price inclusions in Round 1. I strengthened their visibility; Round 2 recorded them as working well across listing, details and checkout.
Meaning still needed work. “Freight” was unclear, and a tester lost trust after confusing balancing with alignment and discovering alignment cost extra.
The handover replaced “Freight” with “Delivery to store”, expanded inclusion descriptions and documented a “Services supported” section for mobile fitting.
Freight
Delivery to store
Final handover · “Delivery to store” replaces “Freight”. The later terminology amendment was not retested.
Round 2 recorded the promised follow-up call as reassuring, while service explanations still needed work.
The handover paired interface screens with numbered notes for interaction behaviour, conditional content and amendments. This checkout example shows the screen alongside the notes for markers 1–8.
Final handover · Checkout screen with numbered interaction markers. The matching notes for markers 1–8 are shown alongside. Final amendments were not retested.
Final handover · Corresponding notes for markers 1–8 cover the order summary, included services, store representative, mobile fitting, email entry, date/time selection and a recommendation to clarify alignment versus balancing.
Reflection & project outcome
What testing taught me, and what remained
What I learnt
Test how people interpret content
Two participants interpreted “Popular Choice” as benefiting JAX. I learnt to examine the meaning and credibility of recommendation labels during testing, and would explore this earlier in future projects.
Prominence does not guarantee attention
I was surprised that testers missed vehicle information even though it was prominent at the top of the interface. The dark strip made it look like part of the navigation, and people moved straight to the main page content. I learnt to consider how visual context affects attention, alongside position and prominence.
What remained
Planned next phase
The next phase would have added the details and remaining features needed for a live experience, including wheel purchasing and the full checkout process.
Why the work stopped
JAX was very happy with the design solution, and we had a strong relationship. Our team was discussing whether to continue, but the eCommerce platform we offered was not compatible with JAX’s POS system.
JAX chose another agency that could support a compatible eCommerce platform. As a result, I did not get the opportunity to complete the remainder of the design solution.
Start with the customer’s decision
Explore the collaborative research, customer model and MVP priorities behind this booking experience.
01 · Research & direction →