Sponsorship Portal Rebuild

Timeline:

February 2023 - Present

UX/UI Design

QA Testing

Responsibilities:

Stakeholders:

Jefferson Senior Vice President

Sponsorship Council within the Office of the CEO

Overview

In an effort to fund charitable organizations and efforts that benefit the larger Philadelphia community, Jefferson has a Sponsorship Portal in which applicants can apply for funding for various events and programs. However, the current Sponsorship Portal needed to be rebuilt on a more reliable, updated system and also required enhancements that reflect the needs of the expanded Enterprise Sponsorship Committee.

As the Lead UX/UI Designer on this project, I collaborated with developers and product managers to drive the redesign effort of the current Sponsorship Portal. I also took on the role of leading QA Testing throughout the process.

Overall Impact:

Strategize allocation of Jefferson’s sponsorship funds with an automated portal that saves $2.5M per fiscal year

Evaluating the Current Portal

There were three user types that interacted with the Sponsorship Portal: Requestors, Committee Members, and Admins.

Requestors would submit applications to Jefferson for Sponsorship, Committee Members were Jefferson employees who would vote on these applications, and Admins were Jefferson employees who were focused on documentation and tracking for these applications.

The current Sponsorship Portal was very outdated - not only in terms of aesthetics, but also its functionality. Because the site would crash frequently from being on an antiquated system, it put a lot of pressure on our current stakeholder (the Program Director of Diversity, Equity, and Inclusion) to communicate with applicants directly.

An example page from the Requestor Application

The Requestor Homepage

The Admin/Committee Homepage

My first step in the process was to evaluate the three different user flows from the perspective of a Requestor, Committee Member, and an Admin with the goal of assessing the current pages and show opportunities for future improvement.

Requestor User Flows

I created 3 sub user flows from the Requestor perspective to show the most common use case scenarios of the site. The yellow sticky notes were important notes, while the pink sticky notes showed UX recommendations/opportunities for improvement.

Admin/Committee User Flows

The Committee members and Admins were internal Jefferson employees and shared the same site to perform their responsibilities. There were also many Admins who were also Committee members; for these reasons, I combined the user flows for these two user types in one comprehensive flow.

While there were certainly lots of improvements I hoped to implement, the two primary areas of focus were as follows:

Updating the branding and styling across all pages. This included the fonts, the colors, the header/footer, the logos, etc.
Including functionality and features to improve the lives of all three user types. What were ways I could make the application process easier for Requestors, make voting more seamless for Committee Members, and make tracking a huge number of applications intuitive for Admins?

Wireframes to Mockups

The development team recommended that in migrating to a more functional platform, it would make more sense to split the current Sponsorship Portal into two respective sites: the external, public-facing Requestor site and the internal, Admin and Committee site for Jefferson employees.

The challenge I faced from ideation to wireframes to mockups was making the user experience for both sites as intuitive as possible, while ensuring that all design elements I included fit within Jefferson brand guidelines.

Overview

The first page of the application for Requestors; I included a Progress Tracker on the top of the page, while also grouping similar form fields together throughout the pages.

Requestor Homepage

I included a table for Requestors to track their current and past applications organized by different columns of information. The statuses included Application Started, Pending Review, Approved, and Denied.

Admin/Committee Homepage

As Admin/Committee members had many more applications to parse through compared to Requestors, I opted to expand the table as their Homepage with Search, Sort, and Filter features to help them locate specific applications.

Committee Application View

When clicking on an application, Committee members would see a high-level summary of a Requestor’s application before scrolling down to the bottom of the page to submit their votes.

Refining the Designs

As this was my first time taking lead on Design within an Agile framework, I learned some valuable lessons when it came to handing off my designs to developers. A major consideration was the notion of edge cases: what were all the possible case scenarios that could arise when a user interacted with each page?

