designer + developer
april 2016 – present

The Groundwork

responsive web app + marketing site

The Groundwork is a technology platform built to help nonprofits collect supporter data, raise funds, host events, measure progress, and more. Besides being a powerful API, The Groundwork is also a suite of tools that make interacting with the API as seamless as possible. One such tool was Admin, a frontend application users could log into to visualize and manage their data.

Admin is where I put most of my time while working on The Groundwork, creating report dashboards, onboarding views, and more. In addition to Admin, I also got to design and build the primary marketing site for The Groundwork and the corresponding signup flow.

gathering thoughts for
My "sketching" usually starts with just gathering thoughts. Here, I was thinking about the goals of the marketing site, what the story should be, what The Groundwork is, why it's appealing to potential customers, etc.
sketches for
Next I switched to brainstorming imagery. Coming up with imagery to advertise software is definitely a challenge, so I just threw a bunch of ideas (good and bad) on paper.
pricing section on
I got a really good response from the team on this quick illustration, a simple respresentation of our payment model.
interactive imagery on
Static images alone weren't enough to do The Groundwork justice, so I decided to bring some interactivity into the mix. I solicited the help of another JS developer on the team, and together we created some fun, simple, interactive illustrations. homepage
Though I was the primary designer and developer for this project, it was still a hugely collaborative effort—the marketing team that wrote the majority of the final content, my fellow designers that provided priceless feedback, and my fellow developers who set up the build and deploy process and lended a hand with the JS. Yay team!
mobile screenshot on a mobile device
tablet screenshot on a tablet device
One of my team members suggested the screenshots on the page be responsive, corresponding to the device the site was being viewed on. I loved the idea and implemented it!
the start of the sign up flow
I started the signup flow with an email input instead of just a "sign up" button because it made our sign up process seem super short. Can I really get started for free with just an email?!? That, and if the user dropped off anytime during the signup flow, at least an email would be captured so that we could reach out to them in the future.
create an account
A little more info was needed to create the new user's account. But since we already collected their email, this form became 3 fields instead of 4—shorter and more approachable.
create an organization
In addition to a user account, a user also needs to create an organization (which they can invite other users to later). I broke organization creation out into its own step, again, to avoid having one long, overwhelming sign up form. At this point, the user's account has already been created and they can focus on creating their organization.
admin welcome screen
Once the user has created their account and organization, they are welcomed to The Groundwork. I used this opportunity to explain the live and test modes in Admin, ensuring the user that they could explore safely in test mode.
admin onboarding advice
Originally, I explored the idea of having numbered setup steps to introduce a user to Admin. However, myself and some other folks on the team shared a common distaste for step-by-step onboarding. We prefer to explore a product on our own and tend to rush through (or skip entirely) onboarding steps. That being said, Admin is full of features that could be hard for a new user to grasp. I came up with these onboarding advice modules, and placed them at the top of Admin screens that needed explaining. Users were free to explore the tool on their own, but we offered them tips along the way.
all-time zero states
To make the onboarding process even better, I added these helpful all-time zero states. If a user has not collected any supporters or raised any money yet, for example, we suggest actions they can take to get their organization going.
api key modal
To make those zero states even more helpful, I surfaced the organization's API key when necessary. For example, to set up the Supporter Block a user will need an API key. Here you go!
report overview
Other than signup and onboarding, I also put a lot of time into report dashboards in Admin. I worked closely with a product manager and another JS developer to bring these dashboards to life. I loved collaborating with these guys. The PM started the process by creating wireframes which I then translated into static designs. The PM, the JS developer, and myself would then go over designs together to make sure we were providing the most informative data, that everything was buildable, etc. Then I would start building. I'd create new React components, write markup, style the Victory charts, etc. The other JS developer would then come in and wire everything up to real data. Finally, the three of us would test, find problems, fix bugs, and finally, ship! In the end, we were able to produce three informative and beautiful report dashboards.
mobile report overview
tablet report overview
Did I mention that all the report dashboards are totally responsive? Because they are :)
supporters report
supporters report with sources revealed
This report view shows supporters collected broken up by initiatives. Furthermore, you can expand an initiative to see a finer breakdown by sourcce. Initiatives and sources both feature sparklines, so users can get a sense of when initaitives and sources were most active compared to one another.
payments report
The payments report page is my favorite report dashbaord we built. The line chart and pie chart compare one-time donations and subscriptions, and the pie chart even shows you a comparison to last period. There's also a payment size histogram, showing the frequency of various payment sizes.