Background
The process for Birch’s salespeople to build a sales quote for prospective customers was still being performed using an Excel spreadsheet designed for printing and filling out in an in-person meeting with those customers. The sales team sought a switch to online ordering to increase ease of use and incorporate business logic in the order form to prevent data entry errors such as invalid service and feature combinations.
Project Team
My Roles
UX Designer, UI Designer/Developer
Team Members
Business Analyst, Product Owner (Vice President of Sales Operations), Manager of Special Pricing, Development Manager
Project Tasks
1. Define
Gather project requirements, understand product business logic, determine project goals, conduct whiteboard sessions with team
2. Design
Create wireframes and high-fidelity prototypes
3. Test
Verify the app appears and functions as designed during QA testing
Defining the Quote Tool
As a tool built internally for Birch’s sales team, the biggest challenge I had for this project was becoming familiar with the company’s product catalog and sales process because this had a direct effect on designing the app's workflow. I worked directly with the product owner who was the Vice President of Sales Operations, a 17-year veteran of the company and a former sales representative. I also worked with the manager of special pricing, who advised me on how the company handled orders when there was a need to alter standard product pricing.
With their help, I learned Birch’s product catalog and understood its business logic to know what the requirements were for a valid sales quote. This was critical for me to start defining the steps necessary to create a sales quote in the new app. In our whiteboard sessions, what became apparent was that we needed to break up the online order form into clearly defined sections that appropriately grouped data inputs for each screen.
Design
The overall look and feel of this app was largely based on the Birch CUE app. Birch Quote Tool was originally intended to be a part of CUE before being spun off as a separate app to enable accessibility outside of the corporate network. Keeping the same layout was also done in an effort to create a sense of familiarity to unify the user experience and presentation of all apps within the company.
Within Birch Quote Tool, I wanted to allow users the flexibility to make changes between screens as needed. I also wanted the process to feel natural, so I designed the workflow to follow the existing quote process as much as possible. During product selection, I wanted users to have easy visibility of their running product totals and place the business logic up front so that data entry errors were quickly caught and prevented.
As I created the design, a few functional areas of emphasis emerged in the workflow of the new app to better support the occasionally tedious task of data entry for building a quote:
Intra-quote Navigation
Unlike traditional retail eCommerce solutions where customer data is entered last, this data needed to be captured first because product availability and price plans differ by customer location. Consequently, a progress bar is not just part of the checkout process; it is part of the navigation throughout the entire quote creation workflow.
I turned the quote creation steps outlined in the project definition process into a stepped progress bar that also serves as secondary navigation to allow the user to easily go forward and back to other available steps in the workflow. I designed the progress bar to include a completed state, current state, and inactive state to help the sales representative understand where they are in the quote process.
Live Validation
The key to having business logic be an integral part of the app’s functionality is ensuring that user entries for products and features are always in a valid state before proceeding. Instead of merely limiting minimum and maximum quantities, the app also needed to detect that options for features were properly entered as well.
For instance, if a user entered an option of 10 PBX seats in a PBX order, the UI needed to ensure that features were appropriately allocated for all 10 seats. To achieve this, I designed the live validation system to also perform tasks such as counting and displaying the number of valid entries and entries that still needed attention. I also wanted the live validation to always be visible, even in a valid state, instead of only detecting errors after data entry.
Bulk Data Upload Support
Entering phone numbers for 10 PBX seats may be manageable, but what about 100 seats? Hitting a button to add a new row 99 times is a tedious thought, never mind a task.
Bulk data uploading through CSV files was a feature in a few other Birch apps, but what was missing before in other apps was showing the parsed results in the UI. Previous apps treated the file as an attachment to be opened by a person later. I designed the bulk upload to provide live feedback of whether the CSV was formatted correctly for the quote, which worked in conjunction with the live validation.
Assisting QA Testing Efforts
With so many moving parts and screen states involved in a custom product catalog and quote generating platform, I worked alongside the Quality Assurance team during testing to ensure that both the product logic and the visual design components of the app worked as intended. I provided our testers with documentation of intended behaviors for form elements and display conditions for live validation feedback to aid their testing efforts. I also participated in testing as well by generating my own sales quotes on the development and staging app servers.
Result
Enabling salespeople to capture customer quotes through the Birch Quote Tool all but eliminated data entry errors thanks to the built-in business logic. The Birch Quote Tool also provided them with a guided interface to ensure that all required data such as customer info was captured and validated before generating the quote. The Vice President of Sales Operations and the Director of Software Development praised the Birch Quote Tool as one of the most effective and useful apps ever produced by Birch.