La Jinn. Cannabis store and education website

Objective: Design a website for selling cannabis and receive over 90% positive feedback from usability testing
My Role: UX Designer
Design Tool: Figma
Timeline: Jan 2024 - mar 2024
Project Description
The Company
This small, nascent company was started by a team of two operating in California who sought to control the product from cultivation to delivery. Though not very tech savvy, they were highly sensitive to the end user experience and wanted to find a way to provide a digital medium or “home” for anyone from zero cannabis knowledge to longtime users. The goal was to connect and educate, and the sales were expected to follow.

The Team
Given this was a freelance role, the team was comprised of the founders and I collaborating on topics of branding and user-flows. I was responsible for all design assets, and the work dynamic was largely based on a set of researched ideas, then build, evaluate, and iterate.

The General State of the User Experience
In California, cannabis sold at dispensaries is particularly expensive due to higher taxes and cost of rent. Given prices of terrain and rent were not expected to lower in the near future, the obvious path for bringing down costs was to take the purchase experience online, and deliver locally. Cannabis is a fascinating plant with many use cases resulting in varied experiences which results in disparate understandings of the plant, product, and usage. Additionally, like technology, new versions appear in the market place each year with a general trend of higher percentages of THC, though this is not the only chemical that is responsible for any and all effects delivered via consuming cannabis. After talking with friends and strangers who consumed at least once a month, the strong trend we noticed was that they could not explain with numbers or widely accepted descriptions as to what they purchased as well as the perceived benefit. They did not know that all strains sold are varying degrees of hybrids and there are rarely any pure sativas or indicas sold in store. In short, many people are not well informed and mostly just learn through trial and error, which is not ideal for new users who may be skeptical or risk-averse. The problem was clear. Users were uninformed, and based on there responses we believed the leading factor was there being a lack of accessible educational material related to their purchases or prospective purchases. This lack of knowledge could help users achieve a more consistent experience, and de-risk trying new strains or products. Additionally, related to knowledge gaps, users were not keen to the use cases that certain strains may fall into, such as relaxation, simulation, pain relief, and muscle recovery.

My Process for the first iteration. Following iterations may start at Analyze or Prototype.

Research

Conduct internal interviews to learn from colleagues. Then conduct external interviews with customers
What is the problem?
What is the context in which they experience this problem?
How painful is it? 0-4
How frequent is it? 0-4
What are their goals?
What persona mostly experiences it?

Analyze

Prioritize problems by pain total
(Intensity + frequency = pain total)
(If applicable) Identify user flows or mouse movements that could be more efficient in the existing UIs
Will solving this problem create another problem?
How would solving this problem reinforce my working unit’s strategy and the company’s brand?
What is the context in which they experience this problem?
List or review with product owner the initial acceptance criteria

Prototype

Build mid-fidelity mockups to allow for the collection of more detailed feedback while also keeping the time-to-test low
Include zero/default states of user flows
Include likely error handling states
Consider and include if possible “solutions” to likely edge cases that may arise

Test

Usability test with internal stakeholders, make corrections, then test with customers
For any unexpected user behavior, take note and ask what the user was thinking during those moments
Ask open ended questions to keep the dialogue flowing in order to increase the chances of collecting key information.For example:
How did it feel becoming familiar with the app/website?How do you think it could be improved?
Key metrics of performance: Number of miss clicks, and task duration.
User Experience Research
Prioritize my focus based on the most frequent problem
The method for collecting information on the general state of the user experience was conducted via an online survey. 13 people participated. They were asked to make a list of the problems they experience while using a cannabis online store, and then to quantify the problem using the assessment below. Additionally, they were asked to list the use cases for consuming in the first place, for example, casual or ailment related.

Main user experience problems

Overall pain is = Painfulness + Frequency.

The top 3 reported problems with the highest overall painfulness:
1. It’s hard to know what type of experience you will get from a strain because the descriptions are not consistent or lack detail. This makes the selection process more difficult and risky.
Overall Painfulness: (5/8). Frustrating(2) + Often(3)

2. As a new user it is difficult to understand how to use the product or consume based on the form(edible, vape, flower). Additionally, what is the recommended dosage for a new user and what is the median dosage for a regular user?
Overall Painfulness (5/8). Agonizing(3) + Sometimes(2)

3. The user interface is cluttered, busy, and confusing. Too many products and options displayed is distracting and sometimes overwhelming.
Overall Painfulness (4/8). Annoying(1) + Often(3)

