Food & Wine Club

Food & Wine Connoisseur Club is considered my “baby” here at Dotdash Meredith. It’s the first project where I truly have full creative control over. Food & Wine Connoisseur Club (soon to be just ‘Food & Wine Club’) is the brand’s private membership club with travel and specialty concierge services. It sounds slightly upper-crest, but it’s actually a bridge for a wide variety of clients to access special deals and unique experiences. Currently, the development of the site is underway.

My goal and direction for this project was to combine elegance and fun. I wanted to bring in the burgundy which is representative of wine, regality, and the brand’s identity from the original site. I also wanted to remind customers of the grand adventures they could take through booking with Concierge by utilizing beautiful landscape photography. However, there is a considerable amount of information to show for each individual offer, so organization is key. This design is important since it will be carried into 2 other magazine membership clubs as well, so the design needed to be versatile.

Food & Wine Club is a gateway to special offers through its partners. When a customer chooses an offer, they are taken to the partner site to book. The Concierge takes the member experience to the next level with personalized services.

The original site had many gripes, and hadn’t been updated in a long time. In general, it definitely doesn’t entice new members to join or even new partners to participate for several reasons:

❌ Menu items are squished, and some items do not need their own tab. Other secondary menu options are hidden 2 pages deep when they should be hilighted.

❌ The design is dated and dull and does not compel new users to sign up.

❌ Site is text-heavy without giving enough space for the text to sit.

❌ Redemption offers (such as VIP Gifts and 5% Rebate) have dated processes and still require snail mail to redeem.

Approach

The first thing that popped into my mind when starting out this journey was to organize the site. The original site had secondary menus to entire (mostly empty) pages for niche activities that just weren’t necessary. Understanding that there were many categories of offers, I decided to organize those first. This way, I could see what umbrella categories I could make to encompass these different offers. I also used cards to lay out the homepage content.

Site Mapping

The original site map was unbalanced. There were important secondary menu items, such as blog and redemptions, that were hidden under 2 pages. Other menu items, such as Recipes, Special/Travel/Event offers, could be tucked in a shelf global link.

Goals, Objectives, and Approach

Wireframes and First Iterations

I made several iterations of the home page to choose from. The idea from the Project Owner was to entice users with all the different options they could choose from, so the goal was to make the homepage almost like an offer landing page in itself. The iterations at their core remain the same: 3 categories with special offers, travel, and Food & Wine Events, CTA sections to remind users to either read the blog or Call Concierge about memberships, and a hero section that calls out a Featured offer.

The next wireframes are for offer pages and blogs. In order to keep budget in mind, the landing pages for offers would essentially be the same information architecture just repeated. Again, this was also to ensure that the design was useful for 2 more websites to come at the end of the year.

First Iterations

In case the Project Owners had trouble visualizing the site with just wireframes, I also created mockups of the wireframes. There are previous iterations of other pages of the site as well. At first, I played around with the idea of line art as a playful decoration, but found it too difficult to maintain throughout the site without looking contrived. I also had the background to be quite beige, but felt it dulled the content. There are also technical changes such as the adding of promo codes to the individual offer cards, and site-based redemption functionality.

Brand Identity

When designing Club, I was restricted to only Google fonts, so I was determined to find a beautiful San Serif that was elegant, had beautiful strokes, and could really illustrate what F&W Club was all about. Introducing ‘Fraunces” and ‘Catamaran.’ Fraunces fit the bill for truly unique, bespoke-looking Serif, and Catamaran grounded Fraunces as a modern San Serif.

As mentioned before, burgundy is the main color of the Connoisseur Club, so I added darker and lighter versions for more versatility throughout the site. Beige is a secondary color with its primary use in backgrounds. Whites, grays, and dark neutrals make up the majority of font colors.

For the general tone of the site, I envisioned a combination of modernity, trustworthiness, and comfortable living. I started out with many different color options, which were inspired by the Meredith Corporation brand; however, I have since refined the colors, and stuck with just a focus color: burgundy. I scoured many sites for inspo including a former Meredith publication: Travel & Leisure, which also has its own connoisseur club. Other sites, such as Prior, served as a great model for card elements. I drew from more sites that weren’t in the travel sphere but in industries such as beauty for the simple, but elegant aspect. Last, I explored different combinations of fonts, and ultimately chose the Serif+San Serif combination to complement the Food & Wine logo.

Check out my initial moodboard here in Invision

Final Version

For the final version of the Club, I think I’ve created a beautiful, elegant website full of personality and inspiration. The design has balance and a quirkiness with the CTAs, whose variations include circular text (which, to me, gives a ‘worldly or ‘expansive’ feel), photogenic hover blocks, and uneven image pairings. Playing around with the CTAs take them from ordinary to extraordinary - just like the trips that could be taken with Concierge Services. All photos are royalty free, courtesy of Unsplash.

Takeaways

I’m really proud to have been a part of this Food & Wine project (and other projects, of course). It has been a learning experience as far as managing my own project, keeping myself accountable, learning new techniques, and improving my communication skills with Project Owners. In hindsight, I would’ve loved to do personas for this project, and I think it would’ve really helped. Nailing down who exactly the users were was confusing for me to understand at first, and that’s where building a persona with the Owners could’ve improved the process and reduced the number of iterations I did. Overall, I love this project and am very proud!