Homepage Redesign
Client
KINFOLK Dispensary is a black owned, neighborhood medical cannabis dispensary who serves patients from DC, MD, VA and 30 other states.
The Problem
KINFOLK Dispensary has recently moved locations, and is looking to connect with the new clientele.
My Role
UX Research
UX Design
UI Design
Our Team
4 UX Designers
Tools Used
Figma
InVision
Miro
Optimal Sort
Slack
The Solution
A sophisticated and modern website that features clear information architecture, exhibits the brand’s personality and highlights the benefits of visiting the brick-and-mortar store in order to increase foot traffic.
Research & Discovery
Stakeholder Interview & Heuristic Evaluation (Website Audit)
Our team intentionally conducted the heuristic evaluation and initial website audit before the stakeholder interview to maintain some objectivity before being informed of any business goals.
​
Once we understood how users who have never seen the homepage before may feel about the site, we conducted our stakeholder interview with the business owner.
"Kinfolk is for everyone. Like a family reunion, comfortable and authentic. We want to unite people who want to learn more about cannabis, and to connect them with others who want to do the same."
​
- Corey Barnette, Owner of KINFOLK Dispensary
We evaluated the websites of two direct and two indirect competitors. It was important for us to have two hyper-local competitors (to view the homepages of other dispensaries in the DC area) and two competitors on in recreational cannabis markets for inspiration.
Competitor Analysis
Key User Insights
To better understand user perceptions of medical marijuana and marijuana in general, we distributed a Google Form survey through a variety of social media platforms, including Twitter, Reddit, Facebook, and Instagram.
Out of a total of 43 respondents from the DMV and around the United States approximately 42% of survey respondents consume marijuana on a daily basis.
However, when it came to how many people have, or know someone that has, a medical marijuana card - over 50% of survey respondents said no.
This data confirmed what we initially hypothesized: Although users are consuming marijuana, they aren't medical marijuana cardholders.
Both graphs taken from our Medical Marijuana Survey
Distributed by UX Design students at George Washington University’s UX/UI Design Bootcamp in June 2021
43 respondents total | Google Forms
Analyzing & Defining
Affinity Diagram
In order to breakdown results from both the survey and stakeholder interview, we identifying grouping patterns and categorized key insights based on the content of the stickies.
Examples included: Demographics, Psychographics, Current Website Perceptions, Typography, Pain Points of Homepage, Marijuana Perceptions, and more.​
Persona & User Journey Mapping
After evaluating all insights, we were able to construct a persona that was representative of specific segments taken from the research and affinity diagram patterns.
​
Once a our persona, Alison, was solidified, a journey map was created in order to visualize the process she would go through in order to accomplish her goals.
Information Architecture
Card Sorting Analysis
Because this project was only a redesign of the homepage - we put a lot of energy into the structure of the navigation bar. This ensured that if we were to continue the project, we have already strategized what items the navigation menu should include. We conducted six (6), open card sorting exercises via Optimal Workshop. Participants proposed new navigation bar labels, and 100% of participants agreed that,
The ‘Renew Your Card’ and ‘Apply for Card’ navigation bar items should be nested together.
The ‘About Us’ and ‘Meet the Team’ navigation bar items should be nested together.
The results from the open card sort exercise also showed that certain navigation items were strong enough to stand on their own (like 'Shop' and 'Contact'), while others need new label names for clarity (like the ones below!)
Nav Bar Label Item (Existing Site)
New Nav Bar Label Item
'Apply For Your Card'
'Apply For Card'
'Meet The Team'
'About Us'
'KINFOLK in the News'
'News'
Card Sorting Analysis
Another key insight was that certain navigation items were strong enough to stand on their own ('Shop' and 'Contact'), while others ('About Us' and 'Apply for a Card') needed to have subcategories nested beneath them.
UI Design
Style Guide
We created a style guide early on to assist in establishing a consistent UI style for our re-design. KINFOLK recently invested in new merchandise and moved into a new location that is industrial, yet luxuriously modern. So it was important that users felt that consistent brand personality both in-store and online.
Wireframes & Prototyping
From Sketches to Lo-Fi Wireframes
To get our initial ideas out on paper, we brainstormed together and began sketching the wireframe ideas for the homepage.
Usability Testing
From Lo-Fi to Mid/Hi-Fi Wireframes
Because we only redesigned the homepage, we were able to dive right into mid/hi-fi wire framing after the lo-fi wireframes. After the hi-fi iterations, our team conducted 10 usability tests.
Pain Points During Usability Testing
Strain icons were unclear
‘Log In’ and ‘Sign Up’ should be near each other within the nav bar
Needed images of location
Our Iteration/Solution
Used plant icons instead
Isolated both to the right side of the nav bar
obtained our own photography of the store
