A Responsive Design System for a Frozen Dreamland

Our Responsibilities:

  • User Experience
  • Design System
  • Experience Design
  • Information Architecture
  • User Interface Design
  • Responsive Design
  • Research
  • Content Strategy

Yes, working with Ben & Jerry’s is just as fun as you would imagine. It’s not just a company that produces amazing frozen treats; it's a company with a social responsibility mandate that makes its products secondary only to its global mission.

When you’re a brand with this much reach, redesigning a global website doesn’t happen overnight. Thankfully, Happy Cog’s engagement with the Ben & Jerry’s team evolved via a purposefully phased approach: First an extensive user experience phase produced HTML wireframes detailing content needs, hierarchy, and functionality; then, a tightly integrated design and development phase.

Project immersion is crucial to the discovery aspect of projects. Happy Cog customized a daylong workshop to learn directly from project stakeholders and discuss design challenges face-to-face.

The demand for Ben & Jerry’s ice cream is global. The new benjerry.com not only needed to meet the needs of fanatical U.S. consumers, but it also had to adapt to new markets where Ben & Jerry’s isn’t yet a household name. To account for such varied audiences, Happy Cog recognized early on that we had to take a very modular approach to design, development, and content creation. By focusing on custom product, social, and campaign messaging that aligned with each market’s needs, Happy Cog delivered a variety of modules that could be tweaked and reused depending on market need.

Ben & Jerry's brand loyalty is huge. Everyone loves them. We had to provide a tight, thorough, and extensible design system that still expressed the fun and whimsy they’re known for.”
Sophie Shepherd, Designer

Creating a content-driven experience for Ben & Jerry’s meant the website would cater to both users arriving looking to learn more about their favorite flavors and those trying to find the closest 7-Eleven to grab a pint. Users would be able to easily find the information they came for, but popular tasks would remain highly accessible at all levels.

The site also had to encourage visitors to connect the dots between ice cream and Ben & Jerry’s core values, the global initiatives it champions, and why it runs its business the way it does. We intertwined these findings at meaningful points throughout the experience. Beyond crafting a valuable user experience, Happy Cog assisted in actual content creation for the site. We partnered with our friends at Crush + Lovely to produce video content, and we wrote plenty of copy so that the videos’ personality would match the look and feel of the design we had crafted.

We worked closely with the team at Ben & Jerry’s to make iterative design and front-end updates as templates were being built. This process allowed us to see how changes would work across layouts, screen sizes, and browsers—especially with complex pieces like the navigation. We created detailed writeups of our work in a style guide and content guidebook. The style guide explains the whole design system visually, supplying a directory of modules and their usage rules, as well as front-end code snippets and tutorials for each. The content guidebook takes this a step further and explains how content creation works for these modules and across the site. These guidelines will help Ben & Jerry’s team stick to the established system, while still keeping all the whimsy for which the brand is known.

We’re excited to continue working with Ben & Jerry’s to support its implementation and on exciting, new projects. Stay tuned for additional updates about our “long, strange dip” with one of the coolest clients around.

We’ve already built great things for:

  • A List Apart
  • ADP
  • AMC Theatres
  • American College of Physicians
  • Ameriprise Financial
  • Ben & Jerry's
  • Black Hills Corporation
  • Black Hills Energy
  • Black Pixel
  • Blogger
  • Books-A-Million
  • Bubakiki
  • Build-A-Bear Workshops
  • Campus Explorer
  • Canon Business Process Services
  • Carlisle Wide Plank Floors
  • Channel 4 (UK)
  • Cirrus Logic
  • Coldwell Banker
  • Comhaltas
  • Daily Kos
  • Delaware Valley College
  • Einstein Healthcare Network
  • El Nuevo Día
  • Fetch Softworks
  • Fog Creek Software
  • Fonts.com
  • Garces Group
  • Georgetown Law School
  • Georgetown University
  • Geosign
  • Grist
  • Groupon
  • Harvard Business School
  • Harvard Extension School
  • Harvard University
  • Hersha Hospitality
  • Hershey Entertainment and Resorts
  • Housing Works
  • Kaplan Test Prep
  • Kongregate
  • Krylon
  • Lagunitas Brewing
  • Landmark University
  • Liberty Mutual
  • Longwood Gardens
  • Memorial Sloan Kettering Cancer Center
  • MICA
  • Moss Rehab
  • Motivate
  • Mozilla
  • MTV OMA 2
  • MTV OMA 3
  • National Constitution Center
  • New York Institute of Technology
  • Nintendo of America
  • NRT, LLC
  • Papa John's
  • Philly.com
  • Rush
  • SmartyPig
  • Soccer.com (Sports Endeavors)
  • TEDxPhiladelphia
  • The Annie E. Casey Foundation
  • The Bill & Melinda Gates Foundation
  • The Center for Teaching Quality
  • The Institute for New Economic Thinking
  • The McGraw Hill Companies
  • The Posse Foundation
  • The University of San Francisco
  • Thomson Reuters
  • Tideway Systems
  • United States Holocaust Memorial Museum
  • Visitphilly.com (GPTMC)
  • Weil, Gotshal & Manges
  • Yale School of Management
  • Zappos

Capabilities

We don’t specialize in a specific technology or type of business; we specialize in all of them. Have an idea for a project?

Start Your Project with Happy Cog →

We love to provide:

  • Research
  • User experience design
  • Online business strategy
  • Information architecture
  • Content strategy
  • Graphic design
  • Template (code) development
  • Responsive design & development
  • Mobile development & testing
  • Application development
  • Content management system (CMS) development
  • Hosting

We routinely build great things for:

  • Banking & financial institutions
  • Broadcast & media
  • Universities & educators
  • E-commerce sites
  • Energy & utility companies
  • Film & entertainment
  • Fortune 500 companies
  • Gaming studios
  • Local and federal governments
  • Non-profit organizations
  • Professional service providers
  • Software companies
  • Tourism & travel