High Level Health
ELEVATING CANNABIS
E-COMMERCE
(but not too high)
SCOPE
UX Research
UI Design
Visual Design
INDUSTRY
E-Commerce + Retail
Cannabis + CBD
TOOLS
Sketch, InVision, Zeplin
IMAGES
Unsplash, 1906, Lowell Smokes, Mary’s Medicinals, Pure Sunfarms, Sweetgrass
TIMEFRAME
2 weeks
FINAL DELIVERABLE
CANNA-RADO
Colorado is a trailblazer state in many ways, but especially when it comes to Cannabis. It was one of the first states to legalize medical marijuana in 2001 (shoutout @dad) and recreational use in 2014. As of 2018, there are over 500 retail dispensaries across the state.
So which one is the best?
My brief was to redesign a mobile responsive e-commerce site, so I searched for the most awarded dispensary and found High Level Health. With 86 awards and counting, and four convenient locations in Colorado, they were a clear standout. But, to my surprise, the website was hard to navigate, slathered in pot leaves and bright green overlays, and overall, not very helpful. I took a stab at it.
(Note: I found in my research that the majority of sites use a third party automated eCommerce platform called iheartjane to retail their products. A custom e-commerce site could save High Level Health the probable fee, POS integration headache, and would enable them to customize their organization, descriptions and effect tags.)
Branding + Background
When it comes to “canna-branding,” the green cross was the first universally adopted symbol because all sales were pharmaceutical. Regulations were strict, few companies existed, and branding was barely there. After recreational use was legalized, tie dye, smiley faces and other nostalgic elements became ubiquitous, and cannabis leaves (especially in green hues) quickly became cliché.
High Level Health’s branding wasn’t bad, per se, but I wanted to remove the predictable mountain symbol and bright green color. The simple, modern sans-serif font is friendly and clean, and worth keeping. Before I made too many design decisions, I dove into research mode.
Step One: RESEARCH
- Stakeholder interviews
- Contextual analysis
- Competitive analysis
To understand as much as I could about High Level Health and the industry as a whole, I visited three locations in Denver to interview stakeholders and clients. I also read forums, blogs, and reviews of the business and its competitors.
KEY INSIGHTS:
High Level Health is an underdog - a relatively quiet player in the market for the amount of volume and sales they do, and how long they’ve been around
No BS - High Level Health is no frills, no gimmicks, just top quality, clean, reliable products at fair prices
Differentiation is key - High Level Health’s flower is grown exclusively in-house, which is rare
Growth - High Level Health’s growers are super knowledgeable and pushing the industry forward with experimental growing practices
Step Two: EMPATHIZE
- User interviews
- Cartesian Plot
- Personas
To better understand the context around the problem, I conducted 6 interviews across demographics — both current users and members of target audiences. My goals were to find out if they shopped online or in store and more information about their goals, pain points, and experiences shopping either way.
From this qualitative data, I determined that there were two distinct groups of users: regulars and tourists. They fell on opposite levels of two spectrums: frequency and knowledge.
Of course, some users were in-between, but my research indicated that the two polar opposites were the users most likely to need and use a new website because of their goals and pain points. And, by solving for the extremes, many pain points of people in-between would also be alleviated. Once I had defined those target groups, I could create personas.
PERSONAS
Jonathan - “The Regular”
Jonathan is Colorado native, and a regular cannabis product consumer. There are three recreational stores in his neighborhood, but he is a loyalist to the place that has the best product for the best price. He knows what he wants and likes, so going to the store can sometimes be a hassle, because he hates waiting and interacting with the annoying bud-tenders.
PROBLEM STATEMENT (based on goals + pain points):
Jonathan needs a more efficient way to buy the specific products he wants, because he is already informed and doesn’t want to deal with the hassle of the in-store experience.
Liz - “The Tourist”
Liz is on a weekend trip with her girlfriends from Indiana (where cannabis is still illegal). They are excited to go to a dispensary for the first time, and get some fun edibles. They smoked a bit in college, but after living in a state without dispensaries, they are unfamiliar with the strains, dosages, and product selection.
PROBLEM STATEMENT (based on goals + pain points):
Liz needs a better way to become informed about what type of cannabis products to buy, because she is unfamiliar with the dispensary scene and nervous about purchasing the wrong product.
Step Three: DEFINE
- Problem + solution statements
- Information Architecture (Site mapping + Card sorting)
- User flows
As I continued to empathize with my personas and consider the business needs of High Level Health, my solution emerged:
High Level Health’s website will help users quickly sort and locate specific products and information by updating the information architecture - using simple, clean primary navigation, intuitive filters based on user needs, and clearly presented detail information on the product pages.
I then took an inventory of High Level Health’s current sitemap, and conducted a card sort with 8 volunteers. After card sorting, I reorganized the information architecture and began sketching.
Step Four: IDEATE
- Sketching
- Low-Fidelity Wireframes
Armed with the new site map and user flows, I began sketching the pages needed:
Age verification pop-up
Home
Product Landing Page
Product Description Page
Checkout
Checkout verification
About us
LOW-FIDELITY WIREFRAMES
STEP 5:
Prototype + Test
- Usability Testing
- Prototyping (in Invision)
Once I had constructed both user journeys in Sketch and imported them in to InVision, I created a usability test guide. Then, I conducted 5 usability tests with my low-fidelity prototype.
I learned a lot, and made significant improvements to the site based on feedback. The key features I updated were (see details below):
Natural language form on the home page
Checkout layout
Overall accessibility for the vision impaired
KEY FEATURE DEVELOPMENT + ITERATIONS
1. Natural Language Form
An intuitive and easy way for Liz to give recommendations based on both her preferred method of consumption and desired effects.
Original
Prompts and text fields for the user to fill in with example suggestions
First I
teration
Changed the text fields to drop-downs, so there will be less guessing on the user’s end
Second Iteration
Added directions and a second drop-down (separating mental effects and physical effects)
2. Checkout Layout
I kept the completely transparent process — so the user knows what information they need to provide for each step, and the cart overview is always in sight — but updated the layout to be easier to scan (see accessibility).
3. Accessibility
Made all fonts bigger and increased color contrast in accordance with the Web Content Accessibility Guidelines (WCAG) version 2.1.
Visual Design
Keeping my research and personas in mind, I rethought the visual design to attract the attention of both of High Level Health’s target audiences. The goal was to make it clean and refined, but also fresh and modern.
I also updated the brand personality, narrative and tagline to expand and explain the retailer’s core concept and differentiators.
COLOR
I wanted to elevate the tone and feeling, but keep it accessible to newcomers, and relevant to the company. I deepened the tones of green to be more olive and less neon, and chose accent colors in contrasting and complimentary tones that were mature but lively and not dull.
TYPEFACE
I chose Acherus Grotesque for a clean, geometric look to complement (and not compete with) the organic shapes of the product and the varied edible packaging.
HIGH FIDELITY WIREFRAMES + MOBILE RESPONSIVE LAYOUTS
HOME
Bold and unfussy. Opens with the brand’s key differentiator - 82 awards and counting. The menu is simplified, and the natural language form has clear, friendly copy for new users or frequent users looking to try something new.
pRODUCT LANDING PAGE
Filtering and sorting options are clear to help users locate their desired product, and nested to keep the page compact.
PRODUCT DISPLAY PAGE
Description, details, and reviews are clearly displayed, and are nested in drop-down categories on mobile for quick navigation. Breadcrumbs give users a sense of where they are, and suggestions promote exploration.
CHECKOUT
Checkout steps are transparent and a static order summary accompanies the process so that there are no surprises.
Final Deliverable
The final deliverable was a Zeplin file to handoff to developers.