Wikileaf has over 7 million monthly visitors and almost 15 million views across its website and mobile application. The company provides consumers and patients access to pricing, strain research, and industry news and information



Redesign the entire web and mobile experience for Wikileaf.com


The Team

UX/UI Designer, PM, IA: Ben Frates (me)

Lead Programmer for India team: Raj Sutaria

Copywriter: Christian Parroco

Content Creator: Jesse Codling

The Scope

Redesign the interface for both the website and mobile app

Develop the voice and strengthen the brand for Wikileaf

Optimized site for speed and scalability

Bring delight to the user 



At Wikileaf, I was responsible for the end to end design, research, IA, and execution of development. 

I started by creating a structure for documenting outcomes, opened communication between the global teams, and facilitated a faster, more productive work environment


By introducing Trello for time management, Slack for global collaboration, and Zeplin for design handoffs to the development team, I was able to organize, plan, and focus our sprints for success 


UX research


Understanding your User 

In order to identify any gaps of understanding, I conducted multiple field studies to learn about our users, their goals, challenges, and activities


I found there was a major problem with users not knowing how to navigate the site. Users failed simple tasks such as finding a strain near them, dispensaries, and recent blog articles. 80% of the users tested misunderstood interactions on our map service as well as showing frustration with the map itself. 90% of the users tested did not discover content below the map on the home page 

User Testing Data@3x.png

Methods Used

  • Contextual Interviews (10 conducted)

  • Individual Interviews (15 conducted)

  • User Tests (20 tests conducted over three iterative design cycles)

  • SME Interviews (10 experts interviewed) 

  • Online Surveys (300 + responses)

  • Both Hierarchical and Cognitive Task Analysis conducted 



To help focus decisions, as well as get further buy-in from the team, I developed several Personas based on our web analytics & User Research


Site Map

The volume of information on this site is immense. To centralize planning, organize and clarify the content, as well as help to eliminate unnecessary pages, I created a sitemap for Wikileaf.com. My focus was to minimize the number of steps from point A to point B and create a positive experience for the user. 



To better understand our visitors, their behavior, and their preferences, I utilized Google Analytics, Google Trends, and Hotjar.  


User Flows

To help guide our user's towards successful outcomes, I created several comprehensive user flows that would inform design and determine what content/navigational links to include. For each user flow, I considered...

  • What is our user trying to accomplish?

  • What is important to our user and what will give them confidence to continue?

  • What additional information will our user need to accomplish the task?

  • What is our user’s hesitations or barriers to accomplishing the task?


Competitive analysis


More than 32 companies, websites, and apps were reviewed and tested to assess the strengths and weaknesses of our competitors against our user's needs.

  • Understand how major cannabis applications were handling usability


  • Understand where Wikileaf stands in reference to its competition


  • Generate ideas on when to solve various usability issues


  • Get an idea of what it might take to gain a competitive edge via usability/UX.


UI Design


Sketch & Brainstorm

Responsive Card@3x.png

Style Guide




Multiple iterations  & A/B Testing 


Red Line

Screen Shot 2018-08-13 at 11.19.19 AM@3x.png