Work
Ariela Basson 

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