Introduction
Causecast's nonprofit portal is an incredibly full-featured product; it allows nonprofits to manage volunteer events and participants, manage their donations, create widgets, and much more. I was tasked with establishing the visual design for the dashboard, based on the art direction of the public-facing nonprofit site established by another designer. I also was tasked with creating the UX and visual design for the volunteer event management feature of the site.
Problem
The nonprofit portal at the time was severely lacking; for such a supposed streamlined experience, nonprofits essentially had to go through the customer success team in order to get any information updated. There was no centralized calendar for all volunteers to glean the availability of a volunteer event. The customer success team would also be the ones emailing the nonprofit the list of volunteers. Overall, the workflow was nonexistent and a portal needed to be built to offload the man hours spent coordinating the events.
Whiteboard sessions were vital in figuring out the requirements. The designers and product manager worked together to figure out the optimal flow for the portal.
Process
Initial requirements. The Director of Product owned the vision of this feature, so when the impetus to build a nonprofit dashboard came about, she was tasked with creating the high level requirements.
Brainstorm. We had a working whiteboard session with her, the design team, and an engineer to keep us grounded. We were cooped up inside the meeting room for an hour to hash out the details and the high level workflow.
Wireframes. After we'd figured out the requirements and user flow, we set to work on the tangible deliverables. First, I created wireframes and we spent some time scrutinizing and improving it.
Visual design. After the wireframes were complete, we set to work on the visual design, the art direction of which was based on someone else's design direction for the marketing website.
Manage Opportunities wireframe. This is where nonprofit admins could see all the opportunities they've had scheduled for any given month. They can also manage opportunities and create new ones from this page.
The wireframe for a step-by-step process for creating an opportunity.
The visual design of the Manage Opportunities page, which got renamed to Volunteer Opportunities for better clarity.
The visual design for creating an opportunity.