Sales Quote System
Designing a responsive web application for streamlined B2B quoting and upselling
Overview Our client delivers enterprise solutions that define, structure, consolidate, manage, and automate services for organizations worldwide.
As part of their largest sales transformation initiative, Sales Quote System is a B2B web application designed to streamline the configuration experience for inside sales teams. It accelerates deal velocity by simplifying pricing and enabling the efficient creation of sales quotes.
What I did
• Created user flows & experience maps
• Wireframed and prototyped key interfaces
• Presented design concepts to product owners and clients
• Wrote test scripts and conducted user testing sessions
• Analyzed testing results and delivered outcome reports • Annotated designs for developer handoff
• Collaborated on building a scalable design system
Client ServiceNow through Avanade
Role Product Designer
Duration 8 months (2020-2021)
Skills & Tools
Wireframing
Usability Testing
Design Systems
Figma
Zeplin
Problem Statement
How might we integrate separate systems into a single, seamless platform that simplifies the pricing process and speeds up approval times for sellers?
Sales Quote System focuses primarily on the complex processes of pricing, approvals, and quote generation. Timing is critical for sellers, as every moment counts in accelerating their sales cycles.
Scope
The project aimed to drive a sales transformation by implementing the new Sales Quote System solution, with a primary focus on regular usability testing informed by feedback from actual sellers who would be using the product.
Research
Upon joining the team, we were introduced to preliminary personas that had been developed prior to us joining. The primary users we designed for include:
Solution Sales: This role supports both internal and external customers, driving new business for smaller accounts.
Account Executives: Responsible for building and maintaining relationships with clients by understanding their business needs and recommending the right products, all while meeting quarterly and annual sales targets.
Process Blueprint
The product process encompasses several key stages, including:
User Flows
To fully understand the user experience, we mapped out the entire flow, identifying key decision points, potential UI screens, and opportunities to add value at each stage of the seller’s journey. This flow outlines the steps a seller must take from the quote creation to the contract finalization process.
Experience Maps
Our team created a visual map to illustrate the end-to-end process of Software Services, highlighting key interaction points throughout the user journey.
Key focus areas included:
Ensuring easy access to user information
Highlighting actionable items for clarity and efficiency
Main content areas: product configuration, deal score, product cart, and quote information
Design
Previous Existing Designs
When our team joined, we were introduced to existing wireframes. Our task was to use these as a starting point, iterating on them to identify pain points and collaborating based on our assumptions to create new iterations for user testing.
Product Cart
Deal Score
Pain Points, Goals, & Questions
Data-Heavy Application: With a large amount of data, it was crucial to establish a clear information hierarchy based on content significance.
Interaction Elements: Clear and intuitive interaction elements are necessary, allowing users freedom to act on key tasks.
Core Features: Understanding the core features of the product was essential to ensure the design addressed user needs effectively.
Information Grouping: We needed to explore whether grouping information more effectively would improve usability and clarity.
Initial Designs (Deal Score)
The deal score was the first feature our team focused on, as it was critical to the quote creation process. Sellers need to quickly understand the health of their quote and identify how to make adjustments that could improve their deal score.
Initial Designs (Quote Layout)
For the main content, our team explored several ways to organize and display the information, focusing on the hierarchy of sections. We also placed text roughly to visualize the overall screen layout.
Given the large volume of information on this screen, we decided on a vertical dashboard structure. This would feature collapsible sections that adapt to the different stages of the quoting process.
Usability Testing
Our team took the lead on user research, conducting user tests with sellers in nearly every sprint. We were responsible for creating the study plan and discussion guides, collaborating closely with product owners and the sales insights team to prioritize features for testing. UX principles were applied to ensure that the recommendations we provided were actionable and aligned with user needs.
Types of tests
Usability Testing: Asking users to complete tasks using the UI as if it were a real-world scenario.
Perception Testing: Presenting variations of design concepts to understand how users perceive and react to them.
Probing: Asking targeted questions about user behavior to gather insights and better tailor the UX/UI.
Test Results
We presented the analyzed testing data to our clients, offering UX recommendations and prioritizing features for further development. Before moving forward with design iterations, we collaborated with stakeholders to technically vet any proposed changes and secure necessary approvals.
Product Cart Iterations after usability testing
Before finalizing the design, we explored several iterations for the product cart, focusing on adding hierarchy, color, and improving the overall visual organization to enhance usability and streamline the user experience.
Before
After
Final Design for Quote LAyout
The quote layout screen will feature the most interactions. Through user testing, we were able to prioritize sections and break out important information in a way that remains technically feasible.
New Design Decisions:
Clear information hierarchy and column header prioritization based on user feedback
Defined interaction elements, providing users with more freedom for actionable tasks
Use of if/then logic to hide tabs, elements, and collapse sections depending on the stage, helping to keep the page clean and organized
Visual design enhancements for improved clarity and user experience
Design System
While we aligned with ServiceNow’s brand colors, we had the creative freedom to define our own design standards for typography, type ramp, buttons, color usage, and component design.
We built component sheets in Figma, labeling them to easily swap out different instances and states, ensuring our designs remained consistent throughout the project.
Final Thoughts
This project presented many challenges, especially since I joined during the midst of the COVID pandemic and worked in a fully virtual setting. However, it was pivotal in my growth as a product designer. Our small design team, initially just two of us and later expanding to four, had the freedom to shape our design process within an agile environment.
I took ownership of specific functional areas within the product and regularly validated my design decisions with product owners before conducting user tests. Our team was responsible for the entire user research process, which allowed me to develop skills in writing user tests, running them with end users, and analyzing results almost every sprint. I also had the opportunity to represent our design team, presenting our work to both internal and external stakeholders.
Challenges
Agile Workflow: At times, our design team was ahead of the functional teams, who were still finalizing business requirements. This led to rework and frequent reprioritization of our design stories during sprints.
Technical Limitations: We found that many of our designs were constrained by the software we were using, and we’re still discovering which designs need to be pushed to future releases.
Remote Environment: As an extroverted introvert, adjusting to virtual collaboration took time. I had to figure out what worked best for both myself and our team in a remote setting.