← All work
02 / 06 · Concept, product spec and wireframes

AI Buying Concierge: helping small businesses choose laptops without guessing

A product spec and wireframes for an AI shopping assistant that asks a few plain questions, then recommends three laptops using only facts it can verify. A self-directed concept, not built for or affiliated with any company.

Role
Product management and UX design
Tools
Figma, HTML, CSS, JavaScript
Status
Spec, wireframes and design tokens done; final screens in progress
Links
Design tokens (live) ↗Source code ↗
AI Buying Concierge · catalog unavailable DesignProduct
Wireframe: a Help me choose dialog saying we can't confirm prices and stock right now, with the buyer's saved answers, a Try again button, and a Talk to a sales rep button

The screen I designed first: when the catalog can't be reached, the AI would rather say nothing than guess.

Problem

Small business buyers know what their team needs to do, not which model does it. A large laptop catalog turns a simple purchase into a research project.

Who it's for: an office manager or owner at a 10 to 100 person business, buying 5 to 25 laptops for their team. They aren't IT experts, they're short on time, and they want to be confident they're buying the right thing.

A good salesperson doesn't read you the whole catalog. They ask a few questions and recommend a few options. An AI concierge can do the same online, as long as every fact it states is true.

Before anything gets built, four assumptions need checking: that these buyers browse many product pages before buying or leaving, that they describe needs as tasks ("video calls, spreadsheets") rather than specs, that wrong-fit purchases drive returns, and that they want a recommendation, not just better filters. Each one has a matching check, from analytics and site search terms to five to eight short interviews with recent buyers.

Solution

A "Help me choose" concierge that asks four or five plain-language questions and returns three grounded recommendations: good, better and best, each with a reason and a tradeoff.

  1. Buyer clicks Help me choose
  2. Answers four or five plain questions
  3. Facts are pulled from the live catalog No invented specs or prices
  4. Good, better and best picks, with reasons
  5. Compare, add to cart, or hand off to a sales rep

The retrieval step is the safeguard. Every spec, price and stock status the buyer sees comes from the catalog, not the model.

  • First version is deliberately small: business laptops only, one region, one language, small business visitors only, and checkout left exactly as it is.
  • Left out on purpose: accessories and warranties until laptop accuracy is proven, consumer shoppers until one audience works, and custom pricing because it's high risk and needs sales and legal sign-off.

Wireframes

Four low-fidelity screens built in Figma with auto layout, including the two failure states the concierge has to handle honestly. I kept them grayscale so the conversation is about the flow, not the colors.

Wireframe: a question step asking what the team will use the laptops for, with checkbox answers, a question 2 of 5 progress bar, and a link to talk to a sales rep
Question step. One plain question at a time, progress shown, and a sales rep always one click away.
Wireframe: good, better and best laptop cards with specs, reasons and tradeoffs, the middle card marked best fit for your team, and a Were these picks helpful question
Results. The buyer's answers stay visible, every tier shows its tradeoff, and "Best fit" goes to the right match, not the priciest one.
Wireframe: a no match screen explaining nothing fits the budget, showing the closest option and how far over budget it is
No match in budget. Explains why nothing fits, then shows the closest option and exactly how far over budget it is.

The catalog-unavailable screen at the top of this page is the fourth. It shows no recommendations it can't verify, keeps the buyer's answers, and passes them to a sales rep so nobody has to start over.

Measuring success

The concierge succeeds if more small business visitors buy the right laptops, without more returns or wrong answers. Targets are starting proposals, set against a baseline measured first.

  • Primary: conversion rate for sessions that use the concierge, compared with a control group.
  • Secondary: time from first question to add-to-cart, and average order value, which shouldn't drop.
  • Guardrails: no increase in returns, 100% of specs and prices matching the catalog, and a "Were these picks helpful?" question tracked weekly.

AI quality gets its own plan. Before launch, a test set of about 200 real buyer questions, each with an expert-approved answer, scores whether facts match the catalog, whether the pick fits the stated needs, and whether it behaves safely, like declining to promise discounts. After launch, about 50 real conversations get reviewed each week, plus every "No" on the helpfulness question, and any failure joins the test set so it can't happen twice.

Risks and rollout

The biggest risk is a confident wrong answer, so accuracy gates every step of the rollout.

  • Wrong spec, price or stock: every fact is retrieved from the live catalog, and price and stock are shown from the catalog, not generated text.
  • Pushy upselling: the best fit is recommended first, and every tier shows its tradeoff.
  • Collecting too much data: it only asks about the purchase and stores nothing personal beyond the session without consent.
  • Cost per conversation: tracked against revenue lift, with a smaller model for simple questions.

The rollout runs in four steps: pass the 200-question test set offline, a two-week pilot with sales reps flagging bad answers, an A/B test on 10% of traffic, and expansion only if conversion improves and every guardrail holds.

What's next

The wireframes settle the flow. I'm designing the final screens directly in code, so the visual design and the build happen together and every state behaves for real. I'll add each step here without replacing the wireframes, so the progression stays visible.

Done Live

  • Design tokens for color, type, spacing and radius, in Figma and as CSS variables
  • Light and dark themes, with every text pair meeting WCAG AA
  • A live token page with a working theme switch

Up next In progress

  • Buttons, chips, answer options and the recommendation card, with every state
  • Question step and results screens
  • No-match and catalog-unavailable states, then a live demo
  • Product management
  • Product spec
  • AI product design
  • Success metrics
  • AI evaluation
  • UX design
  • Wireframing
  • Figma
~/contact

I design it, build it, and keep improving it after launch.

briakgodfrey@gmail.com