I worked with The Reef Cannabis to rethink their online experience. By focusing on the needs of both the customer and the business, I created a product that helped customers discover cannabis products and make informed purchases.
the Reef Cannabis is a Washington business with stores in Bremerton and Seattle. Both stores have a diverse client base with an array of interests and needs.
Customers are not able to easily navigate the website and discover new products.
I was the sole UX designer on this project. I started with customer research, followed up by design sprints, usability testing, and development. When working with a team, I always want it to be a collaborative experience where everyone has a voice. Be it design or flow; everyone has something to contribute. Throughout the process, I worked side-by-side with developers, managers, and key stakeholders, to ensure that the needs of the stakeholders were at the forefront of the design.
I approached the research for this project by breaking it into three parts: analytics, interviews, and usability test. I used these three approaches to identify pain points and opportunities for improvement.
From interviews, I learned about the experience from both perspectives of customers and shop employees. I wanted to know how they communicated about cannabis and identified the needs of the customer. The interviews gave me a better understanding of the challenges both parties face when finding the right product.
Needs: Customers need to have the product described to them based on their experience level.
Interest: Customers consume cannabis for several different reasons. Sometimes for pleasure, occasionally medicinal.
Language: Both employees and customers described a product relative to their product knowledge.
Using Google Analytics and Hotjar helped me observe customers' behavior and monitor clients' shopping habits with user flows, heat maps, and session recordings. I was able to track the bounce rates, landing and existing page, and identify friction points and opportunities for growth.
Heat Maps and Recordings painted a clear picture; customers spent a lot of time scrolling instead of refining their searches. They also relied on the site's search function to find products but were unsuccessful.
Customers often let the website and often used leafly.com or weedmaps.com to learn more about the product.
The navigation was only located on the home page resulting in users having to toggle back and forth to change product types.
Filters were not easy to use; they could not be applied without scrolling and confused customers.
Search Functions were not always reliable; available brands and products did not appear on search results.
Cards did not provide enough information for customers to make informed purchases. The issue worsened when cards did not have images.
(Play me if you would like to watch a video from a Hotjar session. The customer is using the search function and the navigation located on the homepage.)
Novice Customers: Does not speak the language, often refers to the vibe or experience they wish to achieve.
Intermediate Customers: Know the language, can identify brands and strains.
Expert Customers: Speak the language of cannabis and have a lot of product knowledge.
I wanted to improve the existing customer experience and identified some small hanging fruit that would make a significant impact with minimal effort. Such changes included adding color to the left and right toggles on the card and improving the site's feedback to the customer when adding an item to the cart. This approach helped me build rapport with the engineer and helped us open up a dialog about challenges we would have to overcome with the new design.
The use of wire-frames allowed us to stay focused on the site flow and not fixate on things like font, colors, branding, and styling in general. The teams both in India and in Seattle were able to collaborate despite the time difference. We were able to ideate quickly by using prototypes to test user flows. I shared my findings with the team on Figma, making for a smoother iterative process.
Like with the wire-frames, Hi-Fi prototypes were used to communicate with customers, key stakeholders, and developers. I used them to test user flows with customers and speak with the developers about technical limitations and potential setbacks. This approach created a space for the client to be involved throughout the iterative design cycle.
Usability tests like the wire-frames helped the team remain focused on the needs of the customers and business. Time and time again, I found areas for improvement, research participants and stakeholders helped keep an eye on both the big picture and the more minor details. I used the findings to ideate the design and worked with developers to make incremental adjustments.
The homepage previously functioned as navigation for customers to select the product type they were interested in ordering. A carousel containing featured products was also prominent. Users would toggle back and for between product pages and the homepage as a result.
In addition to adding persistent navigation at the top of the screen, I repurposed the homepage. Instead of being used for navigation, it would be the starting point for product discovery. Sections including "Fresh Drops," "Best Sellers," "Featured Products," and "Sale" provided customers with valuable information that was previously unavailable in an easily scan-able format.
In the new design, I created persistent navigation which made it easier for customers to toggle between products. And eliminated the need to return the homepage
The new homepage however presented a great opportunity to expose customers to new products. New sections were introduced to help customers discover products at an earlier stage without the need of doing a deep dive. Sections include Fresh Drops, Best Sellers, Featured Products, and Sale. Regardless of the customer's product knowledge, these categories provided them with a starting point in their search.
By selecting a product type in the navigation the customer is taken to the product category page. The previous iteration made it hard for customers to filter and sort products leaving customers overwhelmed by the sheer quantity of options.
The filters were moved from the left side into a drawer menu/mega menu that showed the customer all of the filtering and sort options at a glance.
Upon selecting filters chips appear at the top of the grid to reflect the applied filters. This made it easier for customers to refine their search and be less overwhelmed by the vast number of options.
The card was redesigned to give the customer more information about the product and make it easier to add products to the cart. Customers expressed confusion about available weights and adding products to the cart. The implementation of the drop down menu, allowed customers to both select the weight and quantity the desired to add to the cart.
Some additional changes included two confirmations that the product was added to the cart. The count on the cart would update and an added-to-cart overlay would appear.
Updating the card, was one of the primary focal points of the project. By creating a clear hierarchy of information, color coding for flower type, and making the add to bag process clear, the card became easier to use and scan.
The product page like the homepage was a space with a lot of potentials to increase product knowledge and expose customers to more products. Chips were added to represent the product's flavor profile, vibes and effects.
The new design helps customers find the products they are looking for and supports the business expose its customers to a broader variety of options without overwhelming them. The customer is more empowered to make an informed purchase due to the new card, filters, and sections created.
The design solution depended heavily on all of these components working in unison together to maximize outcomes. The creation of new sections on the site, including "Fresh Drops," "Best Sellers," "Featured Products," and "On Sale," helped the customer make informed purchases from the comfort of their device.
The focus will continue to help customers discover new products. The next phase of the redesign will focus on product review to improve how we collect customer feedback. By changing how we collect information, we will be able to provide customers with better recommendations.
Working with a development team in a different time zone presented some initial challenges. The feedback loop was broken, which caused some early delays. Once we established a workflow that gave both the design and development team enough time to provide feedback, ideate, and code. The project ran smoothly. Using a web-based tool like Figma meant that the team could work independently or collaborate depending on the sprint. We were also able to communicate with visuals, which helped us stay on the same page.
Overall I found this project to be an enriching experience. I had the opportunity to work with a great team. The developers and managers all bought into the process and heavily invested from start to end. We checked in regularly and often had working sessions where we would riff ideas off one another. It was indeed a pleasure.
