Problem

We aimed to provide a low-cost, easy solution for growing nonprofits to engage with their supporters all in one place. Their engagement needs include collecting donations, gathering volunteers, selling merchandise and sponsorships, peer-to-peer fundraising, and running events. While there was already a rudimentary Flipcause platform for nonprofits to collect donations, we had not yet introduced the other engagement tools.

Our goal was to create a front-end platform that integrated all of these engagement tools together. 

Role

As the sole Product Designer on the team, I worked with the CEO and CPO on its infrastructure and design.

My role involved adapting sketches we created together into high-fidelity, interactive prototypes, creating handoff materials, and working with developers to engineer, test, and release the product.

Users

• B2B: Small, growing nonprofits with limited resources

  • Seek a certain look, feel, and functionality within the Campaign Pages

  • Generally non-technical roles, such as Marketing Manager, Accountant, or Founder

• Nonprofit supporters

  • Donate, register, and otherwise engage with the nonprofit by utilizing the Campaign Pages

Research

We surveyed and interviewed our customers to understand their needs. We received feedback at all stages of development (prior, during, and post-release, with beta testing). When users sought out features we hadn’t yet built, we added these to our pipeline as we continued developing the product.

We learned that couple of factors were most important: 

1. Design customizability and white labeling
   Nonprofit users wanted the ability to customize their Campaign Websites to look and feel like a part of their actual website or, in some cases, replace their website altogether. They did not want Flipcause branding present on their pages.

2. Various data collection options for each tool
   Since each organization is different, each posed very distinct needs for the data they wanted to collect. One might want to create a Campaign Website exclusively to sell tickets for a Gala fundraiser, and another might want to include all six tools or only collect donations. Within each tool, the needs were also varied, and some sought more granular functionality.

Challenges

1. Extensive customizability allows for potential design issues

   • Customizable button colors could lead to unreadability

   • Awkward button widths with variable text inputs

   • Inconsistent styling with rich text editors

   • Transparent section backgrounds with dark-colored page backgrounds

   • Many scenarios to account for

2. How to organize tool functionality

   • Many different potential applications for use

3. Donations could be buried under content and other tools

   • The most critical tool for many organizations

Decisions

1. Keep customizations
   Since customizability is so essential to our users, we decided to allow for extensive customizations of page design while making suggestions on the backend for best practices (e.g., choose a dark color for your primary button). We also decided to provide neutral, easy-to-read Campaign Website default settings.

2. Tool structure
   We established a 4-level, tiered structure for campaigns and tools to accommodate user needs for each tool (Campaign > Tool > Item > Type). 

3. Express Donations
   We added an Express Donations feature, which is by default toggled on when a user creates a Campaign Page. This feature is prominently displayed (but can be shifted to another location) separately from the tools buttons and cards, so the call-to-action to donate can live unobscured and directly on the front page.

4. Brand guidelines: friendly, colorful, approachable

Role

I was the Project Manager for this upgrade and wrote and presented specs, set timelines, was responsible for deadlines, and collaborated with the team for research and feedback.

I worked within the Product Team (at this time consisting of a Tech Director, Product Manager, and Product Designer (me)), creating sketches, wireframes, and interactive prototypes, iterating with their feedback, and implementing the input of all affected stakeholders. I created new prototypes for 200+ possible pages and scenarios. I also worked with Engineering and the Quality Assurance team to build and test the product from its front-end design to its functional development on our test servers.

Research

I consulted the Customer Experience and Customer Success teams for requests and feedback from our customer base, the CEO for business and product vision, and the Engineering team to devise what is possible in implementation. Below were the main needs we identified:

1. A modernized design and better defaults

   Users sought an updated look for their Campaigns and better default design settings so they could be set up for success without too much effort. The overwhelming number of possible design customizations meant that some Campaigns looked great while others suffered.

2. A better mobile experience (62% of users browse on mobile)
   The original design has a few issues on mobile: the fonts are too small, leading to readability issues, the layout does not maximize mobile real estate, leading to excessive margins, and the buttons are not all optimized for comfortable touch sizes.

Challenges

1. Simplifying customizations could lead to friction
   We aimed to declutter the new Campaign Websites by removing unnecessary and outdated options and elements that some customers still used.

2. Engineering required an entire rebuild
   The original Campaign Website architecture did not allow for a simple reskinning of components. Instead, we had to rebuild the entire product on the front end and, from there, apply and test complex functionality.

3. Developing an entirely new design > development approach
   In this build, we began with creating a database of components with CSS names attributed to each to minimize duplicates and an unsustainable code structure.

Decisions

1. Provide better default settings and remove buggy, outdated elements

   • I updated the default template settings with color and new fonts, with researched font pairings and multiple font weights.

   • I updated the font library with popular, contemporary fonts and removed dated, problematic fonts.

   • I removed the redundant floating social media bar.

   • I moved the legacy panel with variable opacity to the back, so text will always be on a readable, white background.

2. Create talk tracks and options for customers concerned about changes

   • The team provided reasoning for changes that Customer Success could use to convey to concerned customers. We also scheduled the redesign to be a beta release, which customers could opt into, try out, and give us feedback.

3. Mobile design optimization

   • I increased font and button sizes and decreased margins for improved readability and usability on mobile.

   • I integrated responsive images and cards on mobile view.

4. Streamline components and update UI

   • Component consistency and product scalability were paramount, and I sorted elements into component types for improved UX and development.

   • I updated product writing and styling for clarity.

   • I redesigned the tools icons and implemented code-based icons across the platform.

5. Aim for fewer clicks

   • We combined the donation description with the amount selector so that all descriptions would be viewable without users having first to click the amount.

6. Focus on empathy and accessibility

   • I rolled out accessibility improvements, including alt text on images, tooltips on semantic icons, focus styling, and underlined links.

   • I improved signifiers for interactions (card/button animation on click) and removed the error highlight when users fix errors.

Research & Approach

The in-house design team collaborated on research for this project, which was focused on modernizing the UI, creating a more delightful experience, and improving the design-to-development process to make the project sustainable. We made the following decisions:

1. Switch to Figma and create component libraries
   The design team had a great opportunity to approach this project in a new way and redesign our product development system. We now had a Frontend Developer on the team to work on the project from the ground up, and we would soon have a Junior Designer to help with a quicker turnaround of the project. We decided to use this time to officially switch to Figma for this project (which we had already done for all new product development) and develop a design component library.

2. Revamp the product development process
   I collaborated with the Frontend Developer and Lead Product Manager on a new design-to-development process that would first involve establishing both design and frontend component libraries before development.

3. Less is more: add constraints, simplify layouts, and remove containers
   To declutter, we decided to remove as many containers as possible, including the variable opacity container. We added constraints to the header and footer, only giving light and dark options.

4. Modernize UI
   We researched contemporary design trends and updated the project’s components in a neumorphic style. 

Role

I led a design team consisting of a Frontend Developer, a Design QA Specialist, and a Junior Designer to plan and execute this project. I wrote specs, presented the project to stakeholders, and sought and implemented feedback. I also developed the component library on Figma and created the initial prototypes.

As the Design Lead, I was also in charge of product management through the frontend development stage and collaborated with my team to create efficient workflows and attainable, measurable goals.