Concept website & CMS · school final project

A cannabis brand website with a dashboard for every product

Indica Pharms is a concept cannabis brand I created for my final school project. I designed and built its website, where shoppers browse products and find stores that carry them, plus a private dashboard where staff add and update products without touching code.

Concept projectWeb designDevelopmentCMSNov 2018
The challenge

Show the products, even without online sales

Cannabis brands often can’t sell online, so the website has other jobs to do: show off the products, tell shoppers where to buy them and make it easy to get in touch. The team also needed to keep the product list current on their own, without calling a developer every time something changed.

  • Works on any screen
  • Products sorted by type
  • Map of stores that sell it
  • Staff update products themselves
My role

Design, front end and the dashboard behind it

This was my final project for school, and I did all of it myself: planning the pages, designing the look, building the website and building the private dashboard that powers the product list.

Design

Page layouts, product pages and a dark, earthy look to fit the brand

Website

A mobile-friendly build in HTML, CSS, Bootstrap 3 and jQuery

Private dashboard

Built in Laravel and PHP so staff can add, edit and remove products

UX designHTML/CSSBootstrap 3jQueryLaravelPHPGoogle Maps
Product catalog

Every product, sorted the way shoppers think

Shoppers browse by category, like oils, edibles or vape kits, or narrow the list to Indica, Sativa or Hybrid with one click. Each product has its own page with sizes, a description and ingredients, and a Top Rated slider keeps favorites in view.

Hover the screenshot to scroll the full page. Click to open it full size.

Filter by Indica, Sativa or Hybrid
Shop by category from the side menu
Every store listed with its address and phone
Tap a pin on the green map for hours
Store finder

Shoppers see where to buy

Since the products weren’t sold online, the Find page lists every store that carries them and pins each one on a Google Map styled in the brand’s dark green. Clicking a pin shows that store’s hours and address. A contact form, protected from spam by Google reCAPTCHA, sends questions straight to the team.

Hover the screenshot to scroll the full page. Click to open it full size.

Works on phones

Just as easy to browse on a phone

The site rearranges itself to fit any screen. On phones the menu folds into one button, products stack into an easy scroll and the header stays pinned to the top, so the menu is always one tap away. The homepage also pulls in the brand’s latest Instagram photos.

Menu folds into one button on phones
Instagram feed on the homepage

Homepage

Product page

Instagram feed

Private dashboard

Staff update products without touching code

Behind the website is a private dashboard I built in Laravel. Staff log in to add new products, upload several photos at once, change details and take items off the site. Every change is saved in a history, and anything deleted by mistake can be restored from the trash.

What staff can do

  • Add and edit products
  • Upload several photos at once
  • History of every change
  • Restore from the trash
The result

A finished site that the team can run on its own

I wrapped up the project as my school final: a working website for a brand built from scratch, with a product catalog, a store finder, a contact form and a dashboard that lets staff keep everything current themselves. It’s the same approach I bring to client websites today.

Why it matters for you: your website shouldn’t need a developer every time a product, price or photo changes. I build websites with an easy dashboard so you can make those updates yourself.

Copyright © 2024 Michelle Prather Design Co.