One of my first clients, redesigned as a surprise: a field-guide store in light and dark, instant search, every store email rebuilt, and the mailing list moved to SureContact.
Mississippi Mane & Co. was one of my very first clients. Joseph makes beard oils, balms and washes by hand in Mississippi, and around 2018 he took a risk on me and let me build his online store. It sold his products for years, and its footer still said Site by Matchless Web.
Stores age, though. I originally built it on the Divi theme and page builder, and I've since moved on to more modern, professional tools for building sites. I haven't built a client site on Divi in years. The store's emails were WooCommerce's defaults. They weren't much to look at, and beyond his logo they weren't on brand. The mailing list sat in a Mailchimp account over its free limit, with sending paused.
Joseph didn't ask for a redesign. I just decided it was time. I built it and surprised him with it. His suggestions went in before it launched.
03
The Redesign
What shipped
I rebuilt the store on Bricks and Automatic.css, on the same WordPress and WooCommerce that already held his products, orders and customers. The design is a field guide: every scent gets a numbered plate, a Latin name and its notes, the way a naturalist logs a find, in Young Serif and the teal of his bottle labels. Light and dark are both designed. The site follows the visitor's phone or computer, and a toggle in the header remembers a choice.
Search is instant now, on every page and on phones for the first time. I tried asking the server on every keystroke first, and at up to a second a letter it felt broken. So the search loads the catalog once and looks through it in the browser, in 1 to 5 milliseconds a keystroke. It matches scent notes as well as names: type cedar and five oils come up, none with cedar in its name. A typo gets a Did you mean.
Every page was rebuilt, from the shop and every product through the cart, checkout and account pages, plus a privacy policy and terms the store never had. After the switch I checked every page at phone, tablet and desktop widths in both themes, for text that overflows, gets clipped or fails contrast.
Every email the store sends now shares one design: order confirmations, shipping notices, refunds, and the account and password emails. I built them the way I build all email now. The header band and buttons are locked with images, so a mail app's dark mode doesn't repaint them, and every one was checked for contrast and overflow at phone widths.
The mailing list moved too. Mailchimp was over its free limit with sending paused, so I moved Joseph to SureContact and cleaned the list on the way in, dropping the bot sign-ups by rule. The newsletter and contact forms, both behind Cloudflare Turnstile, and a new, unticked opt-in box at checkout all feed it now.
SureContact has an MCP server, so my AI agents can work in it directly. That's how I built Joseph a nine-email welcome series for new subscribers, from where to start and which scent is yours to why the oil isn't greasy, told in his customers' words and, in one email, his own. His future campaigns and drip sequences get built the same way.
4 views · tap to enlarge
01Order email02Order email in dark mode03Welcome series, first email04Welcome series, find your scent
05
Gallery
13 views · tap to enlarge
01The field guide to the beard oils02Shop with category filters03Product page, Cinder Smoke04Instant search for “cedar”05Search suggests a spelling06Home page in dark mode07Product page in dark mode08Mobile home09Mobile field guide10Mobile menu11Mobile search12Mobile product page13Mobile shop in dark mode
06
Before and after
Drag the handle
Home — Desktop01 of 06
Before
After
Product — Desktop02 of 06
Before
After
Home — Mobile03 of 06
Before
After
Shop — Mobile04 of 06
Before
After
Product — Mobile05 of 06
Before
After
Order email — Mobile06 of 06
Before
After
Drag the handle, or focus it and use ← → (Shift for larger steps), Home and End.
