Introduction
The Causecast Community Impact Platform is a streamlined B2B SaaS web application that enables companies to engage their employees in volunteering and giving. From a design and technology perspective, this was a very large product-driven project that was rather complex in functionality; it included a dashboard system for an employee, as well as a dashboard system for an administrator.
Problem
On top of being built on old and unreliable technology, the platform became large and unfocused. Since a technical refactoring was inevitable, a redesign effort was needed to make the platform live up to the expectations we'd set for it. We wanted to improve upon the things that seemed to be working well in the previous iteration, but also incorporate the feedback customers gave us as a guiding point for how the second version of this product should function. The main goal, after all, was to get employees to volunteer and donate in a fast and easy way.
Process & Responsibilities
With improved user experience in mind, we set to work on figuring out what the information architecture should be. As employee turnover occurred, I soon found myself to be the subject matter expert of our platform. I created and designed about 80% of this project: I developed the user experience for it, as well as determined what the product specifications would be and how the art direction/visual design of the platform would work.
The examples shown comprise of a small sample of the work accomplished.
Platform Sitemap
Because of the complexity of the product, I created a sitemap that we constantly updated throughout the product cycle to better organize the information. It also served as a compass for the engineers.
Wireframes
Before getting into the visual designs, we needed to work out the complexities of the platform with a proper UX assessment via wireframes. Shown are wireframes for managing nonprofits, for managing donations, and for managing members of the platform. These wireframes were created in Fireworks. You can view each wireframe in detail by clicking on the thumbnail below.
Example Workflow: Payroll Deductions
I was often met with interesting and challenging user stories. In this case, the user story was, "As an employee, I would like to make a donation from my paycheck and use my employer's donation matching program, so that I can make a difference without pulling out my credit card." The math for this one was fun, and each company had a different approach for how they wanted their employees to use their donation matching program.
This is an example of one of the workflows I created.
Volunteering Campaign
This is the design for a company-hosted volunteering campaign. It contains information about the nonprofits/cause being supported, the volunteer opportunities that are available for this campaign, a list of participants, and a comment section.
Fundraising Campaign
This is the individual fundraiser page an employee can create. Employees can add images, text, and videos. They can also set their own fundraising goal, set who they support, and be part of a fundraising team. This page in particular is part of a fundraising campaign that has a bonus donation match, which makes the donations extra lucrative.
Administrator Page: Campaign Management
Administrators can view current campaigns, adopt a campaign from a library of templates we have made available for them, as well as view past campaigns.
Administrator Page: Platform Metrics Overview
Administrators can also view how their platform is performing with various statistics we have made available for them. There's an option to just download all available data as one CSV for more specialized needs.
Customized Login Portals for Brands
The screens below show the customization options we've made available for each company, really helping the platform feel like it's branded appropriately for their needs.
