All work

Puffy · Product page redesign

Puffy Lux: redesigning the first fold, with an AI image tool

A new hero for the Puffy Lux product page, and the AI tool I built to create its images.

View the full case study on Behance ↗Open the live demo ↗

06 / 06Case study The Puffy Lux hero design shown on a tablet

Puffy LuxFirst fold & Studio AIFromBriefToLive demoRoleDesign & AIStandardWCAG 2.1 AAToolsFigma · LovableRedesigning the Puffy Lux first foldRead

Role: Design & AI prototyping
Client: Puffy · design assignment
Deliverables: First-fold redesign · Image tool · Handoff brief
Standard: WCAG 2.1 AA
Tools: Figma, ChatGPT, Gemini, Lovable

Puffy Lux hero design: Luxury Sleep, Perfected, with price, key features and the collection switcher

The brief

Puffy asked me to redesign the first fold of the Puffy Lux product page: everything a shopper sees on desktop before they scroll. In a few seconds, it has to explain the product and earn its price.

The problem: Lux is a premium mattress, and shoppers compare fast. If the first fold doesn’t show what Lux is and why it costs more, they move on to a rival that explains itself quicker.
The objective: Design a desktop first fold that answers two questions at a glance, “What is it?” and “Why is it premium?”, at production quality and accessible to everyone.

The brief set four requirements:

Communicate what the product is and why it’s premium
Designed for desktop, at a screen size of my choosing
High-fidelity, production-ready quality
Meets WCAG 2.1 AA accessibility standards

The work grew into three deliverables: the new first fold, an AI tool that creates its product images, and a handoff brief for other designers.

Research: how rivals sell comfort

Before designing, I studied Puffy’s main competitors: brands selling similar memory-foam, hybrid or “cloud-like” beds, from mattress-in-a-box startups to larger sleep companies.

DreamCloud

Luxury hybrids, made affordable

Layers memory foam over individually wrapped coils for plush comfort and stable support, finished with a quilted cashmere-blend cover for an indulgent, cloud-like feel.

Purple

Fun, futuristic, weightless

Its GelFlex® Grid, a hyper-elastic polymer, collapses under pressure points while supporting the rest of the body, so you feel almost weightless. Very breathable, which makes it a favourite with hot sleepers.

Casper

The bed-in-a-box pioneer

Foam and hybrid mattresses known for balanced softness and support. Its Zoned Support™ gives targeted relief at the shoulders and hips, a strong pick for side sleepers.

What it meant for Lux: each rival leads with one clear idea, from Purple’s grid to Casper’s zoned support. Lux needed its own: a single premium promise, backed by proof a shopper can check at a glance.

Deliverable 1: the new first fold

The fold answers the brief’s two questions, what it is and why it’s premium, in the order a shopper asks them.

The redesigned Puffy Lux first fold: awards, product name and promise, feature chips, rating, price, actions, product image and collection switcher — The redesigned first fold on desktop.

What is it?: The product name, a “Hybrid mattress” label and a large product shot, with one line on the 8-layer hybrid design and Cooling Cloud™ technology.
Why is it premium?: The promise “Luxury Sleep, Perfected”, awards up top (Best Mattress 2024 from Livingetc, ACA endorsed), feature chips, and a 4.9-star rating from 12,847 reviews.
Is it worth it?: The price with its saving ($1,649, down from $2,449), free shipping, and two clear actions: Shop now and Compare models.
What else is there?: A collection switcher to compare Lux with Cloud, Royal and Monarch without leaving the page.
Can everyone use it?: Contrast, type sizes and controls designed to meet WCAG 2.1 AA.

I built it as a working, responsive demo, so it could be reviewed in a real browser rather than as a static frame.

Open the live demo ↗

The Puffy Lux hero on a desktop monitor in a light theme and on a tablet in a dark theme — The same fold on desktop and tablet.

The image problem

A premium fold needs premium photography, and there was no photo shoot. So I used AI to place the mattress in real, upscale bedrooms.

A short first prompt gave a clean exploded view of the layers. The bedroom scenes were harder: every image came out almost the same, and the mattress often wasn’t Puffy’s.

