Brujita420
A premium e-commerce experience
for a niche lifestyle brand
Brujita420 — "little witch" in Spanish — is a cannabis-forward wellness lifestyle brand targeting women aged 20–35 who live at the intersection of self-care, spirituality, and counter-culture. The brand's identity blends dark mysticism with feminine energy: deep purples, bold typography, and a tone that's equal parts enchanting and unapologetic.
The founder came to me with a clear vision but no digital presence. She needed a fully custom e-commerce platform that could carry the brand's personality end-to-end — from the homepage first impression all the way through product discovery, cart, and checkout. Off-the-shelf themes weren't going to cut it; this brand demanded something built from scratch.
My role covered the entire product lifecycle: user research, brand-aligned UX strategy, Figma wireframes, high-fidelity design system, and then hand-coding every component in HTML, CSS, and vanilla JavaScript. The result is a pixel-perfect, mobile-first e-commerce experience that converts browsers into buyers — and communicates luxury within a niche market that's often underserved by quality design.
Designing for a brand that breaks the mold
Premium feel in a stigmatized market
Cannabis brands often lean into the stoner stereotype or over-correct into sterile medicinal aesthetics. Brujita needed to communicate premium, curated, and intentional — without either extreme. Every design decision had to reinforce trust and desirability.
Brand identity from zero
There was no existing design system, no brand guide, no color palette — just a name and a vision. I developed the full visual language: typography pairing, color tokens, iconography style, and interaction patterns, all from scratch in Figma before writing a single line of code.
E-commerce UX for a design-literate audience
The target customer is skeptical of "cheap." Cart abandonment is brutal in this space. Every friction point in the purchase flow needed to be identified and eliminated — from product discovery through checkout confirmation — before a single real user encountered it.
Mobile-first with no compromises
Over 70% of expected traffic would come from mobile — mostly Instagram and TikTok referrals. The experience had to feel native on small screens: fast, thumb-friendly, and visually stunning even at 375px, without degrading on desktop.
"The biggest challenge wasn't making it look good — it was making it feel trustworthy. In a niche like this, trust is currency. Every micro-interaction, every label, every transition had to communicate that this brand knows what it's doing."
— Sara Gismondi, Designer & Developer// key_constraints
- No CMS — fully hand-coded for maximum control
- Custom cart logic without a third-party library
- Dark theme only — no light mode fallback needed
- Imagery-sparse design using CSS gradients and art
- Animations must degrade gracefully on older devices
- Page weight target: under 400 KB on first load
From blank canvas to live store
Discovery & User Research
I started by researching Brujita's target audience — women 20–35 who shop at the intersection of wellness, beauty, and counter-culture. I analyzed competitor brands (Kush Queen, Cannabliss, Revelry) to map gaps and opportunities. User interviews with five women in the target demographic surfaced key insights: they value aesthetics as much as product quality, distrust brands that look "sketchy," and abandon carts when checkout feels clunky or untrustworthy. These findings shaped every subsequent decision.
Brand Identity & Design System
Before touching wireframes, I built the design system in Figma. The visual language centers on deep backgrounds (#0f0714 to #1a0d24), a mystic violet accent (#C778DD), and a secondary electric indigo (#5F2DF1) for interactive elements. Typography pairs Poppins (display headlines) with Fira Code (labels and metadata) for a tech-meets-mysticism feel. I defined spacing tokens, border radii, shadow scales, gradient recipes, and a motion library — giving every future component a consistent foundation.
Wireframes & UX Flow
Low-fidelity wireframes covered all core flows: homepage, category browse, product detail page (PDP), quick-add modal, cart drawer, and a streamlined 2-step checkout. I paid particular attention to the cart UX — research showed that multi-step, cluttered carts were the primary abandonment driver. The solution: a slide-in cart drawer with inline quantity adjusters, persistent item images, and a sticky checkout CTA that stays visible during scroll. Two rounds of client iteration refined the flow before moving to high-fidelity.
High-Fidelity Design
In Figma I built full high-fidelity screens for all core pages across mobile (375px), tablet (768px), and desktop (1280px). Product cards use layered gradients and subtle hover animations — a glow effect in mystic violet — to make browsing feel premium. The homepage features a bold editorial hero, a curated product grid, and a lifestyle quote section that reinforces the brand's identity. Every interaction state (hover, active, loading, empty cart) was designed before development began.
Frontend Development
I hand-coded the entire site in HTML, CSS, and vanilla JavaScript — no frameworks, no build tools, maximum performance. CSS custom properties power the design token system, enabling consistent theming across every component. JavaScript handles cart state (add/remove/quantity), scroll-triggered animations via Intersection Observer, mobile menu behavior, and a product gallery with touch swipe support. Cart state persists in localStorage so users don't lose their basket on page reload.
QA & Performance Optimization
With 70%+ expected mobile traffic, QA was mobile-first. Every page was tested on iPhone SE (375px), iPhone 14 (390px), and Android (360px) as primary targets, then scaled up to tablet and desktop. Touch targets were validated against WCAG 2.5.5 (minimum 44×44px). Lighthouse audits caught and eliminated render-blocking assets. Final scores landed above 90 across all categories on mobile — performance, accessibility, best practices, and SEO.
UI that feels as good as the brand
Every screen was designed to make the purchase feel like an experience — not a transaction.
Product Detail Page
Immersive layout with swipeable gallery, variant selector, and a sticky add-to-cart CTA anchored at the bottom on mobile.
Cart Drawer
Slide-in panel with inline quantity controls, product thumbnails, and a persistent checkout CTA — no full page reload.
Mobile Product Grid
Two-column grid optimized for thumb reach — fast-loading cards, touch-friendly tap targets, and native-feeling scroll behavior.
Everything, end to end
Design System & Brand Identity
A complete visual language built in Figma — from color tokens and typography to component library, motion guidelines, and brand voice principles — delivered as a living document.
- Color palette: 3 backgrounds, 2 accents, 6 semantic tokens
- Typography scale: Poppins display + Fira Code mono pairing
- 25+ reusable Figma components with all interaction states
- Motion principles and easing guidelines
- Brand voice guide for product copy and microcopy
E-commerce Frontend
A hand-coded, fully responsive e-commerce site in HTML, CSS, and vanilla JS — built for performance, brand alignment, and conversion at every stage of the funnel.
- Homepage with editorial hero and curated product grid
- Category pages with filter, sort, and quick-add controls
- Product detail page with gallery, variants, and reviews
- Slide-in cart drawer with localStorage persistence
- 2-step checkout flow with inline form validation
- Mobile-first across all breakpoints (375px → 1440px)
Built lean, built to last
Numbers that tell a better story
Post-launch metrics tracked over 90 days, compared against a pre-launch Shopify prototype the client had briefly piloted.