Stay Home, Smoke Weed: UX & Cannabis Delivery are a Potent Hybrid

Cannabis e-commerce meets human-centered design in the “wild-west” of a newly legalized industry.

April 20th is, to understate it, a bit of a holiday for the cannabis community. For businesses that sell legal weed, the date also marks their biggest sales figures of the entire year. Those numbers are probably going to look a bit different this year, with COVID-19 shelter-in-place orders across the country likely putting cannabis delivery companies under extra high demand. As we all #stayhome to #smokeweed this 420, I thought I’d write about the unique design challenges I faced at a cannabis delivery startup last year.

The year was 2019. In California’s Bay Area, spring flowers were blooming and the Golden State Warriors were coming off a record setting season as they prepared to enter the playoffs.

For bud.com, a cannabis delivery startup based in Oakland and expanding into cities all across California, this spring also marked an identity overhaul that would redefine their brand assets, marketing approach, and user experience from the bottom up.

I joined bud.com’s design team as their second designer (under the Design Director) and their fifth employee overall. At such a small, young startup, everyone at the company was expected to wear multiple hats and solve for problems beyond their job description. My role as a Product Designer included the expected full-spectrum UX work — from research through prototyping and testing to shipment — but also included copywriting, SEO optimization, marketing, social media management, and more.

The Problem

The design team’s main objective was a top-to-bottom UX overhaul of the entire bud.com site. Bud’s initial site design was implemented without a design team by mimicking other successful delivery companies’ approaches and design aesthetics. Once they had enough business to keep afloat, mimicry wasn’t going to set them apart as leaders in the industry. For that, they’d need their own identity and a real product design team.

The Solution

The Design Director joined bud.com a few months before I did, and made it his first order of business to infuse human-centered design throughout the organization.

A step up from user-empathy, human-centered design offers complete commitment to solving problems from the perspective of the emotional, psychological, and physical ergonomics of the people using your products.

This unshakable commitment to their users became bud.com’s brand identity, and it became my job to help infuse that identity across all aspects of company’s products and services. My role included copywriting, usability, and marketing.

The Process

Being a designer at bud.com meant that we were always engaged with multiple projects at once. These different projects were, however, closely related, and our design process retained the same steps for all of them:

Research & Definition

The key elements of our research and definition phase consisted of:

• Contextual inquiry of our customers — how do people buy legal weed? Develop empathy, identify patterns, and document findings.
• Heuristic evaluation of the legacy website, including severity rankings.
• Competitive analysis — Compare competitors’ design elements, strategies, strengths and weaknesses.
• Define key research findings and design strategy via artifacts such as user flow diagrams, information architecture, and a design style guide.

Ideation & Prototyping

This phase involved translating the key insights of our research into tangible, interactive models that could be tested and rapidly improved:

• Wireframing & rapid prototyping
• UI & Interaction design
• Visual design
• Clickable, high-fidelity prototype design
• Product specifications (detailed specs for engineer handoff)

The Project(s)

Our many projects could be sorted into two main groups: branding and marketing, and e-commerce UX/UI:

Branding & Marketing

We took a geo-marketing approach to our branding and advertising, and geo-targeted our customers based on their location.

This allowed us to leverage the in-group favoritism people naturally develop for the concept of being a local, where pride in one’s hometown translates to a tendency to shop locally and support local economies. By targeting our advertising this way, we were able to display our own in-group “cred” and inspire loyalty by proxy.

The slogan “we deliver trees like the dubs splash threes,” for example, celebrated Warriors sports-team based pride, expressed via slang familiar with target in-groups, without directly naming the team or any of their players and risking legal repercussions.

We continued writing variant slogans for our other regions, researching those locations’ cultural specificities, and user-testing copy along the way.

The geo-targeting approach also related to how our delivery service functioned— customers enter their zip codes on our site and are matched with the regional dispensary partner that provided our service’s inventory. The design of these regional virtual stores took the same localized approach.

We personalized each regional site with a masthead. The design evolved over several iterations; we fine-tuned the H1 & H2 copy, tried different images, tested the results, and made improvements to assure that it would meet both our user and business requirements. Once we had validated the effectiveness of this design via Google Analytics, it served as the template for all our regional stores — San Francisco, Oakland, San Mateo, Marin, & Sacramento.

Copywriting gets even more complex when you factor in search engine optimization and legal restrictions about how businesses are allowed to advertise cannabis. And because legalized weed is so new, those rules have a tendency to change — so we stayed flexible. Some of our initial copy was reworked because it now sounded too prescriptive, so “Smoke. Eat. Vape.” became “Flower. Edibles. Vapes.” — which works even better.

So while SEO and legally restricted copy doesn’t always look and sound as fluid as creative writers may intend, our strategic middle ground fought to preserve the natural quality of our regional copywriting, optimize for search, and refrain from breaking any laws. In the end, we succeed in serving these three masters without loosing effectiveness points in any category.

E-Commerce UX & Visual Design

One of my main contributions to the UX/UI overhaul of the site was my work on the visual design, which I spearheaded. The Design Director had developed a new brand direction, style guide, and masthead aesthetic before bringing me on. I was then tasked with continuing his work, and developing a UI approach that would sync with the new assets, stand out from our competitors, and stay user-focused every step of the way.

An unusual aspect working at bud.com had to do with the incredibly rapid pace that we kept as a design team. Leadership wanted our work yesterday, and we sprinted at breakneck speed to deliver production-ready designs as quickly as possible.

One way this played out was that we worked nearly exclusively in high-fidelity. By keeping our files exceptionally well organized (which also helped our all-remote team collaborate efficiently), and working diligently with symbols, I was able to rapidly ideate, test, and iterate in high fidelity after getting basic structures and interaction patterns down with lower fidelity wireframes.

We also relied heavily on interactive prototyping and creating GIFs that illustrated interactions and behaviors. This helped us with rapid guerilla user-testing, and with explaining our designs to a leadership team who preferred concrete examples over connecting the dots.

Some revelations from our usability testing sessions lead to the following key UX & UI improvements:

• Add scrolling text on the top notification bar to accommodate multiple relevant messages without sacrificing screen space
• Nest SEO copy into scrolling product rows, to capitalize on the value of SEO content without losing screen space to long paragraphs of text
• Increase tap target size
• Ability to index the product weight or size up/down from the product cards, not just the product detail page to help with the quick-add action
• Cannabis-type (sativa, indica, CBD, etc.)indicated by both text and color

All of this was built into subsequent versions of the prototype, documented in the design spec, and ultimately launched.

Implementation on the live site today looks a little different than on the design spec, but it’s still a vast improvement to bud.com’s prior form. And though I may have moved on (to another cannabis startup), I sometimes still get the treat of meeting people who say it’s their favorite delivery service.

So happy 420. And if you imbibe, may you imbibe safely… maybe with something delivered by bud.com ;)

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Credits: User flow & desktop product mock by Design Director & super-mentor Shalom Ormsby. All other graphic content by yours truly.

Design tools used: Sketch & Abstract (I’m a Figma convert now ✌️😎), Flinto, Principle, InVision, Photoshop & Procreate.