Ariela Basson

VinePair

Site Design, UX/UI

VinePair is the largest digital media company delivering accessible, entertaining, and inspiring content about drinks and the experiences you have with a glass in hand. Using Figma, I redesigned and refreshed the VinePair site in 2022. The new site design is playful, modern, and sofisticated, reflecting the ever evolving and layered drinks-related topics discussed on throughout VinePair’s editorial coverage.

Homepage

The VinePair Homepage was an anchor to our our refresh. The old homepage was monotonous and didn't have clear distinctions between site modules such as reviews, recipes, Booze News (VinePair's daily news articles), podcasts, and more. Our main goal was to not only refresh the low contrast aesthetics, but also to provide UX clarity.

WHAT CHANGED

Distinct UI between homepage modules
Added modules for newsletter sign ups, featured hubs, and a Booze News ticker
Applied refreshed site branding system
Redesigned top module to include daily featured articles, Booze News, and columns

Article Pages

The main issue with the VinePair supporting article pages was that article headlines and bios were often below the fold when an ad was in place on desktop. We worried that this would be confusing and frustrating to readers. With that being said, we saw an opportunity to change the layout of the headlines and art on this page from a horizontal stacked grid, to a 2x2 side by side grid.

Additionally, we updated the lead article page layouts to give art and headlines a more of an impactful moment. Previously, lead article art sat in a 1x1 horizontal grid with lots of surrounding padding. This layout read more like a supporting article, and didn’t frame art and headlines in a way that made it clear that these were the most important stories of the day.

WHAT CHANGED

Modified page grid to include headlines, bylines, and art above the fold even when a sponsored ad was featured on the page
Included a newsletter sign up module within the actual body of the article so that it more easily grabs readers' attention
Updated lead article art layouts to have a full bleed grid, yet still allow headlines to sit above the fold
Applied refreshed site branding system

Recipe & Review Pages

Many readers use VinePair as a source for discovering new cocktail recipes, wines, beers, and spirits. In addition, VinePair also serves as a detailed database for hundreds of beer, wine, and spirits reviews. That being said, it was important to create an easily navigable experience for users to refer to for the pages that housed collections of recipes and reviews as well as the internal pages themselves.

WHAT CHANGED

Revamped filters to be clearer and more accessible; the old filters were easily lost on the page and not as easily identifiable to readers
Revised layout to provide more vertical space for collection cards
Designed new components for product cheatsheets on review pages so that the most important information was emphasized and easy to access
Created separate modules for ingredients and directions for cocktail stories so that users can find out how to make the cocktail upon first clicking into the article rather than having to scroll past background information
Applied refreshed site branding system

Advertise & Informational Pages

Vinepair's old Advertise Page lacked clarity and impact. This page is meant to not only provide potential sponsored partners with information about VinePair, but to also make a lasting impression. The main goal for the new version of this page was to provide information in a clear, yet also enticing manner.

Similar to VinePair's original Advertise page, the original Pitch page lacked lucidity and impact. There was a lack of organization, and long lines of visually monotonous text that did little to lure potential writers for the site. In re-designing this page, it was important to add moments of visual rest such as imagery and typographical organization. The Newsletter Sign-Up and Contact pages both faced the same issue on VinePair's original site: lack of visual appeal. Both pages were both rather boring, and did little to encourage readers to get in touch with the VinePair team. These pages needed to be warm and inviting in order to create a relationship between the VinePair and its readers.

WHAT CHANGED

Redesigned layout to optimize space and visual impact
Created a clear text hierarchy to communicate important information
Added clear data visualizations and number call outs to increase impact for sponsorship and brand partners
Tapped into VinePair's wealth of striking photography assets to add spice
Revamped the informational pages layout into a 2x2 grid
Simplified information on the email sign up page in order to minimize unnecessary text
Designed a clear newsletter sign-up component with subscription type options
Applied refreshed site branding system

arielabasson@gmail.com