Pennsylvania state elections are fast approaching in November 2018. The Pennsylvania Senate Democratic Campaign Committee (PaSDCC) asked Tech for Campaigns, a nonprofit that pairs tech talent with center and progressive political efforts, to assemble a team to revamp its Campaign Finance Search tool. The search tool is used to help state-level Democratic candidates evaluate if an individual is a good prospect for donations. I was asked to be the UX Designer on the team for the month-long revamp effort.
This, and a link to the original search tool, was all the information I had when the project began. Due to scheduling conflicts, our team couldn’t have our kickoff meeting with PaSDCC for a whole week, which our work time to 4 weeks. I had to move fast. Before the kickoff occurred, I dived into heuristic analysis of the current tool, competitive analysis, atomic design of UI components, and question prep for our 30 minute kickoff.
Current State Analysis
My first step was to dive into the current state Campaign Finance Search tool. You can find notes on my first impressions here. Key insights included: PASDCC has a lot of data and searchable parameters, but it’s unclear which of these parameters are most valuable when identifying a lead and/or should be “required”. Also, PASDCC returns comprehensive search results, but it’s unclear which will be most promising unless you click in and view another data-rich page on each. From a usability perspective, it is difficult to filter search results from the search page. This makes it difficult to focus on specific information pertinent to your search.
During that first week, I researched other search tools for looking up donation history and/or helping to evaluate candidates. You can find notes on comparitive products here. Key insights included: Simple search page based upon the most important/useful fields to yield a productive search. Advanced criteria link lets users input a multitude of search parameters if they would like to search by more field matches. Furthermore, some competitors’ designs made active choice around highlighting information that would most help the user accomplish whatever task was behind their search. In addition, “Group by” options enable filtering to help a searcher hone in on the results they want to see.
Based on my competitive research and our PM’s working requirements, I knew that certain UI components had a high likelihood of being part of our final product. To design the foundation of these components, one does not need deep contextual understanding, so I thought that designing at the component level during this first week would help save time in the future. The smallest level components I designed were text input fields, dropdowns, table column headings, and table entries. I then designed what these would look like together in a table (for displaying search results) and in a form (for conducting search). I decided to leverage Material Design throughout this project for consistency with design standards being established throughout software and so that my engineer partners could more easily access code documentation for the components.
We Have Kickoff!
I knew I had to maximize the amount of time I had in the kickoff meeting to understand as much as I could about the context and use case of the Campaign Search Finance Tool. Therefore, I put together a scrappy workflow diagram illustrating what I understood so far and to be a reference point for my questions. My questions for the kickoff centered around verifying this workflow and further understanding its context.
PaSDCC shared that in a state-level political campaign, most donations are still raised via phone calls. In other words, the candidate or a candidate’s volunteer calls prospects and asks for donations. Before making the call, Pennsylvania Democratic candidates reach out to PaSDCC to ask for a search on the prospect. Then, an intern at PaSDCC uses the Campaign Finance Search tool to search through PaSDCC’s records and find donation and demographic information about the prospect. Key information considered includes how often and how recently a prospect has donated to a Democratic candidate in the past and past donation quantities. The intern considers this information in light of the specific candidate for whom she is searching and recommends whether it’s a good investment of time to call that prospect for a donation or not. We were also told that there were no pre-existing style guides that we needed to follow – all visual design was 100% up to me.
As I began wireframing the improved Campaign Finance Search tool, I took inspiration from what good enterprise software aims to be. Since interns would probably be juggling other assignments and have to look up lots of prospects, I wanted to keep the interface simple, clean, and easy to use. I did not want the tool to be too “designer-y” because I didn’t want the interface to be distracting or to get in the way of information.
My first iteration of wireframes presented exactly what our requirements stated: a login screen authenticated by Google, a search screen as a form, and a search results screen with a table. It became clear that we would also need a designs for loading time and for when no search results appeared.
After creating the initial wireframes, it became clear that the search form was too complex. In my next iteration, I took cues from my competitive analysis and simplified the search page to a single text field that encourages users to input a prospect’s name and occupation. To input more information, a user can click on a link for an Advanced Search form.
Dancing Around the Donor View
I thought that the first iteration of the search results screen posed challenges for users. If an intern’s goal is to analyze a specific prospect’s history, our design should make it as easy as possible for that intern to get to a view in which they can clearly see information about one person.
Our backend engineer shared that this design would pose technical challenges. The data from PASDCC was not clean enough to render just a few prospects based on a search query. Instead, a more realistic number would be around ten. In my next iteration, I addressed this by selecting a UI pattern that could be flexible enough to accommodate multiple prospect matches: a dropdown filter for just the “donor” field.
Below are some wireframes of experimentations on how a user could quickly focus on a specific donor while searching.
It became increasingly clear to me that while the dropdown pattern solves our problem for now, ideally, our search tool should have more advanced filtering capabilities in the future. This is because (a) comparable search tools offer filtering and (b) as an intern evaluates prospects, perhaps they want to quickly identify which prospects donated to a particular candidate, in which donation cycles, within what timeframe, etc. Adding real filtering will help users get to clean data that they can evaluate faster. However, adding filtering functionality is out-of-scope for our team’s 5-week timeline. Therefore, as I discuss later in this writeup, I wireframed a concept for how filtering can fit into the tool our team is building now so that future teams can pick up on our work and make progress in the future.
03. Visual Design
I did not want to start from scratch and wanted this tool to fit into the Democratic Party’s image at large even if the PASDCC itself did not have brand guidelines. I conducted visual design competitive analysis and drew inspiration from the Democratic Party and Hillary Clinton’s official websites. The styling that I used for this tool can be leveraged for any SDCC regardless of state.
04. IxD and Motion
GIFS coming soon!
05. User Research
Articulated proposal coming soon!
06. Future Concepts
This is a mock-up of what the donor profile page could look like. It is designed to make the following as easy as possible: 1) identifying if a prospect is promising and 2) contacting that prospect.
You can find a the donor profile page, its future-concept preceding search results list, and a style guide that other SDCCs can use to build out similar tools here.