Back to Home

UCLA My Giving Gateway


Visual Design, UI Design, User Research, Wireframe, Prototyping

UCLA My Giving Gateway is an online portal for donors to view their gifts to the university and print receipt for tax purposes. The goal is to reduce the amount of customer support phone calls that go to Donor Relation department for requesting donor’s gift statements. I started the project by collaborating with the Donor Relations Group to find out what kind of feedback/comments they have been getting from the donors when trouble shooting their gifts. After getting initial feedback, then I worked on the qualitative research to figure out what features the donors would like to have on the new system. Along with the Business Analyst, I conducted the interviews with a mixed of representative from the Donor Relations group and the donors themselves.


From the findings, here are some key takeaways:

  • Donors would like to be able to print gift reports from the application for tax purposes.
  • Some big donors would like to have someone else managed their gifts so guest access is needed.
  • Donors would like to see if and when their gifts have been distributed.
  • Admin would like to reduce and even eliminate the need of sending gift receipts at the end of the year by providing online gift receipts.
  • Admin would like to reduce the amount of phone calls to their office in regards to donors inquring the status of their gifts.

Along with the BA, I started with creating user flows for each key phases: Registration, Account Creation, Enter Dashboard, View Giving History, Edit Personal Info and Contact Us. Next is to run them by development team, and get sign off. Then I created wireframes based on the approved user flows.

Next step is to identify key phases and created hi-fidelity mockups with Sketh and uploaded to Invision to create clickable prototype. Then from there, I invited back the same participants from the research to do usability test in which they were asked to perform a set of tasks on the mockups to validate/invalidate my assumptions/hypothesis. I had to go a few round of iterations based on their feedback before going to the development. 

The last step is to hand-off all the mockups to the developers. I created style guide, graphic assets, H1-H6 sizes and placed all the design mockups and assets on Invision and left functional specs through developer notes. We went through a UAT at the end to make sure each feature passed the acceptance criteria. Once launched, we’re tasked to add Google analytics to monitor the performance to collect feedback so we can work on the next round of release.