I wrote a reusable prompt template with strict rules: match the reference product exactly, keep the brand palette, use set camera views. ChatGPT, Gemini, DALL·E and Midjourney still invented mattresses Puffy doesn’t make. Repeating the rules, even in capitals, didn’t fix it.

A second objective: produce consistent, on-brand images of the real Puffy mattress, without a photo shoot.

Prompt conversation 1 ↗Prompt conversation 2 ↗Gemini conversation ↗

Exploded view of a Puffy mattress showing its layers — First prompt: an exploded view of the layers.

The detailed, reusable prompt template — The reusable prompt template.

Three AI renders of a mattress in near-identical bedrooms — Bedroom renders: nearly identical every time.

AI renders that show the wrong mattress design — Still the wrong mattress, across four AI tools.

Chat messages telling the AI it picked the wrong product and to use the real Puffy mattress — Even blunt corrections didn’t get the right mattress.

From prompt to product: three decisions

The fix wasn’t a better prompt. It was a small tool that asks for the right inputs.

Chose
Turn the prompt into a tool with structured inputs
Over
Writing an ever-longer, stricter prompt
Because
The models kept ignoring details buried in long text. Separate inputs for product, reference, views and setting are harder to skip.
Chose
Require an uploaded reference image of the real product
Over
Describing the mattress in words
Because
Getting the real product right was the main failure. A photo carries details that words miss, and the tool rejects any upload that isn’t a mattress.
Chose
Multi-select views and preset artistic notes
Over
Generating one image at a time
Because
A whole set renders in one go, and presets keep the look consistent with the brand.

Deliverable 2: Puffy Studio AI

01Select the product
02Upload a reference
03Choose the views
04Describe the setting
05Download the set

Puffy Studio AI turns image making into five steps: pick the product, upload a photo of the real mattress, choose the views, describe the setting in a sentence, and download a matching set.

It’s built to grow. The product list can go beyond mattresses, views can be multi-selected for batch renders, and toggles for logos and specs, plus preset notes such as Golden Hour or Minimalist, keep every set on brand.

Studio AI conversation ↗

Puffy Studio AI, Visualize the Legacy, shown on a desktop monitor

Annotated Puffy Studio AI interface: product selection, reference upload, views, notes and results — The studio, annotated.

Studio settings: logos and specs switched on, preset artistic notes, and a one-line description of the setting — Step 4: logos and specs on, a preset note, and the setting in one line.

The results

For Lux, one reference photo and one sentence, “red brick wall and hanging lights, side wooden tables and interior plants, matching bedsheet and pillows”, produced a consistent set of hero-ready images.

Live, accessible first-fold demo
Reusable tool for on-brand product images
Handoff brief in Figma

A collage of mattress renders in different styled bedrooms — Renders from Puffy Studio AI.

Reference image of the Lux mattress next to three rendered views in a brick-walled bedroom — Lux: the reference image, then the rendered set.

Deliverable 3: handoff brief

So the work doesn’t depend on me, I wrote a handoff brief in Figma covering the first fold and the image workflow. Another designer can pick up both and carry on.

Open the handoff brief in Figma ↗

Did it solve the problem?

Each objective, and the part of the solution that meets it.

Show what Lux is: Product name, a “Hybrid mattress” label, a large product shot and one line on the 8-layer design. Deliverable 1
Prove it’s premium: One promise, “Luxury Sleep, Perfected”, backed by awards, feature chips and a 4.9-star rating. Deliverable 1
Production-ready, on desktop: Built as a working, responsive demo that can be reviewed in a real browser. Deliverable 1
Accessible to everyone: Contrast, type sizes and controls designed to meet WCAG 2.1 AA. Deliverable 1
On-brand product images: Puffy Studio AI: a reference photo plus structured inputs gives a consistent set of the real mattress. Deliverable 2
Work others can continue: A handoff brief in Figma covering the fold and the image workflow. Deliverable 3

What I learned

Premium is earned with proof. Every competitor had one clear idea, and the Lux fold works because it pairs one promise with evidence a shopper can check in seconds.

AI is fast, but it doesn’t follow long instructions reliably. The fix wasn’t a better prompt; it was a better interface. Structured inputs and a real reference photo turned an unpredictable model into a dependable tool.

Next projectAI recommendations people can act on