For me, this meant that when making my designs I couldn’t just focus on the best case scenario / ideal user flow; I had to also think ahead to less likely scenarios that needed to be accounted for. One clear example that I started having to include in my handoff processes was regarding error messaging.

How could error messaging diminish user frustration and instead help them to accomplish their task at hand in an efficient and intuitive manner?

A feature that I’m personally really proud of designing from the ground up was the Filter feature. My goal was to improve the workflow of Committee and Admin users by allowing them to search for specific applications that met certain criteria related to the table columns. The challenge was to meticulously think through each step of the process (Finding the Filter button, selecting the column to filter for, selecting the different filtering options, etc). so that ease of functionality was matched with what users expected from a Filter feature.

Example flow of a user filtering to find applications with the “Approved” status

New Stakeholders, New Requests

It was at this point in the process when we found out that our stakeholder would be shifting to the SVP of Jefferson, while also including the newly expanded Enterprise Sponsorship Council comprised of members within the Office of the CEO. The post-pandemic economy had severely impacted the healthcare industry and Jefferson was no exception. To ensure that Jefferson was operating under a conservative budget, the Office of the CEO decided to take over the Sponsorship process with the hope that a more efficient and automated portal (including the two sites) could save them up to $2.5M per fiscal year.

Naturally, with new stakeholders and a changing Sponsorship process, it meant that numerous change requests were brought to our team for both the Requestor and the Admin/Committee site. Below are two representative examples:

501 (c)(3) and 501 (c)(6) Organizations

One of the major changes to the Sponsorship process was that Jefferson would only fund organizations that were either a 501(c)(3) (non-profit organizations) or a 501(c)(6) (other non-profit entities). Previously this question was on this application, but it also made sense to think of a way to notify requestors of this early on in the process.

Admin/Committee Homepage

Therefore, a change we implemented was to prevent users from proceeding with an application if their organization was neither a 501(c)(3) or a 501(c)(6). We decided it was better to notify them earlier on so users would not leave this application process frustrated.

Another major change in the Sponsorship process was that instead of accounting for Event/Programs, the council decided that accounting for Organizations would allow them to more carefully track the amount of funds they were distributing as well as the types of community efforts that Jefferson was supporting.

What used to be the Event/Program Name column became the Organization Name column. This change was also necessary because while before organizations could request funding multiple times in a given fiscal year for numerous events or programs, organizations could only now apply for funding through Jefferson once per fiscal year.
A column was added for Organization Category, which included Community, Economic Development, Health Equity, Education, and Other so the council could track the different types of community impacts they were sponsoring. Having this additional column entailed redesigning the spacing between the columns as well as the overall layout of the table.

QA Testing

Simultaneously while leading the redesign effort, I also took responsibility for the QA Testing processes throughout the Sponsorship Portal Rebuild. The current flow was after a developer would merge requests onto the live sites, the product manager would write out the different user stories / test cases, and I would go and conduct QA on the pages while also tracking necessary changes and edits.

While functionality errors would be tracked on a Monday board dedicated to QA bugs, when it came to specific UI edits it was up to me to articulate these errors to the developers. I opted to create comprehensive documents that clearly laid out the current issues and the proposed solutions.

Reflections

This project is currently ongoing, as we are preparing for the MVP of the two sites to launch in early next year! It’s been a daunting but also fulfilling experience to take the lead on a project of this scale. Some of my opportunities for improvement for the next project include:

Better handoff of my designs to development: As sprints within Agile are made primarily to gauge technical effort, I feel like now I have a better way to adapting my designs to fit this framework, as well as a better understanding of what supplementary information to include with my mockups (edge cases, button states, etc.)
What kinds of people will be using this product? Throughout the process I found myself constantly thinking about how the user categories of Requestor, Committee Members, and Admins would encompass so many different types of people. This motivated me to work hard to create two sites that would appeal to the greatest common denominator of users with its simplicity and intuitive nature.

Other projects

Diversity Dashboard - Infographic

Neuroprotection Labs - Squarespace