Portfolio

Ben & Jerry’s

See how Bento Sites transformed Ben & Jerry's website into a strategic design that focuses on their dedication to the planet, farmers, cows and everyone in between. (unsolicited).

Redesigned header of Ben & Jerry's website.

After graduating from college in 2003, I packed my car and drove to Burlington, Vermont with the plan of getting a job at Ben & Jerry's. I loved their ice cream and admired their product, economic and social missions.

That plan never happened, though. A few months later, I accepted an overseas teaching position and didn't return to the United States for 12 years.

Now, many years later, I've been craving some Ben & Jerry’s. When I visited their website to see the flavors, I was surprised to find the business and conversion goals to be unclear, the brand’s playful persona to be missing and no mention of how they’re a socially responsible company. I wanted to design a better website that reflected the company I admired.

In this post, I'm going to redesign Ben & Jerry's website (unsolicited).

Project Brief

Business Goal

Recapture the spirit of the Ben & Jerry's brand that produces the finest, all-natural ice cream and euphoric concoctions by focusing on their dedication to the planet, farmers, cows and everyone in between.

Conversion Goal

Increase online orders, catering and deliveries, plus drive more foot traffic to scoop shops and Ben & Jerry's ice cream at grocery stores.

Section 1

Before (Designed by Ben & Jerry's)

Section 1 of Ben & Jerry's website.

After (Designed by Bento Sites)

Section 1 of Ben & Jerry's website redesign concept.

The homepage's header is the most valuable location on an entire website, so I didn't understand why Ben & Jerry's use this space to promote blog posts (5 Reasons Voting in Your State Primary Matters)? They should be informing website visitors why they should buy Ben & Jerry's ice cream, promote new flavors and call users to take action.

Design Decisions

Logo

  • Left-aligned the logo with the page content.

Image

  • Removed everything.
  • Added a background image from a USA Today article, then duplicated the image, reversed and connected the two images to create space for the headline, sub-headline and CTA buttons. Since most images on Ben & Jerry's website are pixelated on retina screens, I had to use their Instagram account and scour the web for high-quality images throughout this website redesign concept.
  • Made the image span the content's width.

Navigation Bar

  • Right-aligned the navigation bar.
  • Simplified and reorganized links, including the overuse of drop-down menus. I also changed the name of the "Online Gift Shop" to "Store" because it sounds modern.
  • Created a drop-down indicator for "Ice Cream", so users understand they can easily select ice cream products.
  • Moved many unnecessary navigation links to the footer.
  • Moved the language drop-down menu with the American flag to the footer.
  • Moved the search icon to section 2.
  • Created a CTA button to "Find Your Ice Cream." I also added the location icon to the button.
  • Added a blue background that matches the hero image.

Calls to Action (CTAs)

  • Added a primary CTA (Find Your Ice Cream) button in the navigation bar and the hero section.
  • Added a secondary CTA (Shop Online).
  • Made the CTA buttons different colors, so users can easily distinguish between them.

Typefaces

  • Replaced the navigation bar, buttons as well as the H1, H2 and H5 typefaces throughout this redesign concept with Urbane Rounded. Currently, Ben & Jerry's uses the same typeface as the logo (ChunkFive, I think) in many areas throughout their website. The logo's font should always be unique to the logo and never reused for another purpose. Therefore, I wanted to find a different typeface that captures the essence of the fun Ben & Jerry's brand. I think the curvy Urbane Rounded typeface achieves this very well.
  • Replaced Severance the Sequel typeface that Ben & Jerry's uses for the H2 font with Proxima Nova since they use this typeface for their body text. I also used Proxima Nova for the H3, H4 and H6 headings.

Colors

Added, edited and consolidated the color palette to the following HEX colors:

Primary Colors

  • #6BA23E (green)
  • #FFA900 (orange)
  • #69AAD2 (blue)
  • #FFFFFF (white)

Secondary Colors

  • #E8C98C (brown)
  • #666666 (steel)
  • #BEBEBD (grey)

Copy

  • Wrote the headline and sub-headline. The headline can be found on some of their brand collateral and the sub-headline is used in section 4 of Ben & Jerry's current website.

Section 2

Before (Designed by Ben & Jerry's)

Section 2 of Ben & Jerry's website.

After (Designed by Bento Sites)

Section 2 of Ben & Jerry's website redesign concept.

While the before version of section 4 illustrates how Ben & Jerry's makes the best possible ice cream supported my business goal, I thought it needed to be near the top of the page and better presented. I also wanted to include the ice cream products that are in the before version of section 3, but they needed to be high-quality photos and display all of the products on the page – rather than be hidden in an unintuitive image slider. First, though, I had to remove more unnecessary blog posts.

Design Decisions

  • Removed the blog posts.
  • Added high-quality logos and icons of how Ben & Jerry's makes the best possible ice cream, then made them a uniform color.
  • Added high-quality ice cream images that lists the ten categories of Ben & Jerry's products.
  • Used a green color with an arrow to indicate that each category can be clicked to view its full list of flavors.
  • Wrote the copy.
  • Added a CTA button for users to quickly find a flavor (e.g. Cherry Garcia).

Deleted Section

(Designed by Ben & Jerry's)

Deleted section of Ben & Jerry's website.

I removed this section and redesigned the newsletter form in section 6 (the footer), so it appears on every web page.

Section 3

Before (Designed by Ben & Jerry's)

Section 3 of Ben & Jerry's website.

After (Designed by Bento Sites)

Section 3 of Ben & Jerry's website redesign concept.

To reach my conversion goal, I wanted to include a section that promotes scoop shops, catering, grocery stores, the online store and delivery. With these options, users can easily understand the different ways they can get Ben & Jerry's ice cream and choose the one that's most convenient for them.

Design Decisions

  • Removed everything.
  • Added a background image from a Tasting Table article.
  • Made the image span the content's width.
  • Added a dark, low opacity overlay to make the text legible.
  • Added the primary CTA button (Find Your Ice Cream).
  • Added images from Ben & Jerry's Instagram account.
  • Added logos from Uber Eats and Postmates.
  • Added a brown border around each method of getting ice cream. I made it the same color as an ice cream cone to keep it fun and on-brand.
  • Added CTA buttons (e.g. Find a Shop).
  • Added images of a cow and grass to emphasize Ben & Jerry's dedication to the planet, farmers and cows.
  • Wrote the copy.

Section 4

Before (Designed by Ben & Jerry's)

Section 4 of Ben & Jerry's website.

After (Designed by Bento Sites)

Section 4 of Ben & Jerry's website redesign concept.

As users scroll down the page on Ben & Jerry's current website, the background transitions from the sky to the land. While I mostly liked this, I didn't think the metaphor worked for the entire homepage.

Instead, I envisioned two sections that transition from the atmosphere to land. I also wanted part one of this section to convey Ben & Jerry's dedication to the planet, farmers, cows and everyone in between with several image links that illustrate how they make the world better with ice cream.

Design Decisions

  • Removed everything.
  • Added a background gradient.
  • Added dozens of dots to create the stars.
  • Combined several circles to recreate the clouds from Ben & Jerry's website for retina screens.
  • Added six images to link to different pages that convey Ben & Jerry's dedication to the planet, farmers, cows and everyone in between.
  • Wrote the copy.

Section 5

Before (Designed by Ben & Jerry's)

Section 5 of Ben & Jerry's website.

After (Designed by Bento Sites)

Section 5 of Ben & Jerry's website redesign concept.

In part two of the atmosphere-to-land section, I wanted to end with cows that are typical of Ben & Jerry's branding.

I also wanted to provide lots of white space to encourage users to sign up to Ben & Jerry's Chunk Mail Newsletter. Since the newsletter that's in the footer of their current website (presumably used for blog post updates) is different than their Chunk Mail newsletter for local scoop shop promotions, I decided to combine them into one sign-up form by asking users for their ZIP Codes. This way, Ben & Jerry's could create a single newsletter and segment their audience by ZIP Codes to send coupons and promotions.

Design Decisions

  • Removed everything.
  • Added a background gradient for the sky.
  • Combined several circles to recreate the clouds from Ben & Jerry's website for retina screens.
  • Added several oval shapes for the mountains and used gradients to create depth.
  • Added images of cows and grass.
  • Added a newsletter sign-up form.
  • Wrote the copy.
  • Divided the footer links into five SEO-friendly groups — "Find Ben & Jerry's," "Ice Cream Fun," "Ben & Jerry's Ice Cream," "Ben & Jerry's Values" and "About Ben & Jerry's."
  • Organized the links under new headings.
  • Added a drop-down menu for connecting with Ben & Jerry's (e.g. complaints, suggestions, etc.)
  • Made the social links white.
  • Added links to legal pages and underlined them because internet law requires they must be obvious to users.

Wrap Up

You just viewed my website redesign for Ben & Jerry's. If you need help with your website, contact me learn about a website audit or start a web design project.

Ben & Jerry’s first appeared on the Bento Sites Blog by Jeff Shibasaki.

Close-up of Jeff Shibasaki wearing a black hat.

Jeff Shibasaki

I’m an Atlanta web designer that specializes in website design and development on Webflow and Squarespace.

Get exclusive design and marketing tips.