iHeartJane: Unwind. Wedding Cake 98 percent match, 44 dollars. Gelato 96 percent match, 48 dollars. Cart 92 dollars.

iHeartJane

Santa Cruz

Unwind

Open the budtender
  1. Wedding Cake$4498%match
  2. Gelato$4896%match

Cart$0

Two jobs. The inherited product card hid add-to-cart; three versions later the menu converted at 10 percent instead of 7. Then Jane AI: a pickup shopper says how she wants to feel, and the bag is the proof.

Role
Founding Product Designer · Cards, grid, discovery
Year
2017-2020
Duration
3 years
Tools
Sketch · InVision · Mixpanel · Google Analytics

I inherited Card 1.0 from an outside agency. Testing showed it failed the job: horizontal only, it broke the grid, the image was too small to judge, brand names and THC were missing, and Add to Cart sat in a ghost button that looked disabled. A pickup shopper needed a real button and a card rich with image and fact.

  • OrientationHorizontal only. Broke the grid. Unresponsive.
  • ImageThumbnail too small to describe the product.
  • Add to CartGhost CTA. Weight and quantity looked disabled.
  • I need to find dispensaries near me, that offer the option for pick up or delivery.

Usability testing · pickup shoppers · Mixpanel on the live menu

  • Card 1.0 · inherited, annotated from testing

Card 2.0 split the job. Rest showed image, lineage, name, price, and a Select control. Selection mode held weight, quantity, a live total, and Add to Cart as a primary button — the second most valuable CTA on the site. The requirement stack was image, lineage, name, Select, price, weight, quantity. Tapping Select opened the dark mode; adding confirmed; closing returned to the grid without losing place.

  • RestImage, lineage, name, price, Select.
  • Select modeWeight, quantity, live total, Add to Cart.
  • ReturnClose lands back on the same card in the grid.
  • Card 2.0 · rest and select mode
  • Product card interaction flow

Wireframes and interaction flow · partner-success usability reviews

Operators asked for more cards per row. 3.0 scaled the image down, tightened the stack, and dropped select-mode in favor of a data-rich PDP: image, details, map of nearby stores, pick-up or delivery, and a newly launched recommendation engine. A/B ran across six breakpoints. Mixpanel after launch is on the plates.

  • GridTighter card. More SKUs per swipe and per row.
  • PDPDetails, store map, pick-up or delivery.
  • RecommendMatch percent on the row beneath the product.
  • 3.0 grid · recommended row with match percent
  • PDP · stores nearby and the recommendation engine

Metrics and Takeaways

  • 7% → 10%Conversion after Card 3.0
  • 15% → 60%Responsive mobile use
  • +$17.00Average order value

Mixpanel · Google Analytics · Product Card 3.0 · early 2019

Mixpanel · Google Analytics · page views +12% · checkout +8% · blind test vs Leafly and Weedmaps

Rise of the AI Budtender

prototype experiment

Santa CruzTravel with a brand. The card names the city so pickup has a where.Jane Discovery · location as a given, not a permission wall

Travel with a brand. Santa Cruz is the market: 3,567 products, 17 dispensaries. No permission dialog. The card names the city so pickup and delivery have a where.

  • CitySanta Cruz, California. Already found.
  • Catalog3,567 products across 17 shops.
  • JobPickup or delivery starts from here.

Activities, then how you want to feel, then how you prefer to consume. One interview. Wind Down, Relaxed, Smoke. The menu never opens. Most shoppers found product through friends, not a counter.

  • I need to find an online tool that shows product descriptions, effects, flavors and other info about the products.

Cannabis Discovery Tool research · pickup shoppers who know a little

  • Target: pickup shoppers who know a little — not nothing
ActivitiesA budtender starts with the night, not the menu.
FeelName the sensation. Jane ranks the bag.
PreferForm is a filter. Smoke keeps flower at the top of the rank.

Jane ranks the bag. Wedding Cake at 98 percent, Gelato at 96. The match is the reason to open the card. The PDP names Flower to the People in Santa Cruz — Card 3.0’s detail page, now located.

  • Rank98% Wedding Cake. 96% Gelato.
  • TapCompatibility opens the product, not a ghost CTA.
  • WhereFlower to the People · Santa Cruz.

Open Jane AI budtender

Santa CruzTravel with a brand. The card names the city so pickup has a where.
ActivitiesA budtender starts with the night, not the menu.
FeelName the sensation. Jane ranks the bag.
PreferForm is a filter. Smoke keeps flower at the top of the rank.
RankedThe match percent is the reason to open the card.
ProductThe PDP from Card 3.0, now with a store that exists in Santa Cruz.
CartThe bag is the night. Pickup or delivery, then the sum.
FT-092FT-092 is the ticket. Studio id themfa sits in the source note.

Cover SKUs match the live catalog · synthetic totals are the sum of what is on stage · studio order id themfa

Jane’s design language

A paper room, ink type, a yellow heart as wayfinding, and one purple reserved for match. Eva’s semantic 500s sit beside that law so the kit and the reconstruction cannot disagree.

Read live from the running stylesheet · --art-ij-* · checking 11 tokens…

Brand & ground

--art-ij-paperPaper · Basic 100 · cards and type…
--art-ij-roomRoom · muted surface behind the card…
--art-ij-voidVoid · surface.base…
--art-ij-textInk · Basic 800 · primary type…
--art-ij-mutedMute · Basic 600 · hint and lede…
--art-ij-heartHeart · wayfinding, never a fill CTA…

Primary & semantic

--art-ij-inversePrimary 500 · match type and selected labels…
--art-ij-successGreen 500 · success…
--art-ij-infoBlue 500 · info…
--art-ij-warningYellow 500 · warning…
--art-ij-dangerRed 500 · danger…

Typefaces

Jane Default · Source Sans 3You are in Santa Cruz.One face. Headlines, body, buttons. Scale 14 / 16 / 24 / 36. Helvetica and Arial sit behind it.

System principles

Inverse is the match

Primary 500 marks match percent and the selected interview label. It is not a filled Continue. Interview Continues stay ink on paper.

The heart is wayfinding

Yellow lands first so the city has an origin. It is a mark, not a background, not a button fill.

One family, four sizes

Jane Default carries every word. 14, 16, 24, 36. No second display cut, no italic hero word.

Semantic means state

Green, blue, yellow, and red are success, info, warning, and danger. They do not decorate a card that is already doing its job in ink.

The contract, four ways out

Reading live values from the stylesheet…

Written for humans and machines

These are the 500s from Jane’s Eva kit, declared once in tokens-art.css and read live on this page. The phones reconstruct against the same names in jane-ui.css. Inverse stays type. The heart stays a mark. validate-design-system.sh fails the build if site chrome borrows the kit.

ContractDesign.md · globals.cssAgentsSketch · Eva Design · CursorGatevalidate-design-system.shNo driftbuild fails if any of us drifts

Close

  1. The night

    Jane AI locates, asks, ranks, and closes on order FT-092.

    Studio order id themfa. Synthetic catalog. Wedding Cake $44 and Gelato $48 are the sum.

Paul Banks

Charlotte, NC · Remote

Paul Banks

Principal Product Designer

After 16+ years shipping product interfaces, I now design the surfaces where people and agents share a task: prompts, confidence, and the checkpoint where a human still decides.

Get in touchDownload resumeSee my brand-voice work →