Matelas Personnel
A Québec mattress maker since 1980, rebuilt from a three-page brochure into a bilingual online showroom and store where every mattress can be personalized.
Hover a screen to scroll the page
Overview
Matelas Personnel has made mattresses in Québec since 1980, and their name says exactly what sets them apart: every mattress can be personalized. Their Saint-Léonard showroom is beautiful, their mattresses and pillows are made with care, and their customers love them.
Their website showed none of it. I rebuilt it from the ground up as an online version of the showroom: a full store, a clear way to browse and compare, guides that answer every sizing question, and personalization built into every product. I still run their SEO and maintenance today.
- Client
- Matelas Personnel
- Industry
- Custom mattresses
- Location
- Saint-Léonard, Montréal
- Year
- 2025
- Services
- E-commerce strategy
- UX and UI design
- WordPress and WooCommerce
- Brand palette
- French and English site
- SEO and content
- Ongoing maintenance
Built for every screen
The same site, laid out for each screen. Drag the edge of the window or pick a device. Hover the screen to scroll the whole page.
On real devices
Before and after
Drag the handle to compare the old home page with the new one. The old page is an archived capture from 2025.
The challenge
When they came to me, the website was a home page, an about page and a single gallery with one photo and a line of text per mattress. There was no store and no real navigation, and the colours of the showroom were nowhere on the site. Customers could not buy online, and personalization, the one thing that sets Matelas Personnel apart from every other mattress brand in Canada, was invisible.
No way to buy online
Every sale depended on a phone call or a showroom visit. There was no cart, no checkout and no prices on the site.
Personalization was invisible
It is what separates them from every other mattress brand in Canada, and the old site never explained it or let customers ask for it.
One photo per mattress
Each model had a single image and a sentence, with no sizes, firmness options or details to compare.
A brand that didn't match the showroom
The site used none of the colours, materials and warmth customers see in the store and on the mattresses.
Make the website feel like walking into the showroom, let customers browse, compare and buy online in French or English, and put personalization in front of them at every step.
Store structure
From three pages to a full catalogue, organised the way customers shop.
- Spring mattresses
- Latex mattresses
- Foam mattresses
- Hybrid mattresses
- 12 mattress models
- Size guide
- Twin
- Queen
- King
- Custom mattress
- Reversible mattresses
- A note on every product
- SmartFlex adjustable bases
- XtraRoom wall beds
- Blog guides
- FAQ
- Locations
- Contact
What I did
I studied Canadian mattress stores and read what customers say about Matelas Personnel. The reviews made it clear: people love the products and the personal service, so the site had to carry both.
I pulled the palette from photos of the showroom and the mattress fabrics: deep forest green, brass and warm linen, paired with Cormorant Garamond and Inter. The website now looks like the store.
A full WooCommerce catalogue with four collections and twelve models, each with format and firmness as real options, plus adjustable bases and wall beds.
One menu explains every collection in a line, links the sleep solutions, and keeps personalization one click away on every page.
Every product page has a personalization note. Whatever the customer writes goes into the cart with the mattress and arrives with the order.
A mattress size guide plus dedicated Twin, Queen and King pages, so customers know exactly what fits their room before they buy.
A page for RVs, boats and unusual spaces, built around their Saint-Léonard workshop and its made-to-measure work.
A bilingual blog of buying and care guides, structured for search with Yoast SEO, on a site that runs fully in French and English.
Personalization, built in
This is the flow I designed for their product pages. Pick a format and firmness, add a note, then add it to the cart.
Neptune Foam Mattress
$615.00 $724.00
A working replica of the product form, for this case study. Nothing is ordered.
Brand
Every colour was sampled from photos of the showroom and the mattress fabrics, so the website and the store feel like the same place.
Aa
Cormorant Garamond
Aa
Inter
The pages
Pick a page, then scroll inside the window to explore it from top to bottom.
French and English
Every page, product and step of checkout exists in both languages.
Results
mattress models online
Each with real format and firmness options and a price, ready to add to the cart.
languages, end to end
French and English on every page, product and step of checkout.
guides published
Nine buying and care articles in each language, written to answer real questions and bring in search traffic.
Personalization at checkout
Customer notes now arrive with the order, so the workshop knows exactly what to build.
A site that feels like the showroom
The same colours, materials and warmth that customers find in store.
One place for every question
Size guides, FAQ, locations and contact are one click away, so fewer customers need to call before buying.
What it means for the client
- Customers can buy any time
The store is open around the clock, not only during showroom hours.
- The difference is obvious
Personalization is visible on every product, so customers understand why Matelas Personnel is different before they call.
- Better-informed orders
Clear sizes, firmness options and notes mean customers arrive knowing what they want.
- Found in two languages
Bilingual pages and guides reach customers searching in French and in English.
Ongoing: SEO and maintenance
Loved by their customers
A few words from their Google reviews, which the new site now shows.
Great experience purchasing our Ultime reversible mattress from Matelas Personnel.
New place, helpful with search of a new mattress. All of their stuff is natural and of good quality!
Jacob was very professional and guided us in a good way in the purchase of our new mattress.
Speed
A store with full-length galleries, two languages and a mattress configurator, and it still paints in well under a second. These are Google PageSpeed Insights scores for the live home page.
- First Contentful Paint
- 0.6 s
- Largest Contentful Paint
- 0.8 s
- Total Blocking Time
- 20 ms
- Cumulative Layout Shift
- 0
- Speed Index
- 1.1 s
Lighthouse 13.5.0, emulated desktop, initial page load
The stack
The tools behind the build, and what each one does on the site.
- Custom themeThe main part of the site is a theme I built for this store: the templates, the mega menu, the category and size guide pages, and the custom mattress page.
- PHPCustom code for the personalization note on product pages, which follows the mattress into the cart and the order.
- WordPressContent management, so the team edits pages and products themselves.
- WooCommerceCatalogue, product options, cart and checkout.
TranslatePressFrench and English versions of every page and product.- ElementorVisual page layouts the team can edit themselves.
Fluent FormsQuote requests and contact forms.
WordfenceFirewall, malware scanning and login protection.- Yoast SEOSearch titles, schema and sitemaps in both languages.
- Google AnalyticsTraffic and conversion tracking.
