Before
On desktop: The existing design has no border around the article image to visually tie it to the article, which in some cases can make it difficult to identify whether they're related.  For images that extend fully to the edges like the bottom image in this example, that's less of a problem, but for white-background product images, it's less straightforward.
On mobile: Again, a subtle border around white-background images would visually tie the block together and make it easier to see which image goes with which article.
The READ MORE... treatment also doesn't match West Marine's current rectangular CTA style.  While it is a different color to make it stand out, it looks and feels like a legacy design that hasn't been updated yet.
  
AFTER
On desktop: The articles are fully contained in a Bootstrap card, which allows for significantly more flexibility with styling and layout.  Even an image with a white background is visually attached to the article since it's within the same container.  The vertical orientation to the cards also allows for longer article snippets without taking up as much space in the page.  The article heights will all match, keeping the design gridded and clean.
On mobile: The new mobile experience doesn't significantly change how much vertical space the articles take up, but it does make them easier to see as content cards rather than floating components that may or may not belong together.  It's also visually consistent with the desktop experience.
In both user experiences, the Read More link is now a button that is consistent with the current CTA styles.  It now relies on the website's default stylesheet, and will update according to any global style updates rather than being hard-coded.
Back to Top