Zenabis Website
HTML
SCSS
jQuery
GSAP
WordPress
3D
Photography
Year: 2016
Zenabis brand quickly grew as a business so I put forth a strategy for that growth in making a design system to produce a memorable brand for the cannabis industry which was starting to grow. Under Monark Group, the sub-company had quickly established itself as one of Canada's largest produers with 4 locations having a massive 2,700,000sqft+ facilites both indoor and outdoor in 3 different provices. The logo design had an extensive exploration period were we experimented with differnt ideas first on the name and then on the visuals and after many iterations and feedback, the team settled on what we had. This is when I started building bits of the brand guidelines and also started working on a design system that would keep everything consistent for all digital and print materials in each of the four locations. I had also done a bunch of print collateral consisting of brochures, business cards, flyers, posters, and many other promotional materials and signs serving as the brand manager as well as the designer.
With my photography skills and gear, I volunteered to do a product photo shoot to help the company save hundreds by keeping the project in-house and this allowed me to get creative with what we wanted to show for products. Due to some limitations and how new this industry was, we followed some guidelines but I still manaaged to put my own creativity to this project using some props and designs that enhance the visual representation of showcasing the products.
We launched many products and as time went on, we introduced new ones to keep up with demand and competition which meant the same photography setup that I had done would not be consisent since there was no set location for it so I suggested to utalize my skills in 3D to design, model, and mockup the product containers which allowed greater flexibility so we could not only produce these faster but also we would only need the visuals designed for the wrapper and I could then use that in any way I wanted by adding it to each render. I used Cinema4D for these 3D renders and the entire team loved this concept. It helped speed up the project and provide extra options they never thought of.
What was great about this project is I was designing and building all the individual pieces to finally bring it together in a complete cohesive package. The site build itslef used static HTML/CSS/JS and WordPress for the news and blog sections. I enjoyed working on the animations such as the on-scroll product page parallax and animated circle lines and bars for product THC/CBD percentages which enhanced the overall UX (user experience) and custom built the icons for the cannabis flavors and ensured consistency in all aspects for these icons. The product pages had a special header with attention to typography with large titles as well as the little details to color accents and more. The special hero section for the products was designed and coded by me as well to ensure proper build for mobile and desktop users for a smoother and responsive experience.
The use of Cinema4D to model the products was a new experience that strengthened my skills in modeling but also paying attention to the shadows and how I needed to implement that on the site especially on hover states.
Another aspect was the introduction of the WordPress part of the site since it came at a later stage where I needed to change hosting platforms and how things were handled to ensure a consistent feel for the WordPress and the static pages. I used a .htaccess file to allow for some customizations along with custom WordPress fields where necessary.
A the company grew, the site had to adjust for that and the build of the site scaled easily since I accounted for that from the start similar to having the design guidelines in place. There were many sub-brands that came later and this served as the stepping stone to all of what came next. Company had saved thousands by having one person create the entire brand along with all photography, 3D designs, and the design and development of the entire website.
Full Website Screenshot
Website Product Desktop/Mobile Screen