Ariana Herlihy / Work / Sawyer Mason
Website redesign
Giving a beautiful floor a website to match
Sawyer Mason makes structured wide plank floors, mostly French oak, and the floors are gorgeous. The website wasn’t. It looked dated, the photos were doing all the work, and finding a floor you liked meant digging through menus. I redesigned the whole thing, page by page, on the live site.
The new homepage. Hover to pause.
Where it started
The old site had good bones and great photography, but every page was built a little differently and nothing felt connected. The homepage didn’t say what Sawyer Mason actually does, and the menu was a long list of product names that only meant something if you already knew the catalog.
The goal was simple to say and harder to do: make it feel as considered as the floors, and make it easy to find the right one.
A system first
Everything runs on one small design system so the whole site feels like one place. Open Sans in a light weight, with a gold italic for the words that matter. A deep navy for anchors and buttons. Warm, calm backgrounds pulled from the wood itself.
- Navy
#213550 - Gold
#8B6B3D - Linen
#F3F0E9 - Plaster
#F8F6F2
Shopping by look
Most people don’t walk in knowing they want “Sconset.” They know they want something light, or grey, or dark and moody. So I rebuilt the navigation around how people actually shop: by tone, by collection, and a few featured floors up front. On desktop it’s a mega menu with real room photos for each tone.
On a phone
Mobile got its own design instead of a squished desktop menu. The tones turn into round wood swatches you can tap, with the featured floors right under them.
The new navigation launched behind an admin-only switch, so we could test it on the live site and flip back instantly if anything went wrong.
Nine collections, one layout
I redesigned all nine collection pages around the same structure: the story, a room photo, and a spec bar with width, length, finish, character and thickness, so you can compare collections without hunting. They kept their original URLs so nothing was lost in search.
Showing how it’s built
The big selling point is the structured construction, but the diagram explaining it was a blurry old image. I made a new one: a side view of the plank with the layers called out, and the S|M logo rolling across the top like a coin. On the site it drops in with a little bounce when you scroll to it.
- The rest of the siteA new About page, a page for every tone, a rebuilt Our Collections page, and a Press page that fills itself in from new posts.
- Built inside the real siteEverything lives in WordPress and Flatsome’s page builder, so the team can still edit it. New styles sit in their own snippets instead of the theme files.
See it live at sawyermason.com.