When

January 2014 - August 2014 (Part-time consultant)

 

 

My Role

Lead Designer. I was brought in to redesign to completion an existing project that several designers had worked on before. Based on the specs handed down by Northeastern and the backend functionality that had already been built, I redesigned the UX, created the aesthetic, and shipped the final product working alongside one engineer.


Introduction

On May 23rd of 2013 Northeastern launched the Empower fundraising campaign. The campaign aims to raise $500 million in philanthropic support and $500 million through industry and government partnerships by 2017 to support the universities surging momentum.

Philanthropic support comes primarily in the form of large capital gifts or as checks sent from Alumni, current students, parents, etc. At the point of when the campaign launched Northeastern had been working on creating an online portal that would enable anyone to donate online directly to the causes they cared about. 

Give to what you love. The use case they wanted to enable was that as an alumni I could come in and choose to donate $50 to the Entrepreneur’s Club and $100 to the School of Art and Design all in the same flow.

After a year and a half of work and going through three other student designers I was brought in to redesign the product using what had been built from an engineering standpoint and all the content the university had created to support the site. This is the state of the design when I arrived, view the live version here:

Working with the lead engineer our challenges were:

  • Organize over a hundred funds, twenty causes and over two hundred stories.
  • Make the design modular enough to support new funds and causes that Northeastern would add in the future.
  • Automatically pull in articles and videos from Northeastern’s online newspaper and use them to support existing funds and causes while making sure they didn’t pull the focus away from the funds themselves.
  • Allow users to donate multiple amounts to multiple funds in one clear checkout flow.
  • Use all of the content Northeastern had created (testimonials, articles, videos) to effectively showcase the impact of each fund.
  • Bring in a social component showing which of your friends had supported which funds.
  • Northeastern wanted the whole product to be responsive.

The first thing we did was establish the following terminology, to simplify things for ourselves and the user:

Funds- Individual programs that can be directly donated to, i.e Mechanical Engineering International Co-op.

Causes- A collection of Funds, i.e The College of Engineering

Stories- Articles and videos created by Northeastern

 
Desktop.png
 

Funds

Funds are the basis for the website, they are what our users donate to and what we have to effectively organize throughout the website. We chose a card design because of two things, it’s modularity and it’s visual representation. 

Cards accommodate the use of imagery as well as descriptive text to make it easy to differentiate each fund from one another, while a short description will provide more information on the fund itself than just an image and the title. Cards are also easy to rearrange and adapt to multiple screen sizes.`

 
 

Northeastern strongly pushed for a social component that would allow users to see what their friends had donated to and share individual funds. We wanted to tread carefully and make sure we didn’t just sprinkle in share buttons on every fund card as academia software has a tendency to do, so we settled on the out of the card “your friends have donated to this fund,” convincing the university to keep the share buttons out of the Fund cards and solely on the Fund pages.

Our fund pages showcased all of the student testimonials that Northeastern had collected for each individual fund. The “part of” section gives the user the ability to look at similar funds that are tagged with the same cause.

Stories

Northeastern spent over a year creating content for their donation portal, they did a terrific job sourcing stories, photographs and videos that had been made possible thanks to each individual fund. The content was really phenomenal and we wanted to make sure they were showcased prominently. However, our challenge was to make sure that they played a supporting role to the funds and not take away the focus from them.

The most important thing in the story module design was to clearly distinguish what was a story and what was a fund, this is something the previous website didn’t do terrifically.

 
 

In addition to the original content they wanted to automatically pull in all new stories from their News@Northeastern digital Magazine have them tagged and displayed natively within the donation portal.

The design we came up with focused on highlighting Northeastern’s spectacular photography as well as presenting the articles with clean typography. Proxima Nova was used for the headlines and subtitles and minion pro was used for the longform content.

The bottom portion of the page showcases related funds as well as stories to keep the user navigating through the website.

Causes

With over a hundred funds we needed a clear way to allow the user to navigate through them. That’s what dictates the primary purpose of the cause page, to allow users to go through fund cards and add the ones they’re interested in to their cart. We organized funds into rows of three separated by different subcategories.

Northeastern wanted the ability to feature certain funds, which lead to the featured card at the top of the page alongside the Cause description.

Within each cause page we also included our stories widget to showcase stories from within that fund.

Navigation

Causes are the first layer of navigating through the school’s 100+ funds so we wanted to make them available to users no matter where they were within the site. To solve this we adopted a drop down menu with Icons to help differentiate the different causes. We used the Streamline icon set this way Northeastern would have many more icons to choose from should they want to add more causes in the future.

 
 

Conclusion

From concept to final design it took us three months to complete the project, the backend had already been developed but we had to rebuild the front end from scratch. Final assets were delivered to Northeastern in June of 2014 and were really well received. However due to a department reshuffling they have yet to push the site to production. We were encouraged by Northeastern to pursue this as a commercial endeavor and sell this software to other Universities, that's what lead to the start of Giveback, to learn more check out the Giveback case study here.

Final designs are below, click to enlarge:


Read this next: