The initial design of the cashier page was exactly the same as the inventory section, with a complete table of items that budtenders pick from and add to a customer’s shopping cart. This design was a quite costly on the loading side, given that not all of our customers have blazing fast internet, and that it would take a while to load-in all of the items before a budtender could actually start using the cashier. This problem was solved by removing the table entirely and installing a simple search box at the top of the screen, but while loading times were significantly reduced, budtenders would have to enter the exact product they were looking for in order to pull-it-up and add it to a customer’s cart. Having to search for the exact product made for a pretty painful UX when a budtender screws up a specific SKU or misses a letter.
Abstract
Flowhub is a startup in Denver, CO that is building digital products for compliance in the cannabis industry. Given that cannabis legislation can pass overnight, we were always on our toes for getting the best product out to our customers ASAP, which meant I had the chance to work on a wide variety of projects.
"Flowhub’s mission is to legalize cannabis in the most effortless and compliant way possible."
Point of sale cashier
Thousands of transactions go through Flowhub’s POS, but slow internet for the majority of customers made searching for every item a huge pain. Flowhub needed a faster checkout that was as robust as a table view but loaded quicker than search, all while working on laptops and tablets.
Two customers. One checkout.
Two types of customers visit a dispensary: The regular, and the tourist. One knows exactly what they want, and the other wants to explore. Budtenders needed prompts and specials to guide the sale to tourists.
Regular customers know exactly what they are looking for when they walk through the doors of a dispensary, making the entire purchasing process pretty quick and straightforward. Tourist customers are often people who have little to no experience with cannabis products and have tons of questions regarding their potential cannabis purchase. The simple search box design of the cashier was great for helping the regular customers, but didn’t offer any prompts or up-sell opportunities for when it came to the probing tourist customer. I was tasked with totally revamping the cashier experience to make it easy for a budtender to sell to both groups.
I began by assessing the limitations of the current design and outlining the goals of my redesign. Usability across tablet and desktop, emphasis on up-sell opportunities, transaction speed, and distinctness of products became the main drivers for this redesign, so with those in mind I started developing mockups.
Inventory cards as the solution
Highly visual cards offer a generous amount of click or tap space for both desktop and mobile, and translated primary product information for tourist customers.
Having conducted research into other digital point of sale systems, it was apparent that cards were the preferred design pattern for the main screen. I tried a couple of methods of presenting the products with various labels and icons, but a budtender needs to know quite a lot more than a regular POS card may show in order to make even a mildly appropriate recommendation. Note how many characteristics a cannabis product can have as points of up-selling to a customer: what type of product it is, how much it costs, what units of weight it is sold by, whether it’s available for medical or recreational sale, what brand it is, what type of blend it is, how much CBD and THC is in it, etc. One of the challenges of this cashier was packing as much of this information into cards while maintaining legibility and clickability. I prototyped touch and hover-states for the cards in HTML and CSS, but the developers expressed concerns about the variety of browsers and devices they’d have to develop this for in a short time period, as well as the usability when it came to touching where information would be displayed on the cards, thereby obstructing the user’s view on touch devices. You can see the evolution of packing information into cards with some of my early component trials below:
Micro icons and accessibility
Displaying activity to an employee or store manager as they scroll through a fast feed of transactions required clear, distinct, and intuitive indicators. These were designed to accommodate poor vision and color blindness.
The icons we were using for products and pages could only fit in areas so small, and they weren’t particularly distinct as you scroll through them quickly, as they were all the same line width, size, and color so we decided to introduce a new micro-icon system. These icons were to be legible at small sizes, and were to be paired with bright colored bases to develop a heuristic of familiarity for the budtenders to quickly identify what they are looking for. Along those lines as well, I tried to make the icons and their base colors distinct enough to be identified by someone who was color-blind or someone with poor eyesight. One of the crazy things I learned while working on these icons was how all of the classical rules of maintaining line-width in iconography go right out of the window once you’re working at micro scale. Most of the time you can keep the same line-width, but often times I’d be pushing fractions of a pixel to make sure clearance between two icon segments was wide enough. Selecting base colors for the icons was an interesting task as well, given that there was such a wide variety of activities that could show up in a feed. For the non-heuristic color selections (heuristic like green for add, red for delete) I tried to match colors that had similar hues like green, turquoise, and blue with distinct icons of events that would likely occur in different time intervals, so they wouldn’t appear next to each other very often.
When tables fail
Homogenous typography, low contrast, and a lack of hierarchical organization made browsing product details arduous and time consuming. Three information categories, stark typographic contrast, and space maximization standardized detail views across every product vertical.
On the right side of every point of sale screen there is a column controlled by two tabs. This column displays details about selected items in the center-view, enabling users to do a deep-dive into what happens in the dispensary. The design at the time was a condensed table with the label on the left side and the content on the right. From a pure functionality standpoint, this covered about 80% of the cases of information that it would present, but the other 20% rendered it almost unusable. Sometimes labels would extend far into the right side of the table and have to end in an ellipses (…) before the user new what it was describing, and vice-versa for the content on the opposite side of the table. Given that these detailed views were supposed to denote compliance information, they were definitely due for a UI/UX upgrade.
My design started with maximizing the space given in the column itself. I pushed the label margins up to 12px of the main container, and consolidated the appropriate characteristics into subcategories to use across all of the detail columns for the products and pages. It’s worth mentioning that the ease-of-use of Flowhub as a point of sale system for the cannabis industry greatly reduces the stress of being audited by the federal government at any random time on any given day. The ease of use of this detailed view during an audit continues to be a major selling point for all of Flowhub’s customers that use the POS application.
Conclusion
The work I’ve shared above is just a selection of some of the projects I had the chance to work on while at Flowhub. As you can tell, I bounced-around to a variety of digital and physical mediums, but was always given the chance to influence the design direction of the company. From the great office migration, to weekly company “Rallies”, to defending a “Design Fort”, to hacky-sack breaks, to Brazilian steakhouse feasts, to absurd emojis in the Slack channel, to arguably working in the strangest industry in the world, my time at Flowhub was everything I could want out of an early-stage startup experience.
What I Learned at Flowhub
Compliance is really really tedious. And designing a solution for compliance can get very overwhelming at times. That, coupled with the demands of customers made for a consistently high pace of work. I learned how to strip-down and condense my design process into shorter-iteration times to break-up large projects into more manageable components.
With every project I was constantly bouncing ideas off-of Jon, the Creative Director. Given the volume of things he was dealing with, I learned how to present my work, ideas, and problems quickly and clearly so he would have everything he needed to provide effective and direct feedback.
Sometimes I would get stuck designing a solution within the patterns and predefined elements of the brand. I learned that it’s perfectly ok to design a new pattern as long as the value of the pattern extends beyond a small use case.
Clarity and hierarchy are the best solutions for systems that are inherently large and confusing. I learned that working inside the box is easier when you push the margins of the box by 10px. The luxury of space will quickly dissolve if it’s not delegated well.
I designed and redesign systems that would lay the foundation for more features to come, and in doing so I had to vet the design decisions I was making with much more rigor. I learned that making good design systems early and carefully is the best way to supercharge a longterm workflow.