Lastly, regarding the use cases for consuming, all the responses fell into the categories of casual/recreational, sleep, or creativity. In addition, to our own online research, recovery via CBD was also a very popular use case.

Test
What was learned from usability testing?

To test the user flows I used Figma’s prototyping tool with five participants, of which three were experienced cannabis consumers the other two considered themselves inexperienced. Five usability test is the minimum number of tests needed for reliable feedback according to various outspoken experts and my own experience has shown it to be very reliable.
Three userflows were tested:
1. Explore the website.
2. Place a strain you want in the cart. If you don’t like any then just pick one.
3. Learn something new about cannabis

Additionally, I then asked them:

Do you feel like you lacked information about the product as you purchased it, and thus could have been more informed? If yes, why?
4 out of 5 answers were “No” which is great. The only person who felt they lacked information wanted to see more links to medical research conveying the benefits and defects.


Given the cannabis you purchased was satisfactory, would you recommend  this website to other people?
All participants replied “Yes”

Evaluation
All participants completed the user flows without help, would recommend the website to others. These results are encouraging because it at least indicates the designs are going in the right direction. The one problem I noticed during the exploration section was that none of the users clicked on any of the terpene buttons on the product profile screen. I did ask one participant why they didn’t click and they replied that they didn’t notice them. So, more prominent looking buttons will need to be implemented.
Some things that did not go as planned

Situation and Approach
Knowing there would be a dual user flow occurring on the same page for different personas (experienced consumer, new consumer), I thought it would be a good idea to place the interactions corresponding to each persona near each other. It would be comprised of an input bar for specific searches and a row of buttons underneath it for each use case. Boom, solved….well not quite.

Problem
After implementing this aforementioned approach, the landing page looked and felt more like a google search with some filters rather than a tailored user experience. Why? Because the introductory use cases for beginners were not front and center, but below the search bar as regular buttons. From a hierarchical perspective core beginner entry points seemed secondary. This seemed like a safe and balanced approach, but 3 of the 5 testers did not click the use cases or use the search bar and instead went to the top nav to navigate to the product screen, which is not the ideal path. When asked why the didn't use those options, they said something along the lines of wanting to explore the products and not search for any, which was frustrating to hear that this initial approach did not work for them.

Adaptation
I took a “less professional” and riskier approach and placed the genie in the middle with large buttons which are seen in the screenshots in this case study. I also moved the search bar high up the page by itself. This way the uses cases would be impossible to miss and the genie logo would emphasize that the priority of these use cases. Though this seems like a less standard approach I reminded the founders that the previous usability testing was not a success for new consumers, which made them more open to this genie and use case centered approach.

Result
All users both experienced(2) and new consumers(3) navigated via the genie options. This behavior resulted in being more favorable in the eyes of the founders because it means experienced users were intrigued enough to explore the shop as opposed to typing in a product or strain they wanted and going right to it while not seeing what other products were offered. This was not the testers' first time navigating the prototype, so I was expecting the experienced users to use the search bar. Interestingly enough, a positive unintended outcome emerged in that this new approach resulted in higher and longer amounts of product exploration.

Impact
The main objective was achieved in reaching a prototype state that received over 90% positive feedback. Additionally, this feedback was “promoter in nature” in that all five participants reported that they would recommend the site. As far as operational impact, the owners did continue pushing forward with there business utilizing these designs as a guide to tweak there product, marketing, and delivery strategy. The only downside of this project was not being able to gather more metrics, for example attributing these usability tests to email signups.
Other Projects
How I helped reduce technical support emails and calls to a marketing solutions company by making product user flows "as tailored and flexible as a glove"
Data Product Platform

Impact:
Reduced help emails and calls to customer service and technical support during several product configuration steps
Web - B2B
How I increased the confidence of high school students regarding their career futures through guided self-learning and self-discovery
Guided self-learning for highschoolers

Impact:
Dozens of students now have three different ideal careers to pursue, and on a scale of 0-4, 1.2 points higher level of confidence in their career future after taking the course
Web - B2C
How I reduced an exercise studio's in-studio client wait times by using prototypes to explain common bottlenecks
Fitness studio management platform

Impact:
Very minimal impact to be honest since the business was not able to move forward with design implementation. But it did change a few minor front desk procedures which reduced client wait times by a few minutes.
Web - B2B