UX Redesign & Research: Legacy CPQ Project
Role: Senior Product Designer
Platform: Web (Enterprise B2B SaaS, CPQ application used by internal sales teams)
Note: This project was not fully implemented due to department-wide restructuring.
🧭 Project Overview
CPQ stands for Configure, Price, Quote, a tool that helps sales teams quickly and accurately create quotes for products or services. At VMware, the CPQ tool integrates with platforms like Salesforce to streamline product configuration, pricing, and quoting.
We created wireframes and interactive prototypes to simplify navigation, improve task clarity, and modernize the experience. The new design replaced outdated modal patterns, introduced a more intuitive cart system, and added smart search and filtering.
📌 Responsibilities
-
Led the end-to-end redesign effort
-
Researched user needs through interviews and analysis
-
Created wireframes and interactive prototypes
-
Authored rollout plans and design documentation
-
Collaborated closely with PMs and engineers
📊 Outcomes
-
Improved product selection speed and ease of use
-
Enhanced overall usability and workflow clarity
-
Early feedback highlighted better navigation and UI consistency
-
+34% Y/Y Subscription & SaaS Revenue
-
+36% Y/Y Subscription & SaaS ARR*
🛠️ Problem & Solution Overview
Customers complained about the slow loading times for the product selection and configuration section. They found the UI to be unintuitive and "a bit clunky." Additionally, the product pages sometimes felt disjointed and inconsistent with the overall brand.
The legacy application's modal-based "Add Product" experience negatively impacted performance. Further details and recommendations can be found in the heuristic evaluation.
⚠️ Challenge
-
Inconsistent UI patterns disrupted task flow
-
Engineer-driven design led to usability issues
-
Navigation lacked structure and clarity
-
Accessibility gaps (e.g., missing labels, poor semantic HTML)
-
Performance slowdowns due to legacy modal workflows
✅ Solution
-
Standardized UI for consistency and scalability
-
Improved navigation and task flows
-
Replaced modal-based product selection for better performance
-
Addressed accessibility issues (WCAG compliance)
-
Designed within Salesforce platform constraints
🪧Mapping & Evaluation
I created solutions based on insights from the following research-based efforts:
-
A 70-page heuristic evaluation
-
Competitive analysis of similar platforms
-
Task mapping to identify critical user actions
-
User interviews with 10 sales reps (6 experienced, 4 new)
Heuristic Evaluation & Competitive Analysis Revealed Issues Such As:
-
Poor button and filter usability
-
Inconsistent data tables and messaging
-
A cluttered "Add Product" modal
-
Lack of clear feedback and progressive guidance
Redesigned flow for product selection (later brought to life using Vibe Coding)
After presenting my evaluation and research, management gave me the opportunity to lead the redesign, starting with the 'Add Products' section, the gateway to the full Add and Configure experience.
🔍 Research & Analysis
I began by mapping out the critical tasks that drove the design, identifying how users added and configured products, what mattered most to them, where they got stuck, and how we could improve the experience.
Insights from user research helped me uncover key pain points within the CPQ experience for both new and experienced users.
The "Add Product" experience was hindered by a slow modal, unclear button styles, and a poorly placed 'no products' message, just a few of the many issues uncovered during the over 70 page heuristic evaluation.
Legacy UI – Identified key pain points in modal experience (slow performance, unclear buttons, empty state confusion)
I created user personas to understand key roles and workflows, ensuring the CPQ redesign addressed needs such as faster product selection, clearer configuration steps, and fewer errors.
🔄 Design, Test, Iterate, Implement
A/B testing was conducted to understand user issues, allowing us to identify pain points and uncover opportunities for improvement.
Below are some examples of what was designed and tested.
We conducted A/B testing to explore different cart placements:
Left and Right:
Users preferred the cart on the right.
Concerns about content blocking when expanded led to shifting content instead.
Evaluated cart height for accessibility without overwhelming the page.
Bottom:
Placing the cart at the bottom allowed more item details.
Concerns about pushing key content below the fold despite the additional details.
Insights from this A/B test directly informed the cart behavior in my coded prototype.
Although the desktop application was used most frequently, I ensured the design was fully responsive and thoroughly tested across tablet and mobile breakpoints.
The responsive layout later became a focus in my coded prototype, ensuring smooth transitions across breakpoints.
🔑 Key Improvements
Aside from the following, there were several key updates that shaped the redesign:
-
Intuitive shopping cart with responsive behavior
-
View toggle between card and list views
-
Full product listing with simplified filters
-
Enhanced data tables for large datasets
-
Refined advanced search with type-ahead and autocomplete
-
Improved button layout and feedback messaging
-
Streamlined tab structure:
-
Product List
-
Owned Products
-
Saved Products
-
Wireframe Updates (anatomy view): showing layout structure, spacing, and hierarchy in early Figma design
These interactions were rebuilt using React & Tailwind to explore real user flows.
📈 Results
Over the course of two years we can correlate a strong increase in sales colleague's satisfaction with the systems they use, due to more frequent involvement by the user experience design team.
34% Y/Y
Subscription & SaaS Revenue
40–45 %
Subscription & SaaS Annual Recurring Revenue
Outcomes were tied to UX improvements, even though the full redesign was not implemented.
📢 Want to learn more?
Let’s set up a time to chat, reach out via one of the links in the footer below.