Father’s Day Campaign

Father’s Day Campaign

fathers-day-comp

My role:

As visual and interactive designer, I sketched the concept for stakeholder’s approval, created the wireframes, created pixel perfect photoshop comps and designed the form. I managed a creative team abroad to create the custom donation form and connect it to United Way of the Bay Area’s PayFlow PayPal account.

Features:

  • A choice of cards to be available for the donor to choose from and they can either send immediately or send on Father’s Day.
  • Sharing functionality is present to share on Facebook and Twitter or simply email a link.
  • An honor wall with infinite scroll is included on the page to display the father’s names who have been sent e-cards.
  • Security badges are prominently displayed in the footer and a lock icon in the button are meant to increase the comfort level of the donor that their information is secure.
  • Set up a goal in Google Analytics to track conversions.

Results:

There was a 40% increase in participation from last year’s Father’s Day Campaign. Brand awareness increased through Facebook, Twitter and Instagram postings.

Donation Portal

Background: United Way of the Bay Area uses a secure compliant donation portal application for its workplace campaigns. Donors who use this portal are typically making a payroll deduction pledge for the year. This tool allows for designation of the donation to any nonprofit agency the donor chooses.

Business need: Many donors designate to other agencies rather than to United Way of the Bay Area. United Way would like to persuade donors to give to them instead of another nonprofit.

Goal: Use the portal as a touchpoint to more effectively communicate and highlight the work that United Way is doing in the Bay Area and provide a great brand experience. Increase percentage of donations to United Way rather than to other agencies.

Challenge: Influence the donor to direct their donation to United Way instead of designating to another nonprofit.

User research: What were the blockers and motivators? The users are participating in a workplace campaign at their desks and are fitting this task along with their mandatory tasks for the day (blocker to spending time researching). They are often in a hurry and want to finish as quickly as possible (motivated to finish quickly). Many of the users were uninformed about the United Way focus areas (blocker to give directly to United Way).

Solution:

  • Start the donation process on the home page with a clear call to action.
  • Streamline the workflow to 3 steps (down from 8).
  • Move the buttons from the bottom to the top of the form and keep them in the same coordinates so that the user does not have to look for the buttons each time.
  • Show an image of a United Way volunteer ‘on the ground’ making a difference in the community.
  • Include a thank you letter from the CEO, Anne Wilson, on the home page to extend gratitude to donor.
  • Use an infographic to simplify the explanation of the focus areas where donations are allocated at United Way.
  • Include personal quotes from clients about how they have been helped by United Way to add warmth and gratitude to the form pages.
  • Hide the main menu bar on the form pages to reduce distraction from the task of pledging and elevate more content above the fold.
  • Add emotive images above the form fields to visually describe the three focus areas within United Way.
  • Include an upsell at the point of submitting the form offering a time-sensitive which will be matched and is added to the donor’s yearly pledge.

My role: As a user experience and visual designer, I worked with a front end programmer in Canada who used remote desktop to access our instance of the software within our firewall to assist with styling the tool to match my photoshop mockups. Implementing the design was a challenge as the software is a blackbox, the html was unaccessible and could only be styled once the pages were rendered by the browser using jQuery and css. We were successful in achieving a new look for our portal

Results: Gifts directed to United Way increased 30% during the workplace campaign.

Backstory: The strategy document below was shared not only with the executive team and development officers but also with other United Ways nationwide who are working on donation portals using the same tool. This presentation was a useful tool for the project kickoff and communicating with the web programming team during the compressed 6 week timeline to launch.

http://www.shumdesign.com/portfolio/assets/epledge-home-pages-4.png

BackPack App

Background: Mobile app to connect donors more closely with the people, especially children, who are thriving due to United Way supporters. Currently in development.

Goal of project: BackPack App is designed to create a personal giving experience to help low-income schools.

Features: A supporter can volunteer, donate, read the latest school news and comment, follow the impact of their support on a customized dashboard to display the impact of their participation and follow projects. The app includes push notifications to let supporters know of new projects, updates and status of current projects.

A few sketches from preliminary work:

Below is a storyboard scenario sketch illustrating Sarah having coffee, reading the collar on the coffee cup with a link to the app. She would like to give back but is so busy with work these days. She downloads the app while she drinks her coffee, selects a school to support and feels good about her day.

storyboard-lighter

Dashboard on profile page provides real-time reports on the impact of donations.

profile

Rough wireframes: Mockups created with Balsamiq.

User research activity: Conducted user research with face-to-face participants, facilitated card-sorting activities, and created the final visual design with input from teachers, classmates, coworkers and friends.

Live prototype: Created with Flinto: https://www.flinto.com/p/88ceb471

Prototype:
flintolink

Presentation: Final class presentation of 10 minutes.

http://www.shumdesign.com/portfolio/assets/screens-for-backpack.png

211 Bay Area Wireframe

Redesign wireframe of the 211 Bay Area website to allow refined searches, saved searches and provide additional resources based on the customized search data. This is the beginning of the project so the site has not been completed.

Below is a working sketch with the 211 Bay Area Team to work through the possibility of features.

sketch211

211

sfclayworks website

sfclayworkssfclayworks had an old installation of WordPress and needed many updates. They asked me to update the site and train the staff on WordPress. Updated, retired older plugins and reconfigured the site. Created new graphic assets and worked on making the typography consistent on the site. Recommended security plugins and backup services. The staff is very pleased with their ability to manage the website themselves.