Quotes End to End – Arunkumarrajendran

Quotes Feature End-to-end design

Overview

ShopCPR is the official e-commerce platform of the American Heart Association (AHA), offering certified CPR and emergency cardiovascular care (ECC) training materials, courses, and lifesaving tools.

Client

Shop CPR

Year

2023

Key Features:

Certified Courses: Includes BLS, ACLS, PALS, Heartsaver®, and more.
Flexible Learning: Offers blended, eLearning, and self-directed CPR kits.
Educational Materials: Manuals, videos, manikins, AED trainers, and reference tools.
Global Reach: Multilingual support and international distribution options.
User Experience: Streamlined navigation, secure checkout, and responsive design.

Requirements

In certain situations, organizations that wish to make bulk purchases must obtain approval from the management or finance teams. They require quotes on the overall number of products for that.

Self-service quote generation is a new feature that ShopCPR plans to launch. To avoid the time delay caused by the support team, the individual or organization can generate quotes directly from the shopCPR platform.

Problem Statement

ShopCPR handled customer service for businesses and individuals by hand. They received a lot of requests, particularly for quotations on various products. There are a lot of issues with making quotes.

Slow Turnaround Time: Waiting hours or days for a quote delays procurement.
Unclear Bulk Pricing: No visible tiered pricing or discounts for volume purchases.
Cumbersome Forms: Too many steps or unclear form fields make the process tedious.
Lack of Quote Customization: Can’t easily request variations (e.g. language options, physical/digital mix).
No Quote History: Organizations can’t access past quotes for budgeting or reorders.
No Real-Time Communication: Limited support channels (e.g. no live chat or quote assistant).

My Roles and Responsibilities

Start working as an individual contributor as soon as requirements are received in order to complete the end-end design process.
To ensure the business scope and metrics, reiterate cooperation with the product manager and stakeholders.
To learn about user empathy and pain spots, conduct UX research.
Throughout the process, coordinate with the technical team, architect, and product manager.
Using the UX insight, create a low-fidelity wireframe and a user journey map.
Perform various tests, such as A/B testing, usability testing, and accessibility testing.

Process

Discover—Understanding & Research (Diverge)

Understand

Explore the business goals, platform offerings, and user groups (e.g. instructors, institutions).
Audit existing flows (e.g., quote request, course selection).

Analysis

Conduct stakeholder interviews and use case scenarios.
Study existing analytics: bounce rate, drop-offs in checkout, and time to conversion.

Identify Pain Points

Users: delayed quotes, no visibility into pricing, difficult navigation.
Business: overwhelmed support teams, missed bulk order opportunities.

User Mental Model

“I need a fast way to get quotes, training resources, or request bulk orders without waiting.”
“I expect clear pricing, easy reordering, and reliable certification tools.”

Define—Synthesizing & Framing (Converge)

Opportunity Areas

Automate and simplify quote requests for institutions.
Make bulk pricing and product details more transparent.
Improve post-quote engagement and lead nurturing.

Develop—Ideation & Concepting (Diverge)

Ideate

Create a self-service quote flow.
Manage quote items in a certain period.
Organization dashboards for quote history, reorders, and approvals.

Evaluate

Prioritize features using a value-effort matrix.
Gather quick feedback from power users (e.g., CPR instructors at hospitals).

Deliver—Prototyping & Testing (Converge)

Journey Mapping

Map the full journey: From “Need CPR materials” → “Find & Add cart” → “Request quote” → “Place bulk order” → “Reorder/manage quote history.”

Wireframe

Low-fidelity wireframes for key flows:
- self-service Quotes List
- Manage quotes in order within a minute
- Quote dashboard

Prototype

Mid/high-fidelity interactive prototypes using tools like Figma.
Test with 5–7 target users from different organization types.

Empathy map

Major painpoints in the current form-based quotes:

Users expect instant or same-day quotes; delays (especially over 24–48 hrs) can break trust.
Users can’t see estimated costs or discounts while submitting a request.
After submission, users don’t know what happens next, how soon they’ll hear back, or who’s handling it.

Challenges

The product has a built-in magenta template, so we can only go with minimum customization.
ShopCPR has a multiple workflow based on the user and organization’s needs.
How do we make the feature more visible to the user? If we go with the existing flow.
How do we handle the self-service quote once it’s created, and what will be the next step?
Ensure the stakeholder and technical team with the minor details like quote validity, edit options, quote duplication

Workflow

We reach some workflow conclusions following iterative cooperation with technical and stakeholders. We divide everything into four stages.

Product, Address & Billing Selection:

The quotation feature link is visible to users on the PDP page. A session known as the quote session will begin whenever a user clicks on this link. They are limited to creating quotes during the session. Up to the billing session, the user can continue using the same shopping experience.

Quotes Description:

A few features are provided below where all quote features are controlled.

Every quote is valid for 30 days until it expires.
We can only change the quotation name once it has been made; we are unable to amend any other elements.
Users can create an N number of quotes.
The page under the “my profile” section was covered in every quote. The specific quote details are displayed on the subpage.
After three months, all completed quote data will be removed from the database.

Proceed to an Order:

If you would like to buy any active quote, click the link and check out. It enables you to pay straight from the checkout page.