Better item management in BevSpot
Easily editing and quickly adding items to your account
Role
UX Designer, UI Designer
Timeline
March 2019 - April 2019
Team
Nichole Mace (Product Manager), Anna Lee Barber (Developer)
Overview
BevSpot allows restaurants and bars to manage their inventory and ordering data, meaning they need to add all of their products into their account to get up and running. We wanted to redesign the item management page to allow them to quickly add and easily edit their items in one place.
Problem
The initial pain point was to be able to more easily edit items. The old page only allowed you to click an item to edit and a complex modal appears to edit all fields of an item. Many users needed to make quick adjustments to their items.
We realized that having 50 or more items in your account was one of the leading indicators of conversion (you need items in your account to take inventory and taking inventory provides a key value of software). This new page needed to let users add items quickly and easily.
The old item management page (“My Items”), only allowed you to edit an item’s details by hovering on item name and clicking “See full details”, which opened a complex modal.
The only way to edit an item’s details was through opening this modal (the “item card”).
Goals
Make it easy for new and existing users to add and modify their items
Support new features elegantly - GL code, copy and paste, uploader, catalog, slim item create
Serve as launching place for new users who need to add items
Process
Heuristic Analysis
Our Product team had done a lot of initial research on this project, and had a good list of requirements and user expectations. I began my process by conducting a heuristic analysis of current implementation which revealed further complications in our current work flow. I set out to look for patterns that other softwares were using successfully, including Trello, Google, and HubSpot.
Looking at how other softwares handled complex data tables gave me some inspiration for how to edit, add, and filter our large tables of items.
Wireframes
After gathering research, I dove into an exploration phase where I tried different approaches which were tested internally. I tried multiple different ways to add items, and also looked at different approaches to complex tables and allowing users to choose what data they want to display in the table.
One wireframe explored having a filter sidebar and a settings button to be able to edit the columns that were visible within the table.
Another wireframe explored whether to have a button to open a blank row at the top of the table that would be filled in to create a new item. It also played with different hover states and placement of buttons and controls.
A third wireframe explored bringing all of the tools and controls to the top of the table, similar to Google Analytics. And having a dropdown for the different ways to add items to the table (through a catalog, by uploading an invoice, or from scratch).
Iterations
After drawing out initial wireframes, I went through a number of design iterations. Our product team had done user interviews to understand what our users needed, and we had also watched user videos on Fullstory. My job was to take their research and figure out best practices and easiest ways to implement changes to meet their goals for the page.
Final Mocks
In the end, we were able to deliver a solution that met our goals. Users could inline edit key information of their items, they could easily filter and sort those items, and they had a quick way to add an item by just entering the important information. Our slim create allows users to only need 4 required fields to add a new item to their inventory.
The final implemented table gives users a lot more flexibility. We also changed the behavior so that clicking the item name opens the item card to be able to edit all of the item’s information, which was a successful change as many users intuitively click on an item to see more information.
Our new “slim create” allows users to enter only 4 required fields to create a new item without leaving the table or needing to open the large, overwhelming modal.
Implementing inline editing in the table allowed users to edit key details with just a click.
Challenges and Compromises
Due to time constraints and limited resources, we had to scale back some of our initial vision for the table. One assumption I made was that users should be able to select the columns they want to view in order to control which data is presented in the table. I iterated on various ways to do this, including putting the column options with the filters, and having the Item Name column be sticky so the rest of the table would scroll under it as you scrolled horizontally on the table. We ended up slimming down the number of columns shown to the most important (after talking to customers) and removed the need for custom columns.
If I were to do this project over again I would do much more testing to figure out whether my assumption around custom columns was correct or not.
Outcomes
Ultimately this project contributed to a bigger push to increase conversion, and a free trial conversion rate increase from 5.9% to 11.5% through a mix of self serve features and onboarding process improvements.
More users were able to add more items quickly and easily, which made for a very sticky experience in free trial. People could use their real items and begin using the product much faster.