As a fund-raiser I would like to have a way to scan a list of potential donors and quickly identify the most likely to donate to my campaign.
In this story, I redesigned the interface for a political fundraising software called RevUp, utilizing Google Material as the foundation. The intention of the software was to show the affinity between the candidate and prospective donors, and the data collected was deep and powerful, but an unclear and confusing interface was muting the power of their data. A new, user-experience driven interface was needed.
I began by talking to the most important people - our clients. I met with fund-raisers and campaign finance directors. I listened deeply. Our clients work in a fast-paced world and while they respect lots of information, what they value most is getting relevant information quickly.
I took what I heard back to our Product Manager and, together, we focused their feedback into a direction we called "Three Tier Discovery." This model would go on to become the foundation of all Revup products.
Tier 1 - list showing only the necessary information the fund-raiser needs to decide if they want to see more.
Tier 2 - Revealing more donation information.
My role: Product Design Lead
Brainstorming to wire-framing to user testing to final design and iconography.
Tier 3 - Revealing all donation information.
This became the foundation of all the Revup products. With this direction I was able to draft a user journey and preliminary architecture. With wire frames in hand the next step was to work out the flow based upon the original user journey with the PM. We made a few modifications to the user flow and at the same time made a preliminary list of future features. Several different visual designs were generated and subsequently user tested, the outcome was clear, and it was a solid design that enabled the user to have an intuitive experience. There are quite a few features contained in the web app shown, not explained in this case study, links to these are below. Oh and I also redesigned the company logo.
Ranking Screen - Displaying the first two tiers of discovery.
For the final design I used a combination of color and basic visual design, dominate and subordinate objects for orientation and to help guide the eye to the important information. All of the iconography was custom made in Illustrator and then converted to an icon font via the on line tool at fontastic.me.