Slow turnaround
Waiting hours or days for a quote delayed procurement.
02 / AMERICAN HEART ASSOCIATION / 3 WEEKS
ShopCPR Self-Quoting Experience.
Bulk buyers waited on support for quotes. A self-service flow puts pricing, customisation and history in their hands.
Lead UX DesignerRequirements, journey mapping, interface flow, prototype, feedback loopsFigma · FigJam · Jira
The impact
−0%Customer-service workload in testing.
The problem
Quotes were produced by hand, so buyers waited hours or days and support teams were overwhelmed.
The solution
A self-service quote journey in four phases, with tiered pricing, customisation, status tracking and quote history.
The four-phase quote workflow · ShopCPR
- My role
- I led UX end to end: clarified requirements, defined user needs and pain points, mapped the workflow and journey, designed the interface flow and prototype, and ran the feedback loops.
- The central decision
- Treat a quote as an object with a status, not an email. Make pricing, tiers and history visible at every step.
- Project scope
- A new self-service quote feature for ShopCPR, from product selection to conversion into an order, in a 3-week engagement.
01 / Context
Lifesaving training, sold at scale.
ShopCPR is the American Heart Association’s e-commerce platform for certified CPR and emergency cardiovascular care training. It serves individuals, healthcare professionals, instructors and organisations worldwide.
What the platform sells
- BLS, ACLS, PALS, Heartsaver®
- Blended, eLearning and self-directed kits
- Manuals, videos, manikins, AED trainers
- Multilingual, global distribution
Organisations buying in bulk often need management or finance approval first, and global organisations need a quote across the full set of products. Until now those quotes were produced by hand. ShopCPR planned to launch self-service quote generation so buyers could create quotes directly on the platform.
02 / Problem
Every quote went through a person.
Customer service handled quote requests manually. The volume was high, and the process created friction for buyers and for the business.
Unclear bulk pricing
No visible tiers or volume discounts.
Cumbersome forms
Too many steps and unclear fields.
No customisation
No way to request variations such as language options or a physical/digital mix.
No quote history
No past quotes to reuse for budgets or reorders.
No real-time help
No live chat or quote assistant.
Where the pain landed
- Buyers: delayed quotes, no pricing visibility, hard navigation
- Business: overwhelmed support teams, missed bulk-order opportunities
03 / Approach
The Double Diamond, applied end to end.
I owned requirement clarity, user needs, workflow and journey mapping, the interface flow and prototype, and the feedback loops that refined it.
What happened in each phase
From discovery to a high-fidelity prototype.
01
Discover
- Understand product and business scope
- Recognise the design system
- Analyse the product flow
02
Define
- Identify defects and pain points
- Recognise the user mental model
- Frame opportunity areas
03
Develop
- Ideate
- Build the user journey flow
- Evaluate
04
Deliver
- Information architecture
- Wireframes
- High-fidelity prototype
04 / Strategy
Clarity. Efficiency. Actionability.
Stakeholder interviews, use-case scenarios and checkout analytics (bounce, drop-off, time to conversion) gave a clear picture of what buyers expected.
“I need a fast way to get quotes, training resources, or request bulk orders without waiting.”
Buyer mental model
“I expect clear pricing, easy reordering and reliable certification tools.”
Buyer mental model
Clarity
Pricing, discounts and totals are easy to read.
Efficiency
A quote in a few steps.
Actionability
Users control and customise the quote.
05 / Design
One journey from cart to order.
The end-to-end workflow runs in four phases, with a status model that makes a quote a first-class object rather than an email attachment.
The quote journey, phase by phase
Scroll to follow the workflow one phase at a time.
- 01 / Product selection
Start the quote
Log in, start a quote session, add products to the cart and apply a discount code in the quote cart. The decision at the start lets buyers back out to the shop without losing context.
- 02 / Address & billing
Say where it goes
Shipping address, shipping method and billing information, then submit. The quote is created without a support ticket.
- 03 / Quote description
Give the quote a life
Name it, print or email it, and track its status: active, expired or completed. History makes it reusable for budgets and reorders.
- 04 / Proceed to order
Convert when ready
Checkout verifies details, the buyer picks a payment method and pays, and the quote is marked completed.
Quote simulator
Tiered pricing, visible before you commit. Illustrative prices.
1 – 9List price
10 – 495% off
50+10% off
Unit price$100.00
You save$0
Quote total$1,000
Friction to feature
Pain points identified in discovery, and what shipped.
Friction
What shipped
Slow turnaround
→Self-service quote generation
Unclear bulk pricing
→Tiered pricing visibility
Cumbersome forms
→Fewer errors, less confusion
No customisation
→Customisation options
No quote history
→Quote history and past quotes
No real-time help
Outside delivered scope
06 / Impact
Less support load. More buyer control.
Measured in testing, with the wider effect on workflow reported by stakeholders.
0%
lower customer-service workload, in testing
0
capabilities delivered
0
phases from cart to order
- Support workflow decreased
- Quote turnaround time reduced
- Users gain transparency and control
- Internal teams focus on higher-value work
07 / Learnings
What I would carry forward.
Three lessons on pricing clarity and operational friction.
Iterate fast, with clear goals
Rapid iteration worked because user goals were unambiguous.
Make pricing transparent
Prioritise transparency in the pricing experience above everything else.
Remove operational friction
Build features that reduce load on internal teams, not just on customers.
08 / PROCESS
How it came together.
- 01
Discover
Goals, user groups, existing quote flow audit.
- 02
Analyse
Stakeholder interviews, drop-off data.
- 03
Map
User flow and journey to a delivered quote.
- 04
Wireframe
Early layouts to test interaction.
- 05
Prototype
High-fidelity prototype.
- 06
Refine
Feedback loops with stakeholders.
Contact