A UX Redesign Simplifies Leader Onboarding, Increases Member Registrations, & Improves Donation Conversion

Grapevine is an online platform dedicated to community-based giving, where groups of people, known as giving circles, pool their money and collectively determine where to direct donations. Grapevine offers tools designed to assist leaders in managing their giving circles, encompassing tasks such as handling member donations, coordinating donation events, disbursing funds to nonprofits, and fostering communication among circle members.

Recognizing the need for an enhanced user experience, Grapevine embarked on a UX redesign initiative to revamp its leader onboarding process. Initially centered around a hands-on sales approach, they sought to introduce a self-setup option for circle leaders, complemented by new administrative management tools. The primary objectives of this UX overhaul were to empower leaders to establish their giving circles independently, provide them with the necessary knowledge to confidently invite members post-onboarding, and enhance the overall onboarding experience for members.

Grapevine Website

What We Did

  • UX Design
  • UI Design
  • Visual Design
  • Session Analysis
  • User Interviews
  • UX Surveys
View our Capabilities

Project Type

  • Consumer Tech
  • Donation Platform

Project Date

  • 2020 - current
Grapevine homepage
The grapevine homepage educates leaders on community based giving and the platforms features.

Getting Started

Using Progressive Onboarding to Simplify Giving Circle Setup for Leaders

In a discovery kickoff session with the Grapevine team, we learned leaders struggled to set group goals, finalize the group page, and invite members. These stumbling blocks in the experience led to leader hesitation to launch their groups.

We employed progressive onboarding to build leader confidence and reduce cognitive load at different stages in the circle setup flow. This technique allowed us to gradually introduce leaders to critical features and functionality of the product over time rather than all at once. We broke the initial onboarding experience into three steps, with each step requiring more information from the leader:

• Collect giving circle purpose & donation goals
• Invite collaborators & finalize homepage setup
• Make the first donation & invite members

Grapevine's 3 step onboarding to create a giving circle.
First steps in the giving circle setup are a few forms about the giving circle purpose and donation goals. Leader signup happens before the user can preview the giving circle homepage.

When the leader reaches the second step, the giving circle preview, a module at the top of the page, guides the leader on the final steps before launching the group. A prominent Launch Group CTA below the steps provides a clear “completion” step for the leader.

Launching the group is a celebratory moment in the experience. With confetti falling and encouraging messaging, we continue to direct the leader. The congratulatory modal tells the leader to be the first to donate. After the donation, the leader is asked to invite members, continuing the progressive onboarding.

Prelaunch giving circle homepage with directional UI at the top of the page.
Set the expectation that completion is easy, "You're almost finished!" with 3 guidance steps and bold Launch Group CTA.
Grapevine circle launch celebration.
The experience celebrates the accomplishment of launching the giving circle while continuing to provide guidance on next steps.

Building Momentum

A Seamless & Welcoming First-Time Member Experience

Next, we focused on a UX redesign of the giving circle member experience. We aligned with the Grapevine team on areas needing improvement, including creating a better connection between the first-time join and donate experience, simplifying the donation screen, and encouraging members to be active participants.

Grapevine giving circle homepage with an invite member UI overlay.
Invited members clickthrough from an email to the giving circle homepage with a personalized invite overlay UI.

Using a touchpoint map, we connected the leader invite experience with admin tools to the experience of becoming a first-time member. The invite email CTA opens the giving circle homepage with a profile photo of the leader and a custom message, making the first interaction more personal. The new member can then accept the invitation, which launches the new member profile builder.

Grapevine simplified make a donation UI.
A simple donation screen limits the number of forms a user has to complete and allows for editing of donation amount and frequency.

After creating their profile, a new simplified donation experience allows the member to set their recurring donation. With prefilled forms and an editable donation summary, the donation screen is simple and quick.

After completing their donation, a custom thank you message from the giving circle leaders and raining confetti welcomes the new member. At this point in the experience, we encourage the member to actively participate by inviting three friends to join the circle.

The donation confirmation thanks the member and encourages them to share as the next step in the onboarding flow.
A donation confirmation UI celebrates the member and encourages them to invite friends as the next step in the onboarding flow.

Managing Donations

Easy-to-use Account Management Tools for Member Retention

Following the UX redesign of the first-time member experience, we turned our attention to account management tools. The existing tools were limited and created friction for members who needed to manage their donations.

Knowing this friction existed, we designed a new account navigation that prioritized donation management. The member can easily view their recurring donation date, amount, payment method, and history. Management options include changing payment methods, donation amounts, and skipping the next donation. We also designed a cancel donation flow that captures member churn reasons, allowing us to receive real-time feed to improve the product experience.

Grapevine member account management tools focused on donation management.
The member account prioritizes donation management tools.

Ongoing Refinement

UX Research & Product Design Support for New Feature Design & Member Insights

We’ve continued working with the Grapevine team to evolve the product’s features, designing new landing pages and onboarding flows for geography-based groups. In addition to product design support, we’ve conducted session analysis to understand site behavior, run moderated usability tests, and completed in-depth member interviews to help shape the future product experience.

Everyday has been an incredible collaborator, seamlessly integrating with our internal team. Their UX research and product design expertise has been invaluable in guiding us to redesign and prioritize enhancements crucial to group leaders and members.

Emily Rasmussen