QuoteTrack System
Revitalizing a legacy system with a modern interface and new features to streamline workflows.
TIMELINE
Discover & Scope: November 2022
Design Process: January 2022
System Launch: Summer 2024
Continuous Improvement: Ongoing
MY ROLE
Research
UI/UX Design
User Personas
User Flows
Wireframing
Business Strategy
User Journey
Information Architecture
TOOLS
Figma
Google Suite
Building on a Legacy
H&H Sales specializes in being an agile sales team, representing and selling products for their 'Principals' (partners) to customers throughout the Midwest and expanding areas. They service a wide range of industries, including agriculture and manufacturing. Quote Track, a custom-built solution, has been crucial for tracking quotes and managing projects. Over the past decade, it has proven to be a reliable tool, with each team member developing unique methods to optimize its use.
​
Revamping this system presented a unique challenge as a UI/UX designer. It required not only examining its foundational structure but also analyzing how the sales team interacts with the Quote Track System. This involved critically assessing its evolution and identifying opportunities to streamline repetitive actions, enhancing overall efficiency.
Does QuoteTrack Track like a QuoteTrack should?
When my team and I were tasked with refreshing the system, we conducted a comprehensive review of the entire team's workflows to identify areas for improvement. We also incorporated a list of ideas from the H&H team to ensure the new system meets their evolving needs.
​
To start shaping goals for the QuoteTrack System, we needed to understand the business side of H&H and how QuoteTrack factors into the workflow.
Questions that we had initially for the Discovery Process:​
-
What features are being used regularly?
-
In what ways are users customizing the system to fit their workflow?
-
How does QuoteTrack fit into the H&H Sales team workflow?
-
What features could be improved?
-
What new features would help streamline the sales workflow?
-
Who is using the system regularly and what is their role?​​​​
Understanding more about the problem and the opportunities ahead
Discover & Scope:
​During the discovery phase, we conducted as many interviews with as many members of the H&H Sales and Leadership team as we could to understand the nuances of their business and day-to-day operations. After interviewing the subject matter experts, we created a large board with all the wishes and wants, and started to piece together an MVP (minimum viable product).
As we took a macro view of all the information, we began to understand their internal processes and their work flow. It all starts one of two ways: either with a customer sending a quote request to H&H or a customer contacting the Principal directly and the Principal sends a quote to H&H. If the information is sent directly (and exclusively) to a salesperson, that individual forwards the information to the Quote Manager for entry. The Quote Manager is currently the only person entering Quotes into Quote Track.
​As we evaluated their current work flow, we did have some suggestions for improving the process to reduce some of the internal steps by adding some details directly into the QuoteTrack System.
Setting our sights high
After meeting and interviewing the H&H team individually and in small groups, we uncovered a variety of necessary improvements for the next iteration of the Quote Track System. We considered each user role’s needs and began developing a list of goals. Some goals were requested directly by the H&H team, while others were insights or pain points gathered through the Discovery process.
​The following goals shaped the system's new feature set:
-
Streamlining the user interface: there are a number of things about the legacy system that could be updated that could enhance the user interface
-
Such as: reducing the amount of scrolling and clicks, create bulk editing features for repetitive actions, streamline the Quote revision and duplication process, etc. ​
-
-
Improve the quality and accuracy of quote data: some current features make finding and managing system data cumbersome
-
Encourage more use of the system
-
Enhance at-a-glance metrics
-
Improve reporting
-
Create dashboards that are tailored to the team's specific role and most used functions
-
Accelerate the viewing & editing experience
-
Create a mobile interface for Quotes on the road
Who is QuoteTrack for?
At this stage, we had plenty of interaction with the H&H Sales team and were really feeling confident about the inner workings of their business and how they operate together, but we still wanted to put a user persona together so we can apply that to 'roles' that the new system would function under. We identified the following three main roles.
​
*Later in the process we did add a role for the Principal but a persona wasn't needed for that user due to a very pointed needs and feature list expressed by the H&H Team. The interfaces were explored and tested. This user will likely be a large candidate for Continuous Improvement after launch of the new system.
Based on the insights we've gained so far, three main user personas were created: the H&H Salesperson, Quote Manager, and Owner/Manager.
​User Personas are utilized to represent a realistic picture of the H&H Sales team users - who they are, their goals, and any barriers they experience when achieving these goals.
Salesperson
​
BARRIERS
-
Current UI/UX Clunky - too many clicks
-
Sales team has different interpretations of quote states
-
Relies on Quote Manager to enter quotes into QT
-
Depending on the report, data isn't always accurate or is skewed
-
Principals don't use QT to receive Sales team updates
​​​
GOAL
-
Easier management of quotes
-
Increased communication with Principals/
customers regarding Quotes through Quote Track -
Increase in sales due to better data/reports in
Quote Track
Quote Manager
​
BARRIERS
-
Sole member entering 40+ Quotes a day
-
Multifaceted quoting, time consuming
-
Reconciling quotes manually at the end of the month
-
Quotes & quote states are difficult to manage
-
Current UI/UX clunky - too many clicks
​​​
GOAL
-
Easier management of quotes
-
Better UI/UX for entering quote information
-
Better document management
-
Easier management of quote statuses and quote identification
Owner/Manager
​
BARRIERS
-
Current UI/UX clunky - too many clicks
-
Principals don't use Quote Track as much as they could
-
Data in dashboards and reports can be inaccurate
​​​
GOAL
-
Easier management of quotes
-
Better UI/UX design
-
Wants more H&H sales team to use QT more consistently and accurately
-
Communication tool between H&H and Principals
-
Selling point for new Principals/companies to work with H&H Sales
Designing the QuoteTrack System of our dreams
The product design process begins with empathizing with users to understand their needs deeply. This insight helps in defining the problem statement clearly. Next, ideation sparks creative solutions followed by prototyping and testing to refine those ideas into tangible products, ensuring they meet user expectations effectively. Some of these steps have already been covered in the Discover & Scope phase so let's skip ahead to the Define step!
It's important to note that while this process may seem linear, any of the design steps can be revisited at any time as the product undergoes refinement towards its final state.
DEFINE
After gaining a better understanding of the needs of the H&H team, required features, and even understanding their business opportunities, I used a 'how might we...' statement to reframe the problem and encourage brainstorming.
"How might we create a quote management system that is easy to use and is something that all users want to regularly engage with?"
In addition to reframing the problem, I wanted to make a list of goals to achieve in the design since many users of the current system expressed wanting a better user interface and user experience.
Design Goals:
-
Give the new QuoteTrack System a Brand Identity that is modern and fresh
-
Streamline interfaces and reduce clicks to essential system functions
-
Use color purposefully in the system to break up information and designate color for specific action items
-
Create a UI Kit to speed up the creation of pages since this is a large system
-
Create a simplified mobile interface that has simple functions for quick 'on the road' use by the sales team
IDEATE
Sketching and Evolving the System: I always start any system with the sketching phase and move into lofi wireframes. Due to the system being so complex, I created a good portion of the initial concepts during the Discovery Phase. Here are some examples of where the design process started in the Discovery Phase.
Branding Quote Track: During the discovery phase, we identified that the H&H team wanted to be able to sell the utilization of this system as a benefit to working with them. Principals can currently log in under their own profile and view their quotes or updates on projects.
With this initiative, I aimed to give the system a fresh, modern identity. This involved creating a new logo, system typography, color palette, and a UI Kit to accelerate interface development.
QuoteTrack Logo:
The logo icon depicts a 'Q' for Quote Track, the journey that a salesperson embarks on with Quote Track and can also be viewed as a squiggle for a signature.
Loading Animation: As a fun little detail, after a user logs in and the system is loading, there is a little 'Q' loading animation.
Brand Elements: In addition to updating the logo, the system fonts were modernized to a more geometric style to align with the logo's tone. We also introduced a new color palette, including secondary colors for use within the system.
UI Elements: Having these elements defined, I started to build a library of UI elements to be used within the system. I had a head start on the design process from the Discovery Phase, but at this stage, it's time to finalize details and make sure they're cohesive elements.
Dashboards for everyone!
The Discovery Phase reinforced the need for different customized dashboards for the different users. The first iteration of QuoteTrack stored all the quotes in the system in one long table. Everyone's quotes were difficult to distinguish so users would put initials on the quote number to designate their quotes from others.
​
It was important to give each user role in the system their own dashboard to view only their active leads, quote requests, quotes and projects.
New features have been added such as: KPIs for a specific user, starred projects, recent activity, reminders, notifications, attaching quotes to a notification, batch status changes, ‘My Leads’, ‘My Quote Requests’, ‘My Quotes’ and ‘Projects’.
Sales Dashboard
Regional Manager Dashboard
Quote Manager & CEO Dashboard
Principal Dashboard
Additional features that were rebuilt from the ground up
Every piece of functionality was meticulously rebuilt and reimagined to streamline the system as much as possible. This overhaul included user screens, reporting, contact pages, and innovative solutions for handling parent and child companies. We implemented auto-populating fields where possible, redesigned loading graphics, toasts, starred projects, modals, and even revamped the emails sent from the system.
I even created a demo video for the H&H Sales team to share all the new features that were coming with the new QuoteTrack System.
On the Road with Mobile QuoteTrack
The previous QuoteTrack System didn't account for mobile interfaces and was nearly impossible to do any quote updating.
With this in mind, we built a mobile version that utilizes a simplified functionality with the intent of doing limited updates to leads, requests, quotes or projects. It utilizes a simplified interface to quickly search for a quote on the fly.
PROTOTYPE & TESTING
This has been a huge legacy system rebuild and has taken two years of design and development work. We're testing the system rigorously internally and externally with the H&H team. The Sales team is set to do user testing mid-summer of 2024. The official launch is yet to be determined but the projected launch is end of Summer 2024.
Retrospective
QuoteTrack is my first major legacy system rebuild, and the experience has been incredibly educational. We are now two years into the design and development of the project. It has been eye-opening to witness the immense effort, time, and resources required for such a comprehensive rebuild. I particularly enjoyed collaborating with the client, sharing their dreams and aspirations for the system. This project has allowed me to stretch my interface-building and problem-solving skills, especially as we had to pivot multiple times. I’ve learned to prioritize a long list of feature requests and meticulously develop detailed functionalities.