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
PROJECT OBJECTIVE
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
UX/UI/PM/IA
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
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
Personas
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.
analytics
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
Style Guide
