Silo is an enterprise resource planning software that helps distributors in the food supply chain streamline and connect their operations, logistics, and finances.
Summary
Price sheets are a way for users to organize customers into different categories based on order behavior. Customers are usually organized by what products the user sells to each one. The price sheet is connected to other areas of the platform, including inventory and pricing, but is underutilized. This redesign was intended to simply fix UX issues, but I observed an opportunity to introduce new features that aimed to give users greater control of their price sheet settings, as well as create parity with other pages of the platform.
My Role
This redesign was the final project from my internship with Silo. I led the project from start to finish and received feedback from other designers on the team, product managers, and a current user. I determined the project requirements, conducted a user interview, created wireframes, and prototyped the final design.
Problem
Inconsistent UI, Low Functionality
The largest problem with this page was the interface. There were noticeable issues with information hierarchy and pattern inconsistency. Additionally, the page lacked the functionality that would allow users to better segment their customers.
Goal
By adding in a few small features and fixing poor UI, the page would allow users greater control over the segmentation of their customers.
User Research & Product Audit
The first part of this project was spent researching why this page is underutilized and how users interact with it. I conducted light user research and discovered how customers currently use the page in their workflows. I reviewed and organized customer feedback from interviews as well as sifted through UserVoice feedback and suggestions.
Inside the product, I audited and annotated the current experience. Colleagues helped inform me about the historical context of its limited functionality and the project’s level of priority on the product roadmap.
Insights and Takeaways
Users utilize price sheets to categorize customers based on similar purchasing behaviors.
Users want greater control over how they mark up price sheets.
Users want to be able to send a price sheet to a single customer regardless of the price sheet they are assigned to.
The page displays more content than necessary, leading to content overload.
The page does not look or behave like other pages in the platform, contains unusual patterns.
Design Goals
Design Goals
Create a way to give users greater control on mark ups of an overall price sheet
Allow users to send a price sheets to a single customer
Update layout to create consistent patterns across platform
Tweak UI issues, (typography, hierarchy, etc)
Out of Scope
Any changes to connected pages, such as Inventory or Pricing
Updates to the printed documents or emails
Design
My first few sketches were focused on addressing the UI issues. I tested ways to show only necessary information in a condensed view. My original idea was to rework the cards but eventually scrapped the idea in favor of a table. Most of the platform displays information in tables and I thought this page could be simplified in a table, increase familiarity between pages, and surface frequently used actions.
In the original experience, users may create dependent price sheets from a parent price sheet. This can be useful for users to set specific mark ups based on certain set pricing. Some users used this, but many did not. What I learned from user’s feedback is that they wanted to set pricing based on specific pricing types, including break-even costs, minimum or maximums, or target pricing. I decided to test a version of price sheets that eliminated dependent price sheets and developed a way for users to set the granular pricing structures they had requested.
Working through the ability to edit these values, I wanted to reduce the amount of modal experiences a user had to go through (there are many throughout the platform). I took the opportunity to try out in-line editing after a new price sheet is created. This allows a user to seamlessly edit the name, description, and mark up values of a price sheet without needing to navigate away from the page.
Adding in new functionality and streamlined editing
Additionally, users wanted the ability to send a price sheet to selected customers regardless of the the price sheet they were assigned to. Some users were creating tedious workarounds to do this action. Knowing that users would send this to more than one customer, I added the ability to search through the user’s entire customer list and add them with a multi-select component. The customers appear selected in the dropdown but appear as a number in a chip in the input field so they can keep track of who is added without cluttering the drawer information.
One thing that is lost with the updated version of this page is where to see all a users customers. Previously, all customers showed up on the page which is not necessary to always see. I originally hide them behind the customer button in the column but, when reviewing these design with a PM on the team, they suggested a customer focused view in addition to a price sheet focused view. This seemed like a useful way to show all customers at once with the ability to see which price sheet they are added to. Price sheets can hold many customers at once and a user may forget the details.
Customer-focused view
Reassigning Customers
This was the most challenging part of this project. I wanted to make sure that we weren’t adding too much friction to the reassign function. The original reassign function was not accessible on mobile or tablet since it only appeared on hover.
I wanted to understand how frequently users reassigned customers and under what circumstances they would do this. I learned that it would only happen if they were bulk reassigning many customers to a new price sheet in order to delete one or if they needed to move a single customer.
This function went through many tests and iterations. I started by breaking out the action into a modal to make it a focused experience. A small modal felt too compact and didn’t indicate the type of change it was making. I tested a larger modal with two vertically stacked boxes which was a clunky solution. Industry research led me to try out side by side boxes with arrows to move the customers and a drop down to change the price sheet.
Solution
The final solution included an option to keep dependent price sheets for the interim but with the intention that they would be phased out. This would give users greater control over how they set pricing and segment customers.
Next Steps
The next steps for this project would be to conduct more user testing to see how users navigate the page. In order for this redesign to have an even larger impact, the pricing page that holds all the published inventory would need additional functionality since the two pages are inherently linked. Continued work on this project would need additional work on the printed documents and emails that users send, which were not part of the original scope.
Results
The redesign of price sheets never shipped and no metrics were collected. However, the metrics I would have collected would be:
# of users marking up price sheets with each new price time type
# of price sheets sent to a single customer
frequency in reassigning customers
Learnings
Ownership, Research, and Confidence
I learned a great deal of valuable lessons throughout this project. All the reviews, support, and iterations helped me complete my first large design project. I gained confidence in the process, parsed through research to define the scope, and was able to own the project from start to finish. In an effort to always improve, I identified areas that felt natural to me and pointed out areas for conitnued improvement.