Although cannabis is legal today for recreational purposes, it is still highly regulated by state governments. These governments require all dispensaries to report their transactions in order to prevent drug trafficking. This is what we call compliance. Greenbits created the largest foothold in compliance in 2014 by building a scrappy iPad POS (register 1.0). This device captures 2 billion cannabis transactions annually. Greenbits hired me to support the implementation of Register 2.0 but my role quickly changed.
First Things First
Double Checking the Original Design
As soon as I saw the design for register 2.0, I had a strong feeling that rudimentary UI principles had been overlooked. There were dropdown menus with >4 items, inconsistent column layouts and navigation menus that were better left hidden. To objectively prove to myself and the team that there were systemic layout problems, I set up qualitative user tests. Instead of validating my assumptions, users actually reported completely different UI problems:
That the card layout was “overwhelming” and made it difficult to scan product names.
That it was hard to read order items as the contrast on the text was low.
The hitbox dimensions were too small causing users to press the wrong buttons
Although the current philosophy was to release a sloppy alpha and then fix the problems in the beta, we knew from experience that these problems would get baked into code. Greenbits would have to scale its support resources to accommodate for user error.
Confident with this premonition, we redesigned a sample set of screens and presented them to users. Using their mostly positive feedback, we rallied leadership for a full redesign and won. I immediately got to work on an atomic system and component library.
This tests lead me to realize how valuable user testing is. They proved to me that my problems were not actually the real problems. My boss saw this growth in me and mentored me to become Greenbits in-house user research specialist. After we kickstarted the redesign, I established the user testing regimens that would help validate our stories.
Atomic Design System
We built a robust arsenal of atomic components and user tests, because of this, we were able to catch up with our dual-track development team. We created a succinct backlog of redesign tickets and supported them throughout the redesign pivot. Even when it meant throwing pizza parties for emotional support.
User Testing Drills
It was a lack of user testing that caused Greenbits to pivot drastically to a new design system. To prevent this from happening again, I created 3 documents to make user tests more convenient as well as more productive. First, I designed a script template to help develop prototype walkthroughs. Next, I created a feature grading tool that broke down problems statistically. Finally, I produced a list of helpful questions for any occasion.
I am providing simplified versions of each of these documents so that you might employ better user testing practices at your company. Of these three, the most compelling is the feature grading tool. It will help reveal the fail rate of every feature in a prototype. This can be valuable in communicating with leadership as you will be able to present problems that are statistically backed.
Phase 2: Seek and Destroy UX problems
While the engineers coded the development backlog, we used our freshly made atomic system to user test the discovery backlog. This was novel as previously only builds were used for testing. We used sketch’s native prototyping tools to debunk assumptions and prioritize stories that delivered value. Here were some of the UX problems I worked on using the ready-made atomic system.
1. accidental cannabis trafficking
Problem: Dispensaries are required to provide a detailed report of sales to the government. Each sale must be accurate to the inventory model or it can trigger the government to suspend the dispensary’s license (aka shut down.)
Register 2.0 allowed for cashiers to attach items to the order using a search functionality. Cashiers would search for a product by name then attach the product by selecting the specific SKU. Problems arose when cashiers selected the wrong product and thereby the wrong SKU, causing for inventory to appear ‘shelved’ to the government. When a product is shelved for months, it is presumed it has been sold on the black market. Not acceptable. We needed for cashiers to select the exact SKU every time.
Solution: Our first take at this problem was to create a search that allows cashiers to double check the SKU they have attached to the order. After user testing with 5 dispensary owners, we learned that this would not be enough. We tried again and established a way to add products based on serial number (SKU). Cashiers would read the SKU from the product’s label, punch it in into the search bar, and then tap the product to add it to the order. Although primitive, this solution guaranteed cashiers would add the exact product. We felt this was a good catchall solution. Although it could be better, we decided it was important to move onwards.
2. Painful Intake Processes
Problem: The intake process was painful for everyone. For starters, the dispensary owner has to pay both a security guard and receptionist to check the customer’s age. Next, if the customer wants to sign up for loyalty, they have to enter in their information into a Baker terminal. We thought we could consolidate these processes in one application.
Solution: Make the security guard the receptionist. We designed an app that enables the guard to capture the customer’s ID information an iPhone camera then opt-in the customer to the loyalty program. This simple step creates cascading improvements across the retail experience:
It decreased the amount of textarea form fields for the loyalty program from 8 to 2, increasing the chance that the customer will complete the form and convert.
It improved the budtender’s transaction speed. As soon as the guard scans the ID, the customer profile appears in the register’s queue.
It decreased operating costs as the owner no longer has to employ a receptionist to scan IDs.
3. Faster, more Efficient Transactions
Problem: Dispensaries are judged on the length of their lines. If a customer walks into a dispensary and sees a long line, they might take their business elsewhere. This is especially concerning given the advent of online delivery services.
Solution: A range of shortcuts that accommodate for faster retail interactions. One notable example being instant tender buttons.
When a cashier rings up a customer, they can press an instant tender buttons instead of typing the payment themselves. The buttons immediately transition the cashier to the change screen. Sure, this is an optimization only saves only seconds but it is just one of the many features that make the register more efficient:
A 2 column layout that divides the screen equally. This provides the screen real estate necessary for product names to be displayed in one horizontal line, making them faster to scan.
Sequential tabs that mirror the sequential steps of a transaction.
Enhanced readability on the ‘change due’ screen. This way cashiers can easily reference the amount of money they’re supposed to return as they count the physical change.
Using these improvements, a cashier can transact a customer in as little as 31 seconds, so long as the customer knows precisely what they want.
At the end of my time at greenbits I had redesigned their flagship product. I designed a register responsible for reporting $2Billion worth of transactions to the government. First, I tested the initial designs to make a strategic argument to redesign. Next, I created an atomic system to kickstart the development of the redesign. We leveraged the same system to user test features in the discovery backlog, and solve real UX problems:
Make product lookup accurate, and prevent government interventions.
Create efficiencies across the retail environment.
Help cashiers make transactions faster.
If you would like to learn more or work together, you can reach out.