CAA Logo

EMBR

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

Project Overview

EMBR approached us to refine their digital storefront. The task? Design a user-centric platform that showcases EMBR's extensive product range and positions them as a market leader in the California & Massachusetts markets. We set out to create a web experience that reflects their unwavering commitment to quality and consumer education.

Client EMBR
Category Dispensary
Menu Integration Dutchie Ecommerce
Service Dispensary Website Design & SEO

Design System

The library of colors in the EMBR Web Style Guide

EMBR Color Library

Color Library

EMBR’s site highlights the brand’s fiery color palette. The dark grays and glowing oranges make for a memorable, smoldering look that helps immerse customers in the dispensary’s world. Despite the hazy feel, we ensured that the content meets WCAG accessibility standards sitewide.

Button variants and states in the EMBR Web Style Guide

Button variations and states from the component library with annotations

Component Library

Consistency and scalability were at the top of my mind when building our component library. We designed a suite of reusable UI elements; this modular approach ensures a cohesive brand experience across the site while allowing for easy updates and iterations as EMBR's needs evolve.

Screenshots of EMBR on desktop and mobile

Desktop and mobile mockups of the site showing the modular grid

Grid System

The grid system is the backbone of our design. It provides the foundation for the site's layout and ensures cohesiveness, harmony, and flexibility for elements such as text, images, buttons, and other visual components across a responsive website.

Type styles in the EMBR Web Style Guide

Desktop and mobile display type styles with annotations

Type Styles

The type systems take special care to ensure that hierarchy is clear across multiple device types, the site information is crystal clear, and the content is logically structured.

Information Architecture

Screenshots showing progression through the mobile menu

Progression through the mobile menu

Navigation & Wayfinding

A key challenge was designing an intuitive navigation system that was flexible enough to meet the needs of the entire prospect base. We streamlined the user journeys, ensuring that the most sought-after information, like location selection, Greenwolf’s loyalty program, in-store events, and products, are just a click away. Clear wayfinding cues are the secret sauce to empowering users to navigate confidently. By strategically placing signposts throughout the design, we ensure that users always know where they are, what to do next, and how to retrace their steps quickly.

EMBR Sitemap

Full sitemap layout out page relationships

Sitemap

Our sitemap was meticulously architected to optimize for discoverability from a user and search engine perspective. By mapping the information flow, we supported Greenwolf's technical and on-page SEO efforts and ensured high visibility for key sections like product categories and deals.

EMBR User Flows

Flows demonstrating how users shop and change location

User Flows

By mapping user intent to each stage of the purchase journey, we designed user flows that seamlessly guide visitors through the discovery, education, sign-up, and purchase phases. This approach aligns with user expectations and supports Greenwolf's broader business objectives.

Dispensary SEO Implementation

EMBR effectively leveraged the SEO benefits associated with a Dutchie Ecommerce implementation. Migrating off a drag-and-drop editor combined with Dutchie Ecommerce allowed us to take advantage of the Dutchie Embedded menu product sitemap, improving EMBR’s ability to rank for brand, product, and strain-based SEO keywords.

Tech Stack

Wordpress logo

CMS- Wordpress

Choosing a suitable CMS was crucial for ensuring flexibility, scalability, and ease of use. We landed on WordPress for its robustness and versatility, providing a solid foundation for EMBR's content-rich, dynamic web presence. With a user-friendly backend and a vast ecosystem of plugins and integrations, WordPress empowers EMBR to manage and grow its digital presence over time quickly.

Dutchie Ecommerce logo

API - Dutchie E-Commerce Embed

Seamless e-commerce functionality was an essential requirement for EMBR's new site. We leveraged Dutchie Ecommerce to directly integrate a robust, user-friendly shopping experience into the site. This allows customers to effortlessly browse products, view availability, and complete transactions without ever leaving the EMBR domain, providing a frictionless path to purchase.

SQL logo

Database - SQL

We chose a robust SQL database to power EMBR's new site, ensuring data integrity, security, and lightning-fast query processing. With a properly structured schema and optimized queries, we've built a solid data foundation that can scale as EMBR's online presence grows.

Gulp logo

Compiler - Gulp

Efficient development and seamless deployment are essential for maintaining a high-performing, error-free site. We chose Gulp as our build tool and task runner, automating repetitive tasks and streamlining our development workflow. With Gulp handling tasks like compilation, minification, and asset optimization, our team can focus on crafting high-quality code and delivering a polished end product.

Flywheel logo

Hosting - Flywheel

Reliable, high-speed hosting ensures a great user experience and solid SEO performance. We chose Flywheel as EMBR's hosting partner for their exceptional performance, security, and expert WordPress support. With automatic nightly backups, built-in caching, and a global CDN, Flywheel provides the rock-solid infrastructure needed to keep EMBR's site fast, secure, and always online.

Looking for Web Design Services?

GET STARTED
Work with CAA