Redesigning the Cannabis Purchase Order For Speed, Accuracy, and Flexibility

The Problem

The capabilities of the Treez purchase order page hadn't kept up with the needs of our customers. Making the PO page poorly positioned to address the requirements outlined in our roadmap. I addressed these problems by revamping the process of adding new products while introducing new components flexible enough to be repurposed for future designs.

Some Background

What are Purchase Orders?

Before an item is avaliable for sale at a dispensary a purchase order is generated. As items are added shipment details are recorded such as vendor info, the date received, and the cost and price of the merchendise

A design that promotes speed and accuracy is crucial to this experience. Speed because POs are generated daily, and accuracy because much of this info is customer facing and shows up on retail labels or the online menu.

Purchase Order Visual

Original Design

The page I inherited offered 2 ways to add new products. One via a method we called "natural language"...

Purchase Order Visual

Conventional GUI

...and alternatively via a more conventional software UI.

Purchase Order Visual

Natural Language

It was believed natural language was a differentiator among our competitors and would help new users learn the concepts involved in the PO process. For this reason, stakeholders wished to retain both input methods.

By demonstrating an alternative approach and emphasizing the drawbacks of maintaining 2 designs I was able to persuade stockholders of the advantage of one unified approach.

Design Goals


Introduce New Product Types

We wished to add 5 additonal product types. This enabled the the operator to purchase topicals, pre-pack flowers, edibles, plants, miscellaneous items, and merch. The challenge was to think through which product details to require for each.


Enable Barcode Capturing

Our system previously only allowed products to use Treez generated retail labels. To overcome this limitation a new flow was needed to allow the UPC from the packaging to be scanned in.

Build Scalable Components

The inherited design felt boxed in and cramped. What was needed was a solution that could gracefully scale and transfer into the contexts of other pages.

Upgrade Steps

Define a Happy Path

The original design felt unguided and overloaded. The solution was to increase the amount of white space to content on the page and elevate the required action needed to proceed.

Upgrade Steps

Allow Photo Attachment

Treez had a forthcoming e-commorce solution. For this reason I found it important to give operators the option to attach product photos so they could be ready from day one.


The persona was formed from the insights I gathered on my dispensary tours and on site owner/manager interviews.

failed approaches

Task Flow

With the user's objectives clarified I proceeded to develop an optimal task flow for processing new inventory items. I went through several iterations identifying inefficiencies.

failed approaches


I then began applying form to the task flow through several iterations of sketches. A key was acknowledging the UI conventions already established throughout the platform in order to maintain consistency.

failed approaches


I took the most promising ideas from sketching and developed them into full wireframes. My collaborating team members reviewed the finished wireframes and continued iterating.

failed approaches


I am proud we were able to accomplish our stated design goals of adding new product types, capturing barcodes, creating a happy path, and allowing photo attachments. All while creating a structure to accomodate future capabilities.

completed po design

Completed PO Page

Each lines contains a different SKU with it's most important attributes listed along with a product specific icon. It was important to emphasize the "Print" as the main CTA on the page. Once printed the PO is "saved" and remaining are barcodes created.

completed po design

Completed PO Page

To address a major problem identified in our research inputs utilize autofill and autosuggestions. This minimizes the chances for duplicate products while also enabling speedier entry. Cards enforce consistency and guide the user sequentially down the page. Another advantage of the design is their modularity allowing each card to be repurposed on different pages of the portal.

completed po design

Completed PO Page

The barcode card lets users to scan in one more more barcodes to associate to the product. Alternatively users can initiate adding new products by starting with a scan.

Results & Lessons

This design helped win new deals. The additional barcode capabilities sold 5 new clients who had been holding out.

It also accelerated development. With the newly added card framework, developers could easily transfer this functionality to 3 forthcoming modules and save hours of coding. Our support staff also saw a decrease in the amount of support calls related to the purchase order page.

I also learned an important lessons. If you give a user the chance to define a unique ID, consider the consequence they aren't able to change it. This oversight resulted in duplicate barcodes if a user imported a product with a barcode already in the system.

Other Treez Projects

Role: Design Lead, Research
Tools: Sketch, Invision, Principle

LinkedIn Profile Twitter Feed Instagram Feed SoundCloud

Adopted from Jeffrey Peltzman