When

January 2015 - June 2015

 

 

 

My Role

Lead Product & Design. I created all of our branding and identity work. I'm the sole designer on both the admin side and consumer side of our product, as well as any marketing or administrative materials the business needs. In addition to this I'm running our product process and customer development work.


Introduction

While redesigning and rebuilding Northeastern's alumni donating experience, Chris (the lead engineer) and I realized that this was a piece of software that was desperately needed by other Universities. Alumni donation portals are extremely antiquated, they are usually poorly designed forms, that don't adequately surface all of the different areas to which the alumni can donate to. Most Universities have funds set up for all the different initiatives they support. For example, you can donate to the Entrepreneur's Club, the Men's Varsity Rowing Team, etc. All of these funds are usually buried in one massive dropdown menu that has hundreds of different options and makes it hard to discover the things you (as an alumnus) would want to donate to. In addition, it's also important to recognize that the percentage of active alumni that donate money to the university, regardless of the amount of the donation, directly affects the university's all important U.S News rankings.

In September 2014, with encouragement from Northeastern faculty Chris and I set off to build a platform that would allow any university to accept alumni donations to any of their causes. We're currently finalizing the first sellable version of our product and looking to expand our team. This is a part-time, remote, endeavor for all of us.

While we tackled a lot of similar problems in the Northeastern project, we had to completely rebuild the product with the new constraint that it needed to be a platform that can be used and customized by any university that buys it. We also now had the freedom of controlling the end to end experience from discovering all the different funds, all the way to checkout.

While I can't share more details about the business just yet, I can take you through some of our finalized designs and can speak more to them in person.

All logos and University content used in the mockups is entirely for demonstration purposes.

Navigation

Categories 3.png

Since each university has multiple funds (sometimes several hundreds) when we onboard each university we pull in all of their funds, the fund description and then assign them an image from the universities' image library. Finding the best way to present and allow the user to navigate the funds is one of the main problems we need to solve for.

We decided on a two level navigation system, so the way to get to a fund would look like this: Academics > College of Arts and Design > The Animation Club. The top-most category is presented in the screen to the left above, once a category is selected the page reloads and the funds shown can be further refined by selecting a sub-category.

Social multiple.png
Back.png
Carted.png

Universities have highly requested for users to be able to share individual funds to Facebook and Twitter as well as surfacing which of their friends have donated to which funds.

Checkout

One of the challenges we faced was to indicate to users that they could donate multiple amounts to different funds. The expected behavior for a donation/charity website is to donate to one cause any amount that you can spare/are willing to give. We had to break away from the norm to allow users to donate to multiple funds, which is why brought in the "Add to cart" mentality. However when you normally add something to a cart it has a fixed price, we need users to tell us how much they'd like to give to each fund as they add them to their cart. So after they choose on a fund to donate the card flips over and asks them how much they'd like to give. Once they've confirmed the amount the fund is then added to their cart, which is a dropdown that allows them to edit individual amounts, this is also something that isn't often seen online.

Here is the full checkout flow:

   

 

 

Categories 4.png
10.png
When a user chooses a category the page automatically reloads to show the relevant funds.

When a user chooses a category the page automatically reloads to show the relevant funds.

8.png
11.png

We paid extra special attention to the end of checkout page (pictured below), we could've shown the run of the "Thanks for donating" receipt, but we wanted to make it feel like the university was truly thanking you for giving back. It should feel as if you've received a letter from the universities' president thanking you for your donation, while also reiterating that we've received your donations and stating the things you gave to. This page will also be emailed as receipt to the user, and we can later add things like email capture and social features to encourage them to come/stay a part of the alumni mailing list.

Landing Page

As we enter discussions with Universities we need a landing page to cement our online presence and capture interest. This will eventually be replaced with a full marketing website once we have the bandwidth. Some images are still placeholder.

Identity Guide

We created an identity guide that would guide the way the platform looked and felt.

Final.png

Work in Progress

Giveback is still a work in progress but a fun side project for us to be working on. Chris and I have no plans to go full-time with Giveback anytime in the near future, and we don't think the business will need a full-time investment from us. I have a lot more to learn in the next couple years and I plan on doing that in an office environment.

There were several more features of the platform that I haven't showcased here including widgets to be embedded on Universities websites, marketing pages for the Universities, article and story support, etc, I'd be glad to go more in depth on these in person.


Read this next: