This February, I visited Detroit along with a team of fellow Automatticians to participate in the Detroit Hackathon, an initiative of Rebrand Detroit. We did a quick tour of Detroit (we only had a weekend, afterall), and learned about the realities and challenges that small businesses often face. Later, we visited each business to meet the owners, and learn about what they hoped to see on their new websites.
My task was to build a site for Brix Wine and Charcuterie Boutique. Brix Wine and Charcuterie is the dream of Mikiah and Fran Westbrooks. The Westbrooks renovated the historic Michigan Savings Bank — the oldest bank in Michigan — as the home for their new wine boutique. Located in the charming, historic district of West Village, the bank sits only few miles east of Downtown Detroit.
Working with Mikiah and Fran was a pleasure. Their passion for wine is palpable, as you can gleam from own words:
We absolutely love wine, it’s been the center of every great memory and moment we’ve experienced. Wine is alive and meant to be enjoyed everyday with friends and family in a place that is warm, inviting, relaxing, sexy and vibrant. That’s Brix, a wine bar and retail boutique dedicated to moderately priced wines and Charcuterie that will make you smile, laugh, live out loud and create lasting memories one sip at a time.
Here’s just a little bit about the process of building their website, and how the beautiful renovated space played a large part in the inspiration for this site.
The Space
Renovation of the bank was still in progress at the time of our visit. However, once you step into the doors of that wonderfully renovated bank building, you’re greeted with calming colors — grey, silver, and white, with touches of warm, orangey-brown. They had bar stools with thick, plush cushions, soft lighting, and comfy small tables and chairs throughout. They had also transformed the bank’s vault into a VIP room for private gatherings.
Mikiah and Fran described Brix as a place to call home with friends and a glass of wine, a place that’s inclusive and welcoming to everyone, a place to challenge your palate with wines you might have never tried, a place to make memories, and a place that emphasizes great customer service.
The website
Here are a few of the things Mikiah and Fran wanted for their site:
- Single-page site
- Engaging and inviting, encourages people to interact.
- Simple, with lots of breathing space
- Incorporates their menus, blog, video, events, hours, and links to existing social profiles
I selected the Pique theme, which was crafted by my talented colleague Sarah Semark. Designed especially for single-page sites, Pique’s front-page template comes with nine panels that can display the content from pages that you choose. You can set the pages for each panel through a theme option in the Customizer.
I derived an overall color scheme for the site based on Brix’s interior colors, and played around with background colors and opacity, both theme options within Pique, to try to create the same sense of calm, relaxation, and sophistication that you get when you walk inside the space.
The first two panels introduce the space and the background of the business. Because we wanted to tell Brix’s story on a single page, we had to keep each panel’s content short and to the point so that visitors who are scanning can quickly get the most essential information without needing to leave the page. We added links to interior pages for visitors who have more time on their hands and would like to read more.
The Pique theme makes it easy to add call to action buttons for people in a hurry. There are two such buttons in the first panel. “What’s New” jumps the visitor down to the panel containing the latest blog posts. Mikiah had expressed a desire for the site’s content to feel fresh, and blog posts are one way to introduce regular new content. The “Visit Us” button jumps the visitor down to the panel containing hours, address, and contact information. It’s easy to adjust where these buttons link to if Mikiah wanted to change them in the future.
Scrolling down past “Our Story” takes you to “Our Menu”. There were too many menu items to list on a single scrolling front page, so we ended up listing those on separate pages, with links leading in from the front page.
After the menu, we have “The Vine”, which displays the three latest blog posts, followed by “Happenings”, a place for Brix to advertise additional services beyond their normal offerings. There’s then a fun panel called “On Charcuterie” which is all about answering that never-ending question: how do you pronounce charcuterie? Finally, we have a panel to display a featured video, and a panel to display hours, location, and contact information.
A successful single-page site is a balance between displaying the most essential content
Mikiah and Fran were present during the Hackathon and offered suggestions and feedback on the design and layout. They were satisfied with the final result, and so was I!
I’ll wrap up this post with Mikiah’s “Free to Be” video:
Automattic recently partnered with Rebrand Cities to bring many more local businesses like Brix online. For more stories about Brix, Rebrand Cities and the Detroit Hackathon, be sure to check out the following:
- Rebrand Cities (Official site)
- Rebrand Cities: Art in Motion, by Ballio Chan
- WordPress.com Teams Up with Rebrand Cities to Bring Local Businesses Online, by Mark Armstrong
- Carl and Elena Schrónez: Spotlight on Detroit Small Businesses, by John Maeda
- Creative Campaign for Detroit Small Businesses, by Ballio Chan
- Brix Grand Opening – August 10, 2017, Eater Detroit
Automattic Design 