Work > THE QUOTING TOOL

CPQ Long.png

The Project

How might we improve navigation and optimize workflows in a legacy quoting application?

The Savvy Quoting Tool* is a product that enables companies to quote more efficiently by enabling sales users to build quick quotes and generate proposals for their clients. In sales, time-to-quote is the most important metric, as the more time it takes to generate a quote, the lower the chances of getting the sale. In industries (manufacturing, distribution, and high tech) who formerly quoted and managed their products with spreadsheets, The Savvy Quoting Tool, dramatically streamlines these manual processes.

After discovery research, I lead the redesign of The Savvy Quoting tool from initial workshops, sketching, high-fidelity mock-ups, validation, and market release. In addition, the redesign contributed to the product being able to score-higher in an acclaimed analyst briefing, resulting in increased sales.

*Client name removed

TOOLS

Prototyping - Marvel & InVision

High Fidelity Mockups - Sketch

Analytics - Pendo

TEAM

Lead UX Designer & Researcher - Alexandria Williams (Me)

UI/UX Designers (2) - Linas Laucys, Joanna Hoge

Engineers (3)

Product Manager (1)

Product Owner (1)


Discovery: UNCOVERING PROBlems

STEP 1. STAKEHOLDER & SME INTERVIEWS

Leveraging internal wisdom within the organization, I first interviewed a mix of stakeholders and SMEs to shed light on the business goals for the product, as well, as understand the market landscape and users. I uncovered that the product was facing major challenges during sales, as it did not look like our other products and also had usability issues.

 

Step 2. Evaluating the current experience

I lead a benchmark usability study with 6 users to identify the major pain points within the existing experience. Users were tasked with creating a quote, adding products, and then taking action on their quote. Observing user behavior in primary workflows allowed me to identify the largest problem areas with The Savvy Quoting Tool

Major Pain Points:

  • No clear starting point

  • Difficulty navigating

  • Lack of hierarchy

 

Step 3. IDENTIFYING USERS

From the generative questions from the usability study & SME interviews, I was able to create preliminary personas about sales users’ goals, motivations, and challenges. The data showed two clear types of sales users:

Desktop HD Copy.png

Newbie Nancy

Nancy is a newer sales rep and is not confident in her ability to select the right product as well as determine the right price for the customer. She needs assistance when selecting products and pricing when quoting.

Desktop HD.png

Tenured Tom

Tom is a seasoned sales rep who takes pride in his ability to determine the right price for his customers. He needs more efficiency when quoting and the ability to quote on the go when traveling between customers.

 

4. Journey Map Development: IDentifying WOrkflows

Discovery research data allowed me to identify the primary user workflows within the product, as well as, chart the highs and lows of the quoting experience.

Spoiler Alert: The lowest part of a sales rep’s quoting journey is when their quote has to be submitted for approval—they finally have their quote ready and now they have to wait for their manager to sign-off. Reps become frustrated because they know the longer the quoting process takes, the greater the chances of losing the sale.

 

DESIGN SPrint

Design Sprint_1.png

Having identified the primary problems and user’s needs in The Savvy Quoting tool, I lead a design sprint across the product team (PM, PO, Engineering), UX, and stakeholders.

Over the course of 4 days, the sprint started with stakeholder interviews, then identifying the scope, ideation and sketching, and ending with wireframes.

Validation

After the end of the sprint, I facilitated user testing with a high-fidelity prototype created during the sprint. Users were given specific tasks to complete based on the initial goals of the workshop. With testing, I sought to evaluate the following:

  • Navigation. Did we improve navigation throughout the experience?

  • Approvals. Were we able to make the approval process more apparent & efficient?

  • Information Architecture. Did more visual hierarchy throughout the experience improve users’ ability to understand information?

  • Harmonization. Does the product look like it’s from the same family as the rest of the portfolio?


MEASURING DESIGN

At the end of each usability study, the usability of the new quoting experience was measured utilizing the System Usability Score (SUS). The participants rated The Savvy Quoting Tool with an average 77.9 SUS score, which converts to a B+, above average score (Article: Measuring usability with the system usability scale, by Jeff Sauro, February 2, 2011).

I like this view [of the Quote], it’s easier to see all the products & parts you are selling.
— Usability Participant

DESIGNinG FOR MOBILE

CPQ Mobiles.png
The Savvy Quoting Tool is great, now if you could just figure out how I can do this on my phone when I’m on the road, that would be great!
— Usability Participant
 

Why Mobile?

While the redesign of the desktop experience was in progress, discovery research had revealed a desire from certain users to be able to have a mobile version of The Savvy Quoting Tool. Because of this, myself, and another designer (Joanna Hoge) created a proof of concept.

RESPONSIVE VS. NATIVE

There was quite a bit of deliberation identifying whether to make the new experience mobile responsive or design a native app. Fortunately, research allowed us to identify that users did not want full functionality on their phone. The primary quoting activities users wanted to perform on-the-go were:

  • Generating quick quotes

  • Initiating the approval process

Thus, the team decided to design an IOS native app. This enabled us to utilize device technology (i.e., GPS, voice assistant), store quoting information locally, and have better performance.

RESULT

Our mobile app proof of concept was presented to the CTO and the VP of Product Marketing at our company. The result of which was well received and the mobile application ended-up on our product roadmap.


FINAL THOUGHTS

Leading the redesign of The Savvy Quoting Tool was the biggest project of my career, the first phase of which took about a year. As a designer, I exponentially grew due to both successes and failures along the way. Two of my major learnings were as follows:

  • Design should never occur in a vacuum. It’s important to involve your team (especially engineering) at the start of research and design so that everyone understands the problem and how you arrived at a solution.

  • Stick to your MVP. As a designer, I want to solve every problem I come across within a product. However, when doing a redesign, boiling the ocean is not effective. I learned early on in the project that our initial scope was too large, and had to work with the team to identify the MVP.

Market Validation

Toward the end of the first phase of the redesign, the application was evaluated by a reputable analyst within our industry. The analyst report ranks The Savvy Quoting Tool and its competitors on a quadrant. The redesign contributed to the product moving-up alongside some of its top competitors, which in turn, allowed for increased sales and traction within our market.