Menu
All portfolio
Givebutter
Modern and donor-friendly fundraising tools that anyone can start using in minutes.
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
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 Webflow
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 Webflow
- 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.
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.
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.
