From support inbox
to device finder
A year of support data, turned into storefront IA and copy changes.
Then a working finder, built on my own after I left.
“I can’t tell which skin tone range I’m in.
Which one should I buy?”
For a year, I answered this question at a brand
whose three lasers were nearly impossible to tell apart on the page.
- The evidence
A year in the support inbox and the live chat. Around ten thousand messages, counting the back and forth within a single case, logged into recurring-issue reports.
- What shipped
Three rounds of fit-chart redesign, plain-language product titles, and a lifetime cost comparison.
- What I built after
An interactive device finder, built to see whether the answer held up outside a chart.
- The call I’d defend
I traded the precision of a full matrix for people actually finishing the task, and kept the finder honest enough to say “don’t buy this.”
Four purchase blockers, found in a year of support messages
DermRays sells at-home diode lasers direct to US consumers. Three models, two laser wavelengths, and compatibility ranges that overlap almost entirely.
A year of pre-sale and post-sale inquiries, email and live chat, logged into structured reports once the same questions kept repeating. Not formal research, but it came from people with their credit cards already out: customers could not place themselves on the compatibility chart, or tell the three devices apart.
- Product selection
Which model matches my hair and skin color — V4S, V6S, or V8S?
Most frequent pre-sale question - Self-identification
I can’t determine my own skin tone range. Please recommend one for me.
Repeated verbatim - Education gap
How is this different from IPL? Can I use it on sensitive areas?
Recurring in pre-sale chat
The pattern surfaced in four ways, each stopping someone at a different point in the funnel.
| What’s the problem | Why it’s a problem | What I did |
|---|---|---|
| 01Too much spec language | People could not read the product in the words we used. 810nm and 7J/cm² tell you nothing about yourself. |
Plain-language titles and labels, worked out with the tech manager and my manager. |
| 02Skin and hair are hard to match | The first chart was too rough to trust. The second was too dense to bother with. |
Three rounds on the fit chart, ending with enlarged swatches and real hair texture. |
| 03Safety and preference look alike | Both were printed as bare numbers, so attention went to the wrong decision, and sometimes to a device that would not work. |
Moved the fit question up to browse level, each listing titled by who the device is for. |
| 04$499 reads as expensive | Price doubt ends the visit before the fit question is ever asked. |
Made the case for laser over IPL, and built a lifetime cost comparison against salon laser. |
The finder later folded the first three into one flow. The fourth is answered on the page.
An 810nm laser cannot tell the melanin in dark skin from the melanin in dark hair. A 1064nm laser is absorbed far less by skin melanin, which is why it is the only safe option on deeper tones.
- Tones 5–6Safety, a hard line1064nm only. On deeper tones the 810nm models will not fire.
- Tones 1–4PreferenceV4S or V8S. Same wavelength & cooling tech. Different speed.
The storefront gave both the same voice, a wavelength in the title and joules on a variant button, so they looked like the same kind of decision.
| Model | Wavelength | Skin tones | What actually sets it apart |
|---|---|---|---|
| V4S | 810nm | 1–5 | 7J/cm², ice-cooling; positioned as the gentle one |
| V8S | 810nm | 1–5 | 9J/cm², ice-cooling; fastest clearance |
| V6S | 1064nm | 5–6 | The only model safe on tones 5–6 |
The bill arrived after the sale: returns filed weeks into use, and a steady stream of exchanges, usually the gentler V4S going back for the faster V8S. The store’s own FAQ asked, “How do I know if I should use DermRays V4S or V6S?” We had written an answer. We had not designed one.
- The words were doing damage of their own. A core navigation item named a nationality instead of a trait. At my suggestion it was renamed. People shop by what they can see on themselves.
Three rounds on the fit chart, and the trade-off I chose
My manager and I took the fit chart through three versions, all against the same user question: “Am I a safe match for this device?”
Each version asked less of the customer than the one before. Concept 01 and Concept 02 each fell short in a different way.
-
Concept 01 · Disconnected lists simplicity over logic
The design. Two rows of flat color circles, skin tone and hair color, each swatch marked with a green check or a red cross.
The UX flaw. Both rows used the same flat circles, so the label above each row was the only thing telling skin from hair.
-
Concept 02 · The grid matrix data over experience
The design. A full matrix crossing every skin tone against every hair color.
The UX flaw. More accurate, since suitability does depend on the combination. But the swatches shrank to the smallest cells of any version, and a basic answer now took a two-dimensional lookup.
-
Concept 03 · Two rows, with texture what we shipped
The design. Two rows again, but the swatches are enlarged, the hair swatches use real hair texture, and the ticks and crosses became one plain mark under each swatch.
Why it works. The two rows separate at a glance, without the labels doing all the work. Replacing the flat dots with photographs of real hair helps customers recognize the material, instead of translating their own hair into an abstract color.
Two rows cannot encode the intersecting logic of a matrix. But the support data showed something the matrix could not: people were not failing the lookup, they were not attempting it. We took the completed interaction over the perfect chart.
The chart was one piece. Three other changes went in alongside, each aimed at one of the four problems.
- Titles that say who it is for. With the tech manager and my manager, we split the wavelength listing into one listing per model and replaced spec-led titles with plain language, so browse answers the fit question first.
- One image system. The homepage mixed studio shots and lifestyle photos at random. I proposed and directed a two-state treatment: every listing opens on the device with its packaging, then on hover switches to a model whose skin tone sits inside that device’s safe range.
- 810nmV4S + V8S
- 1064nmV6S
Both 810nm models sat in one listing, split by a variant button labelled 7J and 9J.
- For Sensitive SkinV4S
- Faster Results, Most PowerfulV8S
- For Dark SkinV6S
Before, the fit question only started after the click. Now it is answered in the listing title, and the two 810nm models are separate entries.
Still unanswered: the V4S and V8S cards showed the same eight-week timeline. The header said one was faster; the page never showed it.
A two-step finder that can also decline the sale
I had already left the company when I built this. The storefront changes made the choices readable, but a static page cannot make the decision with you.
So I folded the first three problems into one flow. Tap the swatch that looks like your skin, then your hair. The interface does the cross-referencing the chart used to hand you. For low-pigment hair it answers by not selling you anything. (Jump straight to the prototype ↓)
• One match: that’s the answer.
• Two matches: a preference, laid out with the facts.
• No match: the button reads “Ask our team before buying,” not “Add to cart.”
Visual matching before technical labels
Swatches first, because “medium olive” and “Fitzpatrick IV” are the vocabulary of the problem, not the solution. Skin runs light to dark and scans in sequence; hair colors have no natural order, so each one carries a label.
My first draft asked a third question, sensitive skin or not. It was a preference, not a safety gate, so it moved to the result screen.
Safety before preference
On deep skin, an 810nm device is not a preference. That wavelength cannot separate skin pigment from hair pigment, so the skin sensor locks the device out: it never fires, and the order comes back. The result screen returns the V6S and nothing else, with the reason in place of the other models, and the skin-tone step also stops anyone with an active tan, self-tanner or tattoos.
A recommender that presents an unsafe option as an open choice has failed, even if the customer never clicks it.
Preference is settled after that. When both 810nm models qualify, the screen puts them side by side: the V8S is the faster one, it can turn its energy down, and it carries the same cooling as the V4S. So the trade-off was never comfort. It was speed.
Sometimes the right recommendation is “don’t buy this”
Lasers need melanin to find the follicle, so blonde, red, gray and white hair hold too little pigment for at-home treatment. The original chart already marked those with a cross; this is the first version that acts on it. The button reads “Ask our team before buying” and goes to customer service, not to a product page.
Those orders used to come back: a return, a support thread, a disappointed review. Preventing the purchase does not rule that out, but it removes the one cause I could see coming.
| Skin tone | ||||||
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| Black | V8S / V4S | V8S / V4S | V8S / V4S | V8S / V4S | V6S | V6S |
| Dark brown | V8S / V4S | V8S / V4S | V8S / V4S | V8S / V4S | V6S | V6S |
| Medium / light brown | V8S / V4S | V8S / V4S | V8S / V4S | V8S / V4S | V6S | V6S |
| Blonde | Talk first | Talk first | Talk first | Talk first | Talk first | Talk first |
| Red / auburn | Talk first | Talk first | Talk first | Talk first | Talk first | Talk first |
| Gray / white | Talk first | Talk first | Talk first | Talk first | Talk first | Talk first |
Half of the combinations end without a product. That half is answered on the spot instead of guessed at.
Why I built it instead of mocking it up
I designed the decision logic, the branching rules and the copy, and built the whole thing with AI assistance as one self-contained HTML file.
- Light enough to drop in. One file, no monthly app subscription, so it can sit in a Shopify theme as a section.
- Every combination clicked through. Building in code let me test all 36 pairs myself, instead of mocking up a few frames and assuming the rest held.
Try the working prototype
Pick any skin tone and hair color to see how the logic branches, including the one where it deliberately does not sell you a device.
What shipped, and the three metrics I would track
The storefront changes went live while I was there:
The finder has no live data behind it, and so far only I and a few friends have used it. I would rather show the plan than a number I cannot stand behind. The baseline already exists: a year of categorized inquiries in my support log.
- 01
Support demand
Share of pre-sale inquiries asking which model to buy, measured against the baseline I logged by hand.
- 02
Flow completion
Completion and drop-off at each step, which tells an interface problem apart from lost interest.
- 03
Purchase quality
Return rate on finder-attributed orders against direct purchases. A lower rate would suggest people are landing on the device that suits them.
Who did what on this project
- Competitive research: laser vs. IPL, and what to make of it.
- Fit-chart simplification.
- The hair-texture visual treatment.
- The decision to trade matrix precision for completion.
- Product line-up restructure.
- Plain-language, outcome-based naming, with the tech manager and my manager.
- Proposed and directed the unified visual system, including skin-tone-matched hover states.
- Market research for the lifetime salon cost comparison.
- Produced the final UI components and page compositions, based on the direction, rationale and product logic I contributed.
- The device finder below: logic, UX copywriting, and functional build, powered by AI assistance.
- An independent prototype; DermRays has not implemented it.