G

P

Givebutter team is all about giving better everything. That's why they came to us.

Givebutter helps people to raise funds for a good cause. The goal for the redesign was to mirror a major platform update. Givebutter needed to deliver this change to existing and new customers.

Previously, the product had three major parts: Events, Collect, and Fundraise. The team decided to restructure the product to make it more simple, clear, and easy to grow.

Givebutter's new platform was also split into three parts, but with different names. We decided to keep the primary color pallet with some updates to simplify the shapes. Simple shapes became a powerful recurring theme in the new brand.

Every part of the application has features that helps users Raise, Track, and Engage. We designed icons for every feature of the platform.

Awesome icons we designed

Raise, Track, and Engage landing pages were designed to be unique. Each page has an on-scroll demo, unique headers, and custom feature previews.

Mr. Butter.

Givebutter mascot, Mr. Butter, went through a rebrand as well. Mr. Butter was given a 3D upgrade to match the new brand refresh.

We designed butter-people for everyone. To design every team character, we created a survey with questions about hobbies and personalities. We even included real visual characteristics of each employee.

Before

The first version of the Givebutter site was built in Webflow by Max, Co-founder and CEO of the company himself. It worked well, but as the company has grown fast, it was clear that they needed professional help to take it to the next level.

After

  • Highly interactive and engaging Webflow site.
  • Scalable and marketing-managed Resource Center.
  • Design system with predefined components.
  • Powerful CMS set-up that helps manage features, blog, and landing pages.
  • Unique recognizable design.

Displaying Givebutter features

Features are organized into three core categories —
Raise, Track, Engage.

  • Integrates into mega menu.
  • Automatically generated side navigation.
  • CMS items combined in groups automatically.
  • Unique CMS structure to stay within Webflow native limits.

Raise

Track

Engage

Advanced implementation

Finsweet products like Attributes, Nobull, and 3D Globe helped us build this project efficiently.

This interactive 3D ButterWorld was made with Finsweet's 3D Globe tool. Managed with Webflow CMS.

Butter design, butter interactions.

Next level interactions have been used on this project. We used Webflow Interactions and Greensock GSAP when we hit motion limitations in Webflow.

About page

This page is special. Based on the video script that the Failureisland team made for Givebutter, we created an interactive story that a user can control using scroll.

We built a strong relationship with the Givebutter team. They trusted us and we worked hard to meet all the expectations. Overdelivering is in our culture, because we care about what we do.

If Finsweet was a butter person.

Migration

We migrated hundreds of blog posts, success stories, and features with Nobull Airtable App.

The Givebutter marketing team used Airtable for managing the content and features. We migrated all the pages from their old site and generated new pages with Webflow CMS. Nobull Airtable app helped us automate a lot of this migration.

As a former Webflow developer/designer who built our previous marketing site myself and vetted 15+ agencies for our project, I can say with total confidence that there is no one better than Finsweet. They are not only experts at what they do, but are completely obsessed with customer satisfaction—almost to a fault! I love how much Finsweet contributes to the open source community and it’s great knowing that we have a partner who is constantly innovating on our behalf. Their team moves very fast and when they say that there is nothing they can’t do with Webflow, they mean it. I frequently recommend Finsweet to anyone looking for a world-class website built in Webflow.

Max Friedman
CEO and Co-Founder

Webflow website development