close

Order Line Item Matching

Introducing AI to invoice processing then indicating matches and educated guesses within the UI.

The Problem

The lack of user approval for invoices stems from the time-consuming task of manually cross-checking line items against processed invoices. This inefficiency hinders the timely verification of invoices, impacting financial processes and necessitating a solution to streamline and expedite the approval workflow.

The Solution

• Enhance the UI for order detail line items to improve readability.
• Include indicators for successful AI matching, educated guesses and cases where AI did not attempt to guess.
• Enable users to mark line items as checked.

Redesigning Line Item UI

By employing the 'Crazy 8s' method, I generated eight distinct mockups using Figma. These mockups explore various ways to showcase order detail line items.

Once the eight designs were reviewed, I iterated on the feedback received from Product and Customer Success until I received approval for the new line item design.

Line Item Matching UX

After carefully analyzing the requirements, it was determined that three options would be available: a 100% match, an educated guess, or no guess at all. Working with Product, we wrote out the scenarios for the three situations.

100% Match

• Invoice item SKU matches the SKU of a packaging/vendor relationship or the item and invoice line item hadRed indicates that we were unable to make an educated guess or achieve a 100% match been mapped previously.
• Packaging matches.
• Vendor exists for that given packaging or item.

Educated Guess

• Invoice item SKU matches the SKU of a packaging/vendor relationship or the item, but the invoice line item has not been mapped before.
• Any assumptions made for quantity or price.
• Invoice line item name matches the item card name exactly.
• Packaging is not null or can be matched to a dropdown option.
• Last three orders are mapped to the same packaging.

No Guess At All

• Packaging is null or cannot be matched to a dropdown option.

Creating Line Item Matching UI

Once the requirements were finalized, I went to Figma to devise a strategy for effectively notifying the user about the various scenarios in the UI.

• No color indicates that we are 100% confident that this line item is correct.
• Yellow/Orange indicates an educated guess, suggesting the user to double check with their original order and invoice.
• Red indicates that we were unable to make an educated guess or achieve a 100% match.
• The user can hover over the packaging to extract the actual line item information from the invoice.

• The user can verify that they have checked the line item and everything is satisfactory.
• After making a selection or taking an action on the items with an educated guess, the indicators would be removed.
• If a user verifies the line item using a checkmark, the items with an educated guess will be marked as having no action required.

• Once the user has added or verified all the line item information, the desired outcome is to have a green check mark next to each line item.
• If an item initially has no match, the UI will display markings once a match is found.

---

Next Steps

Once the engineering team is able to achieve the backend for line item matching along with a confidence score, I will collaborate closely with an engineer to incorporate the front end UI.

We will then utilize analytics to evaluate the potential increase in approved invoices over time as a result of the new, intuitive UI. Throughout this process, we will actively gather feedback from users regarding the design and accuracy of line item matching.

close

Multi Vendor Ordering

Enhancing the UX/UI for users with multiple vendors selling the same item in multiple sizes.

The Problem

Managing inventory and reporting becomes complex for a user who consumes the same item from different vendors and in varying sizes. This situation creates challenges in accurately counting inventory and reporting, especially when multiple instances of the same item are obtained from different vendors and in different sizes. The user's objective is to effectively manage a single item that comes in multiple packaging sizes from different vendors, allowing for easy comparison of costs among different purchasing options.

The Solution

• Redesign the Item Card to be able to add multiple vendors to a given packaging size.
• Redesign Cart Builder to showcase the different packaging sizes and vendors for a single item.

Redesigning the Item Card

By employing the 'Crazy 8s' method, I generated eight distinct mockups using Figma. These mockups explore various approaches to showcasing packaging information within the Item Card component.

In collaboration with internal team members, we conducted a review of the eight designs, discussing the likes and dislikes for each. Based on this feedback, I returned to Figma to integrate the most favorable aspects into an approach for displaying multiple packaging sizes sourced from multiple vendors.

I engaged in multiple iterations of this process, continuously refining the design to strike a balance between intuitiveness, cleanliness and minimal disruption to the current implementation of the Item Card. Throughout these rounds, we carefully considered and incorporated feedback to ensure the final display of multiple packaging sizes from different vendors met our objectives. The staging UI, reflecting these changes, is presented below.

---

Redesigning Cart Builder

After designing a way for the user to create and manage a single item with multiple packaging sizes and vendors, the next step was to facilitate the seamless ordering of this item in different sizes from various vendors. To meet this requirement, my focus was on preserving the current UI as much as possible to minimize any disruption for the user. Utilizing Figma, I created a high fidelity mockup (Shown Below) of proposed design enhancements.

Once the mockups were finalized, we arranged discussions with key users to gather their feedback on the designs. After a few minor iterations based on their input, I collaborated closely with an engineer to implement the required UI updates for accommodating multi vendor ordering. The staging UI, reflecting these changes, is presented below.

---

Next Steps

Having enabled the creation and ordering of different purchasing options for the same item, our next step is to gather feedback using Maze and staging data. This feedback will be instrumental in iterating on the design prior to the official launch and identifying any critical bugs (P1) within the code. It's important to note that this implementation involves significant changes to the back end and existing data, necessitating a comprehensive release plan.

Once these changes are pushed to production, we will need to ensure that the rest of the application, including inventory counting and reports, is modified to accommodate this new feature. This transition requires a thorough approach to ensure a seamless integration and minimize any disruptions to the existing functionality.

Overall, this endeavor represents a significant change that requires meticulous planning, thorough testing and careful execution to ensure a smooth and successful adoption of the new capabilities and features within the application.

close

Invoice Processing Usage

Improving the UX/UI behind the current invoice processing flow to enhance usage rates.

The Problem

Users struggle to determine whether they should attach a returned process invoice to an existing order or create a new order. As a result, duplicate orders are frequently generated due to the uncertainty surrounding the items included in the returned processed invoice.

The Solution

• Improve the UX behind submitting processed invoices to attach to order records during submission process.
• Improve the UI behind attaching returned processed invoices to ask the right questions to prevent duplication.

Determining the User Flows

The initial phase of this project involved identifying and mapping out various user flows to guide the creation of mockups. Numerous decision points were identified, requiring careful consideration and inclusion in the process.

Redesigning the User Flow

After consideration for how users attach returned process invoices to order records today, taking in feedback from current users and the Customer Success team, I determined that the easiest solution would be to attach invoices to order records upon upload.

When users were recieving returned process invoices, they had no record of what was actually on the invoice besides the number of items, useless in most scenarios, and the vendor. I realized that when a user was uploading an invoice they had full context of what was on the invoice to reference for the order assignment.

After presenting a solution for the uploading of the invoice, I determined that this flow would be useless for returned invoices that users might get through a third party integration vs uploading it through our UI. Presenting the user with leading questions would indicate which action they should take whether to create new or attach to an order placed within app.

Once the plan was established, I proceeded to use Figma for creating mockups illustrating the envisioned flow. To maintain consistency within the application, I aimed to reuse components whenever possible. After considering various options, I settled on a slide-in card design that would contain a questionnaire for the user.

Through collaborative design iterations involving stakeholders, we arrived at a final set of mockups (Show Below). These mockups were then presented to users to seek their final approval.

Implementation

After a few minor iterations based on user input, I collaborated closely with an engineer to implement the new UI. The final design, reflecting these changes, is presented below.

---

Next Steps

Efficiently processing invoices and linking them to order records is crucial for our users' success. Our upcoming features will involve utilizing AI to identify received items on the invoice and compare them to the ordered items, enabling us to identify any missing items.

We plan to integrate with accounting systems for restaurants and bars, allowing them to manage their financial records with accurate, synced data. Ultimately, we intend to provide the capability to pay invoices directly through our application.

Throughout these future features, we will continuously iterate on the new user interface based on valuable feedback from users as they engage with this feature more and more.