B2B Pricing Software Feature Design
PROS Control - Condtional Formatting
I interned at PROS in the summer of 2021. I led a feature design, adding a new feature called Conditional Formatting, for a complex B2B enterprise pricing management application, PROS Control. The resulting design was presented to customers and stakeholders with glowing praise.
My Role /
UX Designer
Timeline /
Jun 2021 - Aug 2021
Team Member /
Daniel Allred
(Product Manager)
Katrina Cherk
(UX Designer)
PROS UX Team
PROS Dev Team
Tools /
Axure | Miro
Overview /
Background - What is PROS Control?
Historically, companies use Excel to monitor and manage the pricing of every single product they sell. PROS Control, as an enterprise pricing management software, makes those workflows easier.
Background - What is Master Price List?
Master Price List, a comprehensive list of products, is the main user interface that displays massive price-related data. One of the most common use cases is to adjust products' prices in Master Price Lists when price changes are needed.
Problem Statement
However, using PROS Control does not fulfill the users' needs for monitoring price changes. It doesn't alert users when these price changes are abnormal and may violate some Business Conditions. We call these abnormal prices 'Price Anomalies'.
Price Changes Are Too High
Business Condition Might Be Violated:
-
A product should never have a price above a set price, $50
-
The New Price of a product should never go up by more than 10% of the Current Price, etc.
Price Changes Are Too Low
Business Condition Might Be Violated:
-
A product should never have a price below a set price, $15
-
Price drops result in a negative margin, etc.
Personas
PROS Control is designed for the pricing professionals across different business companies, they normally have a position called 'Pricing Analyst' who are the end-users of our product. One of their daily tasks is to perform price adjustments in the Master Price Lists.
Evan
Evan, Pricing Analyst
-
Daily Task: Perform price adjustments
-
Frustration: Can hardly discern any Price Anomalies, among all these price adjustments
How Might We help the pricing professionals identify 'Price Anomalies'?
Solutions Overview
After synthesizing the findings from Request Gathering I broke down users' needs into three major parts and proposed the design solutions that can address their needs:
Help users configure Business Conditions so that they find the price anomalies
Help users highlight the Price Anomalies so that they can visually see the price anomalies
Help users filter on the Price Anomalies in order to select a certain subset of the price anomalies
Find
Highlight
Filter
Below are a high-level three-step user flow and a quick overview of the solutions I designed.
My Approach
I conducted 8 stakeholder interviews for request gathering. I ideated 7 solutions and then prioritized one. I conducted 9 rounds of internal feedback Sessions at the mid-fi level, then made the hi-fi interactive prototype in Axure and tested it with 10 customer sessions. Based on their feedback, I performed 6 significant design iterations.
Process /
Stage 01 --- Request Gathering
In order to better understand the complex UX problems and capture users' pain points, I interviewed 8 internal stakeholders who work closely with different customers, such as the Director of Customer Experience, then synthesized the finding by Affinity Map.
Key Findings
01. FIND
Users need to configure different Business Conditions to find the price anomalies.
Formats of Business Conditions are various and all columns in a Master Price List could be part of the business conditions.
02. HIGHLIGHT
Users need those Price Anomalies to be highlighted in Master Price Lists.
Color is a huge request and color coding for various Business Conditions is highlighted suggested. Some visual indicators are also helpful.
02. FILTER
Users need to filter the Price Anomalies to select a certain subset.
Filter the Price Anomalies based on the Business Conditions have been violated. Integrate the new filters with the current filter function can avoid retraining
Stage 02 --- Ideation
With our internal research key findings in mind, I started to brainstorm solutions. I wanted my ideas to be broad & divergent without concerning too much about the feasibility at this stage. I came up with 7 solutions with different UI patterns and workflows.
Stage 03 --- Mid-fi Prototype
For making sure the UI patterns of my solutions can fit into the existing design system at PROS. I discussed my solutions with other senior UX designers and then narrowed the multiple solutions down to a prioritized solution to show it to the internal stakeholders.
Stage 04 --- Internal Feedback & Iterations
I conducted 9 rounds of feedback sessions with internal folks, including the UX team and Dev team. I especially invited the Dev team to loop in at this stage to ensure the feasibility of the solution. I iterated on the mid-fi prototype at each round based on their professional insights before moving on to the Hi-fi prototype.
1. Alternative Filtering Capabilities
We thought we can make the 'Filtering violations' embedded in the current Filter Bar. However, this entire Conditional Formatting feature will be a front-end feature, that won’t store any data at the back end. While the current Filter Bar needs to pull out the data from the back end. Therefore, filtering on the front end using the current filter bar is not supported. I came up with the alternative as a front-end filter.
Before: Back End Filtering
After: Front End Filtering
2. Pre-defined Color Options
After collaboratively talking with our UI designers I decided to give users pre-set color options to choose from, rather than a color picker to prevent accessibility issue
Before: Color Picker
After: Pre-set Color List
Stage 05 --- Hi-fi Prototype
For the final Hi-fi interactive prototype, my goal was to build enough functionalities to show our customers how this new feature works, at the same time, not make them overloaded. So that I can collect comprehensive feedback and identify the 'gap' of their needs.
The First Step is to Configure Business Conditions
Land the Conditions Manage Page and click on Add New button to configure a new condition
Users may also want to configure the new condition in gradient color
What design decisions have I made here?
Design Decisions ---- Configure New Business Condition
1
1. Users can manage the existing business conditions they have configured, they can drag and drop to change the order/priority of each condition; they can enable the conditions to decide which one they want to apply to the Master Price List
1
2
3
-
Configure the style: select which column to highlight in what color
-
Configure the logic: fill in three input fields. The last two inputs dynamically change based on the first one
-
Read the condition in human-readable language from the bottom yellow box
1
2
3
-
Users can also highlight data in gradient color
-
Users can preview the gradient color and minimum and maximum data to foresee how the data will be highlighted
-
Users need to toggle on the 'Add Additional Logic' to trigger the logic configuration box, given that configuring the logic is optional for gradient color
The Second Step is to Highlight Price Anomalies:
Enable the business conditions if they want to highlight the price anomalies that violate the conditions
What design decisions have I made here?
Design Decisions ---- Highligtht Price Anomalies
1
2
-
Use checkboxes to enable the visibility of each business condition
-
Users get notified when the visibility of conditions have been changed
1
2
-
Look at badges as left-side indicators so that users don't need to scroll all the way right to see which cell is colored
-
Hover-over effect on the colored cell to show users which conditions are violated for each cell
The Third Step is to Filter Price Anomalies:
Use a drop-down Filter to select certain Price Anomalies subsets that violate specific conditions
What design decisions have I made here?
Design Decisions ---- Filter Price Anomalies
1
1. To make sure of the accessibility, use bold font in either white or black.
Stage 06 --- Customer Feedback & Iterations
I moderated the interview sessions with our customers to demo them the Hi-fi prototype and collect feedback. I interviewed 10 customers across 4 companies. My goals for this iteration are to figure out
-
whether we’ve accurately captured users problems;
-
whether the key workflows are intuitive;
-
whether the format of logic setting-up can cover most of their use cases
I used Miro to organize each company's feedback and grouped them by themes.
Different colored tags on the sticky notes represent feedback from different companies.
The green sticky note summarized the key iterations that are valuable to make.
Positive Feedback from Customers
10/10 customers think the problem we are tackling captures their pain points
10/10 customers think the new feature would be very valuable to add on
10/10 customers think the key workflow (adding new conditions) is intuitive
"[The workflows] look very logical to me."
-Purina
"This will be useful, very positive to be added on."
-Phillips 66
Iteration --- Users need show/hide Conditions at Master Price Lists Interface
Add Show/Hide Conditions at Master Price Lists Interface: Allow users to control what is highlighted in their own MPLs so that they don't need to go all the way back to 'Configuration Panel' to show/hide conditions
Iteration --- Alert Column may take up valuable real estate
Add Option to Alert Dropdown Menu: Allow users to hide the entire alert column to not disrupt the screen by adding a dropdown option under the Alert column
Iteration --- Some conditions are shared between MPLs
Add import feature at Condition Configuration interface: Allow users to import conditions from other Master Price Lists so they do need to set up duplicated conditions for every Master Price Lists
Iteration --- Filters need descriptions
Add description for each badge in the dropdown menu: Prevent users from memorizing the badges meaning
Before: None Description Filter
After: Description Filter
Reflection /
What I did well:
1. Fast Learner: I rapidly onboarded and quickly understood such complicated UX problems in order to contribute to the team and lead the feature design for an enterprise pricing application.
2. Productive Designer: I delivered an 'unbelievable' amount of work including multiple interview sessions; hi-fi interactive prototypes; complex interactive iterations, etc. within a limited timeline.
3. Excellent Collaborator: I not only had a great partnership with the internal folks I worked with but also built up a great relationship with the customers I interviewed
“...... Astrid is courteous, professional, and an excellent collaborator with colleagues. Her prodigious work ethic allows her to deliver results with such swiftness that her accomplishments would have been unbelievable to me had I not personally witnessed them as her manager. They say Rome wasn’t built in a day, but that is simply because Astrid wasn’t there to build it! ”
--- Evan Sunwall, UX Manager, PROS
What can be improved:
1. Review the Iterated Solutions with Dev Team: I wish I could show the iterated solutions to the Dev team again to make sure the iterations are also feasible in an appropriate timeline
2. Usability tests would be more beneficial: We demoed our prototype to our customers this time due to time constraints. Multiple rounds of usability tests will be helpful to discover more usability issues
What I learned:
1. Communication skills are so important for a UX designer: Designing complex and professional B2B software requires a deep understanding of the needs of end-users whose key workflows and needs may not be immediately obvious. Relying on testing with end-users and stakeholders who have in-depth knowledge of real-world use cases and end-users pain points is absolutely critical. Communication skills are so important when we collect insightful opinions from these people.
2. Design within the existing design system: I did not design from a scratch for this particular project. Bearing in mind how the existing design system/standard looks like and what UI patterns they have been applying for the current products at PROS is one of the crucial challenges. Sometimes the solution and design aren't good enough is because they are not PROS enough.