A
Unknown brand, real doubt
Yuchai is a major manufacturer, but its name is new in Canada. Buyers worry about parts, service and resale before they look at price.
Case study · 2026
Yuchai Prairie · Canada
Designing a digital equipment buying experience.
From technical specifications to confident equipment decisions. A product-discovery and sales experience for construction equipment buyers in Canada.
UX/UI Design · Research · Information Architecture · Product Strategy · Interaction Design · Prototyping
01 / Overview
More than a dealership website. A path from discovery to quote.
Yuchai Prairie brings Yuchai excavators, electric machines and attachments to contractors, landscapers, farms and industrial operators across Canada's Prairie region.
The task was to turn a complex catalogue of machines, specifications, attachments and after-sales services into an experience that helps buyers understand the equipment, evaluate fit and move toward a quote with confidence.
What I did
- Competitive audit and market research
- Personas, jobs to be done, journey map
- Information architecture and user flows
- UI design and component system
- Line-draw motion for 3 hero moments
Deliverables
- Homepage, 16 sections
- Equipment catalogue
- Model page system for the full range
- Bilingual structure, EN / FR
- Coded prototype for handoff
Market
- Canada, Prairie region
- Alberta, Saskatchewan, Manitoba
- Imperial and metric units
- English and French content
- B2B and owner-operator buyers
02 / The challenge
Complex products. High-consideration decisions.
Construction equipment is not an impulse purchase. Buyers check machine size, working range, performance, attachments, service and jobsite fit before they contact a dealer.
The experience had to work on two levels: simple enough to scan quickly, detailed enough to support a serious equipment decision.
B
Information overload
Manufacturer documentation holds dozens of parameters per machine. Shown as one table, the decision-critical numbers get lost.
C
Support is invisible
Parts and service decide the purchase, yet most sites put them in the footer. The strongest local argument is missing from the first screen.
Business goals
- Position Yuchai as a professional long-term choice, not a budget one
- Turn visits into qualified quote requests
- Make parts and service a reason to buy
User goals
- Find the right machine class in one step
- Read real specs in the units I use
- Know who supports me locally before I call
03 / Competitive audit
Competitive audit.
I reviewed global manufacturer sites, regional multi-brand dealers and equipment marketplaces against the questions buyers ask before they make contact, then set the target for Yuchai Prairie.
| Criteria | Global OEM sites | Regional dealers | Marketplaces | Yuchai Prairie |
|---|---|---|---|---|
| Clear machine classes by weight | ||||
| Key specs visible without a PDF | ||||
| Imperial and metric side by side | ||||
| Parts and service on the homepage | ||||
| Local contact and region named | ||||
| Quote request in two steps or less | ||||
| English and French | ||||
| Distinct visual identity |
Strong Partial Weak or missing
OEMs inspire, but don't sell locally
Great product storytelling. No local stock, no named region, no one to call in Saskatoon.
Dealers are local, but generic
Templates built for many brands. Specs in PDFs, weak hierarchy, promotions over information.
The gap to own
OEM-level clarity and craft, combined with dealer-level support and a direct path to a quote.
04 / Research insights
How the leaders sell a machine.
I analyzed how established brands such as Bobcat, Takeuchi and Caterpillar structure product discovery, communicate machine fit and expose technical specifications. A pattern repeats: a few decision-critical numbers and an application story first, engineering data deeper in the journey.
| Research observation | UX implication | Yuchai Prairie response |
|---|---|---|
| Equipment decisions start with fit, not with full specs | Surface a few critical numbers first | Key-spec bar on the U10 page |
| Tight access is a major value driver for mini excavators | Translate dimensions into jobsite meaning | "Compact where access matters" |
| Professional buyers still need the technical depth | Use progressive disclosure | Performance, dimensions, lifting data |
| Attachments multiply what one machine can do | Make attachments part of product discovery | Dedicated attachment story |
| Confidence depends on support after the purchase | The dealer promise can't stop at the machine | Parts, service and local support across the homepage |
Manufacturers inspire
Strong product storytelling and clear model hierarchy. Little about the local dealer, stock or who to call.
Dealers are local
Multi-brand templates, specs often in PDFs, promotions ahead of information.
The gap to own
Manufacturer-level clarity combined with dealer-level support and a direct path to a quote.
05 / Buyer personas
Who buys a compact excavator.
Three buyer types came out of the research. They share the same fear: a machine that stands idle because a part or a technician is too far away.
OC
Owner-operator
Excavation contractor · Saskatoon"I need to know it fits through the gate and digs deep enough. Then I need parts in days, not weeks."
Goals
- Match dig depth and width to the job
- Keep downtime close to zero
Frustrations
- Specs missing or in the wrong units
- Sales calls before basic answers
Checks first
- Weight, dig depth, min. width
- Parts availability
LU
Landscaping business
Small fleet owner · Calgary"One machine has to do trenching, augering and cleanup. Attachments decide if it pays off."
Goals
- Get more jobs out of one machine
- Work quietly in residential areas
Frustrations
- Unclear attachment compatibility
- No view of the full setup cost
Checks first
- Auxiliary hydraulics, attachments
- Electric options
FA
Farm and acreage
Owner · Rural Manitoba"I buy a machine once and keep it for fifteen years. I want to know who I call when it breaks."
Goals
- Reliable machine for property work
- Straight advice, no pressure
Frustrations
- Unknown brands with no local dealer
- Marketplace listings without support
Checks first
- Who supports it locally
- Service and warranty
06 / Jobs to be done
What the site is hired for.
Each job became a requirement for a specific part of the site.
WhenI'm planning work on a tight residential lot,I wantto check width and dig depth in seconds,SoI shortlist only machines that fit.
AnswerKey stats bar on every model page: weight, dig depth, bucket force, min. width.
WhenI consider a brand I don't know,I wantproof that parts and service exist near me,SoI don't risk a machine standing idle.
AnswerTrust strip and "Support after the sale" on the homepage, not in the footer.
Whenone machine has to cover several jobs,I wantto see which attachments it runs,SoI can justify the investment.
AnswerAttachments section with use cases, plus AUX1 flow and compatibility on the model page.
WhenI'm ready to talk,I wantto describe my job without a sales script,SoI get a useful answer, not a pitch.
AnswerQuote form with intent chips: equipment, attachments, parts, service.
07 / Customer journey
From search to service.
The emotional low sits in the Validate stage, where doubt about an unfamiliar brand is highest. That is where the design had to work hardest.
Stage
Stage 1Discover
Stage 2Compare
Stage 3Validate
Stage 4Request
Stage 5Own
Doing
Searches "mini excavator Saskatchewan", sees an ad or a demo event.
Opens several models, compares weight, depth and width.
Looks for parts, service, the dealer's location and people.
Describes the job, asks for price and availability.
Orders parts, books service, adds attachments.
Thinking
"Who is Yuchai? Is this serious equipment?"
"Will it fit through a 36-inch gate?"
"If it breaks in July, who fixes it?"
"Will they push me, or help me?"
"Can I get this part this week?"
Feeling
Curious
Overloaded
Doubtful
Reassured
Confident
Pain points
Generic dealer look reads as "budget brand".
Specs in PDFs, mixed units, empty fields.
No visible parts or service offer.
Long forms, forced phone calls.
Parts pages disconnected from models.
Design response
HeroEngineering line-draw, clear positioning, two CTAs.
CatalogueFour classes by weight. Specs on the card.
TrustWhy Yuchai, Support after the sale, local About.
ContactIntent chips and one short form.
AftercareParts, service, manuals in the main nav.
08 / The core UX insight
Don't make users read a spec sheet before they understand the machine.
The core principle became progressive technical disclosure. Instead of showing every specification at once, the experience answers questions in the order a buyer asks them.
Q1What is this machine?Hero · model and class
Q2Will it fit?4 key specs · min. width
Q3What can it do?Access · digging · versatility
Q4What tools can it run?AUX1 flow · attachments
Q5What are the full specs?Performance · dimensions · lifting
Q6How do I get a quote?Is the U10 right for your job?
ScanEvaluateVerifyAct
09 / Design principles
Four rules for every screen.
Research findings turned into principles the team could use to settle design decisions.
Engineering over advertising
Technical drawings, precise labels and real numbers carry the brand. No discount banners, no stock-photo clichés.
FromGeneric dealer look reads as "budget".
Specs are the pitch
The four numbers buyers check first sit above the fold on every model. Imperial and metric, one tap apart.
FromSpecs hidden in PDFs and mixed units.
Support is part of the product
Parts, service and the local team appear on the homepage, before the buyer has to ask.
FromDoubt peaks at the Validate stage.
One clear next step
Yellow is reserved for the primary action. Every view offers one obvious way forward, with no pressure.
FromBuyers avoid pushy sales flows.
10 / Information architecture
Structure built around the machine.
Equipment is organized by operating weight, the way contractors already think about machine classes. Aftercare sits in the main navigation.
Home · EN / FR
Equipment
Mini · up to 6 t
Compact · 6–14 t
Heavy · 14 t+
Electric series
Model pages · U10, U17, U35…
Parts & Service
Genuine parts
Maintenance
Technical support
Service network
Attachments
Buckets
Breakers
Augers
Rakes & grapples
Quick hitches
Events
Shows
Demos
About
Yuchai Prairie
Powered by Yuchai
Contact
Quote form
Talk to an expert
Get a quote
Persistent CTA
The architecture separates discovery from evaluation. The homepage presents the brand and the equipment range; model pages increase technical detail step by step.
01
Hero
Position the brand. Two paths: explore or quote.
U17 line-draw02
Trust strip
Equipment, parts, service, Canadian access.
03
Machine classes
Slider plus grid. Pick a class by weight.
04
Featured models
U10, U17, U35 with key specs and tabs.
05
Why Yuchai Prairie
More machine, more value, more support.
Boom lamp assembly06
Where you work
Construction, agriculture, mining.
07
Attachments
One machine, many jobs.
Bucket exploded view08
Support after the sale
Parts, maintenance, tech support, network.
09
How we work
Machine, setup, support, partnership.
10
About and brand
Local access, global equipment.
11
Events
See it, test it, talk equipment.
12
Contact
Intent chips, short form, newsletter.
11 / Primary user flow
From discovery to inquiry.
One primary flow. Each step reduces cognitive load, and marketing information gradually gives way to technical information as purchase intent increases.
01Landing
02Understand Yuchai Prairie
03Explore equipment
04Select U10
05Scan 4 key specs
06Evaluate access and digging
07Inspect dimensions, performance, tools
GoalRequest a quote
Brand and valueTechnical depth
Purchase intent grows along the flow
12 / Visual concept
The machine is engineered on the website.
The visual language grew from the product itself: thin machine outlines, reference markers and engineering annotations. The interface behaves like an engineering document being drawn in real time.
13 / Colour and type
Taken from the machine.
Graphite and warm off-white carry the page. The accent is Yuchai yellow, the colour of the machines themselves, and it is used only for actions and technical lines.
Graphite#151B1FDark sections, text
Off-white#F5F4EFLight sections
Charcoal#252D32Specs, support
Light gray#E7E8E5Featured, about
Yuchai yellow#FEBC38CTA, line art
Prairie gold#A88B4AEyebrows only
Approximate share of the homepage surface. Yellow stays under 5%. Secondary headline tones meet WCAG AA for large text: 5.2 : 1 on graphite, 3.8 : 1 on off-white.
Display · Manrope ExtraBold
Aa
H1 · 80 / 0.95Built to work.
H2 · 56 / 0.95Compact power
H4 · 15 / 1.2Genuine parts
Label · 10 / .28em06 / Performance
Body · Inter Regular
Aa
Lead · 17 / 1.6Reliable equipment backed by the support you need.
Body · 15 / 1.65Genuine parts designed for Yuchai equipment.
Data · 13 tabularMax dig depth6.5 ft
14 / UI system
Square, precise, no rounded corners.
The UI balances two modes: expressive marketing moments and dense technical data. Large editorial type builds confidence; small uppercase metadata, hairline dividers and restrained yellow form the engineering layer.
Buttons
Get a quote →Download specs →
Primary yellow appears once per view. Arrows move 4 px on hover.
Line icons · 1.5 px
Equipment, parts, service, Canadian access. Same stroke weight as the line drawings.
Model tabs and tags
U10U17U35
Zero tail swingMultiple attachments
Unit toggle
ImperialMetric
Canada works in both. The toggle switches every spec on the page at once.
Spec rows
Operating weight2,315 lb
Max digging depth6.5 ft
Engine power13.6 hpto be verified
Form fields and intent chips
EquipmentPartsService
Describe your job, site conditions or questions…
15 / Motion
Not animation for animation's sake.
A motion language derived from engineering drawings. Technical illustrations draw themselves from an empty state and guide attention through complex machinery. The same principle runs through the hero machine, the assembly and the bucket, so they read as one system.
Ordered paths
Every stroke carries an order index, so the drawing builds the way the part is assembled: frame first, fasteners last.
Length-aware timing
Duration scales with the square root of path length. Long lines don't crawl and short details don't flash.
Overlapping stagger
Paths start before the previous one finishes, so the drawing flows like a single hand. Easing cubic-bezier(.33,0,.67,1).
Clean finish
After each stroke completes, the dash pattern is removed, so closed shapes like wheels and the logo ring have no visible seam.
Interaction principles
Motion has hierarchy
Machine drawings are the strongest motion on the page. Supporting UI moves less: a fade-up on scroll, a 4 px arrow shift.
Interaction shows affordance
The cursor ring grows over links and buttons, and buttons get a light sweep on hover.
Technical data stays still
Specs, tables and numbers never animate. Values you compare stay where you left them.
Desktop spectacle, mobile clarity
The custom cursor appears only on precise pointers. Touch devices keep native behavior.
DWG · U17 / HEROSCALE 1:20YUCHAI PRAIRIESHEET 01 / 03
Homepage · Hero
U17 excavator
The first thing a visitor sees. The machine builds from the tracks up to the boom, in eight overlapping groups.
Paths111
Build groups8
Build time≈ 7.4 s
Stroke0.75 px · #FEBC38
Easing(.37, 0, .63, 1)
DWG · BOOM LAMP ASSYSCALE 1:5YUCHAI PRAIRIESHEET 02 / 03
Homepage · Why Yuchai Prairie
Boom lamp assembly
An electrical assembly drawing with callouts. It supports the message that every part is documented and available.
Paths89
Start window5.4 s
Stroke duration0.56–1.74 s
Hold, then loop2.1 s
Easing(.33, 0, .67, 1)
DWG · 1 - BUCKETSCALE 1:10YUCHAI PRAIRIESHEET 03 / 03
Homepage · Attachments
Bucket, exploded view
Bucket body, cutters, teeth sheaths and fasteners assemble in order. It introduces the idea that one machine can take many tools.
Paths103
Start window5.2 s
Stroke duration0.52–1.64 s
Hold, then loop2.0 s
Easing(.33, 0, .67, 1)
16 / Homepage strategy
Building trust before asking for a quote.
The homepage answers three questions: what does Yuchai Prairie sell, why should I trust this dealer, and what should I do next. Key screens at 1440 px, with the line drawings playing in their real positions.
01 · Hero
Built to work. Ready for the Prairie.
Positioning, a one-line promise of local support and two routes. The U17 draws itself next to the headline.
Live animation
EquipmentParts & ServiceEventsAttachmentsAboutContact
EN|FRGet a quote
Yuchai equipment · Prairie Canada
Built to
work.
Ready for
the Prairie.
Yuchai equipment for excavation, construction, agriculture and demanding job sites, backed by local parts, service and support.
Explore equipment →Get a quote →
Equipment · Parts · Service · Support
02 · Trust strip
Yuchai power. Local support.
Four promises right under the hero: equipment, parts availability, service support and Canadian access.
03 · Machine classes
Compact power for tight spaces
Four classes by operating weight: mini, compact and midi, heavy, electric. Each card names its use cases.
04 · Featured equipment
Small footprint. Serious performance.
Model tabs, photo and key specs side by side. Missing data is marked "contact for specs" rather than hidden.
05 · Why Yuchai Prairie
More machine. More value. More support.
Three reasons to choose the dealer, next to an assembly drawing that draws itself as the section enters the screen.
Live animation
Why Yuchai Prairie
More machine.
More value.
More support.
You don't just need a machine. You need equipment that works, support you can reach and parts you can count on.
01
Built for work
Yuchai equipment is engineered for demanding excavation, construction and material-handling applications.
02
Designed for versatility
A wide range of attachments lets one machine take on more jobs, maximizing what you can do with your investment.
03
Supported locally
Parts, service and practical support help keep your equipment productive long after the sale.
06 · Attachments
Make your machine more capable.
Five attachment families with use cases. The exploded bucket assembles next to the list.
Live animation
One machine. Many jobs.
Make your
machine
more capable.
The right attachment can turn one machine into a solution for multiple applications.
Buckets
Digging · trenching · grading · material handling
Hydraulic breakers
Concrete · asphalt · rock breaking
Augers
Construction · landscaping · agriculture
Rakes & grapples
Land clearing · sorting · material handling
Quick hitches
Fast attachment changes · improved versatility
Explore attachments →
07 · Support after the sale
Downtime costs money.
Parts, maintenance, technical support and the service network, with two direct actions. This section answers the Validate-stage doubt.
08 · Contact
Ready to find your machine?
Intent chips route the request before a single word is typed. Five fields, one button, a promise to reply.
17 / Page system
One system for the whole range.
The homepage sells the dealer; model pages sell the machines. Every page shares one grid, type scale and component set, so each new machine, category or service page is built from the same parts.
Homepage · 16 sections
Model page · U10
18 / Product detail
Designed around the decision, not the database.
The U10 page doesn't open with a spec table. Four parameters give instant orientation: 2,315 lb operating weight, 6.5 ft dig depth, 2,338 lbf bucket force, 2.5 ft minimum width. Then raw specs are reframed around three buyer questions: access, digging, versatility.
1231
Model name as the headline
U10 in yellow at display size. The category path above it shows where the buyer is.
2
Two actions, clear priority
Request a quote is primary. Download specs serves buyers who need a document for their partner or bank.
3
The four numbers first
Operating weight, max dig depth, bucket force, min. width. Weight shows pounds and kilograms together.
44
Access, digging, versatility
Three columns match the three buyer checks: does it fit, can it dig, what can it run. Each has a headline number and supporting rows.
5
Narrow for access, wider for work
Retracted and expanded widths are shown together, so the telescopic undercarriage makes sense without a diagram.
6789Technical data without overload
Technical buyers still need the full data. Instead of removing complexity, it moves to the right stage of the journey, grouped by mental model: engine, hydraulics, performance, capacities, digging reach.
6
Imperial and metric
The machine is sold in Canada, so the UI handles both measurement systems without duplicating the interface.
7
Honest data
Unconfirmed values carry a "to be verified" flag and a dealer note. Trust grows when the page admits what is pending.
8
Lifting chart on demand
Front and side capacities by radius, in an accordion. Planners get the detail, everyone else keeps a short page.
9
Configuration by system
Frame, working device, undercarriage, hydraulics, lighting. Options are grouped the way a dealer quotes them.
Dimensions and next step
Compact by design.
Photo and dimensions side by side, then a direct question: is the U10 right for your job? Related models keep buyers in the catalogue if it isn't.
19 / Outcome
A product-led equipment experience.
A clear path from discovery to technical evaluation, a usable hierarchy for complex specifications, attachments and aftercare tied into the buying journey, and an engineering-inspired identity that scales to every new machine page.
5
Equipment categories, from mini excavators to electric machines
16
Homepage sections, each tied to a stage of the journey
303
Sequenced vector paths across three line drawings
2
Languages, English and French, from one content model
What the system now supports
Homepage→Equipment discovery→Product evaluation→Attachments→Quote
Success metrics after launch
Quote requests per 1,000 sessionsConversion
Model page to quote rateValidate stage
Parts and service enquiriesAftercare
Spec downloads per modelCompare stage
Share of French-language sessionsReach
Scroll depth to Support sectionTrust
20 / Reflection
Technical complexity shouldn't be removed. It should be sequenced.
A contractor and an engineer may eventually need the same specification, but they don't need every specification at the same moment.
The strongest decisions in this project were about when information appears, not only how it looks.
Thanks for watching.
UX / UI designMurad AmiarClientYuchai PrairieYear2026