Amicus

Turning volunteers into fundraisers and advocates.

For the past 2 years I’ve been working part time at Amicus, a Y-Combinator startup that helps non-profits turn their volunteers into fundraisers and advocates. We do this by building outreach tools that tap into the Facebook graph. Instead of calling strangers, volunteers on our web app will be reaching out to their friends, friends of friends, and neighbors. We’ve worked with organizations such as the HRC, AFL-CIO, DCCC, and Moms Demand Action.

I’d been in touch with Seth, the founder, since before they left for YC, and started working there when they returned to New York. Since then, the app has come such a long way, in visual design as well as usability. This is a short look into my part in making that happen.

Two Years Ago…

When I joined Amicus, while it was still a better experience than most of the competition in the fundraising and outreach space, the app left much to be desired, design-wise. They had only very recently hired their first designer, Adrian Del Balso, who hadn’t had time yet to implement any changes into the app itself, which had not been designed by a designer.

The Call Page

My first project was redesigning the call tool, the app’s main point of interaction. The call page at the time looked like this:

The Amicus call page when I joined
The app’s call page when I joined.

Adrian had been working on new aesthetics for the app. They changed around some of the structure, but the flow remained more or less the same.

Adrian’s call page
Adrian’s call page mockup.

This flow didn’t make much sense to me. Having a list of friends there was forcing users initiate each call individually and drawing their focus away from the most important parts of the page—the person they were calling and the script. User’s, I thought, should be able to click the call button and forget about everything else. I decided to clean the UI and redesign the page’s flow rather than just its aesthetic. Since I was concentrating on the flow and experience, I borrowed Adrian’s aesthetic for my mockup.

My proposal to change the call page.
My new concept for an “express” call page.

When I joined, we were a scrappy startup with 4 people on 2 desks at General Assembly. We would get sidetracked and build features we didn’t need. We’d focus our resources on tangents that ended up not making much sense. In the past two years, Amicus has grown considerably, we’ve moved to our own awesome offices in SoHo, and we’ve been experimenting with work process. First we tried sprints, then a stricter agile methodology. For the past year, things have been moving forward in a quick and directed way, which led to us finally rebuilding the call page.

A new aesthetic.
Our aesthetic had changed dramatically throughout the first year.

Call Page Sprint

And so, it was only a year after initially designing the new flow that we put it into practice. We put together a sprint team to rebuild the flow. I took my initial idea for the “express” flow, altered it slightly, and designed a new version of it in the browser, within the app. I was working remotely at the time, so this way I could push my changes as they happened and we’d all be working with the latest version of the design. I also coded several animations that would provide clarity and context to each part of the screen.

Some of my notes from the sprint:

Call page notes.

Call page notes.

Call page notes.

I would have cards above the current person denoting the current state of the call. The instructions for what to do next would always go there. It was very important to me that each element’s purpose was extremely clear and consistent. Following are screenshots of my styles from the actual app:

Call page cards.

We offer two modes of calling: through your phone and through your computer’s microphone, both served by Twilio. Calling through your computer presented a technical challenge. Browsers ask for permissions to use the microphone and we found that users often got stuck, ignoring the alert and often blocking themselves from getting the alert in the future, essentially breaking the functionality. For Chrome, I developed a dark overlay and an attention grabbing animation, where a tooltip flies across the screen. For other browsers, I developed solutions that would fit each their style of asking for permissions.

Asking for permissions.
Chrome asking for permissions.

After an entire year of stagnation, the new call page was completed in two weeks.

The current call page
The current, live call page, based on my original design.

The Dashboard

Another important page on the app is the dashboard, where users land after registration. We are currently exploring ways to remove the dashboard entirely, but at the time we were just trying to improve user engagement within it.

When I joined, the dashboard was not doing its job very well. There were many stats, organization announcements and a leaderboard. There was no clear action, no obvious area to focus on. Users would get lost.

The old dashboard page
Oct 2011. Seth presents the old dashboard at the New York Tech Meetup.

I decided that the dashboard needed to be cleaner, with fewer stats and a call to action you couldn’t ignore. I moved most game stats (such as calls made and friends matched) to the header, and focused on what the user should be doing next. I hated the aesthetic pretty much the moment I finished designing it, but the structure was solid.

The first draft for a new dashboard page
My first draft for the dashboard. Kind of busy, but there was potential there.

User tests showed that displaying two buttons was confusing to users. While we wanted them to both match friends (tie their Facebook friends with existing voter data) and make calls, we had to decide which was more important. Making calls won out.

Later on, I participated in another dashboard sprint. We decided to move the user’s motivation away from our gamification and towards genuinely wanting to help the organization. We felt this was a more powerful motivator. I changed the goal progress bar to represent the entire initiative’s goal rather than the user’s personal goal.

We did want to leave some remnant of the user’s personal stats on the dashboard, though. I wanted to further differentiate these stats from the initiative’s progress towards its goal. At first, both progress bars looked the same, and were right next to each other. I ended up creating circular progress bar around the user’s profile picture. I used d3.js to code it and changed the other styles to fit. The result is our current dashboard.

The current dashboard.
A screenshot of the current, live dashboard I designed. We are in the midst of getting rid of borders and making it cleaner.

Community

One of the best aspects of a volunteer office is the other volunteers. They’re in it with you, they cheer you on. When you walk in there are often walls of notes, where volunteers have written why they were there. When you hit a goal, someone rings a bell and your motivation skyrockets. We’ve been thinking of ways to replicate this type of community for the past two years.

Energy Room

My first idea was the ENERGY ROOM, a page filled with profile pictures from all actives users on the current campaign. Lights would flash when they were calling, were hung up on, and so forth. I thought that maybe a less distracting version of this could be integrated into the actual call page.

a concept for the energy room

Temporary Teams

Later on, when we were discussing the possibility of a constant feed of user actions, I posited we should focus on smaller, tight-knit teams that would work together to achieve goals. This way we wouldn’t need to have many users on an organization for it to feel welcoming. Furthermore, the team’s size would allow for more personal interactions. I wanted team members to be able to “high five” each other, and that would mean more in a smaller context. The teams would be temporary, in the style of online games. When one team member leaves, someone new takes their place. The system works to find teams for you.

The system would have quick and whimsical canned responses to make the experience fun rather than generic. The ones in this video are just examples, not serious proposals for a final product.

My concept for temporary teams.

Fixed Groups

Fixed groups came slightly later. We ran a community sprint in which we brainstormed possible ideas. The idea we ended up running with was “Why are we here,” where users type in their reasons for being there as motivation for other users. Before that, though, I worked on a concept for fixed groups. The concept was to let users create permanent groups of friends and strive towards goals together.

fixed groups
One of my concept mockup for fixed groups.

Other Projects

Jobs Page

It’s hard to recruit great developers. With many options at hundreds of other startups that offer the same perks, getting top tech talent is a lot of work. About a year in I had an idea for a possible new jobs page, that would set us apart.

The concept was that you could either do good (for instance, by volunteering) or do well (with a high paying job). At Amicus, though, you could do both. We offer both the perks and the satisfaction of working towards social good. This message is great in two ways. First, we got to offer a perk that most other companies could not replicate. Second, developers who could relate to this message would pass part of our criteria off the bat.

My idea was to chart out Do Good and Do Well with two blocks side-by-side. As the visitors scrolls, the blocks become circles and converge and form a venn diagram. They finish converging and the words turn into Do Both. The circle stops at our logo, forming Do Both at Amicus, and then we go into both our perks and the good we do. I sketched it out quickly and built a prototype. My initial sketch is too long to properly display here, so instead I offer a clip of the prototype.

My interactive sketch for the jobs page.

For the content, I illustrated some lego minifigures. I felt they were generic enough to work with Amicus and well-loved by most of our target audience.

lego illustrations
jobs page concept
A rough sketch of how the header might look.

This was one of those projects that fell by the wayside. The lego illustrations couldn’t be rationalized as being a part of Amicus, and we couldn’t find anything more appropriate to replace them with. In the end, the page was not a priority anymore.

Principal Posters

We wanted to have our company principles front and center in our new office. I took the lead on the design.

The principle posters.

Whitelabeling

The Amicus tools are whitelabeled, meaning that end users only ever see the brand of the non-profit they are volunteering for. Most of them have never heard of Amicus. Often, our customers would need mockups of assets in their brands—for instance postcards for our social postcarding tool. When I had downtime from the app I would create these assets to assist the demoing of our application.

The New Museum postcard.

Ro Khanna postcard.

Both The New Museum and Ro Khanna became our customers.

Silly Things

Over the past two years I’ve also worked on many projects that were sillier in nature. Give a designer some downtime and you’re guaranteed to get something ridiculous.

Amicus Diplomas

This wasn’t an Amicus project, per se. I had left Amicus for a semester to focus on school, and at the start of the year I updated my Facebook saying that all of my teachers were certified badasses. Certain people at Amicus threw mock jealous fits, and so I printed and framed new diplomas for everyones’ desk, certifying them as badasses.

Certified Badass
Everyone at Amicus got one of these babies.

Amicus Checks

Around the same time I created the diplomas, Seth asked for some help with a project. He was planning on handing out Amicus-style checks that employees could make out to their favorite non-profit organizations on behalf of the company.

an Amicus check

So That’s That

My two years at Amicus were wonderful. I came in looking to work on a cool product with interesting challenges, but I came out caring about social good and impact design. If that’s not a thing, I’m coining it now. You heard it here first.

A quick recap:

Designated Compliment Box

We all know the uber-talented designer developer ‘unicorns’ don’t exist. Except oh wait, there’s Joel. From wireframing to mockups to prototyping to final execution, Joel adds great value throughout. He’s creative, has a great sense of humor, and has a flair for delighting users. Highly recommend.” —Seth Bannon, CEO at Amicus