CAA Logo

Greenwolf

Eric Allred Head of ProductAPR 24, 2023, 5 Min.Web Design

Project Overview

Greenwolf desired a web experience that showcases its highly curated, vast product selection while educating and engaging users. By doing so, we aimed to drive conversions, promote in-store events, and cement Greenwolf's position as an OG industry thought leader for the California cannabis market.

Client Greenwolf
Category Dispensary
Menu Integration Dutchie Plus
Service Dispensary Website Design & SEO

Design System

Greenwolf Color Library

Greenwolf Color Library

Color Library

Greenwolf's color palette is restricted to allow its vibrant imagery and graphics to stand alone. The result? Each of the brands it curates gets visual priority in the digital commerce experience. Our high contrast approach with Greenwolf’s color system ensures they meet WCAG accessibility standards.

Button states and variants in the Greenwolf Component Library

Button variations and states from the component library with annotations

Component Library

Consistency and scalability were the key priorities when building our component library. Each UI element is a modular subset of a cohesive product, allowing easy updates and iterations. In an industry as fluid as cannabis, this flexibility is non-negotiable.

Desktop and mobile screenshots of the Greenwolf site showing gridlines

Desktop and mobile mockups of the site showing grid lines

Grid System

The grid system balances form and function for element size and placement. It provides the structural foundation for the site's layout, working to guide users through the content and creating a harmonious, orderly flow. The grid's adaptability ensures that typography, visuals, calls-to-action, and other interactive features remain cohesive and user-friendly across various screen sizes and devices.

Type styles in the Greenwolf Web Style Guide

Desktop and mobile display type styles with annotations

Type Styles

The site's type hierarchy ensures that information is crystal clear and content is logically structured, regardless of the user's device. From desktop displays to mobile screens, our carefully crafted type systems guide users through the content with ease and clarity.

Information Architecture

Screenshot of navigation between stores on the Greenwolf website

Menu open showing the location selector that allows users to switch between dispensaries for pickup

Navigation & Wayfinding

Intuitive navigation is the key to a frictionless user experience. We designed EMBR's navigation to be clear, logical, and accessible, allowing users to explore the full range of products and content easily. We've created a navigation system that enhances discoverability and engagement by anticipating user needs and naturally structuring information. Effective wayfinding is more than just navigation - it creates a sense of orientation and comfort for the user. We've integrated clear visual cues and design elements that guide visitors effortlessly through their digital journey. By providing constant feedback and contextual information, we ensure that users always know where they are, what to do next, and how to find what they need.

Greenwolf Sitemap

Full sitemap layout out page relationships

Sitemap

A well-organized sitemap is essential for both user experience and SEO. We created EMBR's sitemap to ensure that every piece of content is easily discoverable by users and search engines alike. By creating a logical hierarchy and optimizing for key, localized search terms, we've positioned EMBR to drive organic traffic and boost their online visibility for local and national search queries.

Greenwolf User Flows

Flows demonstrating how users shop and change location

Userflows

Understanding the user journey is crucial for designing intuitive, engaging experiences. We mapped out detailed user flows, considering every possible path a visitor might take—from initial curiosity to final purchase. By anticipating user needs and goals at each stage, we've created a seamless flow that guides visitors toward conversion while providing value at every touchpoint.

Dispensary SEO Implementation

Greenwolf effectively leveraged the SEO benefits associated with a Dutchie Plus implementation. Dutchie Plus allows full flexibility in on-site SEO implementation, unlike the Dutchie iFrame and Dutchie Embedded menu options. While this does require a greater investment for high-volume stores, this customizability enabled us to implement a much more robust on-page SEO strategy and increases a dispensary’s chance of ranking for brand, product, and strain-based SEO keywords.

Tech Stack

Dutchie+ logo

API - Dutchie Plus

Integrating with the Dutchie Plus API ensured a robust, seamless e-commerce experience. This connection ensures that product information and availability are always up-to-date, fostering a sense of trust and reliability for Greenwolf's customer base.

NextJS logo

App Framework - Next.js

Next.js was our framework of choice for its server-side rendering capabilities. It gave a much-needed boost to our SEO efforts while ensuring a lightning-fast user experience. Its flexibility and developer-friendly nature have allowed us to deploy features and updates with minimal disruption.

React logo

Component Building Framework - React.js

By leveraging React.js, we could craft a responsive, interactive interface that dynamically reacts to user actions. This level of engagement is crucial for keeping users on the site and improving engagement rates.

MongoDB logo

Database - MongoDB

When handling a dispensary website's complex, variable data needs, MongoDB's flexible schema is a lifesaver. Its scalability ensures that as Greenwolf's traffic and inventory grow, the database can keep up without breaking a sweat.

Vercel logo

Hosting - Vercel

We turned to Vercel for hosting due to its global performance, scalability, and user-friendly interface. The continuous integration and deployment features have been a game-changer, allowing us to maintain a high-performing website with automatic updates and rollbacks when needed.

Looking for Web Design Services?

GET STARTED
Work with CAA