CPQ
Unified Sales Quoting
My Roles
Project management
Research
Information architecture
Product design
Interface design
Visual design
Prototyping

I was one of the two designers managing and executing the project from start to finish. We handled everything including project and client management, coordinating and conducting user interviews, and design execution.

Design Team Members
Edmond Hirota — Designer
Aruba needed a unified quoting tool that could manage a diverse product system and global sales team with different proficiencies.
Project Background

Client

Aruba Networks is a networking product provider.

As a Hewlett Packard Enterprise company, they are striving to create smarter, simpler networks for businesses and other organizations by providing complete networking and security infrastructure solutions.

Product

Their quoting tool helped internal and external sales teams.

The quoting system was used by multiple types of users in their sales and distribution channels. The system included thousands of products and services that would be mixed and matched to create tailored networking and security solutions for leads and customers. It was also used to draft and deliver quotes, get internal approvals for special sales cases, and coordinate with the warehouse and distribution teams.

Problem

The tool was difficult to use, so it was not consistently used.

The tool was seven years outdated and unable to be upgraded due to massive customizations to a third-party software. A few other problems included user interface over-complexity, terminolgy confusion, and convuluted & hidden processes leading to lowered productivity, mass emails, and salespeople using different quoting methods including Excel spreadsheets, which were hard to version control, keep in sync, and access by different team members. By addressing these concerns, we had the opportunity to improve productivity, sales effectiveness and conversion, and employee & partner satisfaction. Overall, it would help Aruba's teams better do their jobs.

Constraints

Coordination with global teams made a large project larger.

We had three months to get the information we needed, design, and iterate to final product before Aruba Networks transitioned into their testing and support project phase. With the massive spread and quantities of stakeholders, getting aligned over the course of the project would take a large amount of time and approvals were needed from each team lead. In addition, we worked alongside Apttus, a third-party sales quoting technology provider that would implement the final product for Aruba Networks.

Success Metrics

Success meant a single, fully-functional quoting product.

For Aruba, success was the full adoption of a single quote management system and tool for their global team with a unified approval process for special sales cases, selling collaboration, features that assisted in the sales process independent of sales proficiency, and a user interface & terminology that was easy to understand. To help them succeed, we made sure we had a concrete understanding of their business, their existing product and processes, and their teams and users. We would align with their new quoting technology from Apttus and use our understanding to design the new system. After that, we would work with our internal engineering team and their third-party technology provider to deliver the final product for testing.

We focused on learning from previous problems to set up their new system for long-term scalability and use.

Project Process

Project Management

First, we ensured alignment through planning and documentation.

From the beginning, my design partner and I oversaw the entirety of the project, including project management and client management. We began the project by discussing and defining the project expectations and scope into a detailed Statement of Work document for the client before we dived into research and information gathering.

Research & Information Gathering

Then, we dived into a month's worth of user research, interviews, and business meetings.

Our first step after aligning with Aruba Networks was to gather understanding behind the project. This began with a deep dive into the company, the existing quoting product, and the new quoting technology through multiple workshops, covering a variety of scenarios and workflows including different quote type business processes, partner and distribution channel collaborations, trade and regulatory product compliances, and general quote creation details. In addition, we conducted user interviews in-person and over web conferences with employees and partners across roles, teams, and countries in order to get a broad and thorough view of the many stakeholders of the quoting product. We identified many pain points and opportunities including the following ones:  

Information Discovery: Information important to quote preparers were hidden in multiple places, often hard to find and separated. The complexity of the interface often displays irrelevant and distracting information.

Data Entry: Quote preparers often needed to manually enter information several times throughout the life of a quote and customer. This led to increased error rates, duplicate records, and lowered productivity.

Nomenclature: Terminology used throughout the quote preparation system were inconsistent and hard to understand, especially for partners and new users that were unfamiliar with Aruba acronyms. 

Basic Expectations: Standard user interface affordances were not used, leading to overall confusion. For example, back buttons and error messages behaved unexpectedly.

Planning and Strategy

With a thorough understanding in hand, we structured the new quoting system.

After understanding the project from a business and a user point-of-view, we got to work on creating the structure of the new quoting system. We mapped out an ideal information architecture that would work for the new and the experienced user, including a new user who changes into the experienced user. We also mapped out the logic behind a Guided Selling feature within the quoting system that would help new users make their way through configuring and customizing a solution for the customer with accuracy and confidence. After working out a list of proposed changes, we organized, optimized, and created a Feature-Value Matrix to align the different teams defining technological level of efforts, business importance, and user importance.

quoting tool user flow before and after
User flow for the quoting tool, before (1) and after (2)

guided selling logic flow
Guided selling feature logic flow

 

Execution and Refinement

We were then ready to build the product out, revise, and refine.

A set of wireframes to cover each product page and clickable wireframe prototype was created to communicate and align with Aruba’s multiple teams. After approval to lay down the final stones, we flushed out the visual design using Aruba’s then newly rehauled branding and visual identity guidelines. Any elements not yet defined were created with the guidelines in mind, to best work with the existing system. With the design complete, we prepared documentation and specifications for the engineering team for handoff. Afterwards, we managed quality control with frequent testing and feedback sessions.

quote summary screen wireframe
Quote Summary screen wireframe

quote summary screen visual design
Quote Summary screen final visual design

Quote Summary Screen

The quote summary screen displays the information functionality that a salesperson would need to work with a quote, including primary functionality that targets the entire quote at the top, approval status for special sales cases, general information including notes, contact information, account information, bill of materials, and any attachments.

product catalog screen wireframe
Product Catalog screen wireframe

product catalog screen visual design
Product Catalog screen final visual design

Product Catalog Screen

The Product Catalog screen is the main access point for salespeople to add products, support, professional services, and training to the bill of materials from the Quote Summary screen. From here, the user can go through the catalog (medium proficiency required) or access the Product Selection Wizard (low proficiency) or manually quick add items (high proficiency). This screen also suggest items to add to the quote based on the currently selected product category and it previews the quote for the user so they know what they have already added.

configuration attributes screen wireframe
Configuration Attributes screen wireframe

configuration attributes screen visual design
Configuration Attributes screen final visual design

Configuration Attributes Screen

The Configuration Attributes screen appears after the user selects an item to add via the product catalog. It asks easy-to-understand questions about the selected product in order to add the correct and necessary supplements including support, professional services, and training. At this time, the salesperson can also see a preview of the current product that they are configuring, as well as the added items based on their configuration attributes.

configuration options screen wireframe
Configuration Options screen wireframe

configuration options screen visual design
Configuration Options screen final visual design

Configuration Options Screen

The Configuration Options screen is the second configuration screen after the user selects and adds a product to their bill of materials. The second screen is used to add complementary products including accessories and kits that would help the product run effectively, if the customer does not already own one. The sidebar previews what the options that the user is selecting to show the updated price.

product selection wizard screen wireframe
Product Selection Wizard screen wireframe for in-progress questionnaire

product selection wizard screen visual design
Product Selection Wizard screen final visual design

Product Selection Wizard Screens

The Product Selection Wizard flow guides beginning Aruba salespeople through choosing the correct product package for their customers. It asks a series of questions about the customer needs and outputs a list of materials, from which they can pick and choose to add to their bill of materials. During this time, the preview of the bill of materials autoupdates.

edit pricing screen wireframe
Edit Pricing screen wireframe

edit pricing screen visual design
Edit Pricing screen final visual

Edit Pricing Screen

The Edit Pricing screen shows the bill of materials before the user can save and accept their changes onto the Quote Summary page and Salesforce system. From here, salespeople can edit, remove, add and remove discounts, request special discounts above the standard rate, change item quantities, rearrange the list, and get competitive pricing data on items. If they require a special discount, they will be shown what approvals are needed from what people in order to continue, as well as be provided a space to write down why they need this discount for this customer and attach any references.

competitive analysis screen wireframe
Competitive Analysis screen wireframe

competitive analysis screen visual design
Competitive Analysis screen final visual design

Competitive Analysis Screen

The Competitive Analysis screen takes the salesperson's current bill of materials from the Edit Pricing screen and presents it side-by-side with the average prices for other major network solution providers. It allows the user to change the products, update the given discount in order to find a competitive price for the customer, and change competitors. The competitor's equal product with autofill.

partner quote sharing screen wireframe
Partner Quote Sharing screen wireframe

partner quote sharing screen visual design
Partner Quote Sharing screen final visual design

Partner Quote Sharing Screen

The Partner Quote Sharing screen allows users to share the internal quote with the ability to view and potentially edit quotes with other partners including internal salespeople and external distribution partners.

quoting document library screen wireframe
Quoting Document Library screen wireframe

quoting document library screen visual design
Quoting Document Library screen final visual design

Quoting Document Library Screen

The Quoting Document Library is a unified source for all quoting documentation and help guides. From here, a salesperson can access training materials, quoting documents based on topic, and contact support for quoting if necessary. It also links to Aruba Network's internal wiki on all sales-related topics as well. This page can be accessed from all quoting screens.

Conclusion

Results

At the end, Aruba Networks had a new, improved, sales quoting tool for their global team.

The project ended successfully. Aruba adopted a new quoting product for their sales team and their partners that was technologically easier to update to keep effective and secure. According to Aruba's internal testing team, the interface improved adoptability and usability significantly. The behind-the-scene processes were brought to the front for clarity. The old version along with spreadsheet quotes were phased out.

final visual design
Quoting tool final redesign

Learned Lessons

The larger the company, the more important knowledge of existing processes is.

When working with large enterprises with many layers of management and a wide-breath of teams, it is important to take more time than I first imagined to understand the complexity of their processes and products that is necessary to keep a large machine running smoothly. The slower it moves, the more important it is to understand thoroughly as to avoid mistakes and slow down the process even more.

back to Project List
Other Projects
User Experience Projects
Visual Communication